本次笔记根据mdn学习,如有问题请私信

第一阶段:初步认识

前置工作

拥有一个可以使用的浏览器及集成开发器,例如webstorm

什么是html

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。

HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。

例如将一段文字封装成段落,进行单独展示可以使用

封装

<p>My cat is very grumpy</p>

html不区分大小写,标签 可以写作 <code><title></code>、<code><TITLE></code>、<code><Title></code>、<code><TiTlE></code> 等，也都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母。

剖析一个html元素

一个示范性的代码片断，展示了 html 元素 <p> My cat is very grumpy </p> 的结构。

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
  • 内容（Content）：元素的内容，本例中就是段落的文本。
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。

整个元素即指开始标签、内容、结束标签三部分组成的整体。

创建第一个html元素

使用 标签<em>和</em>包裹一块内容,。在前面放置 <em> 以打开元素，在后面放置 </em> 以关闭元素。这样编辑使得行内容变成斜体强调

例如abcd

<em>abcd</em>

实现效果为: abcd

嵌套元素

你也可以把元素放到其他元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将 very 一词嵌套在 `` 元素中，意味着这个单词被着重强调

<p>我们的小猫脾气<strong>很</strong>暴躁</p>

块级元素和内联元素

在 HTML 中有两种你需要知道的重要元素类别，块级元素和内联元素。

  • 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。

  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。

    实际上区别就在于这个标签用了会不会换行, 会进行换行的元素可能嵌套一个不会换行的,一个不会换行的不会嵌套一个会换行的标签

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p>
<p>第五</p>
<p>第六</p>

效果

第一第二第三
第四

第五

第六

<em>标签就是内联元素,<p>就是块级元素

空元素

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如：元素 <img>是用来在页面插入一张指定的图片

例如

<img
  src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png"
  alt="Firefox 图标" />

显示为

Firefox 图标

在html中,无需在末尾加一个/, 然而，这也是一种有效的语法，当你希望你的 HTML 是有效的 XML 时，这么做也没问题。

属性

元素也可以拥有属性，属性看起来像这样：

含有‘class="editor-note"’属性的段落标签

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性是一个识别名称，以后为元素设置样式信息时更加方便。

属性必须包含：

  • 一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
  • 属性名称，后面跟着一个等于号。
  • 一个属性值，由一对引号（””）引起来。

为元素添加属性

另一个例子是关于元素<a> 是锚，它使被标签包裹的内容成为一个超链接。锚元素可以添加多种属性，部分如下：

  • href

    这个属性声明超链接的 web 地址。例如 href="https://www.mozilla.org/"。

  • title

    title 属性为超链接声明额外的信息，比如你将链接至的那个页面。例如 title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。

  • target

    target 属性用于指定链接如何呈现出来。例如，target="_blank" 将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。

例如

<p>a <a href="https://www.bilibili.com/" title="大型交友网站" target="_blank">web</a>.</p>

效果

image-20240114224629200

布尔属性

有时你会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一个值，这个值一般与属性名称相同。例如，考虑 disabled 属性，你可以将其分配给表单输入元素。用它来禁用表单输入元素，这样用户就不能输入了。被禁用的元素通常有一个灰色的外观。示例如下：

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />

<!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 -->
<input type="text" />

省略包围属性值的引号

如果你看了很多其他网站的代码，你可能会遇到一些奇怪的标记风格，包括没有引号的属性值。在某些情况下它是被允许的，但是其他情况下会破坏你的标记。例如，针对之前的链接示例，我们可以像这样写一个只拥有一个 href 属性的版本

<a href=https://www.mozilla.org/>favorite website</a>

然而，当我们再添加一个 title 属性时，就会出现问题：

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>  x

此时浏览器会误解你的标记，它会把 title 属性理解为三个属性——title 的属性值为 The，另外还有两个布尔属性 Mozilla 和 homepage，很明显不是我们所期望的

我们建议始终添加引号——这样可以避免很多问题，并且使代码更易读。

在目前为止，本章内容所有的属性都是由双引号来包裹。然而，你也许在一些 HTML 中也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以上两种情况都可以,但应该注意单引号和双引号不能在一个属性值里面混用。语法是错误的

