【web开发01】前端开发HTML、CSS-新浪新闻的实现

news2024/11/29 2:47:15

前端开发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中无论输入多少个空格，只会显示一个。可以使用空格占位符&nbsp ;

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>

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>