html学习之道

最新推荐文章于 2024-07-08 18:51:22 发布

奔跑的飞

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量1.3k

点赞数 1

分类专栏： html学习之道文章标签：前端 html

本文链接：https://blog.csdn.net/sinat_29421531/article/details/121594999

版权

html学习之道专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

万维网概述（www）

万维网是基于超文本（超文本、超媒体、超文本传输协议）信息系统处理文字，图像，声音和视频等的综合。

超文本hypertext

超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。

超媒体（hypermedia）

超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合，有了超媒体用户不仅能从一个文本跳到另一个文本，而且可以显示图像、播放动画、音频和视频等。

超文本传输协议（HTTP）

超文本传输协议是超文本在互联网上的传输协议

HTML语言

html全程超文本标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的internet资源链接为一个逻辑整体。

网页设计相关概念

超链接

1.内容链接属于一个网页的一部分，允许同其他网页站点之间进行链接；
2.网页链接在一起构成网站，从一个网页指向一个目标的连接关系；
3.相同网页上的不同位置、图片、电子邮箱地址；
4.一个文件、一个应用程序、用来链接的对象、一段文本、一个图片等

统一资源定位器（url）

描述internet上网页的资源，其他资源的地址标识方法

网站（website）

在因特网上根据一定的规则使用html制作相关网页的集合。
衡量网站的性能：网站空间大小、网站位置、网站连接速度（网速）

网页

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

HTML概述

网页的本质

HTML就是用来制作网页文件的。
浏览器查看的网页都是.html或.htm文件
HTML叫做超文本标记语言（Hypertext Markup Language），用于搭建网

页的结构。

网页的组成（一）

• 前端三层：HTML（结构层）、css（样式层）、JavaScript（行为层）。

网页的组成（二）

• 其他多媒体内容：图片、视频、音频、超级链接等。
• 所有的网页文件都是真实的、物理存在的文件。

互联网运行过程

将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果。

主流浏览器

主流的Web页面浏览器有：微软的IE和Microsoft Edge、Mozilla的Firefox、苹果公司的Safari、
Google的Chrome及Opera软件公司的Opera。
主流浏览器内核
• 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，对网页的渲染效果会有差异。

浏览器	渲染引擎（内核）	说明
IE/Edge	Trident	IE内核
FireFox	Gecko	Firefox内核
Safari	Webkit
Chrome	Webkit->Bink	Chrome内核
Opera	Presto->Webkit->Bink

HTML基本语法

HTML标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。标签在书写和使用过程中，必
须遵循特定的语法
HTML标签语法
1.标签名必须书写在一对尖括号<>内部

<html></html>

2.标签分为单标签和双标签，双标签必须成对出现。

<p></p> // 双标签

 // 单标签

3.双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签
也需要进行自封闭书写。

<div></div>

HTML元素

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

<p>一段文字内容</p>

元素内容

1.元素内容可以是纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套了p标签元素

<div><p>div元素内部嵌套元素</p></div>

2.一个HTML元素div的内容可能是多个其他元素组成，例如p和h1，此时我们习惯称div是p和h1的父级元素，p和h1是div的子级元素，而p和h1属于同级元素，这种嵌套关系可以有多层。

<div>
<p>div元素内部嵌套p元素</p>
<h1>div元素内部嵌套的h1元素</h1>
</div>

3.单标签是不能添加元素内容的，可以称为空元素。

标签级别

根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。

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

HTML基本结构

基本骨架

<html>
  <head>
    <title>标题</title>
  </head>
  <body>
      主体
  </body>
</html>

`<html>`标签

• 作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在<html>标签内部。

`<head>`标签

• 作用：用于存放 <meta> , <base> , <style> , <script> , <link>。内部用于对网页的设置，除了<title>内部的文字，其他标签都不显示在浏览器上。

`<title>`标签

