一 概述

页面时是由三部分组成的，分别是内容，表现，行为 1、内容，是我们在页面中可以看到的数据，我们称之为内容。一般内容我们使用HTML技术来展示 2、表现，指的是这些内容在页面上的展示效果，比如说，布局，颜色，大小等等。一般使用css技术来实现 3、行为，指的是页面的元素与输入设备之间的交互的响应，一般使用JavaScript技术实现

1.1 HTML概述

  1. HTML（Hypertext Markup Language）：超文本标记语言
  2. 它负责网页的三个要素之中的结构
  3. HTML使用标签的形式来识别网页中的不同组成部分

  4. 所谓的超文本指的就是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

    1.2 HTML页面规范

    HTML页面的注释是 <!-- -->
    html中，多个空格会被浏览器解析成一个空格

    1. <!DOCTYPE html>  <!--约束，声明，文档声明，当前这个是html5的声明-->
    2. <html lang="zh_CN"> <!--表示html的开始，-->
    3.  <head> <!--表示头部信息，一般包含三部分，title标题，css样式，js代码-->
    4.      <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集-->
    5.      <title>标题</title> <!--表示标题-->
    6.  </head>
    7.  <body> <!--body标签是整个页面显示的主体内容-->
    8.      halo，myself
    9.  </body>
    10. </html>

    1.3 标签介绍

    1）html页面都是由标签组成的，标签可以成对出现，也可以单独出现。
    2）标签的格式：<标签名>封装的数据</标签名>
    3）标签名大小不敏感
    4）标签拥有自己的属性，分为基础属性，事件属性
    5）有些属性有属性值，有些没有
    6）一个标签就是一个html元素，元素分为块元素，行内元素。块元素一般用来布局，行内元素一般用来包裹文字，一般情况下会在块元素中放行内元素，而行内元素中 不会放块元素

    二 常见标签

    语义化标签：

  5. header ：表示网页的头部

  6. main ：表示网页的主体，一个页面只会有一个main
  7. footer：表示网页的底部
  8. nav：表示网页中的导航
  9. aside：：和主体无关的内容。如侧边栏
  10. article：表示一个独立的文章
  11. section：表示一个独立的区块，上班的标签都不能表示的时候可以使用这个
  12. div：没有语义，表示一个区块。目前来说，使用的最多的标签就是div，是主流的布局元素

  13. span：行内元素，没有语义，一般在网页中用来选中文字

    2.1 font标签

    属性：

  14. color：颜色

  15. size：字体大小
    1. <font color="red" size="7">halo</font>

    2.2 特殊字符

    1）显示标签的括号，而不是把它们渲染出来
    小于号表示：<
    大于号表示：>
    2）空格
    通常情况下，HTML会裁掉多余的空格，比如连续输入了10个空格，那么就会自动省去9个，只留一个空格渲染。
    如果想显示连续多个空格，那么可以使用  

2.3 标题

标签标题是 h1 到 h6
属性：
align：对齐属性
left：左对齐（默认）
center：居中
right：右对齐

  1. <h1 align="center">H1标题</h1>
  2. <h2 align="left">H2标题</h2>
  3. <h3 align="right">H3标题</h3>

2.4 超链接标签

