HTML规范

HTML的规范

HTML规范是指HTML是由W3C来维护和设计标准的，后期的HTML5的版本是由WHATWG和W3C一起来完成。HTML5它在之前HTML4的基础上做了很多标签的增强以及更好的兼容移动端，在移动APP的开发中主要用到了H5的技术。也就是说目前为止我们学习的标签以H4为主，当然对于一些基础应用的H5标签也会在这里做简单的讲解。

标签的规范

在HTML中标签是由<>来声明的，凡是使用了<>括起来的内容都会被浏览器认为是标签
标签名是一个个的单词（单字符）由字母和数字组成，一定有字母不一定有数字
标签分为单标签（开放标签，无需关闭）和双标签（闭合标签，需要使用</>来关闭）
- 单标签： <meta> <link> <script> <hr> 等，在HTM4中为了和关闭标签做到一致推荐使用自身不关闭的形式来书写  <meta /> <link /> 但是到了H5之后又不要求。
- 双标签：<html><head><body><title> 等，通常如果该标签包含内容那么就需要通过关闭标签来指定结束位置。
标签可以有属性，也可没有。属性是用来提供标签的辅助信息或者写入显示样式
- 有属性的标签：
 - <abbr title="Company.Limited">CO.LTD</abbr>等。属性通常需要一个值，该值从规范角度来说需要使用单双引号括起来。
 - web前端
- 无属性的标签： <pre> 等

使用编辑器

主要介绍VS Code的使用，实际上Sublime和Vs Code基本一致：

新建站点：在本地文件系统中预设一个www或者web作为站点，接下来在vs code中添加该目录到工作区
下载中文语言包：进入扩展，搜索chinese 点击安装重启
下载用于预览HTML文件的扩展-open in browser(在浏览器中打开)。安装完毕后鼠标右键会出现该菜单
配置编辑器中默认的代码的编码格式为utf-8：
- 进入左下角按钮图标，选择设置 再输入编码选项设为'utf-8'
开始第一个HTML文件

开始编写HTML

html文件是以'.html'或者'.htm'结尾的文件，通常多数类型的文件后缀名都是三位

html文件的结构包括一下：

<html>
    <head>
        <!--主要是网页信息的设置：标题、编码格式、网页关键字和描述-->
    </head>
    <body>
        <!--页面主体正文 用于呈现给用户的内容-->
    </body>
</html>

使用编辑器来快速生成一个HTML的框架结构：使用!+TAB 自动生成一个标准的HTML文件
```
<!DOCTYPE html>
<html lan="en">
 <head>
 <title>Document</title>
 <meta charset="utf-8" />
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 </head>
 <body>
 此处开始文档的内容
 </body>
</html>
```
- 代码的一些开发规范：
 - 代码需要缩进：缩进是用来排版一段优雅的代码，代码的可读性和维护性好。如果代码散乱了可以使用格式化：鼠标右键选择格式化文档
 - 使用TAB键可以自动补全：
 - 一些常用的快捷方式：
 - 复制：ctrl+C
 - 粘贴：ctrl+V
 - 剪切：ctrl+X
 - 保存：ctrl+S
 - 全选：ctrl+A
 - 还原上一步骤：ctrl + Z
 - 自动切换注释：ctrl + / 如果没有注释则添加有则取消
 - 新建空白文档：ctrl + n，需要单独再使用ctrl+s来保存

文本标签

p：段落标签 paragraph的简写
头标题标签：h1-h6 （head1-head6）它是大小层次递进的标签
hr : 水平尺标签，它有几个常用的属性：
- width : 设置宽度，默认是100%显示可以是一个具体的数值或者百分比
- align：设置对齐，默认是居中显示可以设置left、center、right几个位置；
- color : 设置填充色，默认是深灰色，设置一个rgb(255,255,255)，十六进制（#eee）,颜色名称
- size：设置线条大小，也就是粗细
font：设置字体样式，它是有属性的标签：
- color : 字体颜色
- size : 字体大小
- face : 字体库中字体，需要本地安装，在windows->fonts中
b：设置粗体 bold加粗没有属性
u：设置下划线 underline
i ：设置斜体 italic
del ：删除线效果表示废弃的内容
strong ：加重语气它的效果也是加粗但有语义能够被搜索引擎搜索
em ：强调语气它的效果是斜体但有语义
q ：加引号表示引用的内容
cite：表示引用的出处来源
sub/sup：下标/上标
abbr : 表示缩写内容，一般需要配合title属性声明所指代的具体内容
details ：需要和summary结合使用，表示一个概括的内容可以折叠显示详情

