<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<style>
/* 样式表的标签选择器:针对页面中所有指定的标签都起作用,应用范围最广 */
/* 将所有h1标签都改为蓝色 样式表语法的注释 */
h1{
color:blue;
}
/* 样式表的类选择器:针对页面中所有的class属性为某个特定值的标签起作用 */
.red_text{
color:red;
}
/* 样式表的id选择器:针对页面某个id属性为特定内容的标签起作用,因为html中规定id属性的值不能重复,因此它的应用范围最窄 */
#post{
background-color: yellow;
color:blue;
}
</style>
</head>
<body>
<!-- 文本的使用 HTML的注释 -->
<h1>1.文本的使用</h1>
双标签:表示一个区域或范围<br>
单标签:表示一个具体的对象<br>
很多 空格
<h2>1.1段落的处理</h2>
<p>这是一个段落</p>
<p>段落用p标签表示</p>
<p align="center">这是一段居中对齐的文本</p>
<p>文本效果的控制<font size="20" color="red">红色较大的文字</font></p>
<h2>1.2 列表</h2>
<ul>无序列表
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<ol>有序列表
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<h1>2.图像与表格</h1>
<img src="1.webp" height="200">
<table border="5">
<!-- tr相当于表格中的行,td相当于行中的单元格-->
<tr>
<td>第一行,第一列</td>
<td>第一行,第二列</td>
<td>第一行,第三列</td>
</tr>
<tr>
<td>第二行,第一列</td>
<td>第二行,第二列</td>
<td>第二行,第三列</td>
</tr>
<tr>
<td>第三行,第一列</td>
<td>第三行,第二列</td>
<td>第三行,第三列</td>
</tr>
</table>
<h1>3.链接和区块</h1>
<a href="http://www.baidu.com">百度一下,你就知道</a>
<a href="https://movie.douban.com/subject/1292052/"><img src="1.webp" height="200"></a>
<div>层
<p>段落
<span>区块</span>
<span class="red_text">肖申克的救赎</span>
<span class="year">1994</span>
</p>
</div>
<h1>4.表单和样式表</h1>
表单往往用来完成交互的操作,如搜索等<br>
<form target="_blank" method="get" action="http:www.baidu.com/s">
<p>
搜索内容:<input type="text" name="wd" id="input_area">
<input type="submit" name="按钮" id="submit_button" value="百度一下">
</p>
</form>
<div>
样式表的三种选择器:标签选择器、类选择器、id选择器
<p class="red_text">另一段红色的文本</p>
</div>
<p>
<span id="post">id选择器</span><span id="post1">id选择器</span>
</p>
</body>
</html>
这部分是对前端网页的总结概括。篇幅较短,后面会专门写一篇进行知识点的补充。