Loading~~~

ε≡≡≡(๑╹ヮ╹๑)ﾉ

HTML学习笔记

HTML5：

超文本标记语言，是一种用于告知浏览器如何组织页面的标记语言，文件格式以.html结尾

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

标签：标记语言的组成部分，是由"<>"包围的关键字

单标签元素(又称空元素)：<img>

双标签元素：<html>内容</html>

属性：元素可以拥有属性，属性必须包含—用于间隔其他内容的空格、属性名称(后部添加=)、属性值(由一对单/双引号标注，某些情况可以省略单/双引号)

布尔属性：只能有一个值，一般与属性名称相同

DOCTYPE声明："document type"的缩写，位于文档最前方，必备组成部分-避免浏览器的怪异模式<!DOCTYPEhtml>

HTML基本骨架：

html元素(根元素)：定义html文档，限定文档的开始与结束，双标签元素

head元素(容器)：定义文档头部，包含描述文档属性和信息的元数据，一般不显示给读者，双标签元素 

title元素：定义文档标题，直接显示在浏览器窗口的标题栏或状态栏上，head的必备组成部分，有利于SEO优化，双标签元素

  • 注：SEO是搜索引擎优化的英文缩写，通过对网站内容调整，满足搜索引擎的排名需求

meta元素：描述html网页文档的属性，关键词等，单标签元素

body元素：定义文档主体，包含文档所有内容，一般直接显示给读者，双标签元素

<html>
    <head>
    <meta charset="UTF-8" name="" content="">
    <title>文本信息</title>
    </head>
    <body>
    文本信息
    </body>
</html>

name属性：指定 meta 元素的类型，说明该元素包含了什么类型的信息

content属性：指定了实际的元数据内容

charset属性：设定文档字符集

HTML中空白符：HTML 解释器会将连续出现的空白字符减少为一个单独的空格符

HTML中特殊字符包含：每个字符引用时以符号 & 开始，以分号(;)结束，用于表示属于HTML 语法自身的特殊字符

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

HTML注释：在代码中加入不影响程序运行和显示的注释以解释你的逻辑或编码，使用方式 <!--注释--!>

为站点增加自定义图标：将<link rel="" href="" type="" />添加到 HTML 的 <head>块中以实现

为文档设定主语言：通过添加lang属性到<HTML>中来实现

元素：

标题元素：

由<h1>-<h6>定义，双标签元素

<h1 align="">文本信息</h1>

  • 注：h$*N快速生成N级元素

align属性：设置文本对齐方式

段落元素：

显示一段文本，双标签元素

<p>文本信息</p>

换行元素：

在不产生新段落的情况下进行换行，是唯一能够生成多个短行结构的元素，单标签元素

文本信息<br>文本信息

水平线元素：

显示一条水平线，单标签元素

<hr color="" width="" size="" align="">

color属性：设置水平线颜色

width属性：设置水平线长度

size属性：设置水平线高度

align属性：设置水平线对齐方式(默认居中)

媒体图像元素：

img：

显示一张图片，单标签元素

<img src="" alt="" width="" height="" title="">

src属性：路径(图片地址或名称)

  • 注：绝对路径：电脑盘符存储与访问具体地址
  •     相对路径：访问者与访问对象的相对关系，同一路径可直接访问
    • 子级关系：/访问对象
    • 父级关系：../访问对象
    • 同级关系(可以省略)：./访问对象
  •     网络路径：具体的网络地址

alt属性：指定图像无法显示时的替代文本

width属性：指定图像宽度

height属性：指定图像高度

title属性：光标悬停时提示的信息

为图片添加信息说明：

<figure>
    <img>
    <figcaption>文本信息</figcaption>
</figure>
  • 注：<figure>里可以是一个独立内容单元，可以是图片、代码、音视频、方程、表格等
    • 1.用简洁易懂的方式表达意图
    • 2.可以置于页面线性流的某处
    • 3.为主要内容提供重要的补充说明

响应式图片：

为<img>添加srcset和sizes属性来提供更多额外的资源图像和提示

srcset属性：文件名+空格+图片固有宽度(使用宽度描述符w)

srcset="XXX.jpg 480w"

sizes属性：媒体条件+空格+条件为真时执行语句

