@HTML

Pages
Tag
CSS
JavaScript

页面 Pages

案例欣赏 Cases

浏览器 Browser

Trident

已停服

Edge

Chromium

10.30%

Chrome

Blink

66.40%

Safari

Webkit

9.34%

Opera

Blink

2.99%

Firefox

Gecko

7.89%

H5结构 Architect

. HTML页面由文档类型声明DOCTYPE和<html>组成

. 查看<html>结构，右键单击选择"检查"或按F12打开浏览器的调试窗口；再次按F12，关闭调试窗口

1. <heade>区-文档信息区

. 语言类型 lang：方便搜索引擎查找翻译；默认是en；如果不想触发浏览器的自动翻译提醒，可以不设置该属性

. 字符编码 charset：默认使用万国码 UTF-8

. 网站图标 favicon.ico：网站标识；制作icon的工具很多，如：比特虫

. 网站名 title

. 网站说明 description

. 关键字 keywords：6-8个

. 搜索引擎优化 SEO-search engine optimization：百度、Google。通常由SEO专业人员撰写，前端人员只需要把标签准备好即可

. 样式表文件 <link>

. 脚本文件 <script>

[] OA文档的信息区在哪里？

2. <body>区-文档内容区

. 展示给用户的内容,由各种标签组成，负责web的结构部分

. 为了美观，使用CSS选择某个或某些标签/元素进行修饰，负责web的样式部分

. 为了交互，使用<script>分配业务逻辑，负责web的行为部分

[] Hello World

1. 创建空白项目文件夹，如H5Project

2. 使用Vs code打开[直接拖动项目文件夹到Vs code]

3. 创建文件，类型为html，如index.html

4. 在编辑区域，输入感叹号 !并按回车 Enter，快速生成H5基本结构

5. 在body中输入Hello World并按 CTRL+S保存，右键选择 Open With Live Server，自动打开关联的浏览器查看最终页面效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  hello, world
</body>

</html>

标签 Tag

说明

. HTML - 超文本标记语言 HyperText Mark Language；这里的标记就是标签 tag

. 标签是组成HTML页面的基本元素；一般情况下，标签和元素不做严格区分，二者可以互用

. 标签由 <> 包裹关键字组成，分开始标签 <> 和结束标签 </>

. 大部分标签有开始标签和结束标签；少量标签是单标签，如<img>、<input>

. 标签对大小写不敏感；万维网联盟W3C推荐使用小写

[] 无需背记标签的形式，基本的开发环境都会自动检测并完成，除非你使用记事本

[] 根据项目实际需求按需选择|添加标签

1. 常见标签 Tags

1.1. 页面结构标签-必需

类别	说明
<html>	HTML页面根元素；定义了整个 HTML 文档
<head>	HTML页面头部元素
<body>	HTML页面主体元素；包括脚本标签<script>

1.2. 页面结构化元素标签

类别	说明
<article>	完整的文章结构；通常包括以下结构化标签
<header>	页眉/头部信息，通常用在<body>；<article>和<section>头部
<nav>	navigation；导航，使用<ul>实现；顶部、侧边、分页导航
<aside>	侧边栏
<main>	主要内容；只允许出现1次
<section>	节元素，类似于<div>，但是HTML5建议应带上标题<header>；如果不需要标题，使用<div>即可
<footer>	页脚/底部信息，通常位于<body>、<article>底部，包括：版权声明、友情链接、备案信息等

1.3. 页面普通元素标签

类别	说明
<div>	division；块，用于分隔区域/布局；对搜索引擎来说，div是无语义的，不利于网站的推广和使用
<span>	行内块
<h1>-<h6>	headline；标题，h1只能出现一次；便于搜索引擎为网页编制索引
<a>	anchor；超链接/导航；单级导航可直接使用；多级导航应配合列表
<img>	image；图像
<p>	paragraph；段落
<ul><ol>	unordered list有序/ordered list无序列表；其子标签只能是列表项<li>，和列表配合使用
<dl>	defined list自定义列表，其子标签只能是<dt>、<dd>
<table>	表格，包括：行<tr>；标题行单元格<th>、普通单元格<td>
<form>	表单，包括：<input>单行文本输入框、单选、多选；<textarea>多行文输入本框；<button>按钮等
<iframe>	inner-frame；内联框架；在当前页面嵌入/显示另外一个页面

