16- HTML

1 HTML入门

1.1 初识HTML

1.1.1 概述

参考网站： MDN社区 https://developer.mozilla.org/zh-CN/docs/Learn/HTML
菜鸟教程 https://www.runoob.com/html/html-tutorial.html
网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。

  • 网页的构成
    • HTML：通常用来定义网页内容的含义和基本结构。
    • CSS：通常用来描述网页的表现与展示效果。
    • JavaScript：通常用来执行网页的功能与行为。

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。

所谓超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。

所谓标记Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。

  • HTML发展简史【了解】
    • HTML 1.0在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
    • HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
    • HTML 3.2——1997年1月14日，W3C推荐标准
    • HTML 4.0——1997年12月18日，W3C推荐标准
    • HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
    • HTML5 —— 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML5的支持。

扩展资料：
w3c是万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定web相关标准的制定。

1.1.2 HTML的组成

HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。

1）标签

一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。 例如：

<h1>今天是个好日子</h1>

在HTML中，<h1>标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

显示效果如下：

2）属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值 成对的形式出现，比如：name='value'。例如：

<h1 align="center">今天是个好日子!!!</h1>

2）页面说明

  1. <!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。

    文字作为了解资料

    很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，能自动检测错误和其他有用的东西。使用如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。

  2. <html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。

  3. <head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head> 元素的内容。目前主要了解两个标签：

    1. <meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。
    2. <title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。

  4. <body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。

1.2.2 案例实现

  1. 在初始化页面的 <body>标签中，加入一对<p> 标签。<p>标签表示文本的一个段落，具有整段文本之间相分离的效果。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>页面标题</title>
  </head>
  <body>
  </body>
</html>



