本篇文章介绍了 HTML 的一些基础知识,主要包括 HTML 的元素、属性、图像、表格、列表和布局等内容。
HTML基础
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
!喜欢的话不要忘记【一键三连】哦!