原文转载自自己的博客：https://blog.csdn.net/weixin_39474188/article/details/116645900
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>
[图片上传失败...(image-bdf822-1693236104970)]
浏览器要展示的部分写在<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的初步入门内容，欢迎一键三连~
网友评论