1. 什么是HTML??
HTML(HyperText Markup Language,超文本标记语言)是构建网页和网上应用的标准标记语言。它不是一种编程语言,而是一种用于定义网页内容结构的标记语言。
2. HTML的基本结构
一个基本的HTML文档由以下部分组成:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
<!DOCTYPE html>:文档类型声明,告诉浏览器这是一个HTML5文档。<html>:根元素,包含所有的HTML元素。<head>:包含了文档的元数据,如<title>(页面标题)。<body>:包含了可见的页面内容。
3. HTML元素和标签
HTML元素由标签包围。大多数HTML元素都有一个开始标签和一个结束标签:
<tagname>内容</tagname>
一些元素是空的,意味着它们不包含内容,例如<img>和<br>。
4. HTML常用标签和属性
HTML标签可以拥有属性,属性提供了有关HTML元素的额外信息。属性总是以名称/值对的形式出现,并且总是在标签的开始部分。示例中img是标签,src和alt是标签的属性。
<img src="image.jpg" alt="描述">
4.1 文本格式化标签
<h1>到<h6>:标题标签,定义标题。字体大小从h1到h6依次减小。<p>:段落标签,定义段落。<strong>或<b>:定义粗体文本。<em>或<i>:定义斜体文本。
4.2 链接和图片
- 链接:使用
<a>标签创建链接,href设置跳转地址,target设置跳转方式。
<a href="https://www.example.com",target="_blank">访问示例网站</a>
- 图片:使用
<img>标签在HTML页面中嵌入图片,src设置图片地址,alt如果图片不能正常显示则显示提示语。
<img src="image.jpg" alt="图片描述">
4.3 列表
- 无序列表:使用
<ul>和<li>。
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
- 有序列表:使用
<ol>和<li>。
<ol>
<li>项目1</li>
<li>项目2</li>
</ol>
4.4 表格
- 创建表格使用
<table>,行用<tr>,单元格用<td>。
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
4.5 表单
<form>:定义表单,用于收集用户输入。
<form action="/submit-form" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"> #文本输入框
<input type="submit" value="提交">
</form>
4.6 HTML5新特性
HTML5引入了许多新的元素和API,例如:
<audio>和<video>:嵌入音频和视频。<canvas>:用于绘图。<details>和<summary>:创建可折叠的内容区块。
5. 结语
HTML是构建网页的基础,掌握HTML对于任何希望从事网页设计和开发的人来说都是至关重要的。本文介绍了HTML的常用标签,如有不当之处,欢迎留言指正!