原文转载自自己的博客：blog.csdn.net/weixin_3947…

1. html简介

HTML，全称为HyperText Markup Language（超文本标记语言），是一种用于创建网页的标准标记语言，于1990由英国人Sir Timothy John Berners-Lee（李伯纳，李爵士）发明，并同时编辑了第一个网络服务器。

要写学会前端开发，学好html是第一步。

2. html起手

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
</head>
<body>
    
</body>
</html>

如上内容即为html起手式，可以使用vscode自带的snippet机制完成。输入html:5即可生成如上起手内容。本博客相比原生生成的代码有所改动。

<html lang="zh_CN">表示本网页的语言是中文（中国）。默认为<html lang="en">，即网页由英文写成。

网页属性等信息写在<head></head>标签下面。起手的部分包括如下：

<meta charset="UTF-8">：表明网页使用utf-8编码，一般不需要改动。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：表明使用ie渲染时应使用最新的ie内核。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：不需要改动
<title>我的博客</title>：网页标题。用于在浏览器中显示网页的标题。如下图，该网站的<title>行代码为<title>写文章-CSDN博客3</title>

浏览器要展示的部分写在<body></body>标签下。

不论是<head>还是<body>，都包括在<html>标签下方。

3. 常用的表示章节的标签

其作用是可以表示文章、书籍的层级。常用的标签包含有：

<h1>~<h6>：一级到六级标题
<section>：表示章节
<article>：表示文章中一段完整的内容
<p>：段落
<header>：表示网站头部，通常可以用于写网页头上的菜单栏
<footer>：表示网站尾部，可以写一些备案信息、版权所有等信息
<main>：表示主要内容，一个页面只能有一个<main>
<aside>：一般用于侧边栏。
<div>：一般用于划分，非常常用。

4. 全局属性

表示所有的HTML标签中都具有的属性。常用的有如下：

class：表示“类”，但一般用于标记作用。
contenteditable：内容可编辑。
hidden：不会在网页中渲染的元素。
id：表示"ID"，也用于标记。虽然HTML规定全网页的ID不可重复，但事实上你重复了也不会报错。慎用。
style：表示“样式”。但由于现代网页都用CSS来规定样式，所以该属性尽量不用。
tabindex：不用鼠标时，用tab键来进行访问的顺序。tabindex>=1时，顺序越小越先访问；tabindex=0时表示最后访问；tabindex=-1时表示不可使用tab访问。用的比较少。
table：标签的标题。用于在标签加载慢时鼠标浮在上面的替代信息显示。

另，HTML标签自带了一些默认样式，但最好用reset.css文件去除它们。

5. 常用的内容标签

显示特定内容用的。常用有如下：

<a>：搭配href属性用，用于链接到外部、内部网页。
<br>：break。用于在文本中生成一个换行（回车）符号。
<code>：可以在网页中显示代码块。
<em>：强调，显示为斜体。
<hr>：表示段落级元素之间的主题转换，起一个分隔线作用
<quote> 或<q>：表示引用，用于表示“谁说了什么话”
<blockquote>：块级引用。与上面那个元素的区别是该元素将引用单独成块
<pre>：一般情况下html会忽略多余的空格、空行。用<pre>标签包裹元素可以如实地反映出到底用了多少空格多少空行。

6. 列表元素

<ol> <li></li> </ol>：有序列表（ordered list + list item）
<ul> <li></li> </ul>：无序列表（unordered list + list item）
<dl> <dt> <dd>：描述列表 (description list + description term + description data)

以上就是HTML的初步入门内容，欢迎一键三连~

html入门笔记1