HTML

HTML+CSS基础知识。

HTML4

1.课前简介

  • 什么是前端开发,前端开发能做什么

前端开发能做各种网页,小程序,小游戏,可视化系统,以及现在可以做后端的服务器。

  • 学习的路线

    基础部分为HTML +CSS+JavaScript,三个最基础的技术,只有将这些知识扎实才能为后续的知识搭建好基础。

  • 如何学习

    课时认真听讲+自己知识点梳理+笔记+练习

1.1 前序知识

  • 计算机的二位祖师爷

图灵,破译了二战时期德国的英格玛,时至今日,历史学家统计,图灵让二战提前结束你两年,如今设置图灵奖,作为计算机的最高的奖项。图灵机可以让机器让机器随着人的指令进行运算,(提前将指令录入机器,让机器按照指令进行运算,图灵是如今的人工智能之父。

冯洛伊曼制定了现代的计算机的标准,冯洛伊曼体系结构。

图灵冯洛伊曼

1.2计算机基础知识

  1. 计算机俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算、逻辑计算,还 具有存储记忆功能。
  2. 计算机由 硬件 + 软件 成: 硬件:看得见摸得着的物理部件。 软件:可以指挥硬件工作的指令。
  3. 软件的分类: 1. 系统软件:Windows、Linux、Android、Harmony 等。 2. 应用软件:微信、QQ、王者荣耀、PhotoShop 等。

计算机基础知识

1.3. C/S架构与B/S架构

  • 软件分为两大类,分别为B/S 和 C/S架构

    C => client(客户端)

    B => browser(浏览器)

    S => server(服务器)。 服务器 :为软件提供数据的设备(在背后默默的付出)。

    C/S架构,特点:需要安装、偶尔更新、不跨平台、开发更具针对性。

    B/S架构,特点:无需安装、无需更新、可跨平台、开发更具通用性。

  • 服务器与客户端之间的关系

    服务器就是一个中转站,存储软件的信息,提供服务,摸摸的支持软件。客户端就是面向用户。

  • 孰好孰坏?

    每一个架构都有自己的特点和优势,不同的特点和优势对应对应的使用方式,有差别,但是不能说谁好谁坏

  • 我们学习的都是哪个?

    前端工程师,主要负责编写 B/S架构中的网页(呈现界面、实现交互)。

    大前端时代,我们可以用前端的技术栈,做出一个C/S架构的应用、甚至搭建一个服 务器😎。(node.js express等基于js的后端框架实现服务器,echarts实现数据可视化)

1.4浏览器相关知识

  • 简介

浏览器是网页运行的平台,常见的浏览器有: 谷歌(Chrome) 、 Safari 、 IE 、 火狐(Firefox) 、 欧 朋(Opera) 等,以上这些是常用的五大浏览器。

  • 浏览器的市场份额

    当前浏览器的市场份额

    浏览器

  • 浏览器内核

    内核是浏览器的核心,用户处理浏览器所得到的各种资源,浏览器的内核相当于是人类的大脑。

    国内的各种浏览器都是用都国外的浏览器内核,只不过在这些内核的基础上添加了很多自己的东西,如QQ浏览器使用的就是chrome和IE的内核,360浏览器使用的内核也是如此。

1.5 网页相关概念

  1. 网址,www.baidu.com 我们在浏览器中输入的地址。

  2. 网页 通过网址到的网站的每一个页面

  3. 网站 多个网页构成一个网站

  4. 网页的标准

    plaintext
    1
    网页的标准就是要有结构  表现和 行为

    网页标准

2.HTML基础

2.1 HTML概念

全称:HyperText Markup Language(超文本标记语言)。

超文本:暂且简单理解为 “超级的文本”,和普通文本比,内容更丰富

plaintext
1
包含各种文本所没有的图片样式等等

标 记:文本要变成超文本,就需要用到各种标记符号。

js
1
2
文本想要变成超文本就需要各种标记,浏览器通过解析标记就能识别出我们具体所要展示的内容如
<h1>标题<h1>

语 言:每一个标记的写法、读音、使用规则,组成了一个标记语言。

  • 相关国际组织(了解,知道W3C就行)

    • IETF 全称:Internet Engineering Task Force(国际互联网工程任务组)
    js
    1
    成立于1985年底,是一个权威 的互联网技术标准化组织,主要负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网 技术标准均出自IETF。官网:https://www.ietf.org 2
    • . W3C 全称:World Wide Web Consortium(万维网联盟)
    js
    1
    ,创建于1994年,是目前Web技术领域,最具影 响力的技术标准机构。共计发布了200多项技术标准和实施指南,对互联网技术的发展和应用起到 了基础性和根本性的支撑作用,官网:https://www.w3.org
    • WHATWF 全称:Web Hypertext Application Technology Working Group(网页超文本应用技术工作小组)
    js
    1
    成立 于2004年,是一个以推动网络HTML 5 标准为目的而成立的组织。由OperaMozilla基金会、苹果, 等这些浏览器厂商组成。官网:https://whatwg.org/

2.2 准备工作

  • 安装chome浏览器
  • 安装一个编译器,Hbuider 或者 VScode都行
  • 使用记事本写一个最简单的网页

2.3 HTML标签

  1. 标签 又称 元素,是HTML的基本组成单位。
  2. 标签分为:双标签单标签 (绝大多数都是双标签)。

双标签

双标签

双标签示例

html
1
<h1>标签内容</h1>

单标签

单标签示例(输入框)

plaintext
1
<input/>
  1. 标签名不区分大小写,但推荐小写,因为小写更规范。
  2. 标签之间的关系:并列关系嵌套关系,可以使用 tab 键进行缩进:

2.4 HTML 标签属性

  1. 用于给标签提供 附加信息。

  2. 可以写在:起始标签 或 单标签中,形式如下:

    标签及标签的属性

    例如

    html
    1
    <input disabled type="text">
  3. 注意点

    1. 不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写,后面会详细 总结)。
    2. 属性名、属性值不能乱写,都是W3C规定好的。
    3. 属性名、属性值,都不区分大小写,但推荐小写。
    4. . 双引号,也可以写成单引号,甚至不写都行,但还是推荐写双引号。
    5. 标签中不要出现同名属性,否则后写的会失效,例如:
    html
    1
    <input type="text" type="password">

