1.标题排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大国重器</title>
</head>
<body>
<img src="file:///D:/baota/HTML/jpg/news_logo.png"width="300px"> 新浪政务>正文
<h1>
焦点访谈：中国底气：新思想
</h1>
<hr>
2024.8.29 开始了
<hr>
</body>
</html>
2.标题样式
需要使用css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大国重器</title>
<!-- <link rel="stylesheet" href="css/newscss.css"> -->
<style>
h1{
color: rgb(223, 177, 176);
}
/* 元素选择器 */
/* span{
color: #afafad;
} */
/* 类选择器 */
.cl{
color: #d60d67;
}
/* ID选择器 */
#time{
color: #09ab24;
}
</style>
</head>
<body>
<img src="file:///D:/baota/HTML/jpg/news_logo.png"width="300px"> 新浪政务>正文
<h1>
焦点访谈：中国底气：新思想
</h1>
<hr>
<span id="time">2024.8.29</span> <span>开始了</span>
<hr>
<span class="cl">2024.8.30</span> <span>结束了</span>
<hr>
</body>
</html>
3.超链接
<img src="file:///D:/baota/HTML/jpg/news_logo.png"width="300px"> <a href="https://www.baidu.com/" target="_self">超链接</a>>正文 4.正文排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大国重器</title>
<!-- <link rel="stylesheet" href="css/newscss.css"> -->
<style>
h1{
color: rgb(223, 177, 176);
}
/* 元素选择器 */
/* span{
color: #afafad;
} */
/* 类选择器 */
.cl{
color: #d60d67;
}
/* ID选择器 */
#time{
color: #09ab24;
}
a{
color: #cfe40f;
text-decoration: none;
}
p{
text-indent: 35px;
line-height: 35px;
}
#end{
text-align: right;
}
</style>
</head>
<body>
<img src="file:///D:/baota/HTML/jpg/news_logo.png"width="300px"> <a href="https://www.baidu.com/" target="_self">超链接</a>>正文
<h1>
焦点访谈：中国底气：新思想
</h1>
<hr>
<span id="time">2024.8.29</span> <span>开始了</span>
<hr>
<span class="cl">2024.8.30</span> <span>结束了</span>
<hr>
<video src="./video/1.mp4"controls></video>
<audio src="./audio/Angelika Vee - You Are My Sunshine (你就是我的唯一).ogg" controls></audio>
<p>
<b>库里</b>将个人社交媒体简介中关于勇士的部分删除，这被认为库里向勇士管理层表达对球队现状的不满，有高管表示，库里很享受与詹姆斯一起打球。巴黎奥运会6场比赛，库里联手詹姆斯的实际比赛效果也得到了验证。此前詹姆斯曾招募过库里加入湖人队，上赛季勇士队老板乔-拉科布也打电话给湖人老板珍妮-巴斯，询问詹姆斯交易的可能性。奥运会的经历让库里和詹姆斯一起打球有机会成为现实，西部竞争激烈，湖人和勇士以现有阵容都很难在季后赛走得更远。
</p>
<p>
<strong>结论显而易见，</strong>
勇士新赛季的情况并不比湖人更好。”萨姆-阿米克说道，“詹姆斯交易去勇士队联手库里也并不一定确保夺冠，必须要确保戴维斯在一起，他们才能保证拿到总冠军。”从篮球技术层面来说，库里加入湖人队才是最好的选项。进攻端由库里与詹姆斯的挡拆发起，戴维斯的进攻潜力将被进一步放大，防守端戴维斯能支撑起湖人的防守体系，只需要在三巨头身边搭配几名合适的角色球员就足以夺冠。
</p>
<p id="end">
靠右对齐
</p>
</body>
</html>
5.盒子模型
6.表格模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>leo</td>
<td>20</td>
<td>man</td>
</tr>
<tr>
<td>jack</td>
<td>22</td>
<td>man</td>
</tr>
<tr>
<td>amy</td>
<td>24</td>
<td>woman</td>
</tr>
</table>
</body>
</html>
7.表单标签
输入用户名和年龄后提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get">
用户名： <input type="text" name="username">
年龄： <input type="text" name="userage">
<input type="submit" name="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get">
用户名： <input type="text" name="username"><br>
密码：<input type="password" name="userpassword"><br>
性别：<label ><input type="radio" name="gender" value="1"> 男</label>
<label ></label><input type="radio" name="gender" value="2"> 女</label><br>
选项：<label ><input type="checkbox" name="choice" value="java"> java </label>
<label ><input type="checkbox" name="choice" value="game"> game </label>
<label ><input type="checkbox" name="choice" value="sing"> sing </label><br>
上传文件：<label ><input type="file" name="file1"></label> <br>
日期 <label ><input type="date" name="date"></label> <br>
时间：<label ><input type="time" name="time"> </label> <br>
日期与时间： <label ><input type="datetime-local" name="datetime-local"></label> <br>
数字： <label ><input type="number" name="number" ></label> <br>
邮箱：<label ><input type="email" name="email"></label> <br>
提交: <label ><input type="submit" name="submit"></label>
重置：<label ><input type="reset" name="reset"></label>
可点击的按钮: <label ><input type="button" name="button1"></label>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="post">
用户名： <input type="text" name="username"><br>
密码：<input type="password" name="userpassword"><br>
性别：<label ><input type="radio" name="gender" value="1"> 男</label>
<label ></label><input type="radio" name="gender" value="2"> 女</label><br>
选项：<label ><input type="checkbox" name="choice" value="java"> java </label>
<label ><input type="checkbox" name="choice" value="game"> game </label>
<label ><input type="checkbox" name="choice" value="sing"> sing </label><br>
上传文件：<label ><input type="file" name="file1"></label> <br>
日期 <label ><input type="date" name="date"></label> <br>
时间：<label ><input type="time" name="time"> </label> <br>
日期与时间： <label ><input type="datetime-local" name="datetime-local"></label> <br>
数字： <label ><input type="number" name="number" ></label> <br>
邮箱：<label ><input type="email" name="email"></label> <br>
描述： <select name="degree">
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br>
<textarea name="text" name="description" cols="30" rows="10"></textarea> <br>
<input type="hidden" name="id" value="1">
提交: <label ><input type="submit" name="submit"></label>
重置：<label ><input type="reset" name="reset"></label>
可点击的按钮: <label ><input type="button" name="button1"></label><br>
</form>
</body>
</html>
扫一扫
9024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
