奇舞学院学习笔记之HTML一页通_一页通如何制作-优快云博客

本文链接：https://blog.youkuaiyun.com/sunxiaofre/article/details/69500253

本文详细介绍了HTML的发展历程，从HTML的起源、HTML5的设计思想，到HTML5的基本语法和新标签，包括链接、图片、表格、表单的使用。此外，还提到了HTML5的全局属性、无障碍性以及一些最佳实践，旨在帮助初学者快速掌握HTML5。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML简介与文本

HTML是什么

HyperText Markup Language
使用标签来描述页面的内容和结构

Doctype的作用

指定HTML页面使用的标准和版本
浏览器根据doctype决定使用哪种渲染模式

渲染模式

Quirks Mode 怪异模式
Almost Standard Mode 准标准模式
Standard Mode 标准模式
HTML页面第一行要写：<!DOCTYPE html>

历史

HTML产生

1989年，Tim Berners-Lee，互联网之父
共享文档需要
还发明了浏览器、服务器和HTTP

HTML 1.0，1991

HTML 2.0，1994，IETE

HTML 3.2， 1997，W3C

Netscape引入私有标签
HTML 3.0失败
W3C接管HTML标准化

HTML 4.01，1998

样式与内容分离，CSS支持
Doctype

XHTML 1.0，2000

用XML语法重新定义HTML
语法严格要求

XHTML 2.0

不兼容历史
去除样式类标签
去除img、a标签
彻底修改Form
开发者不欢迎，浏览器不支持

HTML5

2004年，WHATWG继续发展HTML
2008年，W3C HTML5草案发布

HTML5 设计思想

兼容已有内容
避免不必要的复杂性
解决现实的问题
优雅降级（用户的需求–开发者的需求–浏览器厂商的需求–标准的制定者的需求–理论）
尊重事实标准

HTML5语法

标签不区分大小写，推荐小些
空标签可以不闭合，如<input> <meta>
属性不必引号，推荐双引号
某些属性值可以省略，如required readonly

HTML5标签

<hr> 段落级别的话题切换（效果：一条横线）
列表：（有序列表<ol start='2'><li></li></ol>、无序列表<ul><li></li></ul>、自定义列表<dl><dt>键</dt><dd>值</dd></dl>）。列表是可以嵌套的（列表中有列表，自动默认有缩紧）。
嵌套规则：内外不要混搭
引用：（<blockquote cite="myURL">长段落引用块标签</blockquote> <cite>短引用说来源，如书名、标题</cite> <q>引用的内容，如引用一句话</q>）
预格式化文本：可以用<pre></pre>保留空格和换行
代码段：<code></code>
插图：<figure><img><figcaption></figcaption><pre><code></code></pre></figure>。 figure可以包裹图片或代码段
网页总体结构
内容划分

<article>
    <header>
        <h1></h1>
        <p></p>
    </header>
    <section>
        <h2></h2>
        <p></p>
    </section>
    <section></section>
    <footer>
        <h2></h2>
        <nav>
            <ul>
                <li></li>
            </ul>
        </nav>
    </footer>
</article>

强调：
- strong：重要性、严重性、紧急性
- em：从一句话中突出某个词
- b：仅为了将词语从视觉上和其他部分区分，比如一篇论文摘要中的关键词。（不推荐）
- i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白。（不推荐）
定义与缩写：<dfn>定义</dfn> <abbr title="对缩写的解释">缩写</abbr>
代码：<code>代码段</code> <var>变量</var> <kbd>键盘按键</kbd> <samp>例子</samp>
上标和下标：<sub></sub> <sup></sup>
mark：和用户当前行为相关的突出，比如在搜索结果中匹配到的词；一部分内容需要在后面引用时。
插入和删除：<ins></ins> <del></del>
换行控制（尽量避免）：<br> <wbr>
实体（Entity）字符：&amp &nbsp &gt &copy &yen &#9775

链接与图片

链接