2.5 HTML 的基本结构

  • 基本结构图

    基本结构图

    代码

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    <head>
    <meta charset="utf-8">
    <title>网页的标签</title>
    </head>
    <body>
    在body 里面写内容
    </body>
    </html>
  • 基本结构

    1. 想要呈现在网页中的内容写在 body 标签中。
    2. head 标签中的内容不会出现在网页中。
    3. head 标签中的 title 标签可以指定网页的标题。

2.6 常用的代码编辑器

2.7 HTML注释

  • 简介

注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见。

作用:对代码进行解释和说明。注释就是对自己代码的解释和解释和说明,只能让开发人员开看到,浏览器不会解析出来。

  • 写法

    html
    1
    2
    3
    4
    <!-- 下面的文字只能滚动一次 -->
    <marquee loop="1">滚动效果</marquee>
    <!-- 下面的文字可以无限滚动 -->
    <marquee>你好</marquee>
  • 注意,注释不可以嵌套,以下这么写是错的(反例)。

    js
    1
    2
    3
    4
    <!--
    我是一段注释
    <!-- 我是一段注释 -->
    -->
  • 一般注释的快捷键 CTRL+/

2.8 文档声明

  • 简介

    作用就是告诉浏览器你写的是哪个版本的代码,一般来说现在有HTML4和HTML5 两个常用的版本。

  • 写法

    html
    1
    2
    3
    4
    5
    <!DOCTYPE html>

    <!DOCTYPE HTML>

    <!doctype html>
  • 注意:文档声明,必须在网页的第一行,且在 html 标签的外侧。

    这段也就是一个html的标准的结构

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>  -----这里就是文档声明  

    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <!-- 我是注释,我只能被自己看到,无法被浏览器解析到 -->
    <p>你好,你好好好爱护 </p>
    </body>
    </html>