在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号

<a href="https://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>

剖析html文档

单独的 HTML 元素本身并不十分有用。接下来，我们来看看单个元素是如何组合成整个 HTML 页面的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<em>Hello World!</em>
<!-- 这是注释 -->
<p>a <a href="https://www.bilibili.com/" title="大型交友网站" target="_blank">web</a>.</p>
<!-- 产生一个禁止使用的表格 -->
<input type="text" disabled />
<!-- 产生一个可以使用的表格 -->
<input type="text" />
<!-- 使用单引号和双引号 -->
<p>我是<a title='"双引号"'>"双引号"</a></p>
<p>我是<a title="'单引号'">'单引号'</a></p>
</body>
</html>

  1. <!DOCTYPE html>: 声明文档类型。早期的 HTML（大约 1991-1992 年）文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。文档类型使用类似于这样：

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

    文档类型是一个历史遗留问题，需要包含它才能使其他东西正常工作。现在，只需要知道 <!DOCTYPE html> 是最短的有效文档声明

  2. <html></html>:<html>元素。这个元素包裹了页面中所有的内容，有时被称为根元素

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

  4. <meta charset="utf-8">:<meta> 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据，<charset>将你的文档的字符集设置为 UTF-8，其中包括绝大多数人类书面语言的大多数字符。有了这个设置，页面现在可以处理它可能包含的任何文本内容。没有理由不对它进行设置，它可以帮助避免以后的一些问题。

  5. <title></title>:<title> 元素。这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面

  6. <body></body>:<body> 元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

为html添加一些特征

  1. 复制上面的 HTML 页面例子。
  2. 在文字编辑器创建一个新文件。
  3. 粘贴代码到这个文件。
  4. 保存为 index.html

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<em>Hello World!</em>
<!-- 这是注释 -->
<p>a <a href="https://www.bilibili.com/" title="大型交友网站" target="_blank">web</a>.</p>
<!-- 产生一个禁止使用的表格 -->
<input type="text" disabled />
<!-- 产生一个可以使用的表格 -->
<input type="text" />
<!-- 使用单引号和双引号 -->
<p>我是<a title='"双引号"'>"双引号"</a></p>
<p>我是<a title="'单引号'">'单引号'</a></p>

<h1>经典古诗词</h1>
<p>相思无用，惟别而已。别期若有定，<em>千般煎熬又何如？</em><strong>莫道黯然销魂，</strong>何处柳暗花明？</p>
<p>--《<a href="https://zh.wikipedia.org/zh-hans/神鵰俠侶">神雕侠侣"神雕侠侣</a>》</p>
<img src="https://roy-tian.github.io/learning-area/extras/tools/playable-code/images/sdxl.jfif" alt="神雕侠侣封面" />

</body>
</html>

html中的空白

在上面的例子中，你可能已经注意到了在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：

无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

html注释

HTML 拥有在代码中写注释的机制。浏览器会忽略注释，有效地使注释对用户来说不可见。注释的目的是让你在代码中加入注释，以解释你的逻辑或编码。如果你在离开很久后回到一个代码库，以至于你不能完全记住它，这就非常有用。同样，当不同的人在进行修改和更新时，注释也是非常宝贵的。

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

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

HTML元信息–”头”里有什么

什么是html头部

HTML 头部包含 HTML <head>元素的内容，与<body> 元素内容不同，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。上述示例的头部非常简短：

<head>
  <meta charset="utf-8" />
  <title>我的测试页面</title>
</head>

添加标题

  • <h1>元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要等等）。

  • <title>元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）

元数据:<meta>元素

元数据就是描述数据的数据，而 HTML 有一个“官方的”方式来为一个文档添加元数据——<meta>元素。当然，其他在这篇文章中提到的东西也可以被当作元数据。有很多不同种类的 <meta> 元素可以被包含进你的页面的<head> 元素，但是现在我们还不会尝试去解释所有类型，这只会引起混乱。我们会解释一些你常会看到的类型，先让你有个概念。

