甄子健
甄子健

HTML

概述

HTML叫做超文本标记语言，用于搭建网页的结构

网页的组成

  • 前端三层: HTML(结构层)、CSS(样式层)、JavaScript(行为层)
  • 其他多媒体内容: 图片、视频、音频、超级链接等
  • 所有网页的网页文件都是真实的、物理存在的文件

HTTP协议(超文本传输协议): 客户端浏览器或其他程序与WEB服务器之间的应用层通信协议。

HTTP请求

  • request，浏览器根据网址向对应的服务器发送请求。
  • 发起请求的方法：在浏览器地址栏中输入网址，或者点击网址链接。
  • HTML页面解析过程中，会发出多个http请求，包含网页的图片、视频、音频等文件请求。

HTTP响应

  • 响应：response，服务器根据请求响应一个HTML文件，将HTML传输给客户端，在浏览器中进行HTML网页的渲染。

纯文本格式

纯文本格式，就是没有任何文本修饰的，没有任何粗体，下划线，斜体，图形，符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式设置。

特点
1、文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输。
2、所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式
3、纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑

HTML概念

重要概念
超文本

  • 是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等。

标记

  • 又叫做标签(HTML tag)，有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语意或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。

HTML版本规范和标签语法

W3C：万维网联盟。专门发布和维护互联网的规范和标准。


html版本.png

HTML标签：通常被成为HTML标签(HTML tag)。标签在书写和使用过程中，必须遵循特定的语法。
1 标签名必须书写在一对尖括号<>内部
2 标签区分单标签和双标签，双标签必须成对出现
3 双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行自封闭书写。在HTML5中，单标签可以不写关闭符号。

HTML元素

HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
eg：双标签内部包含的纯文本内容，就是元素内容

元素内容可以是纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套lp标签元素。
1、元素内容可以是纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套
2、一个HTML元素div的内容可能是多个其他元素组成。父级，子级同级元素，嵌套关系可以是很多层

标签级别

  • 根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。
    • 容器级：标签内部可以存放任意内容，包含容器级标签。比如h1，div等
    • 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。

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

HTML属性

HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息。

1 书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分割
2 属性包含：属性名key、属性值value。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=“v”。XHTML要求属性值必须在双引号内部。
3 一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k=“v”
4 部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

HTML基本结构

基本骨架: HTML文件最基本的四个标签，组成了网页的基本骨架，包括：、、、<body>四组标签。</p> <p><html>标签</p> <ul> <li>作用：定义HTML文件的跟元素，表示整个的HTML文档，所有的标签要书写在<html>内部</li> </ul> <p><head>标签</p> <ul> <li>作用：用于存放<tittle>、<meta>、<base>、<style>、<script>、<link>。内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。</li> </ul> <p><title>标签</p> <ul> <li>作用1：让页面拥有一个属于自己的标题</li> <li>作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化</li> <li>作用3：内部的内容会显示在搜索结果的标题部分</li> <li>作用4：作为浏览器收藏夹默认的网页标题</li> </ul> <p><body>标签</p> <ul> <li>作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签<p>、<div>、<a>等</li> </ul> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页标题 网页的主体

DTD、命名空间、字符集

DTD

  • 完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition，简称DTD。也称作文档声明类型，DocType Definition。
  • 作用：告诉浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面

命名空间

  • 元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。
//XHTML 1.0

//HTML5
  • xml：可扩展标记语言，使用在传输过程中的规范。被设计用来传输和储存数据，是html的补充
  • xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，浏览器会讲此命名空间用于该属性所在元素内的所有内容。
  • 元素的命名空间规定了在不同用户的浏览器中标签语意遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml

语言

  • xml:lang="en"和lang="en" 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
  • lang="zh-cn" 表示中文（中国）

字符集

  • 内部的标签通过http-equiv属性定义来当前的网页所使用的字符编码
  • char: character，字符。set：集合
    • XHTML 1.0
    • HTML 5

      国际通用字库：
    • UTF-8 以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汗渍为3个字节大小。
      中国国标字库
    • gb2312: 共收汉字6723个包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。
    • gbk：是gb2312的扩展，增加了繁体字，共收入21886个汉字和图形符号，其中汉字21003个，图形符号883个，一个汉字为2个字节大小。

注释

  • html注释语法

用途
1 在源代码中添加描述性的提示信息，便于我们阅读代码
2 对于HTML纠错也有很大的帮助，可以通过注释某一行代码，以便检索错误的位置
3 暂时注释掉一部分不用的代码，以便后期恢复代码

标题

  • 标题，是通过

    -

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

  • 定义最大的标题，

    是最小的

  • -

    标签都是双标签，切是容器级标签

权重

  • 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中

    标签最重要，

    标签此重要，以此类推

  • h1在整个html中的权重非常高，内部应该放置HTML中最重要的内容，比如logo
  • h1由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个h1，反而降低权重。约定俗成的，一个页面中只会出现一个h1

段落标签

  • 段落是通过

    标签进行定义的

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

换行标签


  • （breaking）标签是HTML中的一个简单的换行符

  • 标签是一个单标签

文本格式化

  • HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
  • 但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，css负责格 式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和XHTML1.0 transitional版本中依旧可以使用。

文本格式化标签均为双标签，且为文本级标签，内部只能书写文字


格式化标签.png