• 作用1：让页面拥有一个属于自己的标题。
• 作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
• 作用3：内部的内容会显示在搜索结果的标题部分。
• 作用4：作为浏览器收藏夹默认的网页标题。
• 建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字

`<body>`标签

• 作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签<p>,<h1>,<a>,<div>等。
• 内部的元素内容会显示在浏览器的窗口中

`DTD`

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

不同版本的DTD

XHTML1.0版本

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

HTML5版本

<!DOCTYPE html>

命名空间

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

XHTML1.0版本

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>

HTML5版本

<html lang="en">
</html>

命名空间xmlns
• 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：集合。

XHTML1.0版本

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5版本

<meta charset="UTF-8">

常用字符集编码

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

字符集常见问题
使用情况建议：
1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。
注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出
现两个字库不匹配，浏览器加载时出现乱码。

HTML常用标签

注释语法

在很多代码技术中都可以添加注释内容，我们也可以向 HTML 源代码添加注释。
• HTML注释语法：

<!-- 书写注释内容 -->

注释的特点

注释只在源代码中可见，在浏览器窗口是不显示的。

用途

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

排版标签

1.标题标签(h1-h6)

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签
• <h1>定义最大的标题，<h6>定义最小的标题。
• <h1>-<h6> 标签都是双标签，且是容器级标签。
语义：1~6级标题，重要程度依次递减
权重：
• 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推。
• <h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
• <h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果
一个页面出现多个<h1>，反而降低权重。约定俗成的，一个页面中只会出现一个<h1>。
特点：
• 文字都有加粗
• 文字都有变大，并且从h1 → h6文字逐渐减小
• 独占一行

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

标题标签的作用：
标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。样式是由css设定的。
注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2.段落标签(`p`)

场景：在新闻和文章的页面中，用于分段显示
代码：
• 段落（paragraph）是通过

标签进行定义的。
• <p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等。
语义：段落
特点：
• 段落之间存在间隙
• 独占一行

<p>这是一个段落</p>

在这里插入图片描述

段落标签的作用：
<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。
换行的效果是由css决定的。

3.换行标签(`<br/>`)

场景：让文字强制换行显示
代码：标签是HTML中一个简单的换行符。标签是一个单标签。

在需要换行的位置可以使用
标签书写，但是
与<p>不同，
没有建立新的段落的语义，只是简单的进行强制换行。
语义：换行
特点：
• 单标签
• 让文字强制换行

<br/>

在这里插入图片描述

常规用法:
每一对儿<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义。

4.水平线标签`<hr/>`

场景：分割不同主题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：
• 单标签
• 在页面中显示一条水平线

<hr/>

在这里插入图片描述

文本格式化`<strong><ins><em><del>`

文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
场景：需要让文字加粗、下划线、倾斜、删除线等效果
语义：突出重要性的强调语境
推荐：
• strong、ins、em、del，表示的强调语义更强烈！

	  <p>
        <b>加粗</b>
        <u>下划线</u>
        <i>倾斜</i>
        <s>删除线</s>
      </p>
      <p>
        <strong>加粗</strong>
        <ins>下划线</ins>
        <em>倾斜</em>
        <del>删除线</del>
      </p>

在这里插入图片描述

媒体标签

1.图片标签(`<img/>`)

场景：在网页中显示图片
代码：图像（image）由标签进行定义。
• <img>标签是单标签，本身相当于一个特殊的文本。
• <img>标签的作用是在指定的位置插入一张图片。
• 在HTML文件，常用的插入图片的类型有：jpg、png、gif。
特点：
• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！

图片常用属性

在这里插入图片描述

图片标签的src属性和路径

属性名：src
属性值：是图片查找的路径。
路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。

相对路径

相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。
同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；

<img src="s01.jpg">

子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭
符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。

<img src="images/s2.png">
<img src="images/tupian/s3.jpg">

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

<img src="../../s04.jpg" />
<img src="../images/s01.jpg" />

绝对路径

绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。
盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到目标文件。