sizes="(max-width: 600px) 480px"

添加以上属性后，浏览器会(旧版本浏览器会跳过判断直接加载src属性引用的图像文件)：

  1. 检查设备宽度
  2. 检查sizes列表中哪个媒体条件为真
  3. 查看给予该媒体查询的槽大小
  4. 加载srcset列表中引用的最接近所选槽大小的图像
  • 注：可使用srcset结合X语法达成无需sizes的更简单实现-srcset="***.jpg, ***.jpg 1.5x, ***.jpg 2x"

picture：

包含<source>元素，使浏览器在不同资源中做出选择

<picture>
    <source media="(max-width:799px)" srcset="XXX.jpg">
    <source media="(min-width:800px)" srcset="XXX.jpg">
    <img src="XXX.jpg">
</picture>
  • 注：srcset属性要显示图片的路径
  •   任何情况下，</picture>之前必须被正确提供一个<img>元素以及它的src和alt属性，否则不会显示图片
  •   当媒体条件均判断为假时会显示默认图片
  •   不要使用 media 属性，除非你也需要用到美术设计
  •   在 <source> 元素中，你只可以引用在 type 中声明的文件类型
  •   可以在 srcset 和 sizes 中使用逗号分割多个引用文件

video(媒体播放器)：

嵌入一段视频，双标签元素

<video src="" controls width="" height="" autoplay loop muted poster="" preload="">
    <p>文本内容<a>文本内容</a>文本内容</p>
</video>

src属性：媒体路径或名称

controls属性：包含浏览器提供的媒体控件

width属性：指定媒体宽度

height属性：指定媒体高度

autoplay属性：使媒体内容立即播放

loop属性：使媒体内容循环播放

muted属性：使媒体播放时默认关闭声音

poster属性：指向需要额外显示的图像的URL，会在视频播放前粗略显示

preload属性：用于缓冲较大文件

  none-不缓冲

  auto-页面加载后缓存媒体文件

  metadata-仅缓冲文件的元数据

<video>元素中的内容：

后备内容，当浏览器不支持<video>元素时，就会显示该后备内容来确保用户访问到文件

确保视频正确播放：
<video controls>
    <source src="" type="" />
    <source src="" type="" />
    <p>文本信息<a href="">文本信息</a>文本信息</p>
</video>

将src属性从<video>中移除，放在单独的<source src="" type="">中，浏览器将会逐个检查该元素并播放与其codec匹配的媒体

type属性：添加视频文件的类型使浏览器更快速地判断是否符合播放要求

audio(音频播放器)：

与<video>使用方式几乎完全相同，双标签元素

由于无视觉部件，因此不支持width/height/poster属性

<audio src="" controls autoplay loop muted preload="">
    <p>文本内容<a>文本内容</a>文本内容</p>
</audio>
显示音轨文本：

使用<track src="" kind="" srclang="">元素，链接WebVTT格式文件(后缀为.vtt)，并置于<audio>/<video>元素中、<source>元素之后，一般有以下三种常见样式

  subtitles：通过添加翻译字幕来帮助理解内容

  captions：同步翻译对白或有重要信息的声音，服务于有听觉障碍的人

  timed descriptions：将文字转换为音频，服务于有视觉障碍的人

src属性：WebVTT文件路径

kind属性：指明样式类型

srclang属性：指明编写使用的语言

嵌入元素：

iframe：

将其他Web文档嵌入到当前文档，双标签元素

<iframe src="" width="" height="" frameborder="" allowfullscreen sandbox="">
</iframe>
  • 注：同样可以包含后备内容

src属性：被嵌入内容的URL路径

width属性：指定iframe宽度

height属性：指定iframe高度

frameborder属性：1/0是否绘制边框

allowfullscreen属性：允许通过全屏API设置为全屏模式

sandbox属性：给予嵌入内容特定权限来保护网页

embed/object：

嵌入多种类型的外部内容的通用嵌入工具(Java小程序、Flash、PDF、视频、SVG、图像等)，单标签元素

  <embed> <object>