图像

  • 图像（image）由标签进行定义
  • 标签是单标签，本身相当于一个特殊的文本
  • 标签的作用是在指定位置插入一张图片
  • 在HTML文件，常用的插入图片的类型有：jpg、png、gif

img标签常用属性展示：


img属性.png

上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。

音频和视频

音频标签

  • 音频使用
  • 同图片一样，需要使用src属性设置音频查找的路径
  • 音频文件支持的格式包括：.mp3、.ogg、.wav

视频标签

  • 视频使用
  • 使用src属性设置视频查找的路径
  • 视频文件支持的格式包括: .mp4、.ogg、.webm

超级链接标签

href属性
href全称hypertext reference，超文本引用，用于规定链接的目标地址。
属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。
href属性非常重要，标签要想实现点击跳转，必须设置该属性，拥有这个属性标签在 鼠标移上时才会显示一个小手指针状态。

target属性

  • 使用target 属性，可以定义被链接的文档在何处跳转显示。
  • 属性值有两种：
    • _self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
    • _blank：空白的，表示跳转的页面在新窗口打开。

title属性
title设置的是鼠标悬停时的提示文本，与标签类似。
属性值：自定义的文字内容。
该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。

锚点跳转
页面内锚点跳转

  • 这种跳转方式实现的是从某个位置跳转到同页面的另一个位置
  • 制作方法分为两个步骤，分别是设置锚点、添加链接

1 设置锚点
设置锚点，也就是设置跳转目标位置，有两种设置方式
①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。 id的属性值自定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写
②在目标位置添加一个空的标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。

列表

  • 列表用于制作HTML中的一系列项目。
  • 通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。
  • 根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表。

无序列表
无序列表需要两个标签参与，分别是

    和
  • 。
    ul：unordered list，表示定义一个无序列表的大结构。
    li: list item 列表项，定义的是无序列表内的某一项
      和
    • 是嵌套关系，快捷键：ul>li。
      一个列表中可以有任意个列表项。

      有序列表
      有序列表的语法与无序列表非常类似，只是在语义上有差异。
      有序列表由两个标签组成，分别是

        和
      1. 。
        ol：ordered list，表示定义一个有序的列表的大结构
        li：list item，定义的是有序列表的每一项。
          和
        1. 是嵌套关系，快捷键：ol>li。
            标签内部可以嵌套任意多个
          1. 标签。

            定义列表标签
            自定义列表不仅仅是一列项目，而是项目及其注释的组合。
            由三个标签组成完整的结构，包含

            、
            和
            。
            dl：definition list，表示定义一个自定义列表的大结构。
            dt：definition term，表示定义自定义列表中的一个主题或者术语。
            dd：definition description，定义解释项，表示描述或解释前面的定义主题。
            内部只能嵌套
            和
            ，
            与
            是同级关系。

            布局标签

            和标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签。
            和都是没有具体明确的语义的。
            div：全称division，分割、区域、跨度的意思。俗称大盒子。
            是双标签，是最经典的容器级标签，内部可以放置任意内容。
            作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用
            包裹起来，整体设置大的布局效果。
            标签

            • span：小区域、小跨度的意思。俗称小盒子。
            • 也是双标签，容器级标签。
            • 作用：在不改变整体效果的情况下，可以辅助进行局部调整。

            表格

            基础

            • 创建一个简单的表格至少有三个标签组成，分别是、、
              标签。
              table：表格，定义的是整个的表格大结构。
              tr：table rows，表格的行，定义的是表格由多少行组成。
              td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。
            • 三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。

              • 的属性
              标签可以添加border边框属性。
              表格的单元格之间有默认的空隙，会导致双线边框。
              解决方法：设置标签样式属性style。
              属性值：border-collapse : collapse; 表示边框塌陷。

              合并单元格

              • 表格的单元格可以进行合并，通过
              和的两个属性可以进行合并设置。
            • rowspan：跨行和并。上下的合并。
            • colspan：跨列合并。左右的合并。
            • 属性值：数字，数字是几表示跨几行或跨几列合并。

              • 分区标签

              • 内部最直接的子级包含四个分区标签，他们都是双标签。
                caption：表格的标题，内部书写标题文字。
                thead：table head，表格的头部。内部嵌套tr>th。
                tbody：table body，表格的主体。内部嵌套tr>td。
                tfoot：table foot，表格的页脚。内部嵌套tr>td。
              • 四个分区可以选择性的进行组合。
              • 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。

                • 表单

                组成

                • HTML 表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。
                • 在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。

                功能
                表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处
                理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
                提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
                表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提
                交按钮、重置按钮等。

                表单域form

                • HTML表单域使用
                  标签进行定义。
                • 标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个标签之内。
                • 标签为双标签，容器级标签。

                表单域标签属性

                • 标签通过对应属性规定提交数据的方法和提交位置。


                  表单属性.png

                input标签

                • 标签是最重要的一个表单元素。
                • 标签为单标签，本身相当于一个特殊的文本。

                • 标签需要通过标签属性实现各种功能。


                  input属性.png

                单选框：radio
                标签的type属性值为radio。
                定义提供用户点击选择的单选框。
                单选框一般都是成组出现，多个单选框组成一组选择的情况。
                同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性
                值实现。

                按钮
                标签有四种形式的按钮：

                image.png

                文件上传：file
                标签的type属性值为file。
                定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。

                使用input的multiple属性，可以决定是否可以选择多个文件。

                文本域