<img src="C:/Users/teacher/Documents/html/case/images/s02.png" />

网址形式：要查找的文件是来自网络资源，路径写法以http://开头

<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />

从盘符出发的绝对路径的缺点：
a.盘符出发的路径不可移植，不可移动。
b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。

路径实际应用
a.建议多使用相对路径，可以适当使用网址形式的绝对路径。
b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。

替换文本alt

属性名：alt
属性值：替换文本

当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

   <img src="" alt="这是图片"/>

提示文本title

属性名：title
属性值：提示文本
• 当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

<img src="s01.jpg" title="点击查看原网站">

边框borde

border：设置图片的边框。
属性值：数值，数值是几表示边框宽度为几像素。

<img src="smile01.jpg" border="20"/>

注意：border属性可以使用css进行设置，css中的边框有更多的设置效果。

图片标签的width和height属性

属性名：width和height
属性值：宽度和高度（数字）以px为单位的数值，或者省略px不写。
注意点：

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形

<img src="s1.jpg" width="200px">
<img src="s1.jpg" height="100px">
<img src="s1.jpg" width="200" height="100">

在这里插入图片描述

总结
标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利
于SEO搜索引擎优化。其他属性可以根据需求进行设置。

<img src="s1.png" alt="这是一张微笑的表情">

链接标签(`<a>`)

场景：点击之后，从一个页面跳转到另一个页面
代码：
• 在HTML中使用<a>标签可以创建链接。
• a全称anchor，锚的意思。
• <a>为双标签。
• 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
• <a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。
特点：
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

<a>链接内容</a>

链接标签的href属性

属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）

外部链接百度
内部链接目标

链接标签的target属性

属性名：target
属性值有两种：
• _self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口（覆盖原网页）。
• _blank：空白的，表示跳转的页面在新窗口打开（保留原网页）。

<a href="http://www.baidu.com" target="_blank">百度</a>

链接标签的title属性

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

<a href="smile.html" title="点击查看源网页"><img src="images/s2.png" /></a>

两种特殊的锚点跳转方法
超级链接的跳转效果不止包含跨页面的跳转，还包含锚点跳转的方式。

页面内锚点跳转

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

设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式。

<h2 id="mubiao">目标位置</h2>

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

<a name="mubiao"></a>

添加链接

链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者
#加a的name属性值

<a href="#mubiao">点击文本</a

跨页面锚点跳转

这种跳转方法综合了跨页面跳转和锚点跳转。制作方法也分为两个步骤，分别是设置锚点、添加链接。
第一步：设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name 属性。
第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id 。

<a href="new.html#mubiao">点击文本</a>

列表标签

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

无序列表标签

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
type”为无序列表的属性type的属性值有circle，disc ，quare含义分别为：空心圆，实心圆和实心正方形

     <ul>    
        <li>
          <h4>红楼梦</h4>
          <ul>
            <li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
          </ul>
        </li>
        <li>西游记</li>
        <li>水浒传</li>
        <li>三国演义</li>
     </ul>

注意事项
1.<ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写。
2.<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构.
3.无序列表的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的。
4.无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。

有序列表标签

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

标签。

    <ol type="1" start="5">
        <li>列表项1</li>
        <li>列表项1</li>
     </ol>

start的属性值为数值
type的属性值有1，a，A，i，I含义分别为：阿拉伯数字，小写英文字母，大写英文字母，小写罗马字母和大写罗马字母

自定义列表

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

<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>

总结：根据项目的内容不同，分别选择对应语义的列表结构：无序列表、有序列表、定义列表

<ul>    
        <li>
          <h4>红楼梦</h4>
          <ul>
            <li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
          </ul>
        </li>
        <li>西游记</li>
        <li>水浒传</li>
        <li>三国演义</li>
      </ul>

      <ol>
        <li>新闻1</li>
        <li>新闻2</li>
      </ol>

      <dl>
        <dt>配送方式</dt>
        <dd>上门自提</dd>
        <dd>211限时达</dd>
        <dd>配送服务查询</dd>
      </dl>

