HTML

---

问题记录

• 有的网页图片直接复制地址粘贴之后并不能显示？-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实体：特殊符号的显示

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

---

概念

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

基本格式：

  #文档声明，告诉浏览器是html几
  #不强制书写，不过一般没有省略的

  ：空元素，charset（编码），网页适应宽度，描述内容，设置关键字
    #标签名称
   # 链接CSS或icon图标
  
<\head>  #文档头，文档头内部的内容不会显示在页面上，脑袋里面想的东西
  #主要操作空间

<\body>
<\html>

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

 #字符集，强烈建议默认utf-8
 #作者
 #描述

link元素

 #图标
 #链接CSS文件

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

 #链接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：缩写

We use HTML to structure our web documents.

引用元素：

blockquote：块引用

  
The HTML <blockquote> Element (or HTML Block
  Quotation Element) indicates that the enclosed text is an extended quotation.

q：行内引用

The quote element — <q> — is intended
for short quotations that don't require paragraph breaks.

cite：

a元素：超链接

href属性：

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

# 锚链接示例
章节1
章节1
# 邮件链接示例

title属性
download 下载默认文件名

图片元素：

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

音视频元素：video、audio

Your browser doesn't support HTML5 video. 
     Here is a link to the video instead.

• 布尔属性：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元素（可替换元素）通常用于在网页中嵌入另一个页面

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

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

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

表单元素

说明

• 表单检验：服务器端要进行检验，因为前端比较容易绕过限制
• 用
  元素包装标签和它的小部件是很常见的做法。

  元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）。

• 除了
  元素之外，使用HTML标题（例如，

  、

  ）和分段（如

  ）来构造一个复杂的表单也是一种常见的做法。

• 表单很烦，尽量少用，尽量剪短

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

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

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

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

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

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

  Name: *
  

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显示数值
    Choose a maximum house price: 
    
    

    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：语义化，告知到底是行、列还是行组、列组等

  直接对列设置样式，要与列数相等
  

---

元素包含

• 原：包含关系就是块级包行级，不能反过来，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最好描述详细一些，防止图片不能正常加载的时候不太影响

响应设计

图片设置举例：