3. 常用标签

3.1 排版标签

标签名称 标签含义
h1 ~ h6 标题
p 段落
div 没有任何含义,用于整体布局(生活中的包装袋)。

h1 最好写一个, h2~h6 能适当多写。

h1~h6 不能互相嵌套,例如: h1 标签中最好不要写 h2 标签了。

p 标签很特殊!它里面不能有: h1~h6 、 p 、 div 标签(暂时先这样记,后面会说规律)。

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>

<div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
</body>
</html>

3.2 标签的语义化

  • 概念:用特定的标签,去表达特定的含义。

  • 原则:标签的默认效果不重要(后期可以通过 CSS 随便控制效果),语义最重要!

  • 举例:对于 h1 标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。

  • 优势

    1. 代码结构清晰可读性强。

    2. 有利于 SEO(搜索引擎优化)。

    3. 方便设备解析(如屏幕阅读器、盲人阅读器等)。

3.3 块级元素和行内元素

  • 块级元素:独占一行(排版标签都是块级元素)。

  • 行内元素:不独占一行(目前只学了: input ,稍后会学习更多)。

  • 使用规则:

    1. 块级元素 中写 行内元素 和 块级元素(简单记:块级元素中几乎什么都能写)。
    2. . 行内元素 中写 行内元素,但不能写 块级元素。
    3. 一些特殊的规则
      • h1~h6 不能互相嵌套。
      • p 中不要写块级元素。

3.4 常用的文本标签

  1. 用于包裹:词汇、短语等。

  2. 通常写在排版标签里面。

  3. 排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。

  4. .文本标签通常都是行内元素。

    标签名 标签语义 单 / 双 标签
    em 要着重阅读的内容
    strong 十分重要的内容(语气比em要强)
    span 没有语义,用于包裹短语的通用容器

3.5 不常用的文本标签

不常用的文本标签

  1. 这些不常用的文本标签,编码时不用过于纠结(很少用,用的时候在找)。
  2. blockquote 与 address 是块级元素,其他的文本标签,都是行内元素。
  3. 有些语义感不强的标签,我们很少使用,例如: small 、 b 、 u 、 q 、 blockquote
  4. HTML标签太多了!记住那些:重要的、语义感强的标签即可;截止目前,有这些: h1~h6 、 p 、 div 、 em 、 strong 、 span

3.6图片标签

标签 名 标签 名 常用属性 单 / 双 标 签
img 图片 见下
  1. img的常用属性

src :图片路径(又称:图片地址)—— 图片的具体位置

alt :图片描述(图片因为某种原因展示不出来了就默认展示描述)

width :图片宽度,单位是像素,例如: 200px 或 200

height :图片高度, 单位是像素,例如: 200px 或 200

  1. 总结
  1. 像素( px )是一种单位,学到 CSS 时,我们会详细讲解。
  2. 尽量不同时修改图片的宽和高,可能会造成比例失调。
  3. 暂且认为 img 是行内元素(学到 CSS 时,会认识一个新的元素分类,目前咱们只知道: 块、行内)。
  4. alt 属性的作用: 搜索引擎通过 alt 属性,得知图片的内容。—— 最主要的作用。 当图片无法展示时候,有些浏览器会呈现 alt 属性的值。 盲人阅读器会朗读 alt 属性的值。
  1. 路径

    • 相对路径:以当前位置作为参考点,去建立路径

    相对路径

    相对路径中的 ./ 可以省略不写。

    相对路径依赖的是当前位置,后期若调整了文件位置,那么文件中的路径也要修改。

    • 绝对路径:以根位置作为参考点,去建立路径。
    1. 本地绝对路径: E:/a/b/c/奥特曼.jpg 。(很少使用)
    2. 网络绝对路径: http://www.atguigu.com/images/index_new/logo.png

    使用本地绝对路径,一旦更换设备,路径处理起来比较麻烦,所以很少使用。 使用网络绝对路径,确实方便,但要注意:若服务器开启了防盗链,会造成图片引入 失败。

  2. 常见的图片格式

    常见的图片格式

    常见的图片格式二