嵌入内容的网址 src data
嵌入内容的准确媒体类型 type type(可使用typemustmatch属性增强安全性)
由插件控制嵌入框的高度与宽度 height、width height、width
名称和值，将插件作为参数提供 具有此名称和值的adhoc属性 单标签元素<param>元素，包含在<object>内
独立的HTML内容作为不可用资源的回退 不支持 包含在<object>之后<param>

矢量图形(SVG)：

矢量图文件包含了图形和路径的算法定义，不会因缩放导致失真，双标签元素

<svg version="" baseProfile="" width="" height="" xmlns="">
    <circle>/<rect>/<feColorMatrix>/<animate>/<mask>
</svg>
  • 注：可使用<img>元素中的src属性将SVG嵌入
    • 优点：快速，熟悉的图像语法与alt属性中提供的内置文本等效
    •      可以通过在<a>元素嵌套<img>，使图像轻松地成为超链接
    • 缺点：无法使用 JavaScript 操作图像
    •      若要使用 CSS 控制 SVG 内容，则必须在 SVG 代码中包含内联 CSS 样式， (从 SVG 文件调用的外部样式表不起作用)
    •      不能用 CSS 伪类来重设图像样式(如：focus)
    •  
  •   可以从src属性引用PNG或JPG，添加srcset属性引用svg文件，将自动根据浏览器支持类型进行加载
  •   可使用<rect>元素引入SVG代码
    • 优点：将 SVG 内联减少 HTTP 请求，可以减少加载时间。
    •      您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在 SVG 中，还是 HTML 文档中的 CSS 样式规则，实际上，您可以使用任何 SVG 外观属性 作为 CSS 属性
    •      内联 SVG 是唯一可以让您在 SVG 图像上使用 CSS 交互(如：focus)和 CSS 动画的方法(即使在常规样式表中)，您可以通过将 SVG 标记包在<a>元素中，使其成为超链接
    • 缺点：这种方法只适用于在一个地方使用的 SVG，多次使用会导致资源密集型维护(resource-intensive maintenance)
    •      额外的 SVG 代码会增加 HTML 文件的大小
    •      浏览器不能像缓存普通图片一样缓存内联 SVG
    •      您可能会在<foreignObject> 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像，你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得
  •   可使用<iframe>嵌入SVG
    • 缺点：iframe有一个回退机制，若浏览器不支持iframe，则只会显示回退
    •      除非 SVG 和您当前的网页具有相同的 origin，否则你不能在主页面上使用 JavaScript 来操纵 SVG
    •  

超文本链接元素：

可以是文本，图像，点击超文本链接来跳转到新文档或当前文档某一部分，双标签元素

<a href="" target="" rel="" download="">链接文本</a>

  • 注：当光标移动到超链接上时会呈现"链接选择"样式

href属性：描述连接的地址

  • 注：任何标准的邮件头字段可以被添加到你提供的mailto URL 中，每个字段的值必须使用 URL 编码

target属性：指定链接打开的目标窗口或框架

  • 注：未访问过链接显示为蓝色字体并带有下划线
  •     访问过的链接显示为紫色并带有下划线
  •     点击链接时显示为红色并带有下划线

rel属性：指定与当前文档之间的关系

download属性：提供可下载的默认保存文件名

常用文本元素：

对显示文本进行格式更改，双标签元素

<em>文本信息</em>：定义着重文字

<b>文本信息</b>：定义粗体文字

<i>文本信息</i>：定义斜体字

<strong>文本信息</strong>：定义加重语气

<del>文本信息</del>：定义删除字

<span>文本信息</span>：元素没有特定含义

  • 注：段落元素表示一段文本，文本元素表示文本词汇

列表元素：

有序列表：

有序列表显示一列项目，使用数字进行标记，有序列表标识符<ol>,列表项标识符<li>，双标签元素

<ol type="">
  <li>文本信息</li>
    <li>文本信息</li>
</ol>

type属性：1表示列表项目用阿拉伯数字标号(1,2,3)

      a表示列表项目用小写字母标号(a,b,c)

      A表示列表项目用大写字母标号(A,B,C)

      i表示列表项目用小写罗马数字标号(i,ii,iii)

      I表示列表项目用大写罗马数字标号(I,II,III)

无序列表：

无序列表显示一列项目，使用粗体圆点进行标记，有序列表标识符<ul>,列表项标识符<li>，双标签元素

