style为定义样式标签：可以用来更改对象的样式，包括颜色，大小，边距，字体等。
选择器应用于style标签中（详情见HTML选择器的作用）
align为标签的属性，主要用于控制文本的对齐方式，left（左对齐），center（居中对齐），right（右对齐）
header标签为头部标签
h1为标题标签
p为段落标签
hr为分隔线标签，在页面中创建一条水平线，可以在视觉上将文本分割成2部分
ul为无序标签
a为超链接标签
br为换行标签
ins为下划线标签
table为表格标签，其中tr为行，th为单元格，有几个th就有多少个单元格
input为表单输入标签，输入字段可以为文本，数字等
如图所示，为html网页制作的综合
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器练习</title>
<style>
h1~p{
color: rgb(0, 0, 0);
font-size: 40px;
}
header nav ul a{
color: red;
}
article>h3{
color: green;
}
h3+p{
color: rgb(192, 9, 248)
}
</style>
</head>
<body>
<header>
<h1 align="center">第五人格</h1>
<p align="center">欢迎来到: <ins>欧利蒂斯庄园</ins></p>
<hr>
<nav>
<ul type="none">
<li><a href="#">首页</a></li>
<li><a href="#">排位模式</a></li>
<li><a href="#">日记推理</a></li>
<li><a href="#">混沌纷争</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>
<br><br><br>
<p>想了解第五人格：<a href="https://id5.163.com/index.html">点击这里</a></p>
</article>
<br>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容，如快速链接、广告等。</p>
<table border="1">
<tr>
<th>专业</th>
<th>链接</th>
</tr>
<tr>
<td>求生者</td>
<td><a href="专业A详情页.html">人类</a></td>
</tr>
<tr>
<td>监管者</td>
<td><a href="专业B详情页.html">屠夫</a></td>
</tr>
</table>
</aside>
</section>
<section>
<h4>联系客服</h4>
<form>
玩家:
<input type="text" id="name" name="name"><br>
ID:
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
</main>
<hr>
<footer>
<p>版权所有 © 2024 第五人格</p>
</footer>
</body>
</html>
示例效果图
扫一扫
1014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