3.7超链接

  1. 主要作用:从当前页面进行跳转。可以实现:①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定 应用。

  2. 标签介绍

    标签 名 标签 名 常用属性 单 / 双 标 签
    a 超链接 见下

href : 指定要跳转到的具体目标。

target : 控制跳转时如何打开页面,常用值如下: _self :在本窗口打开。 _blank :在新窗口打开。

id : 元素的唯一 标识,可用于设置锚点。

name : 元素的名字,写在 a 标签中,也能设置锚点。

  1. 跳转到页面

    html
    1
    2
    3
    4
    <!-- 跳转其他网页 -->
    <a href="https://www.jd.com/" target="_blank">去京东</a>
    <!-- 跳转本地网页 -->
    <a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
  1. 代码中的多个空格、多个回车,都会被浏览器解析成一个空格!
  2. 虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!
  1. 跳转到文件

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
    <!-- 跳转到页面 -->
    <a href="./1.6不常用的文本标签.html">不常用的文本标签</a>

    <!-- 跳转到文件 支持跳转到图片 视频 pdf等浏览器支持的文件格式-->
    <a href="1.7路径/b/02.jpg">跳转到图片</a>

    <!-- 对于浏览器不能直接打开的文件 就会触发下载 -->

    <a href="./resource/内部资源.zip">内部资源</a>
    <!-- 强制触发下载 -->
    <a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
    </body>

    注意1:若浏览器无法打开文件,则会引导用户下载。

    注意2:若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称。

  2. 跳转锚点

    • 锚点就是网页中的一个标记的一个地点

    • 使用的方式

      1. 设置锚点

        具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点。

        name 和 id 都是区分大小写的,且 id 最好别是数字开头。

        js
        1
        2
        3
        4
        <!-- 第一种方式:a标签配合name属性 -->
        <a name="test1"></a>
        <!-- 第二种方式:其他标签配合id属性 -->
        <h2 id="test2">我是一个位置</h2>
      2. 跳转锚点

        html
        1
        2
        3
        4
        <!-- 跳转到test1锚点-->
        <a href="#test1">去test1锚点</a>
        <!-- 跳到本页面顶部 -->
        <a href="#">回到顶部</a>
      html
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <!-- 超链接的锚点的跳转 -->
      <a href="#three" name="top">跳到三张图的位置</a>

      <p>我是第一张图</p>
      <img src="1.7路径/a/1.jpg" alt="">

      <p>我是第二张图</p>
      <img src="1.7路径/a/1.jpg" alt="">

      <a name="three"></a>
      <p>我是第三张图</p>
      <img src="1.7路径/a/1.jpg" alt="">

      <a href="#top">回到顶部</a>
      <p>我是第=四张图</p>
      <img src="1.7路径/a/1.jpg" alt="">
  3. 唤起指定的应用

    通过a标签,可以唤起设备应用程序

    html
    1
    2
    3
    4
    5
    6
    7
      <!-- 唤起设备拨号 -->
    <a href="tel:10010">电话联系</a>
    <!-- 唤起设备发送有件 -->
    <a href="mailto:1552312346@qq.com">邮件联系</a>
    <!-- 唤起设备发送短信 -->
    <a href="sms:10086">发送短信</a>
    </body>