省略协议
省略协议和host
相对路径与绝对路径（开发时一般用省略协议和host的绝对路径）
页面内跳转：锚点
- <a href="#idName">连接到本页面id=idName的元素所在处</a>
- <a href="#">链接到本页面顶部</a>
链接目标target：_self, _blank, abc(随意一个值，指定同一个值会共用同一个页面)

图片

<img src="" alt="替代文字" width="" height=""><figcaption>图片说明</figcaption>
指定图片宽高：
- 不指定宽高：原图大小显示
- 指定宽度：按比例缩放到指定宽度
- 指定高度：按比例缩放到指定高度
- 指定宽高：强制按指定宽高显示
常用图片格式：
- jpg：照片，色彩丰富的图片（常用）
- png：色彩较少时使用，png24可以半透明（常用）
- gif：色彩较少时使用，gjf无法半透明，可以多帧做动画（较少用）
- webp：有些浏览器不支持

表格

基本格式

th不仅可以出现在thead中，也可以出现在tbody中，只要认为此单元格是表头性质的，就可以用th。tr表示行，td表示列。
部分错误的嵌套，浏览器会尽可能补全缺失的部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <caption>浏览器及其引擎</caption>
    <thead>
        <tr>
            <th>浏览器</th>
            <th>渲染引擎</th>
            <th>JavaScript 引擎</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Chrome</th>
            <td>Blink</td>
            <td>V8</td>
        </tr>
        <tr>
            <th>Opera</th>
            <td>Blink</td>
            <td>V8</td>
        </tr>
        <tr>
            <th>Firefox</th>
            <td>Gecko</td>
            <td>SpiderMonkey</td>
        </tr>
    </tbody>
</table>
</body>
</html>

这里写图片描述

合并单元格

合并行 rowspan：一个单元行占几行。
合并列colspan：一个单元格占几列。


<!--合并行-->
<table border="2">
    <thead>
    <tr>
        <th>浏览器</th>
        <th>渲染引擎</th>
        <th>JavaScript 引擎</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>Chrome</th>
        <td rowspan="2">Blink</td>
        <td rowspan="2">V8</td>
    </tr>
    <tr>
        <th>Opera</th>
        <!--<td>Blink</td>-->
        <!--<td>V8</td>-->
    </tr>
    <tr>
        <th>Firefox</th>
        <td colspan="2" align="center">Gecko</td>
        <!--<td>SpiderMonkey</td>-->
    </tr>
    </tbody>
</table>

这里写图片描述

表格说明

表格说明
- 表头<caption>表头</caption> caption必须是table的第一个元素。

列组

列组：colgroup


<table border="2">
    <caption>浏览器及其引擎</caption>
    <colgroup>
        <col class="browser" style="background: #a7c7dc;">
        <col class="engine" span="2" style="background: #f0ad4e;">
    </colgroup>
    <thead>
    <tr>
        <th>浏览器</th>
        <th>渲染引擎</th>
        <th>JavaScript 引擎</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>Chrome</th>
        <td rowspan="2">Blink</td>
        <td rowspan="2">V8</td>
    </tr>
    <tr>
        <th>Opera</th>
        <!--<td>Blink</td>-->
        <!--<td>V8</td>-->
    </tr>
    <tr>
        <th>Firefox</th>
        <td colspan="2" align="center">Gecko</td>
        <!--<td>SpiderMonkey</td>-->
    </tr>
    </tbody>
</table>

这里写图片描述

表单

使用form获取让用户提供数据

一个form表示一个表单，让用户提供输入；form中有两个最重要的属性action和method。 action表示用户提交到的url，可以是一个服务器端的处理程序，获取数据做进一步的处理。method表示用get方式还是post方式提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="#" method="post">
    <p>USER: <input type="text" name="uesename"></p>
    <p>PASSWORD: <input type="password" name="password"></p>
    <p><button type="submit">LOGIN</button></p>
</form>
</body>
</html>

这里写图片描述

GET与POST

获取还是修改
- get：从服务器获取东西；
- post：向服务器提交东西。
数据传输方式的区别：
- get：把字段数据放到url中提交，一次性将数据发送给服务器；
- post：不会把数据放到路径url中，而是将数据以某种形式进行编码，将编码后的内容放到HTTP的body中提交。需要分两次才能发送给服务器。HTTP分两次发送，第一次发送head，第二次发送body。
- 发送的位置不同而已，都没有做加密解密的操作。只不过get方式放在url中在浏览器的url中可以看到，而post看不到。

