HTML5常用标签

1、注释

<!--  这里是被注释掉的内容 -->

• 注释内部不能嵌套注释
• 在<>内部不能有注释

2、文本标签

b 加粗
i 斜体
s 删除线
u 下划线
X<sup>2</sup> 上标字
Z<sub>1</sub> 下标字
h5提供了一些带语义的标签strong加粗 em斜体 del删除线

3、转义符

圈C 版权声明 ©
圈R 注册商标 ®
TM商标符号 ™
关闭符号 X x ×
带圈的关闭符号 ⊗
小于号 <
大于号 >
空格    存在空格折叠的现象，所以多个空格要使用转义符号

4、换行符

<br> 或者 <br/> 单标记标签

5、预格式化标签

pre 
把文本在代码中的格式进行保留，直接显示在页面上

6、标题标签

h1 ~ h6
单独一行, h1最大 h6最小,加粗 上下有垂直的行间距

7、段落标签

p
单独一行，上下有垂直的行间距

8、水平分割线标签

<hr> 或者 <hr/> 单标记标签
在页面上添加一条独占一行的分割线
属性：
align=" " 水平对齐的方式
color=" " 颜色
size="50px" 分割线的粗细
width="100px" 分割线的宽度

9、分区

块分区
div 
专门用于页面布局，独占一行，是最简单的块级元素

行分区
span
处理同一行文本中有不同样式的时候，不换行，是最简单的行内元素

10、图片

<img> 单标记标签
属性：
src="图片资源的路径/url"
alt=“资源加载失败时显示的替换文字”
width="图片的宽度 单位(% 或 px)"
height="图片的高度 单位(% 或 px)"
使用图片的时候要注意图片本身的尺寸
如果设置的宽高不符合图片本身的宽高比，图片会变形----图片的失真
解决方案：宽或者高只写一个，另外一个自动适应

11、超链接

<a href=""></a>
属性：
href = "要跳转的页面路径"
target=" " 
_self 默认值，在本页面打开新链接
_blank 在新的选项卡页面中打开链接

12、表格

12.1、表格语法

• table标签：表示表格的开始和结束，表格的所有内容需要写在这一对标签中
• tr标签：表示表格中的一行 table row
• td标签：要写在tr中，这一行中的每一个单元格，是真正放数据的地方 table dataceil

12.2、表格可选标记

• caption标签：表格的标题
• thead标签：表头部分
• tbody标签：表的主体部分
• th标签：行/列的标题，文字加粗显示

12.3、表格的属性

table标签的属性
border = "1px" 设置边框
bordercolor = "" 设置边框颜色
bgcolor ="" 设置背景颜色
width =“”设置表格的宽度
height="" 设置表格的高度
table表格的边框是带有间距的，解决方案：给table标签加style="border-collapse: collapse;"

tr标签的属性
align ="" 设置内容的水平对齐方式 left靠左 center居中 right靠右
valign="" 设置内容的垂直对齐方式 top靠上 middle居中 bottom靠下

12.4、不规则的表格(合并单元格)

colspan="n" 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
rowspan="n" 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)
被合并的单元格一定得删除掉！

12.5、表格的大小

表格的大小是由内容撑起来的
但如果修改了某个单元格的高度，这一行单元格的高度都会随之改变
同理，如果修改了某个单元格的宽度，这一列单元格的宽度都会随之改变

13、列表

13.1、有序列表

<ol> 有序列表order list
     <li></li> 列表项list item
     <li></li>
</ol>

13.2、无序列表

<ul> 无序列表 unorder list
<li></li> 列表项 list item 
<li></li>
</ul>

13.3、属性

有序列表的属性
start = "4" 指定列表项编号的起始值
type = "1" 指定编号的类型，默认值1，代表阿拉伯数字
a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字

无序列表的属性
type ="disc" 实心圆，默认值，还有：
circle空心圆 square方块 none没有标识

13.4、列表嵌套

ul/ol的直接子元素必须是li,语法规定
所有被嵌套的内容都需要写在li中,符合语义

13.5、定义列表

<dl> 定义列表 Definition List:常用来给一类事物或名字做解释用的
<dt> 这里放要被解释的名词 </dt> Definition Type
<dd> 这里写上面名词的解释内容 </dd> Definition Description
</dl>

14、表单

14.1、表单的语法和属性

<form></form>
可以添加的属性：
(1)action="url" 向哪个地址提交数据，如果不写，会提交给当前页面本身
(2)method="get" 发送请求的方式 get默认值 post
(3)enctype="" 指定表单数据的编码方式，定义表单允许传什么类型的数据给服务器
application/x-www-form-urlencoded 默认值，允许传递任意字符(不能传文件)
multipart/form-data 可以传递文件和任意字符
text/plain 允许传递普通字符(& = * @等符号都不是普通字符)

14.2、表单的控件分类

(1)input元素
(2)textarea 多行文本域
(3)select和option下拉选择框
label关联控件

14.3、input

公共属性：
type 设置input元素的类型，默认值text
value 保存用户输入的值，提交服务器后，后期可以获取该属性的值
      如果控件是按钮，value是按钮上显示的文本
name 为控件起个名字，注意form表单必须写name,不写提交不了此项数据

(1)文本输入框与密码框
type="text" 普通文本输入框
type="password" 密码框
属性：
placeholder="" 提示信息
maxlength = "5" 设置可以输入的最大长度
value="" 不写input标签中也会默认存在该属性，默认值是空字符串

(2)按钮
type="submit" 提交按钮，自动收集整理用户输入的数据(有name属性的控件)，提交发送请求
type="reset" 重置按钮，将表单控件初始化，恢复到初始状态，注意不是全部清空
type="button" 普通按钮，使用事件，调用JS代码
注意：按钮上的value属性代表的是按钮上的文字

(3)单选框与多选框
type="radio" 单选
type="checkbox" 多选
必须添加name属性，原因：
1>为控件起名，为控件分组
2>为了实现单选效果，这么多个选项都在同一组，只能n选1
value必须写，不然提交的是on
checked 表示当前选项被默认选中

(4)文件上传
请输入您要上传的文件<input type="file" name="ufile" multiple>
使用的前提：method="post" enctype="multipart/form-data"
可以设置属性multiple，就可以同时传多个文件了 
注意：post提交要双击html文件打开测试，HBuilder测试POST会报错，暂不支持

14.4、select和下拉选择框

<select>
      <option><option>
</select>
提交的时候，如果没有给option设置value,提交的就是option标签之间的文本
但如果设置了option的value,提交的就是value的值
selected 表示该选项默认被选中
multiple 表示该下拉选框可以多选，按住Ctrl就可以选择多个选项

14.5、textarea 多行文本域

属性：
cols="50" 文本域的列数，改变的是宽度
rows="10" 文本域的行数，改变的是高度
注意：默认的文本域大小可以被用户随意拖拽改变，想要禁用拖拽：
style = "resize: none;"

14.6、label关联控件

用于进行form中文本与控件的关联
<label for="要关联的控件的id值"></label>

原创不易，转载请标明出处！