HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

1. html 简介

<!DOCTYPE html><!--声明为 HTML5 文档-->
<html><!--<html>元素是 HTML 页面的根元素-->
	<head><!--包含了文档的元（meta）数据-->
		<meta charset="utf-8"><!--定义网页编码格式为 utf-8,声明编码，否则会出现乱码-->
		<title></title><!--描述了文档的标题-->
	</head>
	<body><!--包含了可见的页面内容-->
	</body>
</html>

html 注释形式：左尖括号+感叹号+两个短横+注释内容+两个短横+右尖括号

2. html 基础

2.1 元素（eg.标题and段落）

HTML 元素以开始标签起始，以结束标签终止。
元素的内容是开始标签与结束标签之间的内容（某些 HTML 元素具有空内容）。

h 标签定义标题，h1 - h6 中 h1 定义最大的标题，h6 定义最小的标题。
p 标签定义段落。
hr 标签用于创建水平线，用于分隔内容。
br 标签用于在不产生一个新段落的情况下进行换行（注：它是一个空的 HTML 元素，关闭标签没有意义，因此它没有结束标签！）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题与段落</title>
	</head>
	<body>
		<h1>这是标题 1</h1>
		<p>这是段落 1</p>
			<hr />
			<h2>这是标题 2</h2>
			<p>这是<br>段落 2</p>
			<hr />
	</body>
</html>

运行结果如图：
标题与段落

2.2 属性（eg.链接）

属性可以在元素中添加附加信息，一般描述于开始标签，总是以名称/值对的形式出现。

a 标签用于设置超文本链接，点击可跳转到新的文档或者当前文档中的某个部分。使用了 href 属性来描述链接的地址。
默认情况下：

链接状态	链接形式
未访问过的链接	蓝色字体+下划线
访问过的链接	紫色字体+下划线
点击链接时	红色字体+下划线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接</title>
	</head>
	<body>
		<a href="https://www.runoob.com">这是一个菜鸟教程网站的链接</a>
	</body>
</html>

3. html图像

img 标签定义图像，它是空标签，只包含属性且没有闭合标签。
src 指源属性，它的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。（浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像</title>
	</head>
	<body>
		<img src="img/图像.jpg" alt="A girl" width="32" height="32"> 
</body>
</html>

运行效果如图：

4. html 表格

table 标签定义表格。
tr 标签定义表格的若干行。
td 标签定义每行被分割的若干单元格。
th 标签定义表格的表头。
border属性用于规定表格边框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1">
		    <tr>
		        <th>Header 1</th>
		        <th>Header 2</th>
		    </tr>
		    <tr>
		        <td>row 1, cell 1</td>
		        <td>row 1, cell 2</td>
		    </tr>
		    <tr>
		        <td>row 2, cell 1</td>
		        <td>row 2, cell 2</td>
		    </tr>
		</table>
	</body>
</html>

运行结果如图：

5. html 列表

ul 标签定义无序列表。
有序列表始于 ol 标签。每个列表项始于 li 标签。
start 属性规定有序列表中第一个列表项目的开始值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<ul>
		  <li>无</li>
		  <li>序</li>
		  <li>列</li>
		  <li>表</li>
		</ul>
		<hr />
	<ol>
	  <li>有</li>
	  <li>序</li>
	</ol>
	<ol start="10">
	  <li>列</li>
	  <li>表</li>
	</ol>
	</body>
</html>

运行结果如图：

6. html 布局

div 元素用于分组 HTML 元素的块级元素。
class 属性用于规定元素的类名。
id 属性用于规定元素的唯一 id。
style 属性用于规定元素的行内样式。
b 标签定义粗体的文本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局</title>
	</head>
	<body>
		<div id="container" style="width:700px">
		
		<div id="header" style="background-color:#E6E6FA;">
		<h1 style="margin-bottom:0;">Schedule</h1></div>
		 
		<div id="menu7" style="background-color:#E0FFFF;height:200px;width:100px;float:left;">
		<b>周日</b><br>
		学习HTML<br>
		学习CSS<br></div>
		<div id="menu1" style="background-color:#F0F8FF;height:200px;width:100px;float:left;">
		<b>周一</b></div>
		<div id="menu2" style="background-color:#E0FFFF;height:200px;width:100px;float:left;">
		<b>周二</b></div>
		<div id="menu3" style="background-color:#F0F8FF;height:200px;width:100px;float:left;">
		<b>周三</b></div>
		<div id="menu4" style="background-color:#E0FFFF;height:200px;width:100px;float:left;">
		<b>周四</b></div>
		 <div id="menu5" style="background-color:#F0F8FF;height:200px;width:100px;float:left;">
		 <b>周五</b></div>
		 <div id="menu6" style="background-color:#E0FFFF;height:200px;width:100px;float:left;">
		 <b>周六</b></div>
		</div>
</body>
</html>

运行结果如图：

学完这些 HTML 基础知识就可以自己动手做一个网页啦~撒花撒花！想让自己的网页变得更漂亮吗？想让自己的网页变得更高级吗？想让自己的网页变得更“高端大气上档次”吗？那就继续学习 CSS 的相关知识吧 ^ _ ^
CSS 基础学习-1
！喜欢的话不要忘记【一键三连】哦！

HTML基础标签和属性——学习周记2

HTML基础