<p>
    这是一个段落 需要另起一行 也就是它是自动换行 并且头尾有空白的显示效果
</p>
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>

<hr width=50% align="center" color="#999" size=10 />

<font color="green" size="+3" face="楷体">web前端</font>

<q>每个列表项都会有项目符号</q>，引自-<cite>李程程</cite>

<abbr title="李程程">lcc</abbr>

<details>
    <summary>春晓 - 孟浩然</summary>
    <p>春眠不觉晓</p>
    <p>处处性骚扰</p>
    <p>夜来风雨声</p>
    p>花落知多少</p>
</details>

列表标签

一个列表是有多个列表项组成的整体（封装容器），每个列表项都会有项目符号，项目符号可以是各种类型的样式。列表有两种形式，一种是编号的有序列表，一种是纯符号的无序列表。

标签名	说明
ul	声明无序列表，属性包括有：type, contenteditable
li	定义列表项，有序列表和无序列表中都使用 li 标签。
ol	定义有序列表，常用属性有：start,reverse,type等
dl	声明一个定义列表。
dt	声明定义列表中的一个项目，以及 dialog 中的角色。
dd	定义一个定义列表中对项目的描述
pre	原格式输出，该标签能够html以编码格式在页面显示

无序列表

无序列表使用ul来声明，创建它的封装容器，里面包含多个不同的li列表项，一个基本的无序列表：

<h4>web前端课程体系</h4>
<ul type="square">
    <li>Web网页开发</li>
    <li>Javascript高级编程</li>
    <li>Nodejs全栈开发</li>
    <li>框架实战开发</li>
</ul>

ul是包含属性的标签：

type：用来声明列表项的符号，默认是disc实心圆，可选值有circle、square
contenteditable：是H5新增的属性，表示列表内容是否可编辑默认为false 不可以编辑，true则可改

li上也可以通过type属性单独给某个列表项设置一个符号。

有序列表

有序列表是ol(order list)，它是带有编号的列表形式。有序列表的列表项也是通过li来设置：

<h4>个人爱好</h4>
<ol>
    <li>读书</li>
    <li>音乐</li>
    <li>绘画</li>
    <li>骑马</li>
</ol>

ol是有属性的标签，可以通过属性控制编号的形式：

type：编号的类型默认是数值可选值是a、A、i、I、1
start：设置编号的起始值
reverse ：H5新增的属性设置倒叙排列

定义列表

定义列表dl(definition list)，它包括列表项(dt)和每项的描述信息(dd)：

<h4>泽林专业体系</h4>
<dl>
    <dt>web全栈开发</dt>
    <dd>前端最近几年是爆发之势，期待你的加入！</dd>
    <dt>Python人工智能</dt>
    <dd>它是未来发展的主要方向，引领时代向前进</dd>
    <dt>Java+大数据</dt>
    <dd>大数据能够实现人类社会更好的发展~</dd>
    <dt>UI艺术设计</dt>
    <dd>我们都是及其个性和张扬的人....</dd>
</dl>

a标签

链接

俗称的超级链接，用于站内和站外的跳转，一个网站内的多个网页需要借助链接来实现业务流。网站与网站之间也需要通过链接来实现交互。链接使用a标签，它是有属性的闭合的标签，格式如下：

<a href="跳转的地址">按钮提示文字</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="打开窗口" >百度</a>

target属性
- 表示打开的窗口位置，它主要是_self、_blank、_parent
href属性
- 链接的资源地址，一个url（unicode resource locator）地址。如果要链接到远程或者外部的地址则需要使用完整的“协议+路径”的地址形式。如果是链接本地的地址，则有两种写法：绝对路径和相对路径的写法：
  - 绝对路径：以"file:///"协议开头或者以"/"开头的地址为绝对路径地址需要完整准确的填写才能找到
  - 相对路径：是".和.."开头的路径地址，"."替代当前路径地址，".."表示上一级目录，推荐使用相对路径

锚点

