HTML入门笔记一

Varian米大王

2019-09-08 283 阅读2分钟

HTML入门基础知识

最近在回顾HTML，打算梳理一下HTML的基础知识，本文为第一篇整理笔记。

HTML的发明

HTML是伟大的李爵士发明的（一并发明的还有URL和HTTP）

HTML的开头

HTML的开头一般为：

<!DOCTYPE html>  # 文档类型
<html lang="en">  # 声明网页语言，中文为'zh-CN' 
<head>
    <meta charset="UTF-8">  # 声明文件编码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  # 兼容手机禁用缩放
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  # 告诉IE使用最新内核
    <title>Document</title>
</head>
<body>
    <p>HTML开头</p>
</body>
</html>

HTML5新的语义标签

从上到下，依次有：

header：页眉
nav：导航栏
main：body中的主体部分
section：章节
article：文章
aside：侧边栏
footer：页脚

排布顺序详见下图：

HTML5新标签

全局属性

在HTML中，所有标签都有的全局属性有：

class：标签的类别
contenteditable：可否被用户修改
hidden：是否隐藏
id：唯一标识，不到万不得已千万不要用id（能用class就用class）
style：样式（优先级比CSS高，比JS低）
tabindex：适配键盘上的tab键，取值范围为-1~32767，0最后到达，其他正数越小越优先，-1永不到达，不指定的话默认为0
title：鼠标悬浮在标签上显示的内容

一些常用的内容标签

还有一些常用的内容标签，简单罗列几个：

ol+li: 有序列表
ul+li: 无序列表
dl+dt+dd: 包含术语定义及描述的列表，主要用于词汇表和原数据（键值对）,dl表示列表，dt表示术语，dd表示描述
hr: horizontal rule，横向分割线
br: break，换行符
a：用于跳转（HTTP GET请求）
em：用于语气强调
strong：表示内容重要
code：使用等宽字体表示代码，换行结合pre标签
pre：html默认会将多个空格和换行缩进为一个，pre标签可以保留原先的空格和换行
q: quote，引用标签，没什么默认效果，行内元素
blockquote: 带有缩进的引用，块级元素