添加作者和描述

许多 <meta> 元素包含了 name 和 content 属性：

  • name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。
<head>
    <meta charset="UTF-8">
    <meta name="author" content="niepandou"/>
    <meta name="description" content="This note is rooted in mdn Web,which provide a good understanding contents.">
    <title>test</title>
</head>

换课了,重学一下

标签

标签语法

比如加粗,我们创建后缀为html的文件,进行编辑

<strong>加粗内容</strong>

此为标签语法

image-20240202211306541

同时,标签分为单标签和双标签,上面所使用的就是双标签,例如<hr>就为单标签,能够创建水平线

  • 课后提问

image-20240202211849342

  • 答案:

    image-20240202211933822

html骨架

html基本骨架就是网页模板

  • html:整个网页

  • head:网页头部,存放给浏览器看的代码,例如css,类似类的作用

  • body:网页主体,存放用户看的代码

  • title:网页标题

    image-20240202212204081

一般情况下,WebStorm创建html文件时会自动创建模板

标签的关系

用于明确代码的书写位置

  • 父子关系
  • 兄弟关系(并列关系)

image-20240202213440845

上述代码head,body和html为父子关系,head和body为兄弟关系

我们再书写代码时,父子关系则可以父包子这种形式写,兄弟关系可以换行进行平级写

我们还可以发现,html和body,head有缩进的形式,WebStorm为我们自动识别了其父子关系

注释

image-20240202214042768

注释由<!–和–>组成,不会在浏览器显示

一般添加删除注释的快捷键为crtl+/,crtl+?

未注释版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是文字,能看见吗
</body>
</html>

注释版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这是文字,能看见吗-->
</body>
</html>

image-20240202215302737

image-20240202215330149

课后提问

image-20240202215618146

答案

image-20240202215624946

标题标签

一般用在新闻标题,文章标题,网页区域名称,产品名称等

标签名:h1 - h6(双标签)

代码演示

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

效果image-20240202215839694

特点:

  • 文字加粗
  • 字号逐渐减小
  • 独占一行

一般情况下,h1

标签在一个网页中只用一次,用来放新闻标题或logo

  • 课后提问

image-20240202220515700

段落标签

一般用在新闻段落,文章段落,产品描述信息等

标签名:p(双标签)

<p>近日，韩国现代汽车集团向美国提交意见书，指出将“受关注外国实体”从电动汽车电池供应链中剔除不现实。现代汽车针对的是1月起生效的美国《通胀削减法案》电动汽车补贴细则，不满的是细则欲将中国企业排除在电池供应链外。此项歧视性贸易保护主义措施目的很明显，就是想把电动汽车产业链拉回美国，与美国政府当前实施的半导体“脱钩”政策如出一辙。不同之处在于，美国这次“脱钩”更加困难重重，因为在电动汽车电池领域，中国企业处于绝对主导地位。也正因此，上述措施一推行就引起日韩甚至美国本国车企的阵痛和反对。</p>
<p>根据《通胀削减法案》电动汽车补贴细则，从今年起符合税收减免条件的在美销售电动汽车不得包含任何“受关注外国实体”制造或组装的电池组件，“受关注外国实体”包括中国企业。鉴于当前电动汽车电池生产所需的大量采矿、提炼和零部件制造都在中国进行，这一新规被普遍视为针对中国。这也意味着，美国不少电动车企需要重新调整自己的电池供应链结构，导致成本将极大攀升。《韩国经济》等多家韩媒日前报道称，韩国车企纷纷提交意见书，呼吁美国政府放宽对华采购限制。日本电池制造商松下控股也向美施压说，美国严苛的补贴新规会将更多电动汽车制造商推向美国以外国家。</p>

效果

image-20240202221158772

换行与水平线标签

换行:br(单标签)

实现换行效果

内容1
<br>
内容2

image-20240202221447932

水平线:hr(单标签)

image-20240202222309490

文本格式化标签

可以给文本添加特殊格式,以突出重点,比如加粗,斜体,下划线,删除线

加粗:strong或b

倾斜:em或i

下划线:ins或u

