一、基础篇

1. 基础示例

1
2
3
4
5
6
7
8
9
10
11
12
<!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 长度
  • <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，是否显示控制