1.4. 文字标签

. 特殊文本样式标签如下；文字其它普通样式建议使用CSS实现

类别	说明
<pre>	定义预格式文本/按照原始代码的排列方式进行显示
<code>	定义计算机代码
<sup>	定义上标字
<sub>	定义下标字

1.5. 其他标签

类别	说明
<small>	小字体标签
<progress>	动态进度条标签
<meter>	静态进度条
<figure>	可以取代<img>

2. 标签属性 Attribute

. HTML 标签可以拥有属性。属性提供的更多的元素信息，如类、ID、名称、值、数据等等

. 不同的标签所拥有的属性不完全相同，如<a>有专有的href属性；<img>有专有的alt属性；两者都有通用的title属性

. 属性总是以名称name/值value的形式出现，通常称为值对，如：class="warn"，其中class是名称，warn是值

. 请始终为属性值添加引号：双引号或单引号，并保持引号类型一致，不能混用

. 属性总是在开始标签中指定

. 部分元素的属性可以省略属性值，多见于布尔类型，如disabled，有该属性，元素被禁止；没有则正常使用

. 部分元素建议必须使用某些属性，如<img>，请始终使用 alt 属性，当图像无法显示时给出提示

类别	说明
class	类样式属性；一个元素可以指定多个类，以空格分隔
id	ID属性，唯一标识元素
style	内联样式属性
data-	数据属性[自定义属性]
title	额外提示信息
alt	替换属性
contenteditable	是否可编辑
src	资源路径属性
href	超链接地址属性

3. 标签分类 Classification

. 使用显示模式display区分标签种类

. 每个元素有自己默认的显示模式，不需要指定

. 根据设计需要，元素的显示模式可以相互转换；如<a>转换为块元素，通常转换成块级元素更安全

3.1. 按占位/宽度

内联元素 inline

. 也称行内元素，行盒

. 根据本身宽度占有空间，在文档流中从左到右依次显示；满行时候切换到下一行重新开始

. 不能设置宽度，不会独占一行

. 内联元素和文字一样，并不是紧紧挨着，而是有一定的间隙

. 常见元素：<a> <img> <i> <span> <label> <small> <iframe>

display: inline;

行内块元素 inline-block

. 可以设置宽度的内联元素；排列方式同inline

. 数量很少，如：<input> <button>

display: inline-block;

块级元素 block

. 独占一行，也称块盒

. 可以设置宽度

. 在文档流中从上到下依次排列

. 大部分标签都是块级元素；很多结构化的标签，如<header>本质上都是块元素

display: block;

其它类：表格类元素

. 特指table系列的元素，特性类似inline-block；特意区分的目的之一是为了更高效的渲染页面

. <tabel>的显示类型为table

. <tr>的显示类型为table-row

. <td> <th> 的显示类型为table-cell

[] 使用浏览器的检查功能，查看常见元素的默认display

3.2. 按语义

. 语义化标签：semantic，清晰地定义其内容，大部分标签都是，如<form>、<table>

. 非语义化标签：无法提供关于其内容的信息，仅仅作为容器/载体使用，如<div>、<span>、<i>；多用于布局和功能型拓展，如大部分字体图标都是依托<span>、<i>实现，已经失去了其标签本意

. 页面不单单是给人看的，更是给计算机看的；在给人看之前，首先要给计算机看

. 规范的HTML5页面，可以让计算机和人更加高效的理解和处理文档

. 在正确的地方使用正确的元素，创建有意义的HTML5页面

1. 语义化：见文知用途

2. 结构化：见文知结构

样式 CSS

1. 简介 Overview

. CSS - Cascading Style Sheets，层叠样式表

. 美化页面：如何在屏幕、纸张或其他媒体上显示 HTML 元素

. 可以同时控制多个网页的显式

