前端开发HTML、CSS-新浪新闻的实现
- 1 实现标题排版
- 1.1图片连接的三种方式
- 1.2 具体代码
- 1.3 总结1.< h1>到< h6>是标题从大到小
- 2 实现标题样式
- 2.1 css的三种引入方式
- 2.2 颜色的三种表示
- 2.3 css选择器
- 2.4 超链接
- 3 实现正文排版
- 3.1 视频标签 video
- 3.2 音频标签 audio
- 3.3 段落标签 p
- 3.4 文本加粗标签 b strong
- 3.5 css样式
- 4 实现正文布局
- 4.1 盒子模型
- 4.2 布局标签
- 4.2.1 div
- 4.2.2 span
- 5 表格、表单、表单项标签
- 5.1 表格标签
- 5.2 表单标签
- 5.3 表单项标签
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>
