HTML知识点汇总

白昼怎懂夜的黑 提交于 2021-02-11 18:39:19

一、什么是HTML

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

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

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

二、HTML标签的作用

      充当网页骨架。

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

三、HTML骨架

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <!--  作用:配置html文件  -->
5     </head>
6     <body>
7         <!-- 书写标签组成的网页结构 -->
8     </body>
9 </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标签

     <style type= "text/css"></style> 编写页面内部样式

  4、link标签

     <link>:用于引入css样式
  <link rel = "stylesheet" href = "index.css">

  5、script标签

    <script src=index.js"></script>引入外部js文件

五、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="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)

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!