前端开发HTML、CSS-新浪新闻的实现
1 实现标题排版
1.1图片连接的三种方式
1.绝对路径
1.1本地路径
<img src="C:\Users\86138\Desktop\html\img\news_logo.png">
1.2网络路径
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
2.相对路径
<img src="img/news_logo.png">
1.2 具体代码
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<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>
</head>
<body>
<img <img src="img/news_logo.png"> 新浪政务>正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
1.3 总结1.< h1>到< h6>是标题从大到小
2.< hr>是水平线
3.绝对路径 当前目录./ 上上级目录…/
具体代码中是没有空格的，csdn会改写格式这里我才空格
2 实现标题样式
2.1 css的三种引入方式
1.行内样式
<h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>
2.内嵌样式
<style>
h1 {
color: #4d4f53;
}
</style>
3.外联样式
先创建一个css文件
h1 {
color: red;
}
html里面：
<link rel="stylesheet" href="css/news.css">
2.2 颜色的三种表示
<style>
h1 {
/* color: red; */
/* color: rgb(255,0,0); */
color: #4d4f53;
}
</style>
2.3 css选择器
没有任何语义的标签span
1.元素选择器
2.id选择器
<style>
#time {
color: #968d92;
font-size: 13px;
}
</style>
3.类选择器
<style>
.cls {
color: #968d92
}
</style>
2.4 超链接
<style>
a {
color: black;
text-decoration: none;
</style>
<a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>
3 实现正文排版
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符  ;
3.1 视频标签 video
video
<video src="video/1.mp4" controls width="950px"></video>
3.2 音频标签 audio
audio
<audio src=""></audio>
3.3 段落标签 p
p
<p>
人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
</p>
3.4 文本加粗标签 b strong
b
strong
<strong>央视网消息</strong>
3.5 css样式
text-indent 首行缩进
line-height 设置行高
text-align 靠右对齐
4 实现正文布局
4.1 盒子模型
4.2 布局标签
<style>
#news {
width: 50%;
margin: 0 auto;
}
</style>
4.2.1 div
一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高(width、height)
4.2.2 span
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高(width、height)
5 表格、表单、表单项标签
5.1 表格标签
一个tr就是一行
th表头单元格 加粗且居中
<table>:定义表格
<tr>:定义表格中的行，一个<tr>表示一行
<th>:表示表头单元格，具有加粗居中效果
<td>:表示普通单元格
5.2 表单标签
负责数据的采集，如注册、登录等数据采集。
标签:< form>
<form action="" method="get">
用户名： <input type="text" name="username">
年龄： <input type="text" name="age">
<input type="submit" value="提交">
</form>
5.3 表单项标签
< input>:表单项，通过type属性控制输入形式
< select>:定义下拉列表，定义列表项。
< textarea>:文本域
<!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>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
图像: <input type="file" name="image"> <br><br>
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>
邮箱: <input type="email" name="email"> <br><br>
年龄: <input type="number" name="age"> <br><br>
学历: <select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>