锚点是预设好的位置，然后通过a链接跳转过去。设置锚点的两个步骤：

预设锚点位置：作为锚点的a标签没有href属性只有name名称

<!-- 在页面顶部预设锚点 使用name命名、ID命名 -->
<a name="aa"></a>

跳转到锚点：需要a链接的在href地址中使用#链接锚点名称

<!-- 如果要跳转到一个锚点 需要使用#锚点名称  -->
<a href="3.a标签.html#aa">Top</a>
<!--或者省略当前的文件地址-->
<a href="#aa">Top</a>

表格标签

表格table是由水平行tr(table row)和垂直列(td)组成的整体，行和列交叉出来的是单元格（td）.

表格的第一行通常是表头行（th），表头行用来表示列名称。

表格标签

属性名	含义	常用属性值
table	声明一个表格的封装容器	见下表
thead	设置表格的头部结构
tbody	设置表格的主体内容
tr	定义表格中的行
th	表头单元格	rowspan、colspan 要合并的行和列
td	普通行单元格	rowspan、colspan 要合并的行和列

table表格的基本用法：使用tr来创建行，td设置每行中的单元格，如果是表头行单元格要使用th来设置

<!-- 使用table声明一个4*4表格 -->
<table border=10 bordecolorlight="purple" bordercolordark="pink" width=500 height=200 align="center" cellspacing=0 cellpadding=10 bgcolor="aliceblue">
    <!-- 第一行是表头行 -->
    <tr>
        <th>序号</th><th>姓名</th><th>性别</th><th>生日</th>
    </tr>
    <tr>
        <td>1</td><td>张三</td><td>男</td><td>1994-09-10</td>
    </tr>
    <tr>
        <td>2</td><td>尼古拉斯赵四</td><td>男</td><td>1974-09-10</td>
    </tr>
    <tr>
        <td>3</td><td>蔡徐坤</td><td>女</td><td>1994-09-10</td>
    </tr>
</table>

table表格的属性有下面几个，详见列表：

属性名	含义	常用属性值
width	设置单元格的宽度	像素值
height	设置单元格的高度	像素值
align	设置单元格中的内容的水平对齐方式	left、center、right
valign	设置单元格中的内容的垂直对齐方式	top、middle、bottom
cellspacing	单元格外边距	像素值
cellspadding	单元格内边距	像素值
bgcolor	设定单元格背景颜色

除了table表格的属性外，td单元格也有自己的属性，它们主要用来设置单元格的对齐方式以及单元格的合并：

对齐属性：align设置水平对齐（left、center、right） valign设置垂直对齐（top、middle、bottom）。如果是给tr标签设置则整行有效；如果只给某个td设置只作用于该td上
合并单元格：rowspan 水平行合并、colspan列合并

多媒体标签

如何在HTML页面中嵌入媒体资源文件：内嵌的资源

标签名	注释
img	定义图像。src,width,height,alt，它还可以和figure增强标签一起使用
figure	该标签表示的内容可以是图片、统计图或者代码示例，内部包含一个figcaption头信息
audio	定义声音autoplay,controls,preload,src,muted,loop
video	定义视频autoplay,controls,preload,src,loop,height,width,poster
embed	定义嵌入的内容，比如插件width,height,src,type

img图片：它是有属性的开放标签
- <img src="图片位置/地址/url" width=宽度 height=高度 title="描述信息">
audio音频：有属性的开放标签
- src：音频的地址
- autoplay ：设置自动播放值为true/false 火狐中需要在静音环境下有效谷歌则无效
- preload ：是否预加载，是否先缓存
- controls ：是否显示控制面板
- muted ：默认静音
- loop ：是否循环播放
video视频：
- src ：视频地址
- autoplay ：自动播放
- preload ：先缓存
- controls ：显示控制面板
- poster ：设置封面
embed ：加载flash文件

progress

当前进度：0%

H5 progress的进度控制

posted @ 2021-06-17 16:37 雪影残月阅读(166) 评论(0) 收藏举报

刷新页面返回顶部

雪影残月

HTML规范

HTML的规范

标签的规范

使用编辑器

开始编写HTML

文本标签

列表标签

无序列表

有序列表

定义列表

a标签

链接

锚点

表格标签

表格标签

多媒体标签

progress

公告