2. 盒模型 Box Model

. 每个HTML元素都可以看作是一个盒子

类别	说明
width	元素内容区宽度
height	元素内容区高度
padding	元素填充，也称内边距、内填充；padding-top \| padding-right \| padding-bottom \| padding-left
border	元素边框；border-top \| border-right \| border-bottom \| border-left
margin	元素到其它元素之间的距离，也称外边距、外填充；margin-top \| margin-right \| margin-bottom \| margin-left；负边距也有很惊艳的表现

[] 以鸡蛋为例

[] 过渡包装

. 默认情况下，设置的宽度width和高度height是内容区的宽度和高度；所以：元素盒子的实际尺寸应该是在宽度width/高度height的基础上，再加上边框border和填充padding

元素的实际宽度 = width + padding-left + padding-right + border-left + border-right
元素的实际高度 = height + padding-top + padding-bottom + border-top + border-bottom

. 因此，设置元素宽度和高度时，元素的实际尺寸比设置的更大；多数情况下，为了不破坏页面布局，希望设置的元素尺寸就是元素的实际尺寸；CSS属性 box-sizing 允许我们选择元素计算尺寸的模式

. content-box：默认模式，元素尺寸不包括padding和border

. border-box：元素尺寸包括padding和border；通常在CSS初始化样式表中指定

. padding、border、margin这三个属性有4个方向的体现，所以样式值的多少分别对应着不同的方向

1个值：4个方向都一样

2个值：上下对应第一个值；左右对应第二个值

3个值：上对应第一个值；左右对应第二个值；下对应第三个值

4个值：分别对应上、右、下、左四个方向/顺时针

对指定了大小的块元素而言，margin: xxx auto;可以使其在父元素盒子内水平居中

垂直方向居中需要结合实际情况综合考虑，见后续内容

3. 语法 syntax

. CSS由选择器 Selector 和声明块组成

. 选择器：选择元素，以便应用样式；选择器可以是标签、类、id等单一选择器或其它复合选择器；更多细节，请参考选择器一节

. 声明块：rules，指定样式；声明块用花括号括起来；声明块包含一条或多条用分号分隔的声明；每条声明都包含一个 CSS 属性名和一个值，以冒号分隔[ 这里所有符号都是英文符号 ]

[] 类为warn的CSS样式，指定了被选中的元素/应用该类样式的元素的颜色和字体重量/加粗

.warn {
    color: #eb2f06;
    font-weight: 600;
}

4. 使用 Usage

4.1. 行内样式/内联样式

. 使用style 属性为元素定义样式

. 定义的样式仅适合于当前元素

. 通常配合JS来动态改变

. 行内样式不符合结构样式分离的开发原则

. 行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式

. style还可以指定内联变量供当前元素的样式使用；内联样式和内联变量互不影响

4.2. 内部样式

. 在 HTML 页面 <head> 中使用 <style> 定义样式

. 适用当前HTML页面多个元素

. 不可跨页面使用

. 行内样式不符合结构样式分离的开发原则

4.3. 外部样式

. 在外部样式文件中定义，样式文件名后缀是 .css

. 在 HTML 页面 <head> 中使用 <link>引入

. 外部样式表以.css 扩展名保存；可以使用任何文本编辑器编写

. 外部 .css 文件不应包含任何 HTML 标签

. 适合多个HTML页面、多个元素

. 可以缓存到本地，加快页面访问速度

. 符合结构样式分离的开发原则

[] 样式说明

[HTML] index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">//外部样式
    <style>//内部样式
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .p-txt {
            color: var(--txt-wran-color);//使用全局变量
            opacity: var(--sn);//使用局部变量
        }
    </style>
</head>

<body>
  <h1 style="color: #F40;">hello, world</h1>//内联样式
  <p class=“p-txt” style="--sn: 0.1;">第1段</p>//内联变量
  <p class=“p-txt” style="--sn: 0.3;">第2段</p>//内联变量
</body>

</html>

[CSS] style.css

@charset "utf-8";
@import "./style.css";