删除线:del或s

一般情况下或选择strong,em,ins,del进行格式化标签使用,他们自身就带着强调含义

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

效果

image-20240202223027873

图像标签

在网页中插入图片

标签使用:<img src=”图片的URL”>

例如

image-20240202223733967

效果显示

image-20240202223903740

属性

属性有alt,title,width,height等,分别用于替换文本,提示文本,设置宽度,高度

  • alt是在图片无法显示时显示替换的文本

  • 提示文本时用于鼠标悬停在图片上时显示文字

  • width和height设置一个即可,因为html设置会自动等比例缩放

  • 属性叠加无需逗号,用空格隔开,无先后顺序

<img src="https://www.luogu.com.cn/images/index/step1.png">
<br>
<img src="https://www.luogu.com.cn/images/inde1x/step1.png" alt="this is a image">
<br>
<img src="https://www.luogu.com.cn/images/index/step1.png" title="这是一个女孩">
<br>
<img src="https://www.luogu.com.cn/images/index/step1.png" width="300">

效果

image-20240202225300650

路径

路径分为相对路径和绝对路径

此小节不再描述

超链接

点击跳转到其他页面

格式:<a href=URL>文本内容</a>

href是跳转地址,是超链接的必须属性

<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>

同理,URL内也可以写自己的文件路径

属性

  • _blank 新窗口打开

在开发初期,不知道超链接的跳转地址,href属性填#,表示空链接,不会跳转

音频标签

格式:<audio src=URL></audio>

属性

image-20240202231925425

<!--在html5中.如果属性名和属性值完全一样,则可以简写为一个单词-->
<audio src="./audios/695707398.mp3" controls></audio>
<!--所以controls的完整形式为controls="controls"-->
<!--循环播放-->
<audio src="./audios/695707398.mp3" controls loop></audio>
<audio src="./audios/695707398.mp3" controls loop autoplay></audio>

controls可以显示音频面板

效果

image-20240202232703626

如果没有自动播放效果,那么说明浏览器是禁用自动播放的

视频标签

格式:<video src=URL></video>

属性

image-20240202232912207

<video src="./videos/123.mp4" controls width="500"></video>

效果:视频过于逆天不予播放,请联系作者

综合项目

网页的制作思路:从上到下,先整体再局部,逐步分析制作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人简介</title>
</head>
<body>
<h1>鱿鱼席</h1>
<hr>
<p>尤雨溪（Evan You），毕业于科尔盖特大学，前端框架<a href="./综合项目2vue简介.html" target="_blank">vue.js</a>的作者、
  HTML5<a href="#">HTML5</a>版Clear的打造人、独立开源开发者。</p>
<p>曾就职于Google Creative Labs和Meteor Development Group。
  由于工作中大量接触开源的<a href="https://baike.sogou.com/v2484.htm" target="_blank">JavaScript</a>项目，最后自己也走上了开源之路，现全职开发和维护<a href="./综合项目2vue简介.html" target="_blank">Vue.js</a>。
</p>
<img src="https://pic.baike.soso.com/ugc/baikepic2/0/ori-20221129095705-1877028675_jpeg_460_460_106483.jpg/800"
alt="尤雨溪的图片" title="尤雨溪">
<h2>学习经历</h2>
<p>尤雨溪毕业于<a href="https://baike.sogou.com/v593656.htm" target="_blank">上海复旦附中</a>，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
</p>
<p>尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，<ins>正是在读硕士期间，他偶然接触到了<a href="https://baike.sogou.com/v2484.htm" target="_blank">JavaScript</a>，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins>。
</p>
<h2>主要成就</h2>
<p>2014年2月，开发了一个<a href="https://baike.sogou.com/v7678968.htm">前端开发</a>库<a href="https://baike.sogou.com/v168021260.htm" target="_blank">Vue.js</a>。Vue.js是构建Web界面的JavaScript库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
<h2>社会任职</h2>
<p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做Vue和Weex的JavaScript runtime整合，目标是让大家能用Vue的语法跨三端。</p>
</body>
</html>

效果

