html标签（学习笔记）

排版标签

• 标题标签<h1></h1>-<h6></h6>
• 段落标签 <p></p>
• 换行标签<br>
• 水平标签<hr>

文本格式化标签

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

媒体标签

• 图片标签
  <img src="图片路径" alt="替换文本(图片不显示时所显示的文本)" title="图片标题" width="" height="">
• 音频标签（支持MP3、Wav、Ogg）
  <audio src="音频路径" autoplay(自动播放) loop(循环播放) controls(显示控件)></audio>
• 视频标签（支持MP4 、WebM 、Ogg）
  <video src="视频路径" controls autoplay(谷歌浏览器中可以配合muted属性实现自动静音播放) loop></video>

链接标签

target=“_self"链接在原网页打开,target=”_blank"链接在新的网页打开

<a href="链接路径" target=""></a>

空链接，点击之后回到网页顶部, 开发中不确定该链接最终跳转位置，用空链接占个位置

<a href="#"></a>

列表标签

• 无序列表

 <ul>
	 <li>香蕉</li>
	 <li>苹果</li>
</ul>

• 有序列表

<ol>
	<li>香蕉</li>
 	<li>苹果</li>
</ol>

• 自定义

<dl>
     <dt>水果
          <dd>苹果</dd>
          <dd>香蕉</dd>
     </dt>
</dl>

表格标签

<table border(边框宽度)="1" width="" height="">
                    <caption>表格标题</caption>
                    <tr>(行)
                        <th>年级</th>(表头单元格)
                        <th>班级</th>
                        <th>学号</th>
                        <th>姓名</th>
                        
                    </tr>
                    <tr>
                        <td>高三</td>(表格单元格)
                        <td>1班</td>
                        <td>190234</td>
                        <td>李斯</td>
                    </tr>
                    <tr>
                        <td>高三</td>
                        <td>1班</td>
                        <td>190283</td>
                        <td>琉璃</td>
                    </tr>
                 </table>

合并单元格(rowspan垂直合并,colspan水平合并)，如下合并高三

<table border="1">
                        <caption>学生信息</caption>
                        <tr>
                            <th>年级</th>
                            <th>班级</th>
                            <th>学号</th>
                            <th>姓名</th>
                            
                        </tr>
                        <tr>
                            <td rowspan="2">高三</td>
                            <td>1班</td>
                            <td>190234</td>
                            <td>李斯</td>
                        </tr>
                        <tr>
                            <td>1班</td>
                            <td>190283</td>
                            <td>琉璃</td>
                        </tr>   
                    </table>

表单标签

表单整体用<form></form>包裹

value属性和name属性作用介绍
value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值

• input系列标签

标签名	属性值	说明
input	text	文本框
input	password	密码框
input	radio	单选框
input	checkbox	多选框
input	file	文件选择
input	submit	提交按钮
input	reset	重置按钮
input	button	普通按钮

<form>
账号：<input type="text" placeholder(占位符，提示用户输入内容的文本)="请输入账号" value="" name="" ><br>
密码：<input type="password" placeholder="请输入密码"><br>
性别：男<input type="radio" name(name相同为一组)="sex" checked(默认选中)> 女：<input type="radio" name="sex"><br>
爱好：熬夜<input type="checkbox" checked(默认选中)> 敲代码<input type="checkbox"> 掉头发<input type="checkbox"><br>
文件选择：<input type="file" multiple(多文件选择)> <br>
<input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="普通按钮">
</form> 

• button按钮标签

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

• selsect下拉菜单标签

            所在城市：
                <select>
                    <option >上海</option>
                    <option >北京</option>
                    <option selected(默认选中)>贵州</option>
                 </select>

• textarea文本域标签

<textarea cols(可见宽度)="50" rows(可见行数)="10"></textarea>

• label标签
  说明：label将包裹的内容与表单标签绑定在一起
  方法一：1. 使用label标签把内容（如：文本）包裹起来 2. 在表单标签上添加id属性 3. 在label标签的for属性中设置对应的id属性值

            性别：<input type="radio" name="sex" checked id="man">
                <label for="man">男</label>
                <input type="radio" name="sex" id="woman">
                <label for="woman">女</label> 

方法二：1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2. 需要把label标签的for属性删除即可

                <label>
                    <input type="checkbox">熬夜
                </label>
                <label>
                    <input type="checkbox">敲代码
                </label>  

• 语义化标签
  无语义标签
  div标签：一行只显示一个（独占一行）
  span标签：一行可以显示多个

<div>这是div</div><div>这是div</div><div>这是div</div>
<span>这是span</span><span>这是span</span><span>这是span</span>

有语义标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文
常见字符实体

注意：代码中的（）为注释，运行时应删掉