认识 HTML 文档结构及元素

初识 HTML 文件结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 主体内容 -->
</body>
</html>
复制代码

一、元素框

1.元素框的查看

  1. 页面中看到的都是元素，它们以“框”的形式存在
  2. 使用CSS检查器查看 *{outline:1px solid red}

2.类型

  1. 块级框——块级元素——垂直排列
  2. 行内框——行内元素——水平排列
  3. 行内块级框——行内块元素——行间垂直，行内水平

3.描述

1. 标签

  • 双标签：可替换元素，内容写到两个标签之间
  • 单标签：不可替换元素，内容由标签属性指定

2. 属性

2.1. 通用属性

<!-- 1.id -->
<div id="root">内容</div>
<!-- 2.class -->
<div class="container">内容</div>
<!-- 3.style -->
<div style="width: 10px">内容</div>

2.2 预定义属性

<!-- 1.src -->
<img src="" alt="">
<!-- 2.href -->
<a href="www.php.cn">php中文网</a>
<!-- 3.type -->
<input type="email" name="" id="">

2.3 自定义属性

<!-- 例如：index,key -->
<li index="3" key="3">内容</li>

2.4 事件属性

<!-- onclick 点击事件-->
<p onclick="get()"></p>
<!-- onblur -->
<input type="text" name="name" onblur="check()">
<!-- onchange -->
<select name="level" onchange="get()"></select>

二、布局元素

image.png
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局元素</title>
  </head>
  <body>
    <!-- html4 -->
    <div class="header">页眉</div>
    <div class="main">主体</div>
    <div class="footer">页脚</div>

    <!-- html5 -->
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
  </body>
</html>

应用网页: https://www.apple.com.cn

三.文本元素

image.png

四、链接元素

32ccc0c3af064e7e85b1ecd68fdd4f6c_tplv-k3u1fbpfcp-watermark.jpg
<body style="display: grid;">
    <a href="https://php.cn" target="_self">当前窗口打开</a>
    <a href="https://php.cn" target="_blank">新窗口打开</a>

    <a href="https://qq.com" target="content">打开QQ新闻</a>
    <!-- 内联框架标签: 画中画,在一个页面嵌入另一个页面 -->
    <iframe src="" frameborder="1" name="content"></iframe>

    <a href="mailto:498668472@qq.com">发邮件</a>
    <a href="tel:1570551&&&&">1570551&&&&</a>
</body>

五、列表元素

image.png
<!-- 无序列表 -->
<ul type="circle">
  <li><a href="">首页</a></li>
  <li><a href="">教学视频</a></li>
  <li><a href="">社区问答</a></li>
</ul>
    
<!--nav 导航布局 -->
<!-- <nav>
    <a href="">首页</a>
    <a href="">教学视频</a>
    <a href="">社区问答</a>
</nav> -->

<!-- 有序列表 -->
<ol start="10">
  <li><input type="checkbox" name="" id="" />开晨会</li>
  <li><input type="checkbox" name="" id="" />吃午饭</li>
  <li><input type="checkbox" name="" id="" />准备晚上的吃什么</li>
</ol>

<!-- 自定义列表 -->
<dl>
  <dt>联系方式</dt>
  <dd><a href="mailto:4986XXXX@qq.com">发邮件</a></dd>
  <dd><a href="tel:1570551&&&&">1570551&&&&</a></dd>

  <dt>备案号:</dt>
  <dd>皖ICP-2222222222</dd>
</dl>

六、图像元素

image.png
<figure style="border: 1px solid">
  <a href=""><img src="图片地址.jpg" alt="认识HTML元素" width="100" /></a>
  <figcaption>
    <p><a href="">认识HTML元素</a></p>
  </figcaption>
</figure>

七、表格元素

[图片上传失败...(image-f312f6-1617938458125)]

小练习：制作课程表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生课程表</title>
  </head>
  <body>
    <table border="1" width="80%" cellspacing="0" cellpadding="5" align="center">
      <!-- 表头 -->
      <caption>
        <h3>学生课程表</h3>
      </caption>
      <thead>
        <tr bgcolor="lightskyblue">
          <!-- th:是添加了加粗和居中样式的的td,是td的plus加强版,适合做表头标题  -->
          <th>时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <!-- 上午的课程 -->
      <tbody align="center">
        <tr>
          <td rowspan="4" bgcolor="lightblue">上午</td>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
      </tbody>
      
      <!-- 中间休息,整行所有单元格合并 -->
      <tbody>
        <tr bgcolor="lightgreen" align="center">
          <td colspan="6">中午休息</td>
        </tr>
      </tbody>
      
      <tbody>
        <tr>
          <td rowspan="2" bgcolor="lightblue">下午</td>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
        <tr>
          <td>英语</td>
          <td>语文</td>
          <td>数学</td>
          <td>历史</td>
          <td>地理</td>
        </tr>
      </tbody>
      <tfoot>
        <tr bgcolor="#ccc">
          <td>备注：</td>
           <!-- 从第2列开始水平合并5列 -->
          <td colspan="5">在15:00-16:00自习写作业，写完作业在回家</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

效果图：


image.png

八、表单元素

1.表单元素

image.png

2.label 控件标签

[图片上传失败...(image-4b2ab4-1617938458125)]

3.input 输入框

3.1 type 类型

image.png

3.2 其它属性值

image.png

4. select 下拉列表

image.png

5.textarea 多行文本域

[图片上传失败...(image-2ca049-1617938458125)]

6.datalist 控件可选值列表

image.png

7.button 按钮

image.png

8. fieldset 表单域分组

[图片上传失败...(image-885a0d-1617938458125)]

9.时间属性

[图片上传失败...(image-bb5f63-1617938458125)]

小练习：制作一个简单的表单

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="width: 500px;">
      <!-- get： 数据在url地址中
      post: 数据在请求体中 -->
    <form action="" style="display: grid; gap: 0.5em" method="POST"  >
    <fieldset>
      <legend>必填项</legend></legend>
      <!-- 文本输入框 -->
      <div>
        <label for="username">帐号: </label>
        <input type="text" id="username" autofocus required placeholder="必须是6-8位" />
      </div>
      <div>
        <label for="password">密码: </label>
        <input type="password" id="password" required placeholder="必须是字母+数字" />
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" placeholder="demo@mail.com" />
      </div>
     </fieldset>

      <div>
        <!-- 单选按钮:多选一 -->
        <label for="secret">性别:</label>
        <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
        <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
      </div>

      <div>
        <!-- 复选框 -->
        <label>爱好:</label>
        <!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->
        <input type="checkbox" name="hobby[]" id="programmer" checked /><label for="programmer">编程</label>
        <input type="checkbox" name="hobby[]" id="game" /><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="trave" checked /><label for="trave">旅游</label>
        <input type="checkbox" name="hobby[]" id="shot" /><label for="shot">摄影</label>
      </div>

      <!-- 下拉列表  -->
      <select name="level" id="">
        <option value="1">铜牌会员</option>
        <option value="2">银牌会员</option>
        <option value="3" selected>金牌会员</option>
        <option value="4">钻石会员</option>
      </select>
    
      <!-- datalist -->
      <!-- 相当于输入框+下拉列表 -->
      <!-- input + select  -->
      <div>
        <label for="">关键字:</label>
        <input type="search" name="search" id="" list="my-key" />
        <datalist id="my-key">
          <option value="html"></option>
          <option value="css"></option>
          <option value="javacript"></option>
        </datalist>
      </div>
      <div>
          <button type="submit">提交</button>
      </div>
    
    </form>
  </body>
</html>

效果图：


image.png

九、元素框架

1.基本属性

image.png

2.了解 sandbox

[图片上传失败...(image-e7e458-1617938458125)]

iframe 标签的使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://j.map.baidu.com/61/g" target="map">北京</a>
    <a href="https://j.map.baidu.com/5f/7" target="map">合肥</a>
    <a href="https://j.map.baidu.com/45/g" target="map">上海</a>
    <hr />
    <iframe src="https://j.map.baidu.com/5f/7" frameborder="1" width="500" height="500" name="map"></iframe>
  </body>
</html>

效果图：


image.png

十、视频/音频

image.png

十一、图片适配元素

[图片上传失败...(image-2cfd52-1617938458125)]

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容