一文学会html(详细)

定义

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

元素

例子

一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如下面一行内容：
<p>My cat is very grumpyp>
1

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

嵌套元素

你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将**“very”**嵌套在中，意味着这个单词被着重强调：
<p>My cat is <strong>verystrong> grumpy.p>
1

块级元素和内联元素

块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素或者强调元素和。

空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素是用来在元素所在位置插入一张指定的图片。例子如下：
<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">
1

属性

用单引号或者双引号括起来一样的。

在这里插入图片描述

例子：

<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典a>，需引刀自宫p>
1

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如[disabled]属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled">
1

可以写成这样：


<input type="text" disabled>


<input type="text">
1
2
3
4
5

html页面概览

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点title>
  head>
  <body>
    <p>这是我的页面p>
  body>
html>
1
2
3
4
5
6
7
8
9
10

DOCTYPE html 是声明文档类型，规定了 HTML 页面必须遵从的良好规则
html元素。这个元素包裹了整个完整的页面，是一个根元素。
head元素：这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等
meta元素：这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字
title元素：设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
body元素：包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

特殊字符

原义字符	等价字符引用
<	<；
>	>；
"	"；
’	&apos；
&	&；

<p>HTML 中用 <p> 来定义段落元素。p>

<p>HTML 中用 <p> 来定义段落元素p>
1
2
3

head

元数据meta

元数据就是描述数据的数据


<meta charset="utf-8">


<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">


1
2
3
4
5
6
7
8
9
10
11
12

页面图标

<link rel="icon" href="favicon.ico" type="image/x-icon">

1
2

添加css和js

如今，几乎你使用的所有网站都会使用 CSS 来让网页更加炫酷，并使用 JavaScript 来让网页有交互功能，比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见，它们分别使用元素以及

link

该元素经常位于文档的头部。这个 link 元素有 2 个属性，rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">

1
2

script

元素没必要非要放在文档的 `` 中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。
<script src="my-js-file.js" defer>script>

1
2

元素一览

段落

<p>我是一个段落，千真万确。p>

1
2

标题


<h1>我是文章的标题h1>

1
2
3

列表


<ul>
<li>豆浆li>
<li>油条li>
<li>豆汁li>
<li>焦圈li>
ul>

1
2
3
4
5
6
7
8


<ol>
  <li>沿着条路走到头li>
  <li>右转li>
  <li>直行穿过第一个十字路口li>
  <li>在第三个十字路口处左转li>
  <li>继续走 300 米，学校就在你的右手边li>
ol>

1
2
3
4
5
6
7
8
9


<ol>
  <li>沿着条路走到头li>
  <li>右转li>
  <li>直行穿过第一个十字路口li>
  <ul>
	<li>豆浆li>
	<li>油条li>
   ul>
ol>

1
2
3
4
5
6
7
8
9
10
11


<dl>
  <dt>内心独白dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。dd>
  <dt>语言独白dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。dd>
  <dt>旁白dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。dd>
dl>

1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

重点

斜体

<p>I am <em>gladem> you weren't <em>lateem>.p>

1
2

粗体

<p>This liquid is <strong>highly toxicstrong>.p>

<p>I am counting on you. <strong>Do notstrong> be late!p>

1
2
3
4

超链接

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页a>的超链接。
p>

<p>我创建了一个指向<a href="https://www.mozilla.org/en-US/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页a
   >的超链接。
p>


1
2
3
4
5
6
7
8
9
10

块级元素超链接：

例如你想要将一个图像转换为链接，你只需把引用了图像文件的元素放到标签内。

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
a>


1
2
3
4
5

文档链接

<h2 id="Mailing_address">邮寄地址h2>


<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址a>。p>

<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址a>。p>


1
2
3
4
5
6
7
8

链接到非html资源

<p><a href="https://www.example.com/large-report.pdf">
  下载销售报告（PDF, 10MB）
a>p>

<p><a href="https://www.example.com/video-stream/" target="_blank">
  观看视频（将在新标签页中播放，HD 画质）
a>p>

<p><a href="https://www.example.com/car-game">
  进入汽车游戏（需要 Flash 插件）
a>p>

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64位）
a>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

电子邮件链接

向 nowhere 发邮件


  Send mail with cc, bcc, subject and body



1
2
3
4
5
6
7

引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用