a标签是超链接，也是一个行内元素，可以嵌套任何元素

  1. href：属性，设置连接的地址。当属性值设置为：#，这时点击就会回到当前网页的顶部。如果想去当前网页中的任何一个位置，可以设置为#id值，会跳转到指定位置。当属性值为：javascript:; 这个点击了超链接之后什么也不会发生

  2. target：属性，设置那个目的进行跳转。属性值：_self，在当前页面进行跳转。属性值：_black，开启一个新页面进行跳转

    1. <a href="http://www.baidu.com" target="_blank">百度一下</a>
    2. <a href="javascript:;">百度一下</a>
    3. <a href="#">百度一下</a>

    2.5 列表标签

    在HTML中可以创建列表，一共有三种

  3. 有序列表

  4. 无序列表
  5. 定义列表 ```html
    • 1
    • 2
  1. 1
  2. 2

  • 1
  • 2
  • 3

    1. <a name="CA5VL"></a>
    2. ## 2.6 图片标签
    3. 图片标签用来给当前网页引入引入一张外部的图片，使用img标签，img标签同时是一个字结束标签。img是一个**替换元素**，处于块元素和行内元素之间，具有两种元素的特点
    5. 1. **src**：设置图片的路径
    6. 1. alt：用来对图片的描述，在图片无法显示的时候，会显示这个文字描述
    7. 1. width：图片的宽度，单位是像素
    8. 1. height：图标的高度，单位是像素
    10. 注意：图片如果修改了高度或者宽度，浏览器会自动将另一个等比例缩放，当两者都指定的时候，图片可能会被拉伸变得难看。在PC端，一般不建议修改图片的大小，建议使用原图尺寸。但是在移动端，由于小图不清晰，经常会将图片等比例缩小，这样能看清晰。
    11. ```html
    12. <img src="./assets/123 (1).jpgsss" alt="加载中"/>

    图片格式

    1. jepg(jpg)：支持的颜色较为丰富，不支持动态，不支持透明。一般用来显示照片
    2. png：支持的颜色较为丰富，支持透明，不支持动图。专为网页而生的
    3. gif：支持动图，支持的颜色较少，支持透明。一般用来显示颜色单一，动图
    4. webp：谷歌新推出的图片格式，专门用来表示网页图片的，具备其他格式的所有优点，而且文件还特别小。缺点：兼容性不好，老的浏览器不支持
    5. base64：将图片转化为字符串，一般是网页和图片一起加载的时候，使用这个

    注意：当所有格式的图片想过一样时，策略就是那个存储小用那个

    2.7 table标签

    1）table是表格标签
    border：设置边框
    width：设置表格宽度
    height：设置表格高度
    2）tr是行标签
    3）th是表头标签
    4）td是单元格标签
    align属性：可以设置单元格对齐方式

    1. <table border="1">
    2.     <tr>
    3.         <th>序号</th>
    4.         <th>时间</th>
    5.         <th>地点</th>
    6.         <th>人物</th>
    7.     </tr>
    8.     <tr>
    9.         <td>1</td>
    10.         <td>2019/9</td>
    11.         <td>北京</td>
    12.         <td>我</td>
    13.     </tr>
    14. </table>

    5）表格的跨列跨行
    在td标签中使用属性
    colspan：设置跨列
    rowspan：设置跨行

    1. <td colspan="2">1</td> 当前单元格跨2列
    2. <td rowspan="2">1</td> 当前单元格占2行

    2.8 内联框架

    iframe元素，用来当前页面中嵌套一个其他的页面。打开一个小窗口，去加载一个单独页面（内嵌窗口）

    1. src：设置小窗口页面的源
    2. width：小窗口的宽度
    3. height：小窗口的高度
    4. name：设置小窗口的标识，可以和a标签搭配，a标签进行跳转到当前小窗口
    5. frameborder：指定窗口的边框

    1）a标签和iframe标签组合使用
    在a标签设置target属性的值为iframe标签的name属性的值

    1. <iframe src="http://www.baidu.com" width="500" height="400" name="abc"></iframe>
    2. <br>
    3. <a href="http://qq.com" target="abc">QQ</a>

    2.9 表单标签（重点）

    表单就是html页面中用来收集用户信息的所有元素的集合，然后把这些信息发生给服务器

    2.9.1 属性说明

    form标签：就是表单
    input：文本输入框标签
    type：属性，表示输入信息的类型
    text：表示该输入框信息为文本
    password：表示该输入框信息为密码类型，显示的时候会使用星号代替，但是值还是输入的值
    radio：单选框
    checkbox：复选框
    reset：属性值，重置按钮，点击会重置标签信息，value属性修改按钮上的文本
    submit：属性值，提交按钮，value属性修改按钮上的文本
    button：属性值，按钮，value属性修改按钮上的文本
    hidden：属性值，隐藏域
    value：属性，表示该输入框的默认值
    name：属性，表示分组，哪些输入框是同一组的
    checked=”checked”： 表示默认选中
    select：下拉选择框标签
    option：标签，选择项
    selected=”selected”：属性，表示默认中的项
    textarea：标签，多行文本输入框（注意，起始标签和结束标签中间的内容才是默认值）
    rows：属性，设置可以显示几行的高度
    clos：属性，设置每行可以显示几个字符的宽度

    1. <form>
    2.     用户名称： <input type="text" value="默认值"></input><br>
    3.     用户密码： <input type="password"/><br>
    4.     性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女</input><br>
    5.     国籍：<select>
    6.             <option>中国</option>
    7.             <option selected="selected">美国</option>
    8.             <option>日本</option>
    9.          </select> <br>
    10.     自我评价：<textarea rows="4" cols="20">我是默认值</textarea></textarea><br>
    12.     <input type="reset" value="重置">
    13.     <input type="submit" value="提交">
    14.     <input type="button" value="按钮">
    15.     <br>
    16.     <input type="hidden"></input> 
    18. </form>

    表单格式化
    单独使用表单的时候，表单的格式是比较难去规范化的，可以联合表格table一起使用，这样表单会比较好看一点。

    2.9.2 表单提交

    1）form父标签的属性：
    action：属性，设置提交的服务器地址
    method：属性，设置提交的方式，GET（默认）或POST

    2）表单提交的时候，数据没有发送给服务器的三种情况
    ①表单项没有name属性值
    ②单选，多选，下拉列表的option标签，都需要加上value属性值
    ③表单项不在 form 提交的标签中

    3）GET请求的特点：
    ①浏览器中地址栏的地址，action属性 [ +?+请求参数 ]
    请求参数的格式：name=value&name=value
    ②不安全
    ③有数据长度的限制

    4）POST请求的特点：
    ①浏览器地址栏中只有action属性值
    ②相对于GET请求安全
    ③理论上没有数据长度的限制

    2.10 其他标签

    1）div标签：默认独占一行

    1. <div>我是DIV</div>

    2）span标签：它的长度是封装数据的长度，可伸缩

    1. <span>我是span</span>

    3）p标签：默认会在段落的上方，下方各空出一行来（如果有空行就不再空）

    1. <p>我是p段落标签</p>

    2.11 音视频标签

    audio标签，用来向当前页面引入一个外部的音频文件，默认情况下是不允许用户自己播放的

    1. controls：允许用户自己播放，没有属性值
    2. autoplay：自动播放，但是目前大多数浏览器都不会自动播放，没有属性值

    3. loop：循环播放

      1. <audio src="../../../../amusement/music/147-汪苏泷-唯你懂我心.mp3" 
      2.     controls autoplay></audio>

      video标签，用来引入一段视频，使用方式来audio基本一样

    4. src：指定播放的文件