HTML基础标签

注释标签

• 写法：<!--注释内容 -->，在编译器里面可以用ctrl+/或者ctrl+shift+/快捷键添加
• 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到

文本格式化标签

标签	描述
b和strong	文字内容以粗体进行渲染
i和em	文字内容以斜体进行渲染
s和del	文字内容以删除线方式进行渲染
u和ins	文字内容以下划线方式进行渲染

• 区别：b、i、s、u只有表现形式，strong、em、del、ins有更强的语义性表达

图片标签

• <img src = "图片地址" alt="图片描述" width="图片宽度" height="图片高度"/>
• 是一个单标签
• 设置宽高时，默认单位为px，可以不写单位

属性	属性值	描述
src	url	图像路径
alt	文本	图片的描述和替代文本
title	文本	鼠标悬停时展示的内容
width	数值，默认px	图片的宽度
height	数值，默认px	图片的高度
border	数字(非常规)	图片默认边框的宽度

列表标签

有序列表（ordered list）

• ol>li,li相当于一个容器，可以容纳所有元素
• 有序列表各个列表项之间按照一定顺序进行排列，可以通过type属性来修改排列方式
• ol之间只能嵌套li，默认按照数字升序排列
• type属性取值有1(默认)|a(小写英文字母)|A(大写英文字母)|i(小写罗马数字)|I(大写罗马数字)
• 通过reversed属性来指定列表项倒序排列
• ul带有默认样式，上下外边距为16px，左内边距为40px

无序列表（unordered list）

• ul>li,ul标签中只能嵌套li,li相当于一个容器，可以容纳所有元素
• 无序列表各个列表项之间没有顺序级别之分，是并列的
• 无序列表会带有自己的属性样式，默认是一个实心圆点，可以通过css的list-style来修改样式
• list-style默认值为disc,还可为circle(空心圆点)|square(实心方块)|none(无样式)
• ul带有默认样式，上下外边距为16px，左内边距为40px

自定义列表（defined list）

• dl>dt>dd
• 自定义列表不是单纯的一个个项目，而是项目和注释的一个组合
• 自定义列表以dl开始，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始
• dl带有默认的上下外边距值为16px，dt无默认样式，dd有左外边距为40px
• 常用于对术语或名词进行解释，列表项前无任何符号

其他标签

div标签

• 没有语义，是DIV+CSS时代的核心标签，单纯进行内容标签的容纳
• div是division的缩写，意思是分割，可以用来给页面划分不同的区域，呈现不同的内容
• 是一个双标签

span标签

• 没有语义，通常用来组合行内标签，以便通过样式来格式化，没有固定的样式表现形式
• 是一个双标签

pre标签

• 预定格式化的文本
• 被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

特殊字符

• 转义符对照工具网站：tool.oschina.net/commons?typ…

表格标签

• 用于展示数据，可读性比较好
• 表格由<table></table>元素开启
• <table></table>有border属性，为数值类型，用于控制表格边框
• <table></table>有cellpadding属性，为数值类型，用于表格边沿与其内容之间的空白，默认1像素
• <table></table>有cellspacing属性，为数值类型，规定单元格之间的空白，默认2像素
• <tr></tr>表示表格的一行(table row)
• <td></td>表示表格的一个格子内容(table data)，有rowspan、colspan属性用来控制跨行或者跨列
• <th></th>表示表格的一个小标题，有时可以代替td，里面的内容会加粗居中显示，常用于第一行
• 属性 | 值 | 描述 | | ----------- | -------------------------------------- | ------------------------------ | | align | leftcenterright | 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。 | | bgcolor | rgb(x,x,x) #xxxxxx colorname | 不赞成使用。请使用样式代替。规定表格的背景颜色。 | | border | px | 规定表格边框的宽度。默认为 border="0" 不赞成使用 | | cellpadding | px *% | 规定单元边沿与其内容之间的空白。 | | cellspacing | px *% | 规定单元格之间的空白。 | | width | *%*pixels | 规定表格的宽度。
• 在进行表格布局时，可以将表格划分为头部、主体和页脚（页脚会有一定的兼容问题）
• <thead></thead>：用于定义表格的头部，必须位于标签中，一般包含l网页的logo和导航等头部信息
• <tbody></tbody>：用于定义表格的主体，位于标签中，一般包含网页中除头部和底部之外的其他内容 -<caption></caption> 必须紧随table标签之后，只能对每个表格定义一个标题，通常这个标题会被局中于表格之上

