学习资料

  1. 黑马程序员pink老师前端入门教程
  2. 菜鸟教程HTML教程

web标准

  1. 结构：网页的元素，控制网页的大部分构造，使用HTML
  2. 表现：网页的外观样式，控制网页的外观装饰效果，使用CSS
  3. 行为：网页的交互效果，控制网页的行为动作，使用JS

HTML基本结构

<html>
	<head>
	    <title></title>
	</head>
	<body>
	</body>
</html>

<html></html>表示该文件为HTML文件。
<head></head>标记主要包含页面标题标记、元信息标记、样式标记等。头部标记所包含的信息一般不会显示在网页上。
<title></title>描述文档的标题。
<body></body>为可见的页面内容。
以上标签均为双标签。

HTML骨架标签

在vscode中，输入!和TAB键，即可自动生成骨架标签：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>表示当前页面采取HTML5显示网页。
<html lang="en">表示lang语言种类，en定义语言为英文，zh-CN定义语言为中文。
<meta charset="UTF-8">表示字符集（charset），UTF-8为万国码。

标题

<h1>这是一个标题。</h1> 
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
<h4>这是一个标题。</h4>
<h5>这是一个标题。</h5>
<h6>这是一个标题。</h6>

<h1></h1>表示一级标题，为双标签，1~6逐级递减。

段落、换行、水平线

<p>段落1</p> 
<br> 
<p>段落2</p> 
<hr> 
<p>段落3</p>

<p></p>表示段落，为双标签；<br>表示换行，<hr>表示水平线，为单标签。

文本格式

<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<i>斜体</i>
<del>删除线</del>
<s>删除线</s>
<ins>下滑线</ins>
<u>下滑线</u>
<sub>上标</sub>
<sup>下标</sup>
<big>字体放大</big>
<small>字体缩小</small>

区块

1.块级元素div

使文档中的一个区域着色
<div style="color:blue"> 
	<h3>3级标题为蓝色。</h3> 
	<p>这段文字也是蓝色。</p> 
</div>
这个区域调整为另一个颜色
<div style="color:red"> 
	<h4>4级标题红色。</h4> 
	<p>这段文字也是红色。</p> 
</div>

2.内联元素span

对行内的一部分进行着色
<p>
这一行除了<span style="color:blue">span内的文字为蓝色</span>，其他文字均为黑色。
</p>