起源
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出品