表单标签

• 表单用来收集信息，一个完整的表单由表单域、表单控件(表单元素)和提示信息3个部分组成
• html中所有表单都以一个<form>元素开始，是一个双标签
• action表示表单内容提交的网址，method表示提交的方式，有get|post选项
• 表单中有单行文本框、单选按钮、复选框、label标签、复选框、密码框、下拉菜单、多行文本框等
• 表单项由<input>标签构造，根据type属性形成不同的表单项 常用类型属性 | 描述 | 补充 | | ---------- | ------------------- | -------------------- | | text | 单行文本输入框 | 明文 | | password | 密码输入框 | 密文 | | radio | 单选按钮 | 单选 | | file | 输入字段和 "浏览"按钮，供文件上传。 | multiple 属性可以开启多文件选择 | | checkbox | 复选框 | 多选 | | submit | 提交按钮 | 提交按钮会把表单数据发送到服务器 | | button | 普通按钮 | 多数情况下，用于通过js联动 | | reset | 重置按钮 | 重置按钮会清除表单中的所有数据 | | image | 图像形式的提交按钮。 | 自定义按钮 用的少 | | hidden | 隐藏的输入文本 | 输入不显示 防止窥屏 | | number 新增 | 仅限数字 | 只能输入数字 | | date 新增 | 日期选择 | 年/月/日 | | tel 新增 | 电话号码 | 非有效限制 | | time 新增 | 时间选择 | 00:00 | | email 新增 | 电子邮件 | 非有效限制 | | search 新增 | 查询框 | 可点击x清除内容
• input标签还有很多其他的属性
• 常用属性 | 属性值 | 描述 | | ----------- | -------- | ------------------- | | type | 见下表 | 控制input的类型 | | name | 自定义 | 控件名称 作为提交数据时的 key | | value | 自定义或输入 | input控件中的默认或用户输入的文本 | | size | 正整数 | input在页面中的显示宽度 | | checked | checked | 定义选择控件默认被选中的项 | | maxlength | 正整数 | 规定控件容许输入的最大字符数 | | required | required | 必填 | | readonly | readonly | 内容只读 | | placeholder | 文本 | 用户输入提示文本 | | multiple | multiple | 文件上传可选多文件
• 多行文本框标签: <textarea></textarea>，rows和cols属性定义行数和列数
• 下拉菜单标签: <select><option></option></select>,option是下拉选项内容
• label标签: 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作，是行内元素，设置宽高不生效，for 属性规定 label 与id值一致的表单元素绑定

标题和段落标签

• h1-h6是标题标签
• p是段落标签
• 标题标签和段落标签都是双标签

超链接标签

• 超级链接是将网页和网页连接到一起的方法，是互联网成“网”的原因
• 使用<a></a>标签制作超链接
• href属性表示链接的路径，支持相对路径和绝对路径
• title属性用于设置鼠标的悬停文本
• target用于指定链接页面的打开方式，其中_self为默认值表示在当前页面跳转，_blank为新窗口的打开方式， _parent：在父窗口中打开链接，_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)

行内元素与块级元素

行内元素

• 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式
• 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素
• 行内元素和相邻行内元素在一行上
• 行内元素的高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
• 行内元素默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素。（a特殊）
• 链接里面不能再放链接

块级元素

• 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建
• 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
• 块级元素的特点
  • 总是从新行开始
  • 高度、行高、外边距以及内边距都可以控制
  • 宽度默认是容器的100%
  • 可以容纳内联元素和其他块元素
• 只有文字才能组成段落 因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

行内块元素

• 行内块元素的特点： 同时具备行内元素和块元素的特性
• 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙
• 默认宽度就是它本身内容的宽度
• 高度，宽度，行高、外边距以及内边距都可以设置
• 在行内元素中有几个特殊的标签：<img />、<input />、<td> 这些标签虽然可以设置宽度高度 但是在现代浏览器内特性默认展示模式为行内(inline) 元素
• 行内块元素不被IE所承认
• 因为制表符空格被被渲染，所以代码中的换行会导致盒子产生间隙
• 因为对齐模式默认为vertical-block：baseline(基线)，所以有时候盒子会被文本挤下去（文本过长的时候）