HTML知识点汇总

一、什么是HTML

HTML是用来描述网页的一种语言。

HTML是指超文本标记语言（不仅包含纯文本，还包含图片、超链接、音频、视频等）。

HTML使用一套标记标签来描述网页。

二、HTML标签的作用

充当网页骨架。

语义化，使网络爬虫更好的抓取网站信息。

三、HTML骨架

 <!DOCTYPE html>

 <html>

     <head>

         <!--  作用：配置html文件  -->

     </head>

     <body>

         <!-- 书写标签组成的网页结构 -->

     </body>

 </html>

1、DOCTYPE是document type(文档类型)的简写，在网页中用来说明当前使用的XHTML或者HTML是什么版本

2、head是对HTML进行一些附加信息，内容不显示在网页中

3、body是HTML的主体部分，显示在网页中的内容

四、head标签中可以放的元素

1、meta标签

　　<meta charset = "UTF-8" /> 用于声明字符编码级

　　<meta name="keywords" content = "内容"> 用于提供给搜索引擎关键字

　　<meta name = "discription" content = "内容"> 用于提供给搜索引擎网页简单描述

2、title标签

标识文档标题，该标题会显示在浏览器的标题栏的标签页上

3、style标签

4、link标签

5、script标签

五、HTML语法

1、标签之间对空格，缩进，换行不敏感，浏览器只会当做一个空格处理

2、标签名必须使用一对尖括号包裹，标签一般都是成对出现，单标签除外

常见单标签：<img/> <br/> <hr/>

3、标签属性写法：键值对形势（key="value"）

eg: <img src="1.png" alt="图片" title="我是一张图片"/>

六、HTML中标签分类

1、块级元素：h1-h6、p、div、ol、ul、dl、form、table等

2、行内元素 a、img、span、strong、em等

块级元素特点：

1、独占一行；
2、高度，行高以及外边距和内边距都可控制；
3、宽度缺省是父容器的宽度，除非设定一个宽度；
4、它可以容纳内联元素和其他块元素。（注意：p标签不可包含div）

行内元素特点：

1、设置宽高无效

2、对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

3、不会自动进行换行

七、HTML中常用标签

1、h系列（h1-h6）（headline的缩写）

   作用：给文本添加标题语义

  注意：h系列的标签不能相互嵌套，网页一般只有一个h1标签

2、p（paragragh）段落标签

  作用：给文本添加段落语义

  注意：p是文本级标签，内部只能书写文本类的内容，比如：文本，图片，表单元素，废弃标签

3、img标签（单标签）

   <img src="" alt=""/>

   src:路径，插入图片所在的位置

   alt：图片加载失败时显示的文本

   width:设置图片的宽度

   height:设置图片的高度 注意：宽度和高度一般只设置一个让图片按比例缩放

    <img src="data:images/01.png" alt="图片加载失败，请刷新" width="200px"/>

 4、a标签（超链接）  

　　　href: 属性值书写的是要跳转页面的路径（路径可以为相对路径和绝对路径）　　

　　　target: 属性值设置新页面打开方式

     默认值（_self）：在当前窗口打开

　　　_blank: 在新窗口打开

　　　title: 悬停提示文本

    <a href="#id"></a> 可以进行页面内锚链接跳转

  5、列表

     5.1无序列表 ul

      作用：给文本添加无序列表语义

      ul:unordered list 无序列表

      li:list item   列表项

      注意：

　　    ul和li是第一个成对出现的标签,出现ul一定有li，有li一定被ul包裹

　    　ul内部只能嵌套li不能出现任何其他标签。

     5.2有序列表 ol

　　   作用：给文本添加有序列表语义

　　    ol:ordered list 有序列表

　　    li:list item 列表项

　　    每一个列表项之间有顺序之分

　　    ol,li也是一组成对出现的标签，ol一定嵌套li。

　　    ol内部嵌套一个或者多个li

       5.3自定义列表

　　    作用：给文本添加自定义列表语义

　　    dl: definition list 自定义列表

　　    dt: definition title 标题

　　    dd: definition description 描述

　　    dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd）

    6、表单元素

       6.1form

　　     说明：将所有的表单元素都书写在form标签内部

　　　　　   　form标签是功能标签不是结构标签

　　　　　  　 提交位置：action

　　　　　　   提交方式：method

　　　　　　   <form action="1.php" method="get"></form>

　　　　　　  表单元素：提供给用户进行输入或者选择控件

　　　　　  　属性：type，根据type属性值，有不同的表单类型

       6.2单行文本框  <input type="text" name="yonghuming" value="用户名" />

　　    6.3密码框  <input type="password" name="mima" />

       6.4单选框

　　　　　　<p>

　　　　 　　请选择性别：

　　　　 　　<input type="radio" name="sex" />男性

　　　　　　 <input type="radio" name="sex" checked="checked" />女性

　　　　　　</p>

          说明：

　　　　　　type属性值：radio

　　　　　　同一组单选框，必须设置相同的name属性值

　　　　　　checked: 设置表单被选中checked

　　6.5复选框

　　　　请选择爱好：

　　　　<p>

　　　　　　<input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label>

　　　　　　<input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>

　　　　</p>

　　　　说明：type属性值：checkbox

  　　　　　　 同一组复选框，必须设置相同的name属性值

　　　　　　   也具有checked属性

　　　　　　   可以使用label标签

八、HTML中废弃的标签

　　b,u,i,em,strong（文本级标签）
　　b: 默认加粗
　　u: 默认下划线
　　i: 默认倾斜
　　em:语义加强，倾斜
　　strong: 语义加强，加粗

废弃原因：没有语义

九、HTML5中新增API

1、HTML5 Geolocation：获取地理位置

2、HTML 拖放

3、web存储：localStorage、sessionStorage（常用）

4、应用缓存

5、 Web Worker

　 6、SSE 服务端推送技术（比websocket更轻，有些情况可以替代ws）