Hypertext Markup Language:超文本标记语言, 是一种纯文本格式的文件,内部只能书写文字内容,不能添加图片、音频、视频等,但是在网页中给用户呈现的效果却包含了文字以外的内容,这种效果就是HTML语言区别于其他文件的不同之处。

HTML语义化

HTML文件中,如果没有使用特殊语义的标记,也可以实现网页显示效果,但是利用标记给普通的文字添加了不同的语义,能够让网站的结构划分更加清晰。

  1. 方便代码的阅读和后期维护
  2. 便于浏览器或是网络爬虫更好地解析网站内容
  3. 使用语义化标签有利于SEO搜索引擎优化,提高网站的搜索排名

    HTML规范版本

    W3C:world wide web consortium,万维网联盟,专门发布和维护互联网的规范和标准。

    HTML语法

    标签

  4. 标签名必须书写在一对尖括号<>内部。

  5. 标签分为单标签和双标签,双标签必须成对出现。
  6. 双标签包含开始标签和结束标签,结束标签必须书写关闭符号/,单标签也需要进行自封闭书写。在HTML5中,单标签可以不写关闭符号。

    标签级别

  • 容器级:标签内部可以存放任意内容,包含容器级标签。比如 h1div 等。
  • 文本级:标签内部只能存放文字或类似文字的内容,比如存放图片、表单元素等。比如 p

    元素

    HTML元素指的是从开始标签到结束标签的所有内容,包含开始标签、元素内容、结束标签。
  1. 元素内容可以是纯文本,也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况,称为嵌套。
  2. 一个HTML元素div的内容可能是多个其他元素组成,例如ph1,此时我们习惯称 divph1 的父级元素,ph1div 的子级元素,而 ph1属于同级元素,这种嵌 套关系可以有多层。

    1. <div>
    2. <h1>Hello</h1>
    3. <p>这是一个段落</p>
    4. </div>
  3. 单标签是不能添加元素内容的,可以称为空元素。

  4. 元素间对空格、换行、缩进等形成的空白不敏感,有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
  5. 空白折叠现象:元素内容如果是文本,所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符,在浏览器中加载时,连接在一起的空白会折叠成一个空格显示,这就是空白折叠现象。

    属性

  6. 书写位置:必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔。

  7. 属性包含:属性名(key)、属性值(value)。属性名与属性值之间的写法通常称做键值对写法,HTML 标签属性的键值对写法是 key=”value”。XHTML 要求属性值必须在双引号内部。
  8. 一个标签内可以设置多个不同的属性,属性与属性之间使用空格进行分隔,每个属性的键值对写法都是k=”v”。
  9. 部分标签属性 key 可以设置多个属性值 value,所有属性值v都必须写在同一对双引号内,值与值之间需要使用空格分隔。

    注释

    HTML 注释语法为 <!-- 注释内容 -->, 注释只在源代码中可见,在浏览器窗口是不显示的。

    字符实体

    规则:所有的字符实体和实体编号都是以&开头,以;结尾的。
    注意:实体名称对大小写敏感!
    建议1:使用实体名称,好处是名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
    建议2:不需要强制记忆所有的字符实体,只需要记忆常用的几个字符实体名称即可,其他可以通过手册进行查询。

    HTML结构

    ```html <!DOCTYPE html>

  1. <a name="ei6ii"></a>
  2. ## 基本骨架
  3. HTML文件最基本的四个标签,组成了网页的基本骨架,包括:<html><head><title><body>四组标签。
  4. 1. <html> 标签,定义HTML文件的根元素,表示整个的HTML文档,所有的标签要书写在标签内部。
  5. 1. <head> 标签, 用于存放 <meta> , <base> , <style> , <script> , <link>,用于对网页的设置,除了<title>,其他标签都不显示在浏览器上。
  6. 1. <title> 标签
  7. 1. 指定页面的标题
  8. 1. 用于SEO优化
  9. 1. 浏览器书签默认的网页标题
  10. 4. <body> 标签 ,定义网页的主体部分,用于存放所有的HTML显示内容的标签
  11. <a name="DuQq1"></a>
  12. ## DTD
  13. 完整的HTML文件的第一行内容叫做文档定义类型,英文DocType Definition, 简称DTD,也称作文档声明类型,用于告知浏览器该网页使用的是哪个版本的HTML规范,让浏览器按照对应版本的HTML语法进行解析。 <br />目前 HTML5 用的是 `<!DOCTYPE html>`
  14. <a name="iz7Ob"></a>
  15. ## 命名空间
  16. <html> 元素表示整个网页文档,在开始标签上设置了命名空间xmlns属性。
  17. ```html
  18. <!--XHTML1.0 版本-->
  19. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
  20. </html>
  21. <!--HTML5 版本-->
  22. <html lang="en">
  23. </html>
  • xml:可扩展标记语言,使用在传输过程中的规范,被设计用来传输和存储数据,是html 的补充。
  • xmlns:全称叫做XML NameSpace,NameSpace叫做命名空间,浏览器会将此命名空间 用于该属性所在元素内的所有内容。
  • 元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准,避免出现标签名冲突,这个标准使用的就是一个固定的网址 http://www.w3.org/1999/xhtml 中的规范
  • xml:lang= “en” 和 lang= “en” 表示所有的标签元素内容的语言都是英语,lang= “ zh-cn” 表示中文(中国)

    HTML常用标签

    :::info 标签的作用是给标签内部的元素内容添加对应的语义,不负责文字的粗体、字号等样式。
    样式是由Css设定的。
    :::

    标题标签

  • 标题(Heading),是通过

    ~

    六个标签分别来对六个级别的标题进行定义的。

  • 定义最大的标题,

    定义最小的标题。
  • ~

    标签都是双标签,且是容器级标签。

    段落标签

  • 段落(paragraph)是通过

    标签进行定义的。

  • 标签是双标签,且为文本级标签。内部只能放置文本、图片、表单元素,或者废弃的 标签等。

    换行标签


  • (breaking)标签是HTML中一个简单的换行符。


  • 标签是一个单标签。
  • 在需要换行的位置可以使用
    标签书写,但是

    不同,没有建立新的段落的语义,只是简单的进行强制换行。

    文本格式化标签

    1. <big>大号字体</big>
    2. <small>小号字体</small>
    3. <sub>下标字,subscript</sub>
    4. <sup>上标字,superscript</sup>
    5. <em>着重字体,斜体</em>
    6. <i>斜体,italic</i>
    7. <strong>加重语气,粗体</strong>
    8. <b>粗体,bold</b>
    9. <ins>插入字,下划线</ins>
    10. <u>下划线</u>
    11. <del>删除线</del>

    图像标签

  • 图像(image)由 HTML - 图1 标签定义

  • HTML - 图2 标签是单标签,作用是在指定的位置插入一张图片

    HTML - 图3 常用属性为:

src 图片路径,可以是相对路径,绝对路径和网络路径
width 图片宽度
height 图片高度
border 边框属性
title 提示文本
alt 替换文本

超链接标签

列表标签

    • 无序列表标签,unordered list,定义一个无序列表的大结构
      1. 有序列表标签,ordered list,定义一个有序列表的大结构
      2. 标签,list item,定义列表的一项,
      3. 只能嵌套在
            里面
          1. 定义列表标签, 由三个标签组成完整的结构,包含
            • dl:definition list,定义一个自定义列表的大结构
            • dt:definition term,表示定义自定义列表中的一个主题或者术语
            • dd:definition description,定义解释项,表示描述或解释前面的定义主题
          2. 内部只能嵌套
            是同级关系。

            音频标签

          3. 音频使用

          4. 音频加载后不会自动显示播放器的控制条,需要使用 controls 属性进行设置,属性值也是 controls 。

            视频标签

          5. 视频使用

            标签进行定义

          6. 标签是双标签,使用src属性设置视频的路径,同

            布局标签

          7. 标签常用作布局工具,俗称盒子。

          8. 速成大盒子, 俗称小盒子

            表格标签

            表格需要三个标签,、、

            tr:table rows,表格的行,定义的是表格由多少行组成。
            td:table data,表格数据,也叫表格单元格,定义的是每一行内部的单元格。

            标签可以添加border边框属性。 表格的单元格之间有默认的空隙,会导致双线边框。
            解决方法是设置标签样式属性值:border-collapse : collapse; 表示边框塌陷。
            如果要绘制表头,使用标签
            ,table head data,表头单元格。
            在表格中绘制的时候,替换的是
            的位置。 签中自带默认的css样式效果,文字显示粗体居中。

            表格的单元格可以进行合并,通过

            的两个属性可以进行合并设置。

            • rowspan:跨行和并。上下的合并
            • colspan:跨列合并。左右的合并

            内部最直接的子级包含四个分区标签,他们都是双标签。

            • caption:表格的标题,内部书写标题文字。
            • thead:table head,表格的头部。内部嵌套tr>th。
            • tbody:table body,表格的主体。内部嵌套tr>td。
            • tfoot:table foot,表格的页脚。内部嵌套tr>td。

            四个分区可以选择性的进行组合,不论书写顺序如何颠倒,浏览器中的加载顺序都是自动按照caption、thead、 tbody、tfoot执行的。

            表单域标签

            • HTML表单域使用
              标签进行定义。
            • 标签是一个功能性标签,填写的表单信息要想正确的提交到后台服务器,必须放在 一个标签之内。 •
            • 标签为双标签,容器级标签。 | action | url | 指定表单提交的URL | | —- | —- | —- | | method | get/post | 指定表单数据的提交方式 | | name |
              | 指定表单的名称 |

            标签

            type text 单行文本输入框
            password 密码输入框
            radio 单选框,相同name表示一组
            checkbox 复选框,相同name表示一组
            button 按钮
            reset 重置按钮
            submit 提交按钮
            image 图像按钮
            file 文件上传
            hidden 隐藏字段
            name 名称
            value 默认值
            size 数字 控件宽度
            checked checked 默认选中项
            maxlength 数字 最大输入长度