<ul type="">
  <li>文本信息</li>
    <li>文本信息</li>
<ul>

type属性：disc表示列表项目用默认实心圆标识

      circle表示列表项目用空心圆标识

      square表示列表项目用小方块标识

      none表示列表项目不显示标识

  • 注：ul>li*N快速生成ul+N个li的布局

描述列表：

标记一组项目及其相关描述，例如术语和定义或是问题和答案等，并产生相对应可帮助阅读的缩进，描述列表标识符<dl>，描述项标识符<dt>，描述内容标识符<dd>，双标签元素

<dl>
    <dt>描述项</dt>
    <dd>描述内容</dd>
<dl>

表格元素：

同行等高，同列等宽的表格格式符<table>,行标志符<tr>，列标志符<td>，表格标题提示符<caption>，单元格标题标志符<th>，双标签元素

<table border="" width="" height="">
  <caption>文本信息</caption>
  <tr>
    <th>单元格</th>
    <th>单元格</th>
  </tr>
  <tr>
    <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>
  • 注：table>tr*M>td*N{需要显示的文本信息}快速生成一个M行N列的表格

border属性：设置表格边框

width属性：设置表格宽度

height属性：设置表格高度

scope属性：用于位于多个列或行的标题(列-colgroup、行-rowgroup)

  • 注：子标题应有scope="col/row"属性
  •     为每个<th>元素添加唯一id属性和为每个<td>元素添加唯一headers属性(headers属性需包含它从属于的所有标题的id，使用空格分隔)来创建标题与单元格之间的联系来替代scope属性

单元格的合并：

水平合并：colspan="合并单元格数"，保留左边删除右边

垂直合并：rowspan="合并单元格数"，保留上边删除下边

<table border="" width="" height="">
  <tr>
    <td colspan="3">单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td rowspan="2">单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
        <td>单元格9</td>
    </tr>
</table>
  • 注：单元格2、单元格3、单元格7是被合并的单元格，需被删除

表格样式：

使用<colgroup>元素置于<table>元素中定义列样式，双标签元素

  • 注：不应用样式的列应该设置该列样式为空
<colgroup>
    <col />
    <col style="" />
</colgroup>

添加span属性可以将样式信息应用到每一列

<colgroup>
    <col style="" span="" />
</colgroup>

表头表尾表体：

<thead> 元素必须包住表格中作为表头的部分。一般是第一行，往往都是每列的标题，但是不是每种情况都是这样的。若你使用了 <col>/<colgroup> 元素，那么 <thead> 元素就需要放在它们的下面

<tfoot> 元素需要包住表格中作为表脚的部分。一般是最后一行，往往是对前面所有行的总结，例如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面(浏览器仍将它呈现在表格的底部)

<tbody> 元素需要包住表格内容中不在表头或表尾的其他部分。它可以出现在表头的下方，或者有时出现在表脚下方，这取决于你如何安排它

  • 注：<tbody> 总是包含在每个表中，若你没有在代码中指定它，那就是隐式的

引用元素：

块引用：

一个块级内容从其他地方被引用，应用<blockquote>元素将其包裹起来表示，且在cite属性里用 URL 来指向引用的资源，并产生相对应可帮助阅读的缩进，双标签元素

<blockquote cite="">
  <p>
  块引用内容
    </p>
</blockquote>

行内引用：

一个行内元素从其他地方被引用，应用<q>元素将其包裹起来表示，且在cite属性里用 URL 来指向引用的资源，并产生相对应表示引用的引号标识符，双标签元素

<p>
文本信息<q cite="">行内引用内容</q>文本信息
</p>

引文：

在使用cite引用文本时，需要在文本中通过链接或其他适当的方式来提供cite的内容，引文默认的字体样式为斜体,双标签元素

<cite>
引文内容
</cite>

Form表单：

在Web网页中采集用户信息，使网页具有交互功能，完整表单由表单标签元素、表单域(容器)、表单按钮(控件)组成，双标签元素

<form action="URL" method="get|post" name="">
  <input type="" value="">
</form>

action属性：服务器地址

method属性：提交表单方式

  • 注：get提交少量数据，post提交大量数据
  •     get方式URL可见，post方式URL不可见

