大白话html 第二章学习基础标签
- 标题标签：HTML里有
<h1>到<h6>这6个标题标签，用来表示不同级别的标题。<h1>是最大最重要的标题，<h6>是最小的标题。就像写文章时，大标题用<h1>，下面的小标题可以用<h2>、<h3>等。比如：
<!DOCTYPE html>
<html><body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3></body>
</html>
- 段落标签：
<p>标签用来表示段落，把一段文字放在<p>和</p>中间，浏览器就会把它当成一个段落来显示，段落和段落之间会有一定的间距。示例如下：
<!DOCTYPE html>
<html><body><p>这是第一段话。这是第一段话。这是第一段话。这是第一段话。这是第一段话。这是第一段话。</p><p>这是第二段话。这是第二段话。这是第二段话。这是第二段话。</p></body>
</html>
- 列表标签
- 无序列表：用
<ul>和<li>标签来创建，每个<li>就是列表里的一项，前面会有个小圆点之类的标记。例如：
- 无序列表：用
<!DOCTYPE html>
<html><body><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul></body>
</html>
- **有序列表**：用`<ol>`和`<li>`标签，列表项前面会有数字序号。代码如下：
<!DOCTYPE html>
<html><body><ol><li>第一步</li><li>第二步</li><li>第三步</li></ol></body>
</html>
- 链接标签：
<a>标签用来创建链接，通过href属性指定链接的目标地址。比如：
<!DOCTYPE html>
<html><body><a href="https://www.example.com">点击访问示例网站</a></body>
</html>
- 图像标签：前面提到过
<img>标签，它的src属性指定图片的路径，alt属性用来描述图片。再看一个例子：
<!DOCTYPE html>
<html><body><img src="nature.jpg" alt="美丽的自然风光"></body>
</html>
HTML属性
- class属性：可以给标签指定一个类名，方便用CSS来选择和样式化一组相似的元素。比如有多个段落想设置相同的样式，就可以给它们加上相同的class。示例如下：
<!DOCTYPE html>
<html><head><style>.special-paragraph {color: blue;font-size: 18px;}</style></head><body><p class="special-paragraph">这是一个有特殊样式的段落。</p><p class="special-paragraph">这也是有特殊样式的段落。</p></body>
</html>
- id属性：给标签一个唯一的标识符，通常用于JavaScript操作或者用CSS单独设置某个元素的样式。像这样：
<!DOCTYPE html>
<html><head><style>#unique-element {background-color: yellow;}</style></head><body><div id="unique-element">这是一个有独特样式的div元素。</div></body>
</html>
基本的网页布局
- 使用div标签布局：
<div>标签是一个块级元素，就像一个大盒子，可以把网页分成不同的区域，用来放各种内容。比如把网页分成头部、主体、底部三个区域：
<!DOCTYPE html>
<html><body><div id="header"><h1>网站标题</h1></div><div id="main-content"><p>这里是主要内容区域。</p></div><div id="footer"><p>版权所有 © 2025</p></div></body>
</html>
- 使用表格布局：虽然现在不常用表格来做整体布局，但在展示一些表格数据时很有用。
<table>标签表示表格，<tr>表示表格行，<td>表示表格单元格。例如：
<!DOCTYPE html>
<html><body><table border="1"><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></table></body>
</html>
通过这些内容的学习，你就可以构建更复杂、更丰富的网页结构啦。
安装及使用详细教程)