3.8 列表

  1. 有序列表

    概念:有顺序或者侧重顺序的列表

    html
    1
    2
    3
    4
    5
    6
    <h2>要把大象放冰箱总共分几步</h2>
    <ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
    </ol>
  2. 无序列表

    概念:无顺序或不侧重顺序的列表

    html
    1
    2
    3
    4
    5
    6
    7
    <h2>我想去的几个城市</h2>
    <ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
    </ul>
  3. 自定义列表

    • 概念:所谓自定义列表,就是一个包含术语名称以及术语描述的列表。

    • 一个 dl 就是一个自定义列表,一个 dt 就是一个术语名称,一个 dd 就是术语描述(可以有多 个)。

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <h2>如何高效的学习?</h2>
    <dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版,也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码,才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常,改正后并记住,就是经验</dd>
    </dl>
  4. 列表相关的注意事项

    1. 有序列表和无序列表包裹的一定是li,如果是其他的标签就没有效果
    2. 不能单独的写列表项 li li 标签最好写在 ul 或 ol 中,不要单独使用。
    3. 自定义列表里面一个术语可以有多个术语描述
    4. 列表是可以嵌套使用的
  5. 列表嵌套

    概念:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把解构写完整)。、

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <h2>我想去的几个城市</h2>
    <ul>
    <li>成都</li>
    <li>
    <span>上海</span>
    <ul>
    <li>外滩</li>
    <li>杜莎夫人蜡像馆</li>
    <li>
    <a href="https://www.opg.cn/">东方明珠</a>
    </li>
    <li>迪士尼乐园</li>
    </ul>
    </li>

    <li>西安</li>
    <li>武汉</li>
    </ul>

3.9 表格

  1. 基本结构:表格标题、表格头部、表格主体、表格脚注,四部分组成。

    表格结构

  2. 表格涉及到的标签

    table :表格

    caption :表格标题

    thead :表格头部

    tbody :表格主体

    tfoot :表格注脚

    tr :每一行

    th 、 td :每一个单元格(备注:表格头部中用 th ,表格主体、表格脚注中用: td )

    表格详细结构

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!-- 表格 -->
    <table>
    <!-- 表格标题 -->
    <countup>我是表格的标题</countup>
    <!-- 表格头部 -->
    <thead>
    <tr>
    <th>姓名</th>
    <th>学号</th>
    <th>年龄</th>
    </tr>

    </thead>

    <!-- 表格主体 -->
    <tbody>
    <tr>
    <td>张三</td>
    <td>10010</td>
    <td>18</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>10010</td>
    <td>18</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>10010</td>
    <td>18</td>
    </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
    <tr>
    <td>脚注1</td>
    <td>脚注2</td>
    <td>脚注3</td>
    </tr>
    </tfoot>
    </table>
  3. 表格属性

    表格属性

    表格属性

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <body>
    <!--
    border=”1“ 就是让表格有一个一像素的边框,如果border>1 只对最外层的边框起作用
    cellspacing="x" 就是设置表格单元格之间的间距为多少个像素,如果为0 的话就有合并单元格的效果
    width="500px" height="300px" 设置表格的最小高度和宽度,脚注和头部和脚注的高度是不变的
    -->
    <table border="1" cellspacing="0" width="500px" height="300px">
    <countup>我是表格的标题</countup>

    <!--
    height:设置表格头部的高度
    align: 水平方向上的对齐方式
    valign: 垂直方向上的对齐方式
    -->
    <thead align="center" valign="center" height="100px">
    <tr>
    <!--
    width :设置单元格的宽度,同列所有单元格全都受影响。
    heigth :设置单元格的高度,同行所有单元格全都受影响。
    align :设置单元格的水平对齐方式。
    valign :设置单元格的垂直对齐方式。
    rowspan :指定要跨的行数。
    colspan :指定要跨的列数。
    -->
    <th>姓名</th>
    <th>学号</th>
    <th>年龄</th>
    </tr>

    </thead>


    <!--
    height:设置表格头部的高度,受到table高度的影响,如果整体的高度不足table的最低的高度,那么设置出来是没有效果的
    align: 水平方向上的对齐方式
    valign: 垂直方向上的对齐方式
    -->
    <tbody height="200">
    <tr>
    <td>张三</td>
    <td>10010</td>
    <td>18</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>10010</td>
    <td>18</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>10010</td>
    <td>18</td>
    </tr>
    </tbody>

    <!--
    height:设置表格头部的高度,受到table高度的影响,如果整体的高度不足table的最低的高度,那么设置出来是没有效果的
    align: 水平方向上的对齐方式
    valign: 垂直方向上的对齐方式 -->
    <tfoot>
    <tr>
    <td></td>
    <td></td>
    <td>月薪:10w</td>
    </tr>
    </tfoot>
    </table>
    </body>
  4. 跨行跨列

    1. rowspan :指定要跨的行数。
    2. colspan :指定要跨的列数。

    课程表

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨行和跨列</title>
    </head>
    <body>
    <table border="1">
    <caption>xxx班级课程表</caption>
    <thead>
    <tr>
    <th>1-1</th>
    <th colspan="5">1-2</th>
    <th colspan="2">1-8</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td rowspan="5">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>
    <td rowspan="5">2-8</td>
    </tr></tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>

    </tr></tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>

    </tr></tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>

    </tr></tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>

    </tr></tr>
    <tr>
    <td rowspan="3">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>
    <td>2-8</td>
    </tr></tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>
    <td>2-8</td>
    </tr></tr>
    <tr>

    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
    <td>2-6</td>
    <td>2-7</td>
    <td>2-8</td>
    </tr></tr>
    </tbody>
    </table>
    </body>
    </html>