:root {
    --txt-wran-color: #c81623;
    --nav-bg-color: #9f103a;
    --w-width: 1000px;
}

1. 几种形式的使用可以并存；最后哪个样式生效，由其代表的优先级决定，请参考后续内容和选择器一节内容

2. 编码：可以指定CSS文件的编码，特别是有中文存在时，必须指定；通常不需要指定，因为不推荐使用中文；指定编码必须在CSS文件第一行

3. 变量：可以声明CSS全局变量，便于修改和调整：一处修改，多处更新；还可以在元素上以style的形式声明内联变量；更多变量内容，请参考CSS变量一节内容

4. 导入：可以在CSS中使用@import引入其它CSS文件

5. 特性 Features

5.1 继承性

. 子元素会继承父元素的某些样式；不是所有的样式都可以被继承，特别是表单类元素和超链接<a>，很多样式不会继承父元素

5.2 叠加性

. CSS文件是按照从上到下的顺序执行；因此，同一个元素的样式，后面的样式会覆盖前面的样式

. 特别要注意：样式的叠加和元素上样式类的书写顺序无关，和CSS文件中的顺序有关

5.3 优先级

. 一般来说，多个样式同时作用于一个元素时，由优先级决定；优先级高的样式会覆盖优先级低的；同时还要结合不同选择器的权值来决定最终使用的是哪个样式

. 如果样式没有生效，请F12检查是否优先级不够

[] 样式顺序和书写顺序

.active-color {
    color: #f40;
}

.color {
    color: #000;
}

<div class=" active-color color">CSS的样式顺序</div>

[] 优先级

行内样式 > 内部样式 > 外部样式 > 浏览器默认样式

6. 属性 Attributes

6.1. 自身属性

元素类型：display: inline | inline-block | block

元素尺寸计算模式：box-sizing: content-box | border-box

宽度/高度：width | height

填充：padding(top | right | bottom | left)

边框：border(top | right | bottom | left)

边距：margin(top | right | bottom | left)

背景：background

阴影：box-shadow

滤镜：filter

6.2. 布局定位属性

布局display

弹性布局：flex

网格布局：grid

定位position

相对定位：relative

绝对定位：absolute

固定定位：fixed

粘性定位：sticky

6.3. 字体属性

字体

font

font-size | font-family | font-weight

颜色：color

格式：text-align | text-indent | text-shadow | text-decoration

其它

vertical-align | line-height | white-space | break-word

6.4. 伪元素

普通元素

::before

::after

文字类

::first-letter

::first-line

表单类

::selection

::placeholder

6.5. 伪类

普通元素

:hover

:target

表单类

:checked

:valid | :invalid

:focus | :focus-within

6.6. 函数

rgb()、rgba()、hsl()

url()

attr()

var()

calc()

linear-gradient()、radial-gradient()、Conic-gradient

clamp()

minmax()

repeat()

6.7. CSS顺序

布局定位属性->自身属性->文本属性->其它属性

浏览器厂商前缀

--webkit：谷歌Chrome、欧鹏Opera、苹果Safari

--moz：Firefox

--ms：微软Edge

7. CSS单位 unit

绝对单位：px ch

相对单位：rem em % vw vh fr

更多信息，请访问the lengths of css

更多信息，请访问The Power of em Units in CSS

[]元素的padding和text-indent是参照元素本身的字体大小

7.1. px

. 像素[点]

. 使用最频繁

7.2. ch

. 字符

. 可以用来实现打字效果

7.3. em

. 相对于父级元素字体大小

. 如果父级没有显示设置font-size，则继续往上查找，直到根元素HTML

. 参考过于凌乱，不建议使用。主要应用场合是设置段落的2个字符首行缩进和段落间距

p {
    text-indent: 2em;
    margin-bottom: 1em;
}

7.4. rem - root em

. 相对于根元素html

. 参考唯一，比较容易调整

. 采用rem单位时，为了换算方便，通常设置HTML的font-size: 62.5%，即16*62.5%=10;

16px = 1.6rem

1rem = 10px;

7.5. %

. 宽度width、填充padding、空白margin使用百分比时，相对于父级的宽度

