起源

HTML李爵士( Timothy John Berners-Lee)在1980年创建,全称为HyperText Markup Language,中文称之为超文本标记语言。现在常与CSS、JavaScript一同用于网站内容的表现。

HTML起手内容

在VSCODE中输入英文感叹号后回车(需配置Emmet)会出现一个默认的HTML基础框架内容

该初始内容的标签及含义如下:

初始DOCTYPE声明文档类型为html

html lang声明网页所使用的语言 英语为en,简体中文zh-CN,点击查看更多:语言代码

meta 为元数据通常用于seo优化

charset为字符编码UTF-8是目前最通用最大的字符集。中国的常见字符编码为GBK

viewport为视窗的声明 content表明该网页的视窗宽度为设备宽度,初始缩放百分比固定为1.0

title为该网页的标题,可以显示在浏览器的标签上

body内为网页内容

HTML常用标签

内容分块标签

1、h1-h6

标题(Heading)1至6,级别从高到低,字体大小从大到小

表现形式

2、section:

没什么特定的含义,一般包含一个标题和若干段,如果网页内容是有独特意义的建议使用<article>标签

表现形式

3、article

可以包含一系列特定内容,如单一作者的文章,或者某个帖子及下面的回复

表现形式

4、main:

可以称之为概要,大纲,主体

表现形式

5、aside:

独立于文档页面的独立结构,常用于评论、组件、或者其他内容

表现形式

6、footer:

页脚,常用于放作者、版权信息、相关文献

表现形式

7、nav:

导航,常用于菜单、目录、索引

表现形式

文本内容标签

1、blockquote:块级引用元素

引用内容

表现形式

2、a:

超链接,可以是URL、电子邮件地址、同页面某地址

表现形式

3、code:

呈现计算机代码,会使用浏览器默认等宽字体展示。

表现形式

4、pre:预定义格式

该标签内容会按照源文件的编排方式进行排版,不会合并空格及回车

表现形式

5、em:着重元素

会突出用户需要着重阅读的内容,可以层层嵌套逐层加深,默认是斜体展示

表现形式

6、strong:

加粗表示重要文本

表现形式

全局属性是什么?有哪些?

全局属性是所有HTML元素共有的属性,除了标准的HTML元素之外也能对非标准HTML元素生效。比如<foo>不是一个有效的标签

直接使用非标准标签时HTML会如下显示

以下为body内源代码:

给foo 标签添加 hidden属性

表现效果

body内源代码

全局属性主要有以下几类

accesskey:为当前元素生成键盘快捷键的提示

autocapitalize:控制用户输入大小写off or none 默认小写; on or sentences 每句话第一个字母大写,其他小写; words 每个单词的第一个字母大写其他小写 ;characters 所有字母都大写。

class:元素类名。允许CSS、JS通过类选择器或DOM来选择及访问特定元素

contenteditable:元素内容是否可编辑 false不可以true及空字符串可以

data-\*:数据属性,赋予我们在所有HTML元素上嵌入自定义数据的能力,可通过脚本交互

dir:指示元素方向的枚举属性 ltr从左到右 rtl从右到左 auto由用户代理决定方向

draggable:枚举属性 true 可拖动 false不能拖动

dropzone:枚举属性 可以有 copy move link三种值

hidden:隐藏页面元素

id:定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。 其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素。PS:浏览器及编辑器不会检查项目中ID是否真的唯一

inputmode:向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示

is:指定标准HTML元素应该像已注册的自定义内置元素一样

itemid:项的唯一全局标识符。

itemprop:用于向项添加属性,一个itemprop由一个名称一个值对组成

itemref:只有不是具有itemscope属性的元素的后代,它的属性才可以与使用itemref项目相关联。它提供了元素ID列表(而不是itemids)以及文档中其他位置的其他属性。

itemscope:用于设置数据结构中按itemtype设置的词汇表的生效范围。

itemtype:指定将用于在数据结构中定义itemprops(项属性)的词汇表的URL

lang:定义元素语言 一般的网页翻译凭此识别页面语言种类

part:元素的部件名称的空格分隔列表

slot:将shadow DOM阴影关联树中的一个沟槽分配给一个元素:具有slot属性的元素被分配给由``元素创建的沟槽,其name属性的值与slot属性的值匹配。

spellcheck: 检查元素是否存在拼写错误 true表示检查 false表示不检查

style:元素CSS样式的声明

tabindex:表示元素能否依靠TAB键聚焦 必须为整数 负值为可聚焦但是无法通过顺序键盘导航 0为最后到达 正值为按从小到大到达

title:表示与元素信息相关的文本但是不一定呈现给用户

translate: no表示该元素不会被翻译 yes以及空字符串表示该元素会被翻译

© 爱示范 2demo.top出品