URL Encode（URL编码）

空格 => %20 （空格会默认替换为加号+）
! => %21
” => %22
# => %23
$ => %24
% => %25
’ => %27
（加号+会默认替换为 %2B）
等等

HTTP method

GET
POST
HEAD：只返回head中的东西。
PUT
DELETE：删除。
OPTIONS：返回http有哪些headers的选项。如查看是否允许跨域。

单行多行文本框

name, value 键、默认值。。<input name="username" value="default>" name就是发送数据到服务器的key。value给用户一个默认值。
placeholder 提示词。。<input name="username" placeholder="请输入用户名">在未填写前告诉用户应该填什么东西。
autofocus 聚焦。。<input name="username" placeholder="请输入用户名" autofocus>
password 密码。。<input type="password" name="password">
<textarea></textarea> 多行文本框。。<textarea cols="30" rows="7"></textarea>
输入验证。。尽早提示用户错误输入。required表示此项必须填写， minlength，maxlength pattern正则表达式。

<form action="">
    <p>
        <input required minlength="3" maxlength="12" placeholder="3-12位">
    </p>
    <p>
        <input pattern="1\d{10}" placeholder="输入手机号">
    </p>
    <p>
        <button type="submit">确认</button>
    </p>
</form>

type

在可用性上做一些辅助
对手机上键盘的布局有影响
对输入自行进行验证，提高可用性
type="search"
type="email"
type="url"
type="submit"

novalidate

<form action="" novalidate></form>去掉系统自带的验证。根据自己的业务需要用JavaScript自己实现一个验证。

radio 单选框

<form action="">
    <p>你最喜欢的水果是？</p>
    <p>
        <input type="radio" name="fruit" value="barries"> 草莓
        <input type="radio" name="fruit" value="banana"> 香蕉
        <input type="radio" name="fruit" value="mango"> 芒果
        <input type="radio" name="fruit" value="dragon"> 火龙果
    </p>
    <p><button>提交</button></p>
</form>

这里写图片描述

checkbox 复选框


<form action="">
    <p>你最喜欢的水果是？</p>
    <p>
        <input type="checkbox" name="fruit" value="barries"> 草莓
        <input type="checkbox" name="fruit" value="banana"> 香蕉
        <input type="checkbox" name="fruit" value="mango"> 芒果
        <input type="checkbox" name="fruit" value="dragon"> 火龙果
    </p>
    <p><button>提交</button></p>
</form>

这里写图片描述

提交结果：包含.html?fruit=banana&fruit=mango&fruit=dragon

label标签

可用性提升
在使用 radio 和 checkbox 时，点击文字也可以进行选择，而不是只能点击框才能选择。


<form action="">
    <p>你最喜欢的水果是？</p>
    <p>
        <label for="barries"><input type="checkbox" name="fruit" value="barries" id="barries"> 草莓</label>
        <input type="checkbox" name="fruit" value="banana" id="banana"><label for="banana"> 香蕉</label>
        <input type="checkbox" name="fruit" value="mango" id="mango"><label for="mango"> 芒果</label>
        <input type="checkbox" name="fruit" value="dragon" id="dragon"><label for="dragon"> 火龙果</label>
    </p>
    <p><button>提交</button></p>
</form>

select标签

当选项特别特别多时，可用下拉框来表示选项，使页面简洁。
<select><option></option></select>
<select mutiple></select> 可以多选
<select size="3"></select> 当前显示在页面中的选项的个数
<optgroup><option></option></optgroup> 分组


<form action="">
    <select name="city" id="" multiple size="3">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">青岛</option>
        <option value="4">深圳</option>
        <option value="5">杭州</option>
        <option value="6">香港</option>
        <option value="7">天津</option>
        <option value="8">广州</option>
    </select>
