HTML

作者: 涛涛抄书 | 来源:发表于2021-12-27 22:37 被阅读0次

问题记录

有的网页图片直接复制地址粘贴之后并不能显示？-211211

常用

HTML检查网站：https://validator.w3.org/

快捷键(vscode)：

Ctrl+?：注释
Ctrl+Enter：转到下一行
批量生成HTML：
((h$[] >{$})+p>{})*6：emmet功能
h$*6>{}：同上
a.classname>{}
lorem：乱数假文、lorem1、lorem1000
按住滚轮可以块状选择
选中+Alt+Shift+↓：复制

好习惯：

怎么查找知识：MDN（推荐）、W3C（标准）
语义化（搜索引擎理解网页，根据SEO规则，语义化较好的网页会被优选排序靠前）
所有元素与展示效果无关（展示效果有CSS控制），选择什么元素，取决于内容含义，而不是效果

知识

语言：<html lang="cms-hans">

HTML实体：特殊符号的显示

<&单词;>：<（<）、>（>）、 （空格）、©（©）、&（&）；也可以用<&#数字;>，不过不方便记忆

概念

元素：起始标记+元素内容+结束标记，空元素无结束标记与元素内容
元素属性：属性名=“属性值”，布尔属性可只写属性名
元素关系：父元素、子元素、祖先元素、子孙元素、兄弟元素
分类：块级元素、行级元素，HTML5已弃用

基本格式：

<!DOCTYPE html>  #文档声明，告诉浏览器是html几
<html lang="cms-hans">  #不强制书写，不过一般没有省略的
<head>
  <meta>：空元素，charset（编码），网页适应宽度，描述内容，设置关键字
  <title></title>  #标签名称
  <link rel="stylesheet" href="my-css-file.css"> # 链接CSS或icon图标
  <script src="my-js-file.js" defer></script>
<\head>  #文档头，文档头内部的内容不会显示在页面上，脑袋里面想的东西
<body>  #主要操作空间

<\body>
<\html>

meta元素，常用来描述网页内容，或者设置关键字

<meta charset="utf-8"> #字符集，强烈建议默认utf-8
<meta name="author" content="teao"> #作者
<meta name="description" content="html learning"> #描述

link元素

<link rel="icon" href="favicon.ico" type="image/x-icon"> #图标
<link rel="stylesheet" href="my-css-file.css"> #链接CSS文件

script元素：用来链接或写入JS脚本

<script src="my-js-file.js" defer></script> #链接JS脚本
加载顺序JS相关：使用defer属性
参考：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#script_loading_strategies

元素整理

文本元素

h：标题，h1-h6
p：段落
span：无语义元素，常用于设置样式
pre：预格式化文本元素，内部空白不会折叠（默认源代码中连续空白字符会被折叠为一个空格），对应CSS属性white-space：pre
code：表示代码区域
em：局部强调内容，通过强调某一句话的不同单词可能导致不同的表达含义
strong：全局强调内容
del：错误内容
s：过期的内容
i元素：默认样式斜体，实际使用中，表示图标
var：特别标注的变量名
kbd：特别标注的键盘输入
samp：标识程序输出
br: 换行
hr: 水平线
address：联系方式什么的可以用这个包裹语义化
abbr：缩写

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

引用元素：

blockquote：块引用

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

q：行内引用

<p>The quote element — <code>&lt;q&gt;</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>

cite：

a元素：超链接

href属性：

普通链接：就是链接地址
锚链接：#，符号后不加字符回到顶部
功能链接（JS代码、发送邮件、电话）

# 锚链接示例
<h1 id="c1">章节1</h1>
<a href="#c1">章节1</a>
# 邮件链接示例
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com
&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">

title属性
download 下载默认文件名

图片元素：<img src="图片路径", alt="图片说明文本">

alt属性：当图片失效时展示的内容
和a元素连用，点击图片跳转
和figure、figurecaption连用：语义化，让浏览器可以知道标题与文字与图片相关
和map元素连用（不常用），点击不同地方到不同网页；area属性需要测量，一般电脑125%量出来会有问题，map元素name属性类似于锚链接

音视频元素：video、audio

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">  #添加字幕
  <p>Your browser doesn't support HTML5 video. 
     Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

布尔属性：control（显示控件）、mute（静音）
格式一般选用mp4、mp3

列表元素

无需列表ul（unorder list）>li：只能包含li（list item）
有序列表ol>li
定义列表dl：包含dt（定义标题）与dd（定义描述）

容器元素：非标一个块区域，内部用于放置其他元素

header（页眉或文章头部）、nav（导航栏）、main（主体部分）、article（文章）、section（章节）、aside（侧边栏）、footer（页脚或文章尾部）
div：html5之前只能用这个，无语义，现在不建议使用

iframe元素（可替换元素）通常用于在网页中嵌入另一个页面

通常行盒
通常显示的内容取决于元素的属性
CSS不能完全控制其样式
具有行块盒特点

ex：B站可支持这种方式嵌入

在页面中使用flash：object、embed、MIME

表单元素

说明

表单检验：服务器端要进行检验，因为前端比较容易绕过限制
用<div>元素包装标签和它的小部件是很常见的做法。<p>元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。
除了<fieldset>元素之外，使用HTML标题（例如，<h1> 、<h2> ）和分段（如<section>）来构造一个复杂的表单也是一种常见的做法。
表单很烦，尽量少用，尽量剪短

form元素：最外层，提供表单的行为，不能嵌套

action:发送位置
method:方法，get、post等

fieldset元素：通常用于为表单或单选按钮区块分组