. 多用于自适应布局

. 设置根字体

html {
    font-size: 62.5%;
}

7.6. vw | vh

. 每个视口viewport水平垂直各分为100份

. 视口viewpoint宽度

. 视口viewpoint高度

[] 示例1：父级参考

[HTML]

<div>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

[CSS]

p {
    font-size: 2em;
}

. [解读]只设置<p>元素字体大小，因为父级<div>没有设置，最终参考的是<html>的大小16px。所以最后<p>元素字体大小为 2*16px = 32px

. [解读]如果<div>显式的设置了字体大小为20px，则<p>字体大小为2*20px = 40px

div {
    font-size: 20px;
}

p {
    font-size: 2em;
}

8. 颜色 color

8.1 颜色值/颜色名称

. red、green、blue等

. 不建议

8.2. RGB 值 | RGBA 值

. rgb(red, green, blue)

. rgba(red, green, blue, alpha)

. 每个值范围：0-255

. rgba增加一个透明通道alpha：0-1之间某个浮点数；0完全透明；1完全不透明

. 如果使用透明色，请使用rgba()，特别是移动端

8.3 HEX 值

. 使用16进制表示；如#rrggbb

. 每个颜色的取值范围是00-ff

. 同一组颜色，如果相同，可以简写为3位#rgb，如：#ff4400，可以简写为#f40

. 也可以使用4位标识一个透明色，如#F405；最后1位表示透明度

8.4. HSL 值 | HSLA 值

使用色相、饱和度和明度表示

. hsla(hue, saturation, lightness)

. hsla(hue, saturation, lightness, alpha)

. 色相hue是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色

. 饱和度saturation是一个百分比值，0％表示灰色阴影，而 100％是全色

. 亮度lightness也是百分比，0％是黑色，50％是既不明也不暗，100％是白色

. HSLA增加一个透明通道alpha：0-1之间某个浮点数；0完全透明；1完全不透明

8.5. 安全色

.使用00 33 66 99 CC FF组合的颜色

.最开始仅仅支持256种颜色

.其中有40种是保留色，还有216是WEB安全色

.使用6种红色、6种绿色和6种蓝色任意组合，即：6*6*6=216

行为 JavaScript

说明

. 行为，也叫事件Event：谁触发了一个什么事件给谁

. 事件对象：哪个元素触发事件

. 事件类型：鼠标事件、键盘事件等等

. 事件目标：事件作用在哪个元素

常用事件类型

类别	说明
全局事件	onclick
窗口事件	onresize \| onload
表单事件	oninput \| onsubmit \| onchange
键盘事件	onkeyup \| onkeydown
鼠标事件	onmouseup \| onmousedown \| onmouseover \| onmouseout \| onmouseenter
多媒体事件	onplay

使用

. 早期通常写在标签上，以onXXX属性指定事件

. 主要处理页面加载等DOM/BOM事件

. 因为不符合开发原则：结构、样式、事件分离，很少使用

. 普通事件多使用事件侦听器addEventListener

[] onXXX事件使用

1. 在HTML中，给元素中分配事件

2. 在script中使用关键字function定义事件

[HTML]

<button onclick="fn()">Click me</button>

[Script]

<script>
    function fn() {
        console.log('hi,you clicked me');
    }
</script>

事件侦听器 addEventListener

. 一个元素可以添加多个事件

. 符合开发分离的原则

. 事件类型不需要带on，上述表格中的事件类型去掉on就是事件侦听对应的事件类型

事件处理一般步骤

1. 获取H5元素 querySelector；更多信息，请参考 DOM

2. 添加事件侦听器 addEventListener并分配事件；更多信息，请参考 Event

[] 事件侦听器使用

[HTML]

<button class="btn">Click me</button>

[JavaScript]

<script>
    window.onload = function () {
        let btn = document.querySelector('.btn')
        btn.addEventListener('click', function () {
            console.log('hi,you clicked me');
            alert('hi,you clicked me');
        })
    }
</script>

作业与练习

思考: 1.如何合理使用标签创建个人网站？