今天抽空把我在学习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