结构标签
首先打出 "!" 然后按"tab"生成html框架
<!DOCTYPE html> (不是html标签,对大小写不敏感,且必须位于html文档首行,DOCTYPE是文档类型(document type),用于声明文档类型,告知浏览器使用哪种html版本<!DOCTYPE html>表示使用html5来渲染页面)
<html></html> (为文档的根元素,其中的所有元素都是html
元素的后代)
<head></head> (页面的头部信息)
head 元素规定了文档的配置信息(元数据元素),包括文档标题、引用的样式和脚本等,head元素里面可以包裹<title>、<base>、<link>、<meta>、<script>、<noscript>
<body></body (页面主体信息)
文档的所有内容都在 body 元素中
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
基本标签
<p> (段落标签)
<br> (换行,行内单标签元素)
<hr> (水平线,块级单标签元素)
<div></div> (用于结构上划分内容,没有具体语义,块级双标签元素)
<span></span> (行内块标签)
<header></header> (定义页面的头部或者页面中其它区块的头部,块级双标签元素)
<nav></nav> (网页导航栏)
<aside></aside> (网页侧边区域,块级语义化标签,通常作为页面的侧边栏)
<section></section> (网页区块)
<article></article> (文章区域,块级语义化标签,内部可包含 header
、footer
结构化标 签,也可包含 h1-h6
、p
等签)
<footer></footer> (网页底部,块级双标签元素)
<address></address> (块级的行内语义化标签,位于<article>标签内,其内部的文本通常呈现斜体)
(空格)
<img src="图片路径/图片链接" alt="图片文本名字">
<h1></h1>到<h6></h6> ( 块级双标签用于呈现六个不同级别的标题,h1到h6依次递减)
<address></address> (定义 html 文档或文章的联系信息,块级的行内语义化标签)
列表标签
无序列表 (ul标签只能包含li标签,但是li标签可以包含任何内容)
<ul>
<li>
</ul>
有序列表
<ol>
<li></li>
</ol>
自定义列表
<dl></dl>(整体包裹,与下面的距离空一行,块级双标签)
<dt></dt>(内容标签首行不空格)
<dd></dd>(内容标签首行空两格)
<dl>
<dt>奥特曼</dt>
<dd>
<a href="">迪迦</a>
<a href="">赛文</a>
...
</dd>
</dl>
<dl>
<dt>怪兽</dt>
<dd>
<a href="">哥斯拉</a>
...
</dd>
</dl>
表格
<table></table> (表格整体)
<tr></tr> (表格行)
<td></td> (表格单元格)
<caption></caption> (整个表格的大标题,放在<table>下面,块级双标签,可位于table内任意位置,始终显示在tabl上方且水平居中)
<th></th> (表头单元格用于表格中的小标题,默认加粗居中)
<thead></thead> (表格头部)
<tbody></tbody> (表格主体)
<tfoot></tfoot> (表格底部)
合并单元格
rowspan="要合并的数量" (竖着合并,从上往下,这个属性加到<td>里面)
colspan="要合并的数量"(横着合并,从左往右,这个属性加到<td>里面)
(两者都不能跨越表格结构合并)
文件格式化标签
<b></b>(加粗) <u></u>(下划线) <i></i>(倾斜) <s></s>(删除线)
<strong></strong>(加粗) <ins></ins>(下划线) <em></em>(倾斜) <del></del>删除线
多媒体标签
<audio src=""></audio>音频标签 (里面加controls才能显示播放按钮)
音频标签目前支持三种格式: MP3 Wav Ogg
<video src=""></video>视频标签
表单
登录、注册、搜索功能(收集用户信息)用表单
<form></form> (表单域,块级双标签有form才可以实现按钮功能,并向服务器提交信息)
<input type="属性值">(表单标签)
text (文本框) placeholder="自定义内容"(表单占位符)
password (密码框)
radio (单选框) name="自定义内容" name相同的为一组,checked为本组默认选中的
checkbox (复选框)
file (文件选择,文件上传)
表单按钮
submit (提交按钮),value="自定义名字"
reset (重置按钮)
<button></button> (普通按钮,没有功能,配合js使用)<button type="自定义功能"></button
下拉菜单
<select></select> (下拉菜单的整体)
<option></option> (下拉菜单的每一项,是块级双标签) selected(下拉菜单默认选中项)
<textarea cols="30" rows="10"></textarea> (文本域标签,cols文本域宽,rows文本域高)
<lable></lable> (直接使用lable标签把内容包裹起来,然后把for属性删除)