2. 在一对`<p>` 标签中，编写文本内容。

   ```html
   
   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
       <title>页面标题</title>
     </head>
     <body>
       <p>这是第一个页面</p>
     </body>
   </html>

1.3 总结

  • HTML是一种标记语言，用来组织页面，使用元素和属性。

  • 这个元素的主要部分有：

  1. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
  2. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  3. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  4. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
  5. 属性（Attribute）：标签的附加信息。
  • 在学习HTML时，要抓住两个方面：
  1. 掌握标签所代表的含义。
  2. 掌握在标签中加入的属性的含义。

2 基本语法

2.1 关于注释

如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释。

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来， 比如：

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->

2.2 关于标签

2.2.1 空元素

不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例子如下：

第一行文档<br/>
第二行文档<br/>

2.2.2 嵌套元素

你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调第一个，可以将<b>标签包围第一个，这样b标签就是嵌套在了p标签中：

<p>这是<b>第一个</b>页面</p>

2.2.3 块级和行内

1）概念

在HTML中有两种重要元素类别，块级元素和内联元素。

  • 块级元素：

    独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。

  • 行内元素

    行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如<b>，<a>，<i>，<span> 等。

    注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

2）div和span

  • <div> 是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。

  • <span> 是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。

    注意：div和span在页面布局中有重要作用。

2.3 关于属性

【重点讲解】

属性作为HTML的重要部分，这里强调属性的格式和作用。

标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。

  • 属性名：同一个标签中，属性名不得重复。

  • 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。

  • 引号：双引号是最常用的，不过使用单引号也没有问题。

  • 常用属性：

    属性名 作用
    class 定义元素类名，用来选择和访问特定的元素
    id 定义元素唯一标识符，在整个文档中必须是唯一的
    name 定义元素名称，可以用于提交服务器的表单字段
    value 定义在元素内显示的默认值
    style 定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）

2.4 特殊字符

了解讲解：

内容简单，迅速带过。

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;
空格 &nbsp;

2.5 总结

HTML的基本语法比较简单，在使用的过程中注意写法即可。

3 HTML案例-新闻文本

重点讲解：

  1. div布局的基本方式
  2. 文本标签的基本使用

文本结构的页面基本是由标题和段落构成的，内容结构化会使读者的阅读体验更轻松。

3.1 案例效果

显示新闻文本。

3.2 案例分析

3.2.1 div样式布局

文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。

在head标签中，通过style标签加入样式。

基本格式：

格式:
<style>
    标签名{
        属性名:属性值;
    }
</style>

多个属性名格式：

<style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

效果如下：

3.2.2 文本标签

使用文本内容标签设置文字基本样式。

标签名 作用
p 表示文本的一个段落
h 表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低
hr 表示段落级元素之间的主题转换，一般显示为水平线
li 表示列表里的条目。
ul 表示一个无序列表，可含多个元素，无编号显示。
ol 表示一个有序列表，通常渲染为有带编号的列表
em 表示文本着重，一般用斜体显示
strong 表示文本重要，一般用粗体显示
font 表示字体，可以设置样式（已过时）
i 表示斜体
b 表示加粗文本

【建议】

文本标签，建议视频老师根据PPT，准备材料，简单演示即可。

重点演示li的不换行效果：

li{    display: inline; 		// 内联样式,有宽度,无高度}
li{    display: inline-block; 	// 内联样式,有宽度,有高度}

3.3 使用标签

  1. 简单布局，使用div标签。
  2. 文本样式，使用基本文本标签。

3.4 实现步骤

  1. 创建初始页面。
  2. 使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
  3. 编辑正文。
    1. 使用h1标签加入标题。
    2. 使用em标签加入作者信息。
    3. 使用hr标签加入分割线。
    4. 使用h3标签加入副标题。
    5. 使用p标签加入正文。
    6. 使用ol标签，li标签加入列表信息。
    7. 使用strong标签，加入文字强调效果。

所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。

2）浮动布局和清除

主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入浮动 属性。

  • 概念

    float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。

    格式：

    <!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动

<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
  1. 加入三部分div
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
  1. 浮动布局
        .left{
            width: 20%;
            float: left;
        }

        .center{
            width: 59%;
            float: left;
        }


        .right{
            width: 20%;
            float: left;
        }

至此完成左中右三部分的布局。

  1. 加入footer 部分
   .footer{
      border: 5px solid blue;
    }
    <div class="footer">footer</div>

5.2.1 表单标签

标签名 作用 备注
form 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器

举例：

<form >
    //表单元素
</form>

表单的属性

属性名 作用 备注
action 处理此表单信息的Web服务器的URL地址
method 提交此表单信息到Web服务器的方式 可能的值有get和post，默认为get
autocomplete 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 HTML5

举例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>

GET与POST说明：

post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。

get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符，然后这样得到的 URI 再发送给服务器。

GET与POST对比：

地址栏可见 数据安全 数据大小
GET 可见 不安全 有限制（取决于浏览器）
POST 不可见 相对安全 无限制

5.2.2 表单元素入门

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

标签名 作用 备注
**label ** 表单元素的说明，配合表单元素使用 for属性值为相关表单元素的id属性值
input 表单中输入控件，多种输入类型，用于接受来自用户数据 type属性值决定输入类型
button 页面中可点击的按钮，可以配合表单进行提交 type属性值决定按钮类型

1）简单的文本输入框

  • label标签：表单的说明。

    • for属性值：匹配input标签的id属性值

  • input标签：输入控件。

    • type属性：表示输入类型，text值为普通文本框
    • id属性：表示标签唯一标识
    • name属性：表示标签名称
    • value属性：表示标签数据值

代码实现：

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
</form>

2）提交用户名的表单

  • button标签：表示按钮。
    • type属性：表示按钮类型，submit值为提交按钮。
<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
  <button type="submit" >login</button>
</form>

5.2.3 关于属性值

1）NAME和VALUE属性

属性名 作用
name <input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值
value 这个<input>元素当前的值，允许用户通过页面输入

使用方式：

以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用&进行分隔。

举例：

2）TYPE属性

  • input标签的type属性

    【建议】

    这是今天的重点讲解内容，type的值决定输入的类型

    • 基本的文本属性
    属性值 作用 备注
    text 单行文本字段
    password 单行文本字段，值被遮盖
    email 用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验 HTML5

    举例：

      <form action="#" method="get">
      <label for="username">Username:</label>
      <input type="text" id="username"  name="username"> <br/>
  
      <label for="password">Password:</label>
      <input type="password" id="password"  name="password"><br/>
  
      <label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <input type="email" id="email"  name="email"><br/>
      <button type="submit"> login</button>
  </form>

    • 单选多选属性

      属性值 作用
      radio 单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。
      checkbox 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器

      举例：

      <form action="#" method="get">
    <label for="gender">性别:</label>
    <input type="radio" id="gender" name="gender" value="boy"/>男
    <input type="radio" name="gender" value="girl" checked="checked"/>女

    <hr/>
    <label for="hobby">爱好: </label>
    <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
    <input type="checkbox"  name="hobby" value="tech"/> 科技
    <input type="checkbox" name="hobby" value="fun" /> 娱乐
    <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>

      1573090505218

    • 按钮属性

      属性值 作用
      button 无行为按钮，用于结合JavaScript实现自定义动态效果
      submit 提交按钮，用于提交表单数据。
      reset 重置按钮，用于将表单中内容恢复为默认值。
      image 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

    • HTML5新增的type值

      属性值 作用 备注
      date HTML5 用于输入日期的控件 年，月，日，不包括时间
      time HTML5 用于输入时间的控件 不含时区
      datetime-local HTML5 用于输入日期时间的控件 不包含时区
      number HTML5 用于输入浮点数的控件
      range HTML5 用于输入不精确值控件 max-规定最大值
      min-规定最小值
      step-规定步进值
      value-规定默认值
      search HTML5 用于输入搜索字符串的单行文本字段 可以点击x清除内容
      tel HTML5 用于输入电话号码的控件
      url HTML5 用于编辑URL的字段 可以校验URL地址格式
属性值 作用 备注
file 此控件可以让用户选择文件，用于文件上传。 使用 accept 属性可以定义控件可以选择的文件类型。
hidden 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值

  • button标签的type属性

    属性值 作用 备注
    submit 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 同 <input type="submit"/>
    reset 此按钮重置所有组件为初始值。 同<input type="reset"/>
    button 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 同<input type="button"/>

3）HTML5新增属性

属性名 作用 备注
placeholder 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required 这个属性指定用户在提交表单之前必须为该元素填充值 1. 布尔属性，可省略属性值表示true
2. 当type属性是hidden,image或者button类型时不可使用
autocomplete 自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 1. 开启为on，关闭为off
2. 可以设置指定的字段为off，关闭自动补全

5.2.4 更多表单元素

标签名 作用 备注
**select ** 表单的控件，下拉选项菜单 与option配合实用
optgroup option的分组标签 与option配合实用
**option ** select的子标签，表示一个选项
textarea 表示多行纯文本编辑控件 rows表示行高度， cols表示列宽度
fieldset 用来对表单中的控制元素进行分组(也包括 label 元素)
legend 用于表示它的fieldset内容的标题。 fieldset 的子元素
posted on 2023-07-22 13:13  kuailedetanger  阅读(52)  评论(0)    收藏  举报