- A+
所属分类：Web前端
一、基础篇
1. 基础示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html> 2.基础结构
- html文档分为文本+标记，通过显示标记语言对文本进行修饰，然后表达渲染后的文本内容
- 一个网页由声明+head+body三部分组成
- 声明文档使用HTML5语法
- head 部分在页面中不显示
- body 部分为显示在页面中的内容
二、常用标签
1. 文本标签
- <hn>...</hn> n为1-6的数字。标记为标题，加粗独立行。
- <i>...</i> 斜体
- <em>...</em> 强调斜体
- <b>...</b> 加粗
- <strong>...</strong> 强调加粗，方便搜索引擎收录
- <cite>...</cite> 作品标题（引用）
- <sub>...</sub> 下标
- <sup>...</sup> 上标
- <del>...</del> 删除线
2. 格式化标签
- <br/> 换行
- <p>...</p> 换段
- <hr/> 水平分割线
- 列表
-
<ul>...</ul> 无序列表
-
<ol>...</ol> 有序列表，其中type的值：代表起始值。
-
<li>...</li> 列表项，在每一个列表中使用
-
<dl>...</dl> 自定义列表
-
<dt>...</dt> 自定义列表头
-
<dd>...</dd> 自定义列表内容，会缩进
-
- <div>...</div> 常用于组合块元素（高度为0，宽度填满），通过CSS对这些元素进行格式化
- <span>...</span> 常用于包含的文本（没有特殊效果），可以使用CSS对他进行格式化，或通过JavaScript对他进行操作
3. 图片标签
- /
在网页中插入一张图片
- 属性：
- src：图片引用地址，图片名及url地址。（可以使用相对地址，或者网络地址）
- alt：图片加载失败时的提示信息
- title：文字提示的属性。（把鼠标放在图片上时提示的文字）
- width：图片宽度
- height：图片高度（通常高度和宽度只使用一个，否则容易失真）
- border：边框线粗细（颜色与字体颜色相同，通常不用）
4. 超级链接标签
- <a href="">...</a> 网页中插入超级链接
- 属性：
- href：必填项，指链接跳转地址
- target：表示链接的打开方式
- _blank 新窗口
- _parent 父窗口
- _self 本窗口（默认）
- _top 顶级窗口
- framename 窗口名
- title：文字提示属性（详情）
- 锚点链接：
- <a id="a1"> 通过id来定义一个锚点，以前用name
- <a href="#a1">跳转a1处<a> 也可以在#前加入其他页面链接
5. 表格标签
-
<table>...<table> 表格标签
-
属性：
- border 表格线，0是没有
- width 表格宽度
- cellspacing 单元格之间的距离，默认是2，0时没有缝隙
- cellpadding 单元格的字于四边保持的最小距离，默认是0
-
<capion>...</capion> 表格标题
-
<tr>...</tr> 行标签
-
<th>...</th> 列头标签
-
<td>...</td> 列标签
-
属性：
- rowapan 跨行
- colspan 跨列
-
<thead>...</thead> 表头
-
<tbody>...</tbody> 表体
-
<tfoot>...</tfoot> 表尾
6. 表单标签**
- <form>...</form> 表单标签
- 属性：
- action 目标地址，就是当提交表单时，提交到的地址。
- method 发送方式，分为get（以明文的方式提交），post（以隐藏的方式提交）
- <input/> 表单项标签，通过不同type创建不同表单项
- 属性：
- type 表单项类型
- text 文本
- password 密码
- radio 单选
- checkbox 复选
- submit 提交
- reset 重置
- button 按钮，没有效果，可以添加事件
- file 上传文件
- image 图片
- email 邮箱
- number 下拉选择数字
- url 网址
- date 日历
- color 颜色
- name 变量名字，实现互相排斥需要相同的name
- value 默认值
- disabled 默认不能修改
- checked 默认选中，针对单选和多选使用
- min 最小值
- max 最大值
- maxlength 长度
- type 表单项类型
- <select> 文本选项
- </option>...<option> 每一项使用此标记，selected为默认选此项
- <datalist>...</datalist> 可选的下拉列表
- </option>...<option> 每一项使用此标记，selected为默认选此项
- <textarea>...</textarea> 多行文本输入
- <button>...</botton> 标签自定义按钮
7. 行内框架标签
- <iframe>...</iframe> 在网页放另一个网页
- 属性：
- src：规定在iframe中显示的url
- name：规定iframe的名称
- height：高度
- width：宽度
- frameborder：是否显示边框
8. 多媒体标签
- <audio>...<autio> 音频标签
- 属性：
- src:音频引用的地址
- controls，是否显示控制
- <video>...<video> 视频标签
- 属性：
- src:视频引用的地址
- controls，是否显示控制