image-20240203004905101

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue简介</title>
</head>
<body>
<h1>Vue.js</h1>
<p>Vue（读音 /vju:/，发音类似于 view）是一套用于构建用户界面的渐进式的JavaScript框架</p>
<br>
<p>作者为<a href="综合项目1个人简介.html" target="_blank">尤雨溪</a></p>
<h2>主要功能</h2>
<p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>与其他框架相同，vue允许你讲一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript以用来渲染网页中相应的地方</p>
<video src="#" controls></video>
</body>
</html>

效果

image-20240203005931019

列表

列表

作用:布局内容排列整齐的区域

列表分为:无序列表,有序列表,定义列表

无序列表

布局排列整齐的不规定顺序的区域

标签:ul嵌套li,ul是无序列表,li是列表条目

<ul>
  <li>列表条目1</li>
  <li>列表条目2</li>
  <li>列表条目3</li>
</ul>

image-20240203191209988

  • ul标签里面只能包含li标签
  • li标签可以有任何内容

有序列表

布局排列整齐的需要规定顺序的区域

标签:ol嵌套li,oi是有序列表,li是列表条目

<ol>
  <li>列表条目1</li>
  <li>列表条目2</li>
  <li>列表条目3</li>
</ol>

image-20240203191426072

定义列表

一般用在页面顶部,作为服务中心使用

标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

<dl>
  <dt>服务中心</dt>
  <dd>申请售后</dd>
  <dd>售后政策</dd>
</dl>

image-20240203194356881

  • dl里面只能放dt和dd
  • dt和dd里面可以放任何内容

表格

网页中的表格和excel类似,用来展示数据

标签:table嵌套tr,tr嵌套td/th

image-20240203194552235

  • 在网页中,表格默认没有边框线,需要border属性进行设置
<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

image-20240203195303052

表格结构标签

让表格结构更加清晰,呈现的效果是一样的

image-20240203195442888

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
  </tfoot>
</table>

合并单元格

多个单元格合并一个,分为跨行合并,跨列合并

合并步骤:

  1. 明确合并的目标

  2. 保留最左最上的单元格,添加属性(取值为数字,表示要合并的单元格数量)

    • 跨行合并,保留最上单元格,添加属性rowspan
    • 跨列合并,保留最左单元格,添加属性colspan

  3. 删除其他单元格

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td rowspan="2">100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
<!--    <td>100</td>-->
    <td>198</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>总结</td>
    <td colspan="3">全市第一</td>
<!--    <td>全市第一</td>-->
<!--    <td>全市第一</td>-->
  </tr>
  </tfoot>
</table>

image-20240203200601905

表单

收集用户信息

input标签

根据属性值type不同,功能不同

标签:<input type=””>(单标签)

image-20240203201353481

文本框 <input type="text">
<br>
密码框 <input type="password">
<br>
单选框 <input type="radio"> 男 <input type="radio"> 女
<br>
多选框 <input type="checkbox">
<br>
文件 <input type="file">

image-20240203205248557

input标签占位文本

提示信息

属性:placeholder

文本框 <input type="text" placeholder="请输入文本">
<br>
密码框 <input type="password" placeholder="请输入密码">
<br>
单选框 <input type="radio"> 男 <input type="radio"> 女
<br>
多选框 <input type="checkbox">
<br>
文件 <input type="file">

image-20240203205720566

单选框radio

属性

image-20240203205938140

单选框 <input type="radio" name="gender" checked> 男
      <input type="radio" name="gender"> 女

image-20240203210143791

上传文件

属性 mutiple 可以支持文件多选功能

文件 <input type="file" multiple>

image-20240203210524668

多选框

属性 checked 默认选中

多选框 <input type="checkbox" checked> 我已知晓相关条例

image-20240203210744800

下拉菜单

标签:select嵌套option,select是下拉菜单整体,option是菜单的每一项

城市:
<select>
  <option>北京</option>
  <option>上海</option>
  <option>深圳</option>
  <option>广州</option>
  <option>武汉</option>
</select>

image-20240203211344503

属性: selected 默认选中,即刷新页面后首选选项

