HTML标签学习

今天抽空把我在学习HTML过程中会遇到的知识点总结了一下：

b（加粗） strong(加粗)突出重要性的强调语境

u（下划线） ins（下划线）

i（倾斜线） em（倾斜）

s（删除线） del（删除线）

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

图片标签

<img src="图片路径" alt="替换文本，当图片加载失败时显示" title="这是title文字，鼠标悬停是现实的文字" width="宽度大小，没写高度时，高度等比例变化">

音频标签

<audio src="音频路径" controls="显示播放的控件" autoplay(自动播放，部分浏览器不支持) loop(循环播放)></audio>

视频标签

<video src="文件路径" controls(显示播放控件) autoplay loop></video>

链接标签

<a href="目标网页，在未知网页地址时用#代替，代表空链接" target="_self(默认的表示在当前页面打开 _blank:表示在新页面打开)">超链接</a>

列表标签

无序列表

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//ul只允许包含li标签， li标签可以包含任意标签

有序列表

<ol>
<li></li>
<li></li>
<li></li>
</ol>
//ol标签只允许包含li标签，li标签可以包含任意标签

自定义列表

dl:表示自定义列表整体
dt:表示自定义列表的标题
dd:表示自定义列表的针对主题的每一项内容

表格标签

table:表格整体
tr:表格每行
td:表格每列
border:边框宽度
width:表格宽度
height：表格高度
<table border="1">
<tr>
<td>  </td>
</tr>
</table>

//要注意的是：Caption标签写在table标签内部
//th标签卸载tr标签内部（用于替换td标签）
thead：表格头部
tbody:表格主体
tfoot:表格底部
合并单元格；rowspan(跨行合并，只保留最左的)、colspan(跨列合并，只保留最上的)

 表单标签

input系列标签：
input是单标签，可以通过Type属性不同，展示不同效果
placeholder:占位符提示用户输入的信息
<input type="text" placeholder="请输入用户名，提示信息">
<input type="password" placeholder="请输入密码">
性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked(默认被选中)>女
<input type="file" multiple(可以上传多个文件)>
<form action="">
<input type="submit" value="免费注册（默认为提交）">
</form>


button按钮标签：
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="button">普通按钮（可以配合js使用）</button>


select下拉菜单标签：
select:代表下拉菜单的整体
option：下拉菜单的每一项
<select>
<option>北京</option>
<option selected（默认选中，否则第一个默认选中）>上海</option>
<option>广州</option>
<option>深圳</option>
</select>



textarea文本域标签：
在网页中输入多行文本的表单控件
cols:规定文本域内可见的宽度
rows:规定了文本域内的可见行数
<textarea cols="60" rows="30"></textarea>


label标签:
性别：
<input type="radio" name="sex" id="nan"><label for="nan">男 </label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
1.使用label标签把文本包裹起来
2.在表单中添加id属性
3.在label标签的for属性中设置对应的id属性
或者：
<label><input type="radio" name="sex">男</label>

 语义化标签

div标签：一行只显示一个
<div><普通文字div标签</div>
span标签：一行可显示多个

有语义的标签（手机端常用）：
header
nav
footer
aside
section
article