3.10 常用标签补充

常用标签补充

4. 表单


4.1 表单基本结构及概念

概念:表单就是一个包含交互的区域,用于收集用户提供的信息。

表单基础

实例代码

html
1
2
3
4
5
6
<body>
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
</body>

4.2表单的常用控件(重点掌握)

form1

form2

form3

form4

from5

form6

为什么要有隐藏域?用户都看不到,要这个隐藏域干嘛?

很多时候,在注册的页面,很多技术人员都使用脚本来批量注册账号,用来实现一些非法的目的,通常, 这些输入的信息,都是写脚本的人员用看了以后写的脚本,但是由于隐藏域是用户看不到的,这些技术人员就没办法知道隐藏域具体发送了哪些信息就没办法批量的注册。

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
<form action="https://www.baidu.com/s" target="_blank" method="get">
<!-- type 类似, name: 数据的名称 value:默认的值 -->

<!-- 文本输入框 -->
账号:<input type="text" name="msgname" valid="admin" maxlength="10"><br><br>
<!-- 密码输入框 -->
密码:<input type="password" name="pwd" valid="password" maxlength="10"><br><br>
<!-- 单选框 -->
性别:<input type="radio" name="sex" value="men"><input type="radio" name="sex" value="women"></input>
<br><br>
<!-- 多选框 -->
爱好:
<input type="checkbox" name="aihao" valid="smoke">抽烟
<input type="checkbox" name="aihao" valid="drink">喝酒
<input type="checkbox" name="aihao" valid="tang">烫头

<!-- 隐藏域 -->
<input type="hidden" name="tag" value="100">
<br>
<!-- 文本域 -->
详细地址:<br>
<textarea name="msg" rows="3" cols="22">我是文本域</textarea>
<br><br>

<!-- 下拉框 -->
家庭住址
<select name="form">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
<option value="深圳">深圳</option>
</select>
<br>
<!-- 两种重置的方法 -->
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
<!-- 这种不写任何类型的按钮就相当于是重置的按钮 -->
<button>去百度搜索</button>

<!-- 这种就是普通的按钮 -->
<button type="button">普通按钮</button>
</form>
</body>

4.3form 小结

总结

4.4框架标签

框架标签