name属性：表单名称

value属性：替换显示内容

inputtype属性：

文本框-text

密码框-password

  • 注：密码字段字符不会明文显示，以星号或原点代替

提交-submit

标记语：

缩略语：

常用于包裹一个缩略语或缩写，并使用title属性提供解释,双标签元素

<p>
文本信息<abbr title="">缩略语</abbr>文本信息
</p>

联系方式：

提供联系信息，双标签元素

<address>
文本内容
</address>

上标和下标：

使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标，以确保它们的正确含义，双标签元素

文本信息<sub>下标</sub>
文本信息<sup>上标</sup>
  • 注：<address>只能用于提供最近的<article>或<body>元素所含文件的联系信息，在一个网站的页脚使用它来包括整个网站的联系信息，或在一篇文章里面使用它来包括作者的联系信息，但不能用于标记与该页面内容无关的地址列表

计算机代码：

大量的 HTML 元素可以来标记计算机代码，双标签元素

<code>：用于标记计算机通用代码

<pre>：用于保留空白字符(通常用于代码块)——若文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它，但是，若你将文本包含在<pre>元素中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来

<var>：用于标记具体变量名

<kbd>：用于标记输入电脑的键盘(或其他类型)输入

<samp>：用于标记计算机程序的输出

时间和日期：

允许你附上清晰的、可被机器识别的时间或日期来易被电脑识别，双标签元素

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 提及特定周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

行内元素(内联元素)和块级元素：

块级元素：在页面中独占一行(自上而下垂直排列)，可设置width、height属性，一般可以包含行内元素和其他块级元素

常见块级元素：div、form、h1~h6、hr、p、table、ul等

  div元素：双标签元素<div>内容</div>

内联元素：在页面中只占自身大小，不可设置width、height属性，一般包含内联元素不包含块级元素

常见内联元素：a、b、em、i、span、strong等

行内块级元素(不换行、能够识别宽高)：button、img、input等

文档的基本组成部分：

页眉<header>：通常横跨于整个页面顶部有一个大标题和/或一个标志

导航栏<nav>：指向网站各个主要区段的超链接

主内容<main>/<article>/<section>/<div>：中心的大部分区域是当前网页大多数的独有内容

侧边栏<aside>：一些外围信息、链接、引用、广告等，还可能存在其他的重复元素，如辅助导航系统，通常嵌套在<main>中

页脚<footer>：横跨页面底部的狭长区域

HTML布局元素细节：

语义元素：

<main>存放每个页面独有的内容，每个页面上只能用一次<main>，且直接位于<body>中，最好不要把它嵌套进其他元素

<article>包围的内容即一篇文章，与页面其他部分无关(例如一篇博文)

<section> 与<article>类似，但<section>更适用于组织页面使其按功能(例如迷你地图、一组文章标题和摘要)分块，一般的最佳用法是：以标题作为开头；也可以把一篇<article>分成若干部分并分别置于不同的<section>中，也可以把一个区段<section>分成若干部分并分别置于不同的<article>中，取决于上下文

<aside> 包含一些间接信息(术语条目、作者简介、相关链接等)

<header>是简介形式的内容，若它是<body>的子元素，那么就是网站的全局页眉，若它是<article>或<section>的子元素，那么它是这些部分特有的页眉(此<header>非彼标题)

<nav>包含页面主导航功能，其中不应包含二级链接等内容

<footer>包含了页面的页脚部分

无语义元素：

<span>：内联的无语义元素，应仅用于无法找到更好的语义元素来包含内容或不想增加特定含义时

<div>：块级无语义元素，应仅用于找不到更好的块级元素来包含内容或不想增加特定含义时

HTML和调试：

宽松的代码：

HTML不易出现语法错误，因为浏览器是以宽松模式运行的，即使出现语法错误浏览器依然会继续运行

浏览器通常都有内建规则来解析书写错误的标记，即使与预期不符，页面仍可显示出来，但存在隐患

HTML验证：

通过The W3C Markup Validation Service进行HTML的文档或代码验证，并接收到一份错误报告

 

posted @ 2023-07-20 20:30  K4ras  阅读(91)  评论(0)    收藏  举报