元素包裹起来表示，并且在 cite属性里用 URL 来指向引用的资源。例如，下面的例子就是引用的 MDN 的blockquote元素页面： (不会跳转)

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code><blockquote>code> Elementstrong> (or <em>HTML Block
  Quotation Elementem>) indicates that the enclosed text is an extended quotation.p>
blockquote>

1
2
3
4
5

行内引用 (不会跳转)

浏览器默认将其作为普通文本放入引号内表示引用

<p>The quote element — <code><q>code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.q>p>


1
2
3
4

引文

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote pagecite>a>:
p>


1
2
3
4
5

例子

<p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子cite>a>曰：p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
  <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。p>
blockquote>
<p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话q>。（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinkingcite>a>。）p>

1
2
3
4
5
6

在这里插入图片描述

只有用a标签才会跳转

缩略语

另一个你在 web 上看到的相当常见的元素是它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。让我们看看下面两个例子：

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTMLabbr> 来组织网页文档。p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会abbr> 将于 2024 年 8 月在法国巴黎举行。p>


1
2
3
4
5

编辑联系方式

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Millsa>.p>
address>

1
2
3
4

上标、下标

<p>咖啡因的化学方程式是 C<sub>8sub>H<sub>10sub>N<sub>4sub>O<sub>2sub>。p>
<p>如果 x<sup>2sup> 的值为 9，那么 x 的值必为 3 或 -3。p>


1
2
3
4

计算机代码

code: 用于标记计算机通用代码。
pre: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在``标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
var: 用于标记具体变量名。
kbd: 用于标记输入电脑的键盘（或其他类型）输入。
samp: 用于标记计算机程序的输出。

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}code>pre>

<p>请不要使用 <code><font>code> 、 <code><center>code> 等表象元素。p>

<p>在上述的 JavaScript 示例中，<var>paravar> 表示一个段落元素。p>


<p>按 <kbd>Ctrlkbd>/<kbd>Cmdkbd> + <kbd>Akbd> 选择全部内容。p>

<pre>$ <kbd>ping mozilla.orgkbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 mssamp>pre>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

标记时间和日期


<time datetime="2016-01-20">20 January 2016time>

<time datetime="2016-01">January 2016time>

<time datetime="01-20">20 Januarytime>

<time datetime="19:30">19:30time>

<time datetime="19:30:01.856">19:30:01.856time>

<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016time>

<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in Francetime>

<time datetime="2016-W04">The fourth week of 2016time>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

布局

head：页眉, 如果它是 body的子元素，那么就是网站的全局页眉。如果它是 article 或section 的子元素，那么它是这些部分特有的页眉
nav：导航栏, 包含页面主导航功能。其中不应包含二级链接等内容
main：主内容: 存放每个页面独有的内容。每个页面上只能用一次 ,主内容中还可以有各种子内容区段，可用article、section 和 div 等元素表示
- article: 包围的内容即一篇文章，与页面其它部分无关
- section: 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块
aside：侧边栏，经常嵌套在 main 中, 包含一些间接信息（术语条目、作者简介、相关链接，等等）
foote：页脚。

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二次元俱乐部title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  head>

  <body>
    <header> 
      <h1>聆听电子天籁之音h1>
    header>

    <nav> 
      <ul>
        <li><a href="#">主页a>li>
        
      ul>

      <form> 
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      form>
    nav>

    <main> 
      <article>
        
      article>

      <aside> 
        <h2>相关链接h2>
        <ul>
          <li><a href="#">这是一个超链接a>li>
          
        ul>
      aside>
    main>

    <footer> 
      <p>© 2050 某某保留所有权利p>
    footer>
  body>
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

无语义元素

span

是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]span>.p>

1
2

div

是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。

<div class="shopping-cart">
  <h2>购物车h2>
  <ul>
    <li>
      <p><a href=""><strong>银耳环strong>a>：$99.95.p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    li>
    <li>
      ...
    li>
  ul>
  <p>售价：$237.89p>
div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

换行、分割线

br可在段落中进行换行；是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。比如：

<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。p>


1
2
3
4
5
6

hr元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线

图片

<img src="images/dinosaur.jpg">


<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">


<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">


<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

figure figcaption

为图片提供一个语义容器，在标题和图片之间建立清晰的关联 .

figture 里不一定要是一张图片，只要是一个独立内容单元 , 可以是几张图片、一段代码、音视频、方程、表格或别的。


  
  曼彻斯特大学博物馆展出的一只霸王龙的化石


