推荐参考学习 HTML 教程 - 网道
1.HTML简介
HTML 的全名是“超文本标记语言”(HyperText Markup Language),由蒂姆·伯纳斯-李(Tim Berners-Lee)发明
2.HTML 起手
<!DOCTYPE html> <!- 声明这是一个html类型的文档 ->
<html lang="zh-CN"> <!- zh:中文,CN:中国,因为还有其他地区的中文 ->
<head>
<meta charset="UTF-8"> <!- 字符集 ->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!- 让viewport的宽度等于设备的宽度 ->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!- 告诉 IE 以最高级模式渲染文档 ->
<title>Document</title>
</head>
<body>
</body>
</html>
VS Code内可以使用快捷键 !+ Tab自动生成部分格式,自己检查并修改
3.常用章节标签
标签语义化很重要
- 标题:h1~h6
- 章节:section
- 文章:article
- 段落:p
- 头部:header
- 脚部:footer
- 主要内容:main
- 旁支内容:aside
- 划分:div
4.常用的内容标签
标签语义化非常重要,不要将重点放在默认样式上
- ol + li有序列表(ordered list + list item)
ul + li无序列表(unordered list + list item)
dl + dt +dd定义列表,dt表示一个定义名, dd 表示对定义的解释(description list + term +data)
pre保留空格、回车和tab(preview的缩写)
hr水平线
br 换行(break的缩写)
a用于链接(anchar的缩写)
em用于语气上的强调(emphasis的缩写)
strong表示内容本身的重要性
code 代码等,字母等宽,code为内联属性,可配
pre使用
q引用(quote缩写),内联
blockquote 引用,块级
5.全局属性
class 用于规定元素的类名
contenteditable所选的范围可编辑
hidden 无真假值 表隐藏,可以通过display:block来显示出来
id 尽量少用id,无论是CSS还是JS,
style 这也是HTML的标签,默认隐藏
tabindex 值为正整数时,在键盘上按Tab顺序框选,0时最后框选,负数不选择
设置该属性后,按tab键可以进行下一个带有该属性的地方
title鼠标移上去显示