表格标签

表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签
• 创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、<td>标签。
table：表格，定义的是整个的表格大结构。
tr：table rows，表格的行，定义的是表格由多少行组成。
td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。
• 三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。

      <table>
        <tr>
          <td>111</td>
          <td>222</td>
          <td>333</td>
        </tr>
      </table>

表格相关属性

场景：设置表格基本展示效果
常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点： • 实际开发时针对于样式效果推荐用CSS设置
表格的单元格之间有默认的空隙，会导致双线边框。
解决方法：设置标签样式属性style。
属性值：border-collapse : collapse; 表示边框塌陷

表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认整体居中显示
th	表头单元格	表示一列小标题，用于表格第一行加粗

注意点：
• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签）

 <table border="1">
        <caption>我是整体标题</caption>
        <tr>
          <th>我是标题</th>
        </tr>
        <tr>
          <td>111</td>
          <td>222</td>
          <td>333</td>
        </tr>
</table>

表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

 <table border="1">
        <caption>学生成绩单</caption>
        <thead>
          <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>小明</td>
            <td>100分</td>
            <td>优秀</td>
          </tr>
					 <tr>
            <td>小飞</td>
            <td>100分</td>
            <td>优秀</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>总结</td>
            <td>不错</td>
            <td>不错</td>
          </tr>
        </tfoot>
      
      </table>

单元格属性

场景：将水平或垂直多个单元格合并成一个单元格
合并单元格步骤：

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• rowspan：跨行和并。上下的合并。
• colspan：跨列合并。左右的合并。
制作技巧
1.先列出所有行<tr>，以最小单元格为标准。
2.再添加每一行的<td>或<th>单元格。
3.划分单元格所在行时，顶边对齐的属于同一行。
4.将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小
的单元格。

<table border="1" style="width: 500px;">
        <caption>学生成绩单</caption>
        <thead>
          <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>小明</td>
            <td rowspan="2">100分</td>
            <td >优秀</td>
          </tr>
          <tr>
            <td>小飞</td>
            <!-- <td>100分</td> -->
            <td>优秀</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>总结</td>
            <td colspan="2">不错</td>
            <!-- <td>不错</td> -->
          </tr>
        </tfoot>
      
      
      </table>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复杂表格</title>
</head>
<body>
  <table border="1" style="width: 500px;">
    <caption>复杂表格实现</caption>
    <tr>
      <td colspan="2">1</td>
      <td rowspan="2">2</td>
      <td colspan="2">3</td>
    </tr>
    <tr>
      <td>4</td>
      <td rowspan="2">5</td>
      <td>6</td>
      <td rowspan="2">7</td>
    </tr>
    <tr>
      <td rowspan="2">8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td colspan="2">12</td>
      <td>13</td>
    </tr>
    <tr>
      <td>14</td>
      <td colspan="4">15</td>
    </tr>
  </table>
</body>
</html>

注意点： • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

表单域标签

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

表单域标签属性

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

属性名	属性值	描述
action	url	指定接收并处理表单数据的服务器url地址
method	get/post	用于设定表单的提交方式
name	自定义名称	规定表单的名称

  <form action="" method="post/get" name="message">
    提示信息及表单控件书写位置
  </form>

`<input>`标签

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input • input标签可以通过type属性值的不同，展示不同效果
type属性值：

属性名	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选框
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	image	图像提交按钮
	file	文件上传
	hidden	自定义隐藏域
name	自定义	控件名称
value	自定义	定义控件的默认值
size	数字	定义控件宽度
checked	checked	定义控件默认选中
maxlength	数字	定义允许输入的最多字符串

input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件
type属性值：text

 姓名：<input type="text" placeholder="请输入" value=""/>

input系列标签-密码框

场景：在网页中显示输入密码的表单控件
type属性值：password

密码：<input type="password" placeholder="请输入密码" value=""/>