1
2
3
4
5
6
7
8

图片多选


<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
picture>


1
2
3
4
5
6
7
8

自适应图片

根据设备大小选择显示图片的大小



<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

相同尺寸不同分辨率


<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">


1
2
3
4
5
6
7
8
9

picture


<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
picture>


1
2
3
4
5
6
7
8
9
10
11
12

视频、音频


<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接a>观看p>
video>

1
2
3
4
5
6
7
8

使用多个播放源提高兼容性

现在我们将 src 属性从 src 标签中移除，转而将它放在几个单独的source标签当中。在这个例子当中，浏览器将会检查source 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式。

每个source标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接a>观看p>
video>

1
2
3
4
5
6

其他特性


<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接a>观看p>
video>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

audio标签和video标签使用几乎相同

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接a>收听。p>
audio>

1
2
3
4
5
6

显示音频或视频的文本

在html5之后有了WebVTT格式，可以使用标签做到。

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：

subtitles

通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。

captions

同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。

timed descriptions

将文字转换为音频，用于服务那些有视觉障碍的人。

WEBVTT的例子

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

1
2
3
4
5
6
7
8
9
10
11
12

让让其与 HTML 媒体一起显示，你需要做如下工作：

以 .vtt 后缀名保存文件。
用 track标签链接 .vtt 文件，标签需放在video或audio标签当中`，同时需要放在所有标签之后。使用kind 属性来指明是哪一种类型，如 subtitles、captions、descriptions。然后，使用来告诉浏览器你是用什么语言来编写的 subtitles。

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
video>

1
2
3
4
5
6

嵌入

简单使用：找到google地图- 点击 UI 左上角的“汉堡菜单”（三条水平线） -选择嵌入地图-复制代码-放到页面中

<p>改革春风吹满地p>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26515866.254280455!2d104.13743495!3d35.780286950000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-CN!2s!4v1658835424782!5m2!1szh-CN!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
iframe>

1
2
3
4

在这里插入图片描述

allowfullscreen:可以全屏显示

frameborder：如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。

src:嵌入的资源路径

sandbox:解决安全隐患，可以分配具体的权限

embed、object

这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像 Java 小程序和 Flash，PDF（可在浏览器中显示为一个 PDF 插件）这样的插件技术，甚至像视频，SVG 和图像的内容！

但是基本不太使用了

object嵌入pdf

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.a>p>
object>

1
2
3
4
5

矢量图

个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
svg>

1
2
3
4
5
6
7
8

在这里插入图片描述

其他的优点：

矢量图像中的文本仍然可访问
SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过CSS或通过JavaScript编写的样式的元素

新版本IE8以上浏览器：

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />


1
2
3
4
5
6
7

旧版本浏览器：


<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">


1
2
3
4

嵌入SVG

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
iframe>

1
2
3
4

表格


<table>
      <tr>
        <td>Hi, I'm your first cell.td>
        <td>I'm your second cell.td>
        <td>I'm your third cell.td>
        <td>I'm your fourth cell.td>
      tr>
      <tr>
        <td>Second row, first cell.td>
        <td>Cell 2.td>
        <td>Cell 3.td>
        <td>Cell 4.td>
      tr>
    table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

合并单元格


<table>
      <tr>
        <th colspan="2">Animalsth>
      tr>
      <tr>
        <th colspan="2">Hippopotamusth>
      tr>
      <tr>
        <th rowspan="2">Horseth>
        <td>Maretd>
      tr>
      <tr>
        <td>Stalliontd>
      tr>
      <tr>
        <th colspan="2">Crocodileth>
      tr>
      <tr>
        <th rowspan="2">Chickenth>
        <td>Hentd>
      tr>
      <tr>
        <td>Roostertd>
      tr>
table>

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

在这里插入图片描述

共同样式


<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  colgroup>
  <tr>
    <th>Data 1th>
    <th>Data 2th>
  tr>
  <tr>
    <td>Calcuttatd>
    <td>Orangetd>
  tr>
  <tr>
    <td>Robotstd>
    <td>Jazztd>
  tr>
table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

如果你想把这种样式信息应用到每一列，我们可以只使用一个元素

<colgroup>
  <col style="background-color: yellow" span="2">
colgroup>


1
2
3
4
5

表格标题

<table>
  <caption>Dinosaurs in the Jurassic periodcaption>
  ...
table>


1
2
3
4
5
6

表格结构化

 <table>
        <caption>How I chose to spend my moneycaption>
          <thead>
            <tr>
            <th>Purchaseth>
            <th>Locationth>
            <th>Dateth>
            <th>Evaluationth>
            <th>Cost (€)th>
            <tr/>
          thead>
          <tfoot>
            <tr>
            <td colspan=4>SUMtd>
            <td>118td>
            tr>
          tfoot>
          <tbody>
          <tr>
            <td>Haircuttd>
            <td>Hairdressertd>
            <td>12/09td>
            <td>Great ideatd>
            <td>30td>
          tr>
          <tr>
            <td>Lasagnatd>
            <td>Restauranttd>
            <td>12/09td>
            <td>Regretstd>
            <td>18td>
          tr>
          <tr>
            <td>Shoestd>
            <td>Shoeshoptd>
            <td>13/09td>
            <td>Big regretstd>
            <td>65td>
          tr>
          <tr>
            <td>Toothpastetd>
            <td>Supermarkettd>
            <td>13/09td>
            <td>Goodtd>
            <td>5td>
          tr>
          tbody>
    table>

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

在这里插入图片描述

表单

HTML 表单是用户和 web 站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到 web 站点。大多数情况下，数据被发送到 web 服务器，但是 web 页面也可以自己拦截它并使用它.

HTML 表单是由一个或多个小部件组成的。这些小部件可以是文本字段 (单行或多行)、选择框、按钮、复选框或单选按钮。

所有html表单都是form元素开始


<form action="/my-handling-form-page" method="post">

form>

1
2
3
4
5
6
7

例子：

表单将包含三个文本字段和一个按钮。我们向用户询问他们的姓名、电子邮件和他们想要发送的信息。点击这个按钮将把他们的数据发送到一个 web 服务器。


<form action="/my-handling-form-page" method="post">
  <div>
    
    <label for="name">Name:label>
     
    <input type="text" id="name"  name="user_name">
  div>
  <div>
    <label for="mail">E-mail:label>
     
    <input type="email" id="mail"  name="user_email">
  div>
  <div>
    <label for="msg">Message:label>
      
    <textarea id="msg" name="user_message">textarea>
  div>
  <div class="button">
      
  	<button type="submit">Send your messagebutton>
   div>
form>

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

fieldset和legend

fieldset元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的.描述fieldset里所含有部件的用途。

<form>
  <fieldset>
    <legend>Fruit juice sizelegend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Smalllabel>
    p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Mediumlabel>
    p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Largelabel>
    p>
  fieldset>
form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

label

标签与 通过他们各自的for 属性和 id 属性正确相关联（label 的 for 属性和它对应的小部件的 id 属性）

<label for="name">Name:label> <input type="text" id="name" name="user_name">

1
2

也可以这样写，不需要for属性

<label for="name">
  Name: <input type="text" id="name" name="user_name">
label>

1
2
3
4

文本框


<input type="text" id="comment" name="comment" value="I'm a text field">

<input type="password" id="pwd" name="pwd">

<input type="hidden" id="timestamp" name="timestamp" value="1286705410">


1
2
3
4
5
6
7
8

复选框、单选框


<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked>


1
2
3
4
5
6


<input type="radio" id="soup" name="meal" checked>


1
2
3
4

button

<button type="submit">
    This is a <strong>submit buttonstrong>
button>

<input type="submit" value="This is a submit button">


1
2
3
4
5
6
7

<button type="reset">
    This is a <strong>reset buttonstrong>
button>

<input type="reset" value="This is a reset button">


1
2
3
4
5
6
7

<button type="button">
    This is an <strong>anonymous buttonstrong>
button>

<input type="button" value="This is an anonymous button">


1
2
3
4
5
6
7

图像按钮


<input type="image" alt="Click me!" src="my-img.png" width="80" height="30">


1
2
3
4
5
6

文件选择


<input type="file" name="file" id="file" accept="image/*" multiple>

<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">


1
2
3
4
5
6
7
8

表单数据验证

required


<form>
  <label for="choose">Would you prefer a banana or cherry?label>
  <input id="choose" name="i_like" required>
  <button>Submitbutton>
form>



1
2
3
4
5
6
7
8
9


input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

1
2
3
4
5
6
7
8
9

pattern

这个例子中，该input元素接受两个值中的一个：字符串 “banana” 或者字符串"cherry".

<form>
  <label for="choose">Would you prefer a banana or a cherry?label>
  <input id="choose" name="i_like" required pattern="banana|cherry">
  <button>Submitbutton>
form>

1
2
3
4
5
6

限制长度

所有文本框 (input或textarea ) 都可以使用[minlength) 和 [maxlength] 属性来限制长度。如果输入的字段长度小于 minlength 的值或大于 maxlength 值则无效

<form>
  <div>
    <label for="choose">Would you prefer a banana or a cherry?label>
    <input id="choose" name="i_like" required minlength="6" maxlength="6">
  div>
  <div>
    <label for="number">How many would you like?label>
    <input type="number" id="number" name="amount" value="1" min="1" max="10">
  div>
  <div>
    <button>Submitbutton>
  div>
form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

发送表单

action

这个属性定义了发送数据要去的位置。它的值必须是一个有效的 URL。如果没有提供此属性，则数据将被发送到包含这个表单的页面的 URL。

method

GET方法是浏览器使用的方法，请求服务器返回给定的资源:“嘿，服务器，我想要得到这个资源。”在这种情况下，浏览器发送一个空的主体。由于主体是空的，如果使用该方法发送一个表单，那么发送到服务器的数据将被追加到 URL

<form action="http://foo.com" method="get">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi">
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom">
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

由于已经使用了GET方法，当你提交表单的时候，您将看到www.foo.com/?say=Hi&to=Mom在浏览器地址栏里。

POST方法略有不同。这是浏览器在询问响应时使用与服务器通信的方法，该响应考虑了 HTTP 请求正文中提供的数据:“嘿，服务器，看一下这些数据，然后给我回一个适当的结果。”如果使用该方法发送表单，则将数据追加到 HTTP 请求的主体中。

<form action="http://foo.com" method="post">
  <div>
    <label for="say">What greeting do you want to say?label>
    <input name="say" id="say" value="Hi">
  div>
  <div>
    <label for="to">Who do you want to say it to?label>
    <input name="to" id="to" value="Mom">
  div>
  <div>
    <button>Send my greetingsbutton>
  div>
form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

POST / HTTP/2.0
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom
//Content-Length数据头表示主体的大小，Content-Type数据头表示发送到服务器的资源类型。稍后我们将讨论这些标头，默认情况下，它的值是application/x-www-form-urlencoded。它的意思是：“这是已编码为 URL 参数的表单数据。”

1
2
3
4
5
6
7
8

发送文件

如果你想要发送文件，你需要额外的三个步骤：

将method属性设置为POST，因为文件内容不能放入 URL 参数中。
将enctype的值设置为multipart/form-data，因为数据将被分成多个部分，每个文件单独占用一个部分，表单正文中包含的文本数据（如果文本也输入到表单中）占用一个部分。
包含一个或多个File picker小部件，允许用户选择将要上传的文件。

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a filelabel>
    <input type="file" id="file" name="myFile">
  div>
  <div>
    <button>Send the filebutton>
  div>
form>

1
2
3
4
5
6
7
8
9
10

参考文献：https://developer.mozilla.org

相关阅读:
人人皆知的人工智能真的稳定吗？它的发展前景如何？
PTA 7-68 Redemption
使用C++生成dll(动态链接库)，并用python调用
 sqlserver配置管理器无法启动解决方案
 [SQL开发笔记]IN操作符: 在WHERE子句中规定多个值
 计算机网络应用层的考纲内容网络应用模型域名系统
 C++ Reference: Standard C++ Library reference: C Library: cwchar: putwchar
02Java线程模型
 sklearn.metrics模块重要API总结（待更新）
Shell编程概述
原文地址：https://blog.csdn.net/weixin_43604021/article/details/126014592

一文学会html(详细)

目录标题

定义

元素

例子

嵌套元素

块级元素和内联元素

空元素

属性

布尔属性

html页面概览

特殊字符

head

元数据meta

页面图标

添加css和js

link

script

元素一览

段落

标题

列表

重点

超链接

引用

缩略语

编辑联系方式

上标、下标

计算机代码

标记时间和日期

布局

无语义元素

span

div

换行、分割线

图片

自适应图片

视频、音频

嵌入

矢量图

表格

表单

例子：

fieldset和legend

label

文本框

复选框、单选框

button

图像按钮

文件选择

表单数据验证

required

pattern

限制长度

发送表单

action

method

发送文件