HTML基础知识

1.开发环境的搭建

（1）编辑器：编写代码的地方

         vscode      
         sublime           (体积小、运行速度快)
         文本编辑器     (没有代码提示以及插件)

（2）浏览器：代码执行的地方

         例如：火狐浏览器、谷歌浏览器、IE浏览器

（3）部署环境：代码部署的地方

          apache

（4）三拨人：

          W3C       =>    制定规范（标准）

          浏览器厂商

          程序员

---

2.html介绍

（1）超文本标记语言

（2）作用：搭建页面的骨架

（3）后缀名：.html或.htm

---

3.html文档的结构

注释含义

---

4.语法

（1）注释：<!--注释内容-->    

         注释内容不会被浏览器解析

         作用: 1.记录编程思路
                  2.便于后期代码的维护
                  3.增加代码量

（2）元素

        双标签元素
          元素 = 开始标签 + 结束标签 + 内容 + 属性
        单标签元素
          开始标签 + 内容 + 属性

（3）属性

分类：核心属性：每一个元素都可以拥有的属性
             title：提示信息
             id：元素的唯一值(js)
             class：类名(css选择器)
             style：定义一些样式

          特有属性：某些元素特有的属性
             charset：字符集
             src：引用图像文件的URL
             alt：指定图片的替换文字
             href：指定超链接目标的URL

注：属性写在开始标签中
       属性 = 属性名 + 属性值
       属性名和属性值之间使用等号分隔，属性值使用引号（双引号或单引号）包起来

（4）空白、实体

        空白：无论有多少空格，浏览器都会按照一个空格来处理
        实体：&nbsp；  => 空格
                   &lt;&gt； => < >

---

5.块级元素

   作用：搭建页面的骨架

   特点：1）独占一行空间
              2）默认宽度为父元素的100%，高度由内容或者子元素决定
              3）可以设置宽高

div：无意义的块级元素(没有任何的默认样式)

p：段落（默认有一个margin-top、margin-bottom）

h1~h6：标题（默认有字体大小和字体宽度，外边距margin）

ul：无序列表
      子元素：li

ol：有序列表
      子元素：li

dl：列表
      子元素：dt（标题）、dd（列表项）

---

6.行内元素

   作用：装饰

   特点：1）共享一行空间，如果放不下则换行显示
              2）默认宽高都由内容决定
              3）默认不能设置宽高

span：无意义的行内元素

a：超链接。超链接的作用：1.超链接(绝对路径、相对路径)；2.锚点。为目标元素定义一个id值，写一个<a>标签，给a标签的href属性写    上目标元素的 # + id值；3.发送邮件。href: mailto:邮箱地址

strong：加粗、强调

i ：斜体

img 图片
       src  图片的路径
       alt  当图片加载失败的时候，替代图片的文字
       width   宽度
       height  高度

---

7.元素的使用策略

（1）使用块级元素搭建页面的骨架，使用行内元素装饰
（2）不知道使用什么块级元素的时候就用div，不知道用什么行内元素的时候就用span

---

8.h5新增的语义化标签

作用：1.能够更好的阅读代码
           2.有助于搜索引擎搜索

例：<header>:头部标签
       <nav>:导航标签
       <article>:内容标签
       <section>:块级标签
       <aside>:侧边栏标签
       <footer>:尾部标签

---

9.表格

作用：用来展示数据、表格布局

table    表格 

border边框、width宽度、cellspacing单元格和单元格之间的距离、cellpadding单元格和内容之间的距离、bgcolor背景颜色

   thead  表头
    tr   行
      th 单元格
   tbody   表体
    tr    行
      td  单元格    colspan跨列数   rowspan跨行数  <td colspan="4">  <td rowspan="2">

---

10.表单

（1）作用：用来收集用户信息，与后台交互

（2）http超文本传输协议
         基于请求和响应的这种模式

（3）报文分为：请求报文和响应报文

请求报文：请求行、请求头、请求体
        请求行：请求方式、请求的地址（URL）、协议的版本
        请求头：一个一个的键值对
        请求体：请求参数

      注：get请求的请求参数不放在请求体中，拼接的URL上（一般用作请求数据）
             post请求参数放在请求体中（一般用作提交数据）

请求方式：
1.options(预检请求，探路请求)
  返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2.head
  向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
3.get(请求参数有大小的限制)
  向特定的资源发出请求。它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现数据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。
4.post(没有对请求参数的限制)
  向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
  Loadrunner中对应POST请求函数：web_submit_data,web_submit_form
5.put
  向指定资源位置上传其最新内容
6.delete
  请求服务器删除Request-URL所标识的资源
......

响应报文：响应行、响应头、响应体
        响应行：协议的版本、状态码
        响应头：一个一个的键值对
        响应体：响应的内容

（4）form（输入框、单选按钮、多选按钮、下拉菜单）
  表单控件

  input表单控件
  type属性，用于设定控件类型，取值如下：    

text	单行文本框
password	密码框，输入的内容将会被遮挡。
checkbox	复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。
radio	单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这样，每次只能选中按钮组中的某一个控件。
submit	提交按钮
reset	重置按钮
file	文件按钮，该控件用于选中文件系统中的某个文件
hidden	隐藏域，该控件不显示在页面中，但是其值会被提交。
image	图像按钮，必须使用src来加载图片，使用alt来声明替换文本。
button	普通按钮

Input控件用于接受来自用户的数据，其他可用属性如下：

name	用于设定控件名和提交数据的属性名
value	用于控件值初始化，可选，涉及到用户输入时，当涉及到选择时，必须选
checked	单选框，复选框默认选中属性
disabled	表示禁用组件，禁用组件的值也不能被提交
size	当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20
maxlength	指定可以输入的字符的最大值。适用于控件类型为text,password。

  表单控件：input控件
                    select    下拉菜单
                    option    每一项
                    textarea  文本域
                    button    按钮
                    label     用于表示某一表单控件的标题