input系列标签-单选框

场景：在网页中显示多选一的单选表单控件
type属性值：radio

     <input type="radio" name="sex" value="男"/>男
     <input type="radio" name="sex" value="女" checked/>女

注意点：
• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

input系列标签-复选框

场景：在网页中显示多选多的多选表单控件
type属性值：checkbox
定义提供用户点击选择的多选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
同一组复选框最好也设置相同的name属性。

   爱好：<input type="checkbox" name="hobby" /> 唱歌
        <input type="checkbox" name="hobby" /> 代码
        <input type="checkbox" name="hobby" /> 运动

input系列标签-文件选择

场景：在网页中显示文件选择的表单控件
type属性值：file
标签的type属性值为file。
定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。

<input type="file">

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

<input type="file" multiple="multiple" />

input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

type	名称	特点
button	普通按钮
reset	重置按钮	将同一个form表单内容清空，恢复成默认
submit	提交按钮	将填写数据提交到form中指定的后端服务器，并重置清空填写的内容
image	图片按钮	默认与提交按钮效果相同，使用图片需要利用src属性查找正确路径

    <input type="button" value="普通按钮"/><br/>
    <input type="reset" value="重置按钮"/><br/>
    <input type="submit" value="提交按钮"/><br/>

  <form action="" method="post/get" name="message">
     姓名：<input type="text" placeholder="请输入姓名" value=""/><br/>
     密码：<input type="password" placeholder="请输入密码" value=""/><br/>
     <input type="radio" name="sex" value="男" checked/>男
     <input type="radio" name="sex" value="女" />女
     爱好：<input type="checkbox" name="hobby" /> 唱歌
          <input type="checkbox" name="hobby" /> 代码
          <input type="checkbox" name="hobby" /> 运动<br/>
    文件上传：<input type="file" multiple /><br/>
    <input type="button" value="普通按钮"/><br/>
    <input type="reset" value="重置按钮"/><br/>
    <input type="submit" value="提交按钮"/><br/>
  </form>

button按钮标签

场景：在网页中显示用户点击的按钮
标签名：button

标签名	type属性名	说明
button	submit	提交按钮，点击后提交给服务器
button	reset	重置按钮，点击后恢复默认值
button	button	普通按钮

注意点：
• 谷歌浏览器中button默认是提交按钮
• button标签是双标签，更便于包裹其他内容：文字、图片等

select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

<select>
  <option>广州</option>
  <option>北京</option>
  <option>重庆</option>
  <option>上海</option>
</select>

默认情况下，选中的是第一项。
下拉菜单可以通过给标签设置selected属性，属性值为selected，更改默认
选中项。

<option selected="selected">北京</option>

textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数

<textarea cols="30" rows="10">默认输入文字</textarea>

label标签

场景：常用于绑定内容与表单标签的关
绑定方法一
1.给表单元素设置id属性。
2.然后将需要绑定的其他内容用<label>标签包裹。
3.给标签设置for属性，属性值为绑定的表单元素的id属性值。

<input type="checkbox" name="hobby" id="sport" />
<label for="sport">运动</label>

绑定方法二
如果绑定内容和表单元素写在一起，可以化简绑定写法。
直接使用标签将绑定内容与表单元素一起进行嵌套。

<label><input type="radio" name="sex" />男</label>

布局标签（ div、span ）

<div>和<span>标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签。

和都是没有具体明确的语义的。

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

字符实体

HTML的空格合并现象

场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

常见字符实体

在这里插入图片描述

请添加图片描述

奔跑的飞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习之道

前言万维网概述万维网基于超文本信息系统处理文字，图像，声音和视频等三种表现形式超文本hypertext 超文本传输协议超文本传输协议超文本hypertext超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。超媒体（hypermedia）超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合，有了超媒体用户不仅能从一个文本跳到另一个文本，而且可以显示图像、播放动画、音频和视频等。超文本传输协
复制链接

扫一扫