legend：field元素的第一个子元素，用来说明该组的名称

label元素：表单控件对应标签

for：关联表单，可通过点击label改变表单状态
在多个标签的情况下，建议将一个小部件和它的标签嵌套在一个<label>元素中。多个的情况下这样比较好：

<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

selection：下拉框

optgroup：select子元素，选项分组；

使用lable属性进行分组

option：常用做optgroup、datalist子元素，标识可选项

若添加value属性，则发送时发送value属性而非元素之间的值

textarea：多行文本元素

非空元素，默认值可写在中间

常用属性

cols: 一行能容纳多少字符
rows：占多少行
wrap：控制换行
soft：默认值，输入不换行，显示换行
hard：输入与显示都换行，使用该值必须指定cols属性
off：均不换行
maxlength：最多字符限制

可通过CSS的resize属性来决定那边可以拉伸，

button：按钮

可选属性reset、submit与button，默认submit

input：输入框，通过改变type可实现丰富的功能

type：设置不同类型，默认text，可设置为submit、button、checkbox、radio、email、password、number、date、file、hidden、image、reset。
如果设置为button、submit、reset，value值只能接受文本，不如button元素丰富
通过appearance：none来屏蔽浏览器默认样式，从而自己设置样式

所有文本框都有一些通用规范：
- 可以被标记为 readonly（用户不能修改输入值）甚至是 disabled（输入值永远不会与表单数据的其余部分一起发送）。
- 可以有一个 placeholder；这是文本输入框中出现的文本，用来简略描述输入框的目的。
- 可以使用 size (en-US)（框的物理尺寸）和 maxlength (en-US)（可以输入的最大字符数）进行限制。
- 浏览器支持的话，它们可以从拼写检查（使用 spellcheck 属性）中获益。

- password:，只是显示方式，并不会以密文方式发送数据，请使用https
- hidden：不应为其设置label标签，用户完全不可操作，当想要随表单发送一些数据时可用
- checkbox、radio：复选框和单选框，单选框设置相同name属性可以进行归类，checked属性将选项框状态预置为选中状态
* 可用复选框做切换开关 
- button：具备submit、reset、button三种可选值，
* submit为提交数据、
* reset为恢复表单状态，
* button为没有默认功能的按钮可以通过JavaScript进行功能的设置
- image：图像按钮，submit表单的同时会返回点击位置距离图像左上角的坐标，可用于制作热图
- file：文件选择器，可添加multiple属性支持多个文件
- email、tel、url：会在易用性上有所改善
- number：可设置max、min、step、默认只能输入整数，通过调整step可以输入小数。
- range：出现拉条框，需要结合output元素，并使用java显示数值
    <label for="price">Choose a maximum house price: </label>
    <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
    <output class="price-output" for="price"></output>
    const price = document.querySelector('#price');
    const output = document.querySelector('.price-output');
    output.textContent = price.value;
    price.addEventListener('input', function() {
      output.textContent = price.value;
    });
datetime-local、month、time、week：日期及时间选择器，可以使用min、max、step属性进行取值范围的限制
color：颜色选择器

datalist：可选列表、补全列表

其ID与其他属性的list属性关联，为文本框提供可选项，可选项通过option提供

progress：进度条

metre：仪表盘，不同区块显示不同属性，

可设定属性：[min low] (low high) [high max]；optimum。optimum的值位于区间内为prefer，显示为绿色，两侧紧邻为黄色average，若有更远区域则为worst，显示为红色。

通用属性：

autofocus：默认false、允许指定加载时焦点定位在哪个表单元素上
disabled：默认false、禁用表单元素
form：值为文档中form元素的id属性，表示与该表单关联
name：元素名称
value：元素的初始值

表格元素

整体：table
标题：caption
表头：thead
表格主题：tbody
表尾：tfoot
表格行：tr
标题单元格：th
单元格：td
列：colgroup

colspan：该格占几列格子，
rowspan：该格占几行
scope：语义化，告知到底是行、列还是行组、列组等

<colgroup>  直接对列设置样式，要与列数相等
  <col style="background-color: yellow" span="2">
</colgroup>

元素包含

原：包含关系就是块级包行级，不能反过来，a元素例外
现：元素的包含关系由元素的内容类别决定，可以直接在MDN上查看可以包含什么，官方定义https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
简单记忆：容器元素之中可以包含任何元素，a元素中几乎可以包含任何元素，某些元素有固定的子元素（ul、ol、dl）

其他知识

拥有独立内核浏览器：Firefox、Chrome、IE、opera、Safari

环境： MDN有入门需求软件的详细说明

vscode
F1-config display设置中文
插件：vscode-icons（皮肤）、live server（效果直观查看）、markdown preview enhance（markdown增强）、emmet（自动生成HTML代码，内置）
emmet可能需要修改：F1-setting-打开工作区设置-扩展-emmet-Syntax Profiles

{
    "emmet.syntaxProfiles": {
        "html": {
            "inline_break": 2
         }
     }
}

未整理

全局属性
id属性，全局属性，元素在文档中的唯一编号
class属性
lang属性，可设置某一部分的语言
规则
新版本的包含关系
一级标题只有一个、标题顺序要明确，尽量不要超过三级
ol ul 可以多级包含
header、nav、main、article、section、aside、footer、div，尽量少用div，因为没有语义，后期维护会很麻烦（最好只有与找不到要用语义的情况下使用）
img的alt最好描述详细一些，防止图片不能正常加载的时候不太影响

响应设计

图片设置举例：
<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

<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>