html
1
2
3
<body>
<iframe width="500px" height="300px" src="https://wang-yingqiang.gitee.io/wangyingqiang/2019/10/10/HTNL-CSS/#3-%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE" frameborder="1"></iframe>
</body>

4.5HTML 实体


在 HTML 中我们可以用一种特殊的形式的内容,来表示某个符号,这种特殊形式的内容,就是 HTML 实 体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须 在 HTML 源码中插入字符实体。

字符实体由三部分组成:一个 & 和 一个实体名称(或者一个 # 和 一个实体编号),最后加上一 个分号 ; 。

常见的一些实体

实体

4.6HTML全局属性


常用的全局属性及意义

全局属性

完整的全局属性及意义

4.7meta信息


meta

5.HTML小结

小结

HTML5

HTML5 简介

  1. 什么是HTML5

HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟( W3C )完成标准制定。

官网地址:

W3C 提供: https://www.w3.org/TR/html/index.html

WHATWG 提供:https://whatwg-cn.github.io/html/multipage

HTML5 在狭义上是指新一代的 HTML 标准,在广义上是指:整个前端。

  1. HTML5 优势
  1. 针对 JavaScript ,新增了很多可操作的接口。
  2. 新增了一些语义化标签、全局属性。
  3. 新增了多媒体标签,可以很好的替代 flash 。
  4. 更加侧重语义化,对于 SEO 更友好。
  5. 可移植性好,可以大量应用在移动设备上。

3.HTML5兼容性

支持: Chrome 、 Safari 、 Opera 、 Firefox 等主流浏览器。

IE 浏览器必须是 9 及以上版本才支持 HTML5 ,且 IE9 仅支持部分 HTML5 新特性

新增布局标签

  1. 新增布局标签

    HTML

  2. 新增状态标签

  • meter 标签

语义:定义已知范围内的标量测量。也被称为 gauge (尺度),双标签,例如:电量、磁盘用量等。说白了就是手机电量的显示。

mater

html
1
<meter max="100" min="0" high="80" low="20" value="30"></meter>

high=”80” low=”20”就是规定正常的值是多少,如果是处于这个正常的值就是绿色,大于或者小于这个值都是警告的状态

max=”100” min=”0” 最大值最小值是多少

value 当前的值

  • progress 标签

语义:显示某个任务完成的进度的指示器,一般用于表示进度条,双标签,例如:工作完成进度

进度

新增列表标签

datalist :用于搜索框的关键字提示

html
1
2
3
4
5
6
7
<input type="text" list="mydata">
<datalist id="mydata">
<option value="周冬雨">周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦">温兆伦</option>
<option value="马冬梅">马冬梅</option>
</datalist>

新增注音标签

给小朋友写网站要用,喜欢编程并且喜欢小孩的可以学

ruby :包裹需要注音的文字

rt :写注音, rt 标签写在 ruby 的里面

html
1
2
3
4
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby

新增表单标签

  • 表单控件新增属性

    表单

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        <form action="#">
    <!-- -----------提示用户输入------------ -->
    <input type="text" placeholder="请输入账号">
    <textarea cols="30" rows="10" placeholder="请输入描述信息"> </textarea>
    <!-- ------------用户必须输入------------- -->
    <input type="text" required>
    <input type="radio" name="sex" required>
    <input type="radio" name="sex" required>

    <!-- 自动获取焦点 -->
    <input type="text" autofocus>

    <button>提交</button>
    </form>
    </body>
  • input 新增属性值

    input

新增多媒体标签

  • 视频标签

    video 标签用来定义视频,它是双标签

    html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    video{
    height: 400px;
    width: 600px;
    }
    </style>
    </head>
    <body>
    视频静音了才能自动播放, 主要是为了防止一刀999
    <video src="1.mp4" controls autoplay loop poster="2.png"></video>
    </body>

    </html>
  • 音频标签

    audio 标签用来定义音频,它是双标签。

    音频