这是我的第一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页笔记</title>
<!-- 网页标题引用小图标方式 -->
<link rel="shortcut icon" type="image/x-icon" href="X.jpg">
<!-- 引用外部层叠样式表 -->
<link rel="stylesheet" type="text/css" href="X.css">
<style type="text/css">
a{
/* a连接是否添加下划线：否 */
text-decoration: none;
/* 字体颜色设置为黑色 */
color: #000;
}
/* a标签伪类效果 */
a:hover{
/* 鼠标移上去字体变成红色 */
color: red;
/* 鼠标移上去字体是否添加下划线：是 */
text-decoration: underline;
}
ul li{
/* 清除无序列表标签样式 */
list-style: none;
}
ul li::before{
/* li文字前面插入一张图片 */
content: url();
/* 图片和li文字向右拉开30像素的距离 */
margin-right: 30px;
}
input{
/* 设置编辑框的高度 */
height: 8px;
/* 设置编辑框的宽度 */
width: 258px;
/* 设置编辑框的边框为1 实线 颜色为#ccc */
border: 1px solid #ccc;
/* 设置编辑框的外边距上部20像素 */
margin-top: 20px;
/* 设置编辑框的内边距20像素 */
padding: 20px;
}
button{
/* 设置按钮的高度 */
height: 50px;
/* 设置按钮的宽度 */
width: 300px;
/* 设置按钮外边距上部20像素 */
margin-top: 20px;
/* 设置按钮的背景颜色 */
background: #FF6700;
/* 设置按钮的自带边框为无 */
border: none;
/* 设置按钮的字体为白色 */
color: #fff;
}
*{
margin: 0px;
padding: 0px;
}
table{
height: 300px;
border: 1px solid #ccc;
border-collapse: collapse; /* 合并边框线 */
}
tr th{
height: 200px;
border: 1px solid #ccc;
width: 100px;
}
tr td{
height: 200px;
border: 1px solid #ccc;
width: 100px;
}
</style>
</head>
<body style="height: 2000px;">
<!-- text-indent 首行缩进两个字符 -->
<!-- font-size 字体大小设置为20像素 -->
<!-- color 字体颜色设置为红色 -->
<p style="text-indent:2em;font-size:20px;color:red;">Hello World!</p>
<!-- font-family 字体设置 -->
<p style="text-indent:2em;font-size:20px;color:red;font-family: monospace;">Hello World!</p>
<!-- 斜体标签1 -->
<em>Hello World!</em>
<!-- 换行符 -->
<br>
<!-- 斜体标签2 -->
<i>Hello World!</i>
<!-- 换行符 -->
<br>
<!-- font-size 字体大小设置为45像素 -->
<!-- font-weight 设置字体为粗体 -->
<em style="font-size:45px;font-weight:bold;">Hello World!</em>
<!-- 换行符 -->
<br>
<!-- del删除标签 span文本标签 -->
<del>499元</del><span>399元</span>
<!-- pre标签可以将p标签内隐藏的空格及换行符显示出来而不需要再通过换行标签或空格标签来单独处理 -->
<pre><p>大家好，我叫杨凡，是php中文网
第四期的 学员，想学习php相关知识，希望能通过学习能自己写出一个像样的前后端程序来！</p></pre>
<!-- h1-h6标签 由大到小-->
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
<!-- a链接标签 -->
<a href="https://www.baidu.com">百度</a>
<!-- 图片文字链接 -->
<a href="https://www.baidu.com"><img src="" alt="图片坏了" style="height: 40px; width: 40px; background: red;"></a>
<!-- 换行符 -->
<br>
<!-- a标签锚点应用 -->
<a href="top">顶部</a>
<div style="height: 100px;">
</div>
<a href="" name="top">回到顶部</a>
<!-- 有序列表标签 -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
</ol>
<!-- 无序列表标签 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>草莓</li>
</ul>
<!-- form表单 -->
<form action="url" method="POST">
<!-- placeholder设置编辑框内提示的问题 -->
<input type="text" name="username" placeholder="请输入用户名"><br>
<input type="password" name="pwd" placeholder="请输入密码"><br>
<button>登陆</button>
</form>
<!-- table表格标签 -->
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3">合并列1</td> <!-- 合并列给参数3即可 -->
</tr>
<tr>
<td rowspan="2">合并行1</td> <!-- 合并行给参数2即可 -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>