</form>
<form action="">
    <label for="">想去的城市：</label>
    <select name="city">
        <optgroup label="1-4">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </optgroup>
        <optgroup label="5-8">
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </optgroup>
        <optgroup label="9-12">
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </optgroup>
    </select>
</form>

这里写图片描述

hidden

<input type="hidden" name="secret" value="1">
某些数据需要从页面上提交，但是不希望在页面上展示出来，此时用hidden。

文件选择

<input type="file" name="myFile">
注意啦：若在表单中包含文件上传，需要在form标签中添加enctype="multipart/form-data"属性。
<input type="file" multiple name="myFile"> mutiple ：可以同时选择多根尖

文件选择框
<form action="" method="post" enctype="multipart/form-data">
    <p>
        <label for="">您的姓名： </label>
        <input name="fullname">
    </p>
    <p>
        <label for="">请上传简历</label>
        <input type="file" multiple name="resume">
    </p>
    <p>
        <button>提交</button>
    </p>
</form>

这里写图片描述

date & time

<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">

<form action="">
    <p>date: <input type="date"></p>
    <p>datetime-local: <input type="datetime-local"></p>
    <p>month: <input type="month"></p>
    <p>week: <input type="week"></p>
    <p>time: <input type="time"></p>
</form>

这里写图片描述

number & range


<!--number & range-->
<form action="" id="heightAndWeight">
    <p>
        <label>身高(m)：</label>
        <input type="number" min="0.5" max="2.5" step="0.01" name="height" value="1.7">
        <output for="height"></output>
    </p>
    <p>
        <label>体重(kg)：</label>
        <input type="range" min="10" max="200" step="0.1" name="weight" value="50">
        <output for="weight"></output>
    </p>
    <p>
        <label>BMI</label>
        <output for="weight height"></output>
    </p>
</form>
<script>
    var form = document.querySelector('#heightAndWeight');
    form.addEventListener('input', update);
    update();
    function update() {
        var data = new FormData(form);
        var height = parseFloat(data.get('height'));
        var weight = parseFloat(data.get('weight'));
        document.querySelector('[for="weight"]').value = weight;
        document.querySelector('[for="weight height"]').value = getBMI(height, weight);
    }
    function getBMI(height, weight) {
        return(weight/Math.pow(height, 2)).toFixed(2);
    }

这里写图片描述

color

<input type="color">

button

<!--button-->
<form action="">
    <p>
        <button type="submit">默认submit提交表单数据</button>
        <button type="button">button点击这种行为，不提交</button>
        <button type="reset">reset重置表单</button>
    </p>
</form>

这里写图片描述

回车提交

<!--回车提交-->
<form>
    <p>Name: </p>
    <p><input type="text" name="fullname" value="abc"></p>
    <p>
        <button onclick="alert(1)">不指定type</button>
        <button onclick="alert(2)" type="button">button</button>
    </p>
</form>

控件状态

readonly：会提交到服务器上，但页面上无法进行修改。
disabled：不会提交到服务器上。


<!--控件状态-->
<form action="">
    <p>Name: </p>
    <input type="text" name="fullname" value="abc" readonly>
    <p>Occupation: </p>
    <p>
        <select disabled>
            <option value="1">教师</option>
            <option value="2">学生</option>
            <option value="3">工程师</option>
            <option value="4">公务员</option>
        </select>
    </p>
    <p><button>提交</button></p>
</form>

这里写图片描述

表单设计

帮助用户不出错，能选不填，给出提示
尽早提示错误
扩大选择／点击区域
控件较多时要分组
分清主要动作和次要动作

HTML扩展知识

全局属性

accesskey & tabindex 与键盘按键相关。
id保证唯一性，class多用在css，style指定内联样式。
contenteditable 页面的内容可以被编辑。spellcheck

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML扩展知识</title>
</head>
<body>
    <!--contenteditable：使页面可编辑-->
    <section contenteditable spellcheck="true">
        <p>计算机基础</p>
        <p>了解浏览器的渲染原理、开发调试工具以及各种调试技巧。了解 Web 协议栈，学习掌握 HTTP 协议基础，
            理解网络、浏览器性能和安全相关的问题以及常用的优化技巧，掌握专业的前端性能优化能力。
            学习 UI 常用动画效果的算法原理和基础，掌握通过 JavaScript、CSS3、SVG 实现高性能动画的技巧。
            学习其他前端相关的数学知识、数据结构和常用算法。</p>
    </section>
