HTML

2021-12-27  本文已影响0人  涛涛抄书

问题记录

常用

快捷键(vscode)：

好习惯：

知识

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

HTML实体：特殊符号的显示

概念

基本格式：

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

元素整理

文本元素

<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属性：

# 锚链接示例
<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="图片说明文本">

音视频元素：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>

列表元素

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

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

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

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

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

表单元素

说明

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

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

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

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：多行文本元素

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

常用属性

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

button：按钮

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

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

所有文本框都有一些通用规范：
- 可以被标记为 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，显示为红色。

通用属性：

表格元素

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

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

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

元素包含

其他知识

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

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

未整理

响应设计

图片设置举例：
<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>
上一篇下一篇

猜你喜欢

热点阅读