文本域

多行输入文本的表单控件

标签: textarea(双标签)

<textarea>请输入评论</textarea>

image-20240203211746460

lable标签

网页中,某个标签的说明文本

可以用lable标签绑定文字和表单控件的关系,增大表单的点击范围

写法一

  • lable只包裹内容,不包裹表单控件
  • 设置lable标签的for属性值和表单控件的id属性值相同
性别:
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="woman">
<label for="woman">女</label>

image-20240203212707400

写法二

  • 使用lable标签直接包裹内容和表单控件,不需要任何属性
性别:
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<label><input type="radio" name="gender">女</label>

按钮

标签:button(双标签)

image-20240203213109105

三个功能都需要form标签嵌套

<!--action属性值是发送数据的地址-->
<form action="">
  用户名: <input type="text" placeholder="请输入用户名">
  <br>
  密码: <input type="password" placeholder="请输入密码">
  <br>
  <button type="submit">提交功能</button>
  <button type="reset">重置功能</button>
  <button type="button">普通功能</button>
</form>

image-20240203214116728

无语义的布局标签

布局网页,划分网页区域,摆放内容

  • div 独占一行 大盒子
  • span 不换行 小盒子
<div>这是div标签</div>
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>

效果

image-20240203214514662

字符实体

在网页找哪个显示预留字符

image-20240203214751074

<!--在代码中敲出的空格,网页只识别一个-->
<p>乾坤未定,你我皆是&lt;黑&nbsp;&nbsp;&nbsp;&nbsp;马&gt;</p>

image-20240203215914233

综合案例

体育新闻列表

<ul>
  <li>
    <img src="#" alt="一张图片">
    <h3>111111111111111111</h3>
  </li>
  <li>
    <img src="#" alt="一张图片">
    <h3>222222222222222222</h3>
  </li>
  <li>
    <img src="#" alt="一张图片">
    <h3>333333333333333333</h3>
  </li>
  <li>
    <img src="#" alt="一张图片">
    <h3>44444444444444444</h3>
  </li>
</ul>

image-20240203220408067

注册信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>注册信息</h1>
<form>
  <!--表单控件start-->
  <!--个人信息-->
  <h2>个人信息</h2>
  <label>姓名:<input type="text" placeholder="请输入真实姓名"></label>
  <br><br>
  <label>密码:<input type="password" placeholder="请输入密码"></label>
  <br><br>
  <label>确认密码:<input type="password" placeholder="请输入确认密码"></label>
  <br><br>
  <label>性别:</label>
  <label><input type="radio" name="gender" checked>男</label>
  <label><input type="radio" name="gender">女</label>
  <br><br>
  <label>
    居住城市:
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>武汉</option>
    </select>
  </label>
  <!--教育经历-->
  <h2>教育经历</h2>
  <label>
    最高学历:
    <select>
      <option>博士</option>
      <option>硕士</option>
      <option>本科</option>
      <option>大专</option>
    </select>
  </label>
  <br><br>
  <label>学校名称: <input type="text"></label>
  <br><br>
  <label>所学专业: <input type="text"></label>
  <br><br>
  <label>
    在校时间:
    <select>
      <option>2015</option>
      <option>2016</option>
      <option>2017</option>
      <option>2018</option>
    </select>
    --
    <select>
      <option>2019</option>
      <option>2020</option>
      <option>2021</option>
      <option>2022</option>
    </select>
  </label>
  <!--工作经历-->
  <h2>工作经历</h2>
  <label>公司名称: <input type="text"></label>
  <br><br>
  <label>
    工作描述:
    <textarea>1111</textarea>
  </label>
  <br><br>
<!--同意协议-->
  <label>
  <input type="checkbox">已阅读并同意以下协议
  </label>
  <br><br>
  <ul>
    <li><a href="#">用户服务协议</a></li>
    <li><a href="#">隐私政策</a></li>
  </ul>
  <br><br>
  <button type="submit">提交信息</button>
  <button type="reset">重置信息</button>
  <!--表单控件end-->
</form>
</body>
</html>

image-20240203222933464