</body>
</html>

这里写图片描述

语言 lang 指定页面的语言；dir 指定语言书写的方向。
title 属性。

<p>Since component logic is written in JavaScript instead of templates,
    you can easily pass rich data through your app and keep state out of the <abbr title="Document Object Model">DOM</abbr>.
</p>

这里写图片描述

hidden 属性。隐藏元素。可用性好。

无障碍性。

- 或可访问性，Accessibility。
- 确保任何人都有办法获取放在网页上的媒体内容。
- 不让身体、心理或技术上的问题成为获取信息的障碍。

Web开发者应该做的事情

WCAG(Web Content Accessibility Guidelines) 2.0
ARIA(Accessible Rich Internet Applications)
提升无障碍性
- 为 img 提供 alt 属性。
- noscript 当浏览器不支持脚本script时的替代性方案。
- input 和 label 相对应。
- 图形验证码与语音验证码。
- 文字和背景有足够对比度。
- 键盘可操作。
语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
为什么语义化很重要？
- 提升代码可读性、可维护性
- 搜索引擎优化
- 提升无障碍性
扩展HTML
- meta 如：如何编码、页面关键词、页面介绍、页面缩放、电话号码自动识别、360浏览器指定内核、指定IE渲染模式
- data-* dataset属性是一个map，其中存放data-*东西。
- microdata
  - HTML5中的一个规范
  - itemscope 属性描述的是：在此标签内的东西是一个实体。itemtype=" " 属性描述的是：再次标签内的东西的实体类型。itemprop=" " 属性描述的是：该实体内的具体属性是啥。
  - 将信息进行格式化。
- RDFa
- JSON-LD json类型的数据组织形式。
HTML编程规范
- Google Coding Style
- W3C Validator
工具
- Emmet
- markdown


meta标签

<!--编码-->
<meta charset="UTF-8">

<!--指定 HTTP Header-->
<meta http-equiv="content-security-policy" content="script-src 'self'">

<!--SEO 搜索引擎优化-->
<meta name="keywords" content="关键词">
<meta name="description" content="页面介绍">

<!--移动设备 Viewport-->
<meta name="viewport" content="initial-scale=1">

<!--关闭 ios 电话号码自动识别-->
<meta name="format-detection" content="telphone=no">

<!--360 浏览器指定内核-->
<meta name="renderer" content="webkit">

<!--指定 IE 渲染模式-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

<h2>data-*</h2>
    <ul>
        <li data-id="1">草莓</li>
        <li data-id="2">芒果</li>
        <li data-id="3">葡萄</li>
    </ul>

这里写图片描述

<h2>microdata</h2>
<section itemscope itemtype="http://schema.org/Person">
    Hello, my name is
    <span itemprop="name">Xiao Xiao</span>
    I am a
    <span itemprop="jobTitle">Graduate Student</span>
    at the
    <span itemprop="University">UESTC</span>
    My friends call me
    <span itemprop="additionalName">Xiao</span>
    You can visit my homepage at
    <a href="http://blog.youkuaiyun.com/sunxiaofre" itemprop="url">blog</a>
    <section itemprop="address" itemscopt itemtype="http://schema.org/PostalAddress">
        I live at
        <span itemprop="addressCountry">China</span>
        <span itemprop="addressLocality">SiChuan</span>
        <span itemprop="addressStreet">XiJie</span>
    </section>

</section>

这里写图片描述

    <h2>JSON-LD</h2>
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Person",
            "name": "Xiao Xiao",
            "jobTitle": "Graduate Student",
            "University": "UESTC",
            "additionalName": "Xiao",
            "url": "http://blog.youkuaiyun.com/sunxiaofre",
            "address": {
                "@type": "PostalAddress",
                "addressCountry": "China",
                "addressLocality": "SiChuan",
                "addressStreet": "XiJie"
            }

        }
    </script>