HTML 标签元素

1、标题标签 Heading

h1~h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

同时选中下一个相同字符：command + D
特点：
独占一行
文字加粗
文字变大，h1->h6 文字逐渐变小

2、段落标签 Paragraph

<p>内容</p>

特点：

段落之间存在间隙
独占一行

3、排版标签

（1）换行符 Line Break

第一行文本<br />第二行文本

特点：
单标签
让文字强制换行

（2）水平分割线 Horizontal Rule

<hr />

4、文本格式化标签

推荐使用后者

• b/strong 加粗
• u/ins 下划线
• i/em 倾斜
• s/del 删除线

<b>加粗</b>
<strong>加粗</strong>

<u>下划线</u>
<ins>下划线</ins>

<i>倾斜</i>
<em>倾斜</em>

<s>删除线</s>
<del>删除线</del>

5、媒体标签

（1）图片标签 Image

<img
  src="图片地址"
  alt="替换文本"
  title="提示文本"
  width="宽度"
  height="高度"
/>

6、资源路径

（1）当前路径

<img src="image.png" />

<!-- 推荐使用./ -->
<img src="./image.png" />

（2）下级路径

<img src="./img/image.png" />

（3）上级路径

<img src="../image.png" />

7、音频标签

<audio
  src="音频地址"
  controls 显示播放控件
  autoplay 自动播放（部分浏览器不支持）
  loop 循环播放
</audio>

音频标签目前支持的格式 mp3 wav

8、视频标签

<video src="视频地址"
  controls 显示播放控件
  autoplay 自动播放（谷歌浏览器需要配合muted静音播放）
  muted 静音播放
  loop 循环播放
</video>

google浏览器的音频不能自动播放，视频可以通过配合muted静音播放
视频标签目前支持的格式 mp4

9、链接标签 Anchor

<a href="目标地址">文字内容</a>

<!-- eg: -->
<a href="https://www.baidu.com/">百度</a>

当开发网站初期不知道跳转到哪里时，href的值写#（空链接）

属性：
target: _self 当前窗口打开（默认） _blank 新窗口打开

 <a href="https://www.baidu.com" target="_blank">跳转到百度</a>

网站的默认首页 index.html

10、列表

• 无序列表
• 有序列表
• 自定义列表

（1）无序列表

<ul>
        <li>榴莲</li>
        <li>香蕉</li>
    </ul>

（2）有序列表

<ol>
        <li>小姐姐：100</li>
        <li>小哥哥：90</li>
    </ol>

（3）自定义列表

<dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>

11、表格

（1）基本元素

标签含义：

• tr Table Row
• th Table Header
• td Table Data

table属性：

• border 边框宽度（用来给表格添加边框）
• width 表格宽度
• height 表格高度

<table border="1">
    <caption>
        表格大标题
    </caption>
    
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>24</td>
    </tr>
</table>

实际开发中表格样式在css中设计

（2）表格结构

• thead 表格头部
• tbody 表格主体
• tfoot 表格底部

<table border="1">
    <caption>
        表格大标题
    </caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tom</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>24</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <td>求和</td>
            <td>57</td>
        </tr>
    </tfoot>
</table>

(3)合并单元格
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

<td rowspan="2">23</td>

12、表单

（1）输入框 input

在网页中显示收集用户信息的表单效果，如：登录页、注册页

input标签可以通过type属性值的不同，展示不同效果

① text 文本框
placeholder 占位符

<input type="text" placeholder="请输入文本">

② password 密码框

③ radio 单选框
name 属性分组，一个分组只能有一个值被选中
checked 默认选中

<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女

④ checkbox 多选框

<input type="checkbox" name="city" >北京
<input type="checkbox" name="city"> 上海

⑤ file 文件选择
multiple 属性可以多选(按住 ctrl 多选)

 <input type="file" multiple>

⑥ 按钮

• submit 提交按钮
• reset 重置按钮
• button 普通按钮
  需要配合 form 表单域使用，属性 value 修改按钮显示的值

<form action="">
       <input type="text" placeholder="请输入文本">
       <br>
       <input type="password" placeholder="请输入密码">
       <br>
       <input type="reset" >
       <input type="button" value="普通按钮">
   </form>

（2）button 按钮标签

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button>普通按钮</button>

（3）select 下拉菜单标签

<select >
        <option >北京</option>
        <option >上海</option>
        <option selected >深圳</option>
    </select>

option 选项
默认选中第一项，可以指定默认选中 selected

（4）textarea 多行文本域

属性

• cols 宽度 列数
• rows 高度 行数

<textarea></textarea>

（5）label 标签

点击文字也可选中选项
两种使用方式等效

<!-- 第一种 -->
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label> 
 <!-- 第二种 -->
    <label ><input type="radio" name="sex">女</label>

13、语义化标签

无语义标签

• div 块级标签，独占一行
• span 行内标签

语义化标签

手机端常用

• header 网页头部
• nav 网页导航
• footer 网页底部
• aside 网页侧边栏
• section 网页区块
• article 网页文章
  以上标签和 div 等效，多了语义化

14、字符实体

在网页中显示特殊字符
空格  
网页不认识多个空格，多少都算一个

版权符 ©

san    xsj
    ©

15、综合案例–学生信息表

 <table border="1">
        <caption>
            <strong>优秀学生信息表格</strong>
        </caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>迪丽热巴</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            
            <td>古力娜扎</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>             
        </tr>
    </table>

16、综合案例–表单

<h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称:<input type="text" placeholder="请输入昵称">
        <br>
        <br>
        性别:<input type="radio" name="sex" id="nan" checked><label for="nan" >男</label> 
        <input type="radio" name="sex" id="nv"><label for="nv">女</label>
        <br>
        <br>
    
        所在城市:<select >
            <option >北京</option>
            <option  selected>上海</option>
            <option  >广州</option>
        </select>
        
        <br>
        <br>
    
        喜欢的类型:<input type="checkbox" id="ke" checked><label for="ke">可爱</label> 
        <input type="checkbox" id="xing" checked><label for="xing">性感</label>
        <input type="checkbox" id="yu"><label for="yu">御姐</label>
        <br>
        <br>
        个人介绍:<br>
        <textarea ></textarea>
        <br>
    
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>年满18岁、单身</li>
            <li>年满18岁、单身</li>
        </ul>
        
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
    </form>