HTML基础
一.标题标版
A. 图片标签:
B. 常见属性:
src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩
放。
C. 路径书写方式:
绝对路径:
- 绝对磁盘路径:
C:\Users\Administrator\Desktop\HTML\img\news_logo.png
<img
src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
- 绝对网络路径:
png
<!-- 声明为文档类型是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>
<!--
img标签：
src : 图片路径
width: 宽度
height: 高度
路径书写模式：
绝对路径：
1.绝对磁盘路径：C:\Users\TZX\OneDrive\桌面\HTML\img.jpg\屏幕截图 2024-02-03 220254.png
2.绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
相对路径： 一般使用相对路径
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
-->
<img src="./img.jpg/屏幕截图 2024-02-03 220254.png" width="80%" height="300px" > 新浪政务 >》 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<h2>2023年03月02日 21:50 央视网</h2>
<hr>
<!--
小结：
1.标题标签：
标签： h1 -h6
注意： html 标签都是预定好的 不能自己定义
2.水平线标签： <hr>
3.图片标签： <img src"" width " height "" >
相对路径和绝对路径
-->
<!-- 标题样式 -->
</body>
</html>
二.标题样式
有三种引入方式 具体详情看代码
css选择器和颜色表示方式
**1.**元素（标签）选择器：
选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上
例子如下：
2.id选择器:
选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
例子如下：
**3.**类选择器：
选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
选择器名 {
css样式名：css样式值;
css样式名：css样式值;
元素名称 {
css样式名:css样式值；
div{
color: red;
#id属性值 {
css样式名:css样式值；
}
<!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, initialscale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<img src="./img.jpg/屏幕截图 2024-02-03 220254.png" width="80%" height="300px" > <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >》 正文
<!-- 方式三 外联样式 -->
<!-- <link rel="stylesheet" href="css"> -->
<!-- 方式二 内嵌样式 -->
<style>
h1{
color:rgb(0
, 225, 6);
}
/* 元素选择器 */
/* span{
color: #968D92;
} */
/* 类选择器 */
/* .cls{
color: #968D92;
} */
/* id 选择器 */
#t{
color: #968D92;
font-size: 18px ; /* 设置属性的大小 */
}
/* 优先级 id > 类 > 元素 */
a{
color: black;
text-decoration:none ;/* 去除超链接的颜色和下划线 */
}
p{
text-indent: 35px; /* 首行缩进 */
line-height: 40px; /* 控制行高 */
}
#name{
/* 对齐方式 */
text-align: right;
}
#center{
width: 65%;
margin: 0 17.5 0 17.5;
}
</style>
<div id="center"></div>
<!-- 方式一 行内样式 缺点 仅仅针对一行
写法： 先写标题 之后在h1后加 空格 加 样式 color 颜色 -->
<!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
</span>
<span class="cls" id="t">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank" rel="noopener noreferrer">央视网</a> </span>
<hr>
<!-- 小结：1. css引入方式
行内样式<h1 style =
内嵌样式<style </style
外联样式
2.颜色表示
关键字 rbg 十六进制
3.颜色属性 color 设置颜色属性-->
<!--
小结：
一. 1.span 标签 没有语义定义的标签
2.特点： 一行可以显示多个组合行内元素
二.css选择器
元素选择器 id选择器 类选择器
优先级 id > 类 > 元素
三.css属性
font-size: 18px ; /* 设置属性的大小 */
-->
三.超链接
标签: 央视网
属性:
href: 指定资源访问的url
target: 指定在何处打开资源链接
_self: 默认值，在当前页面打开
_blank: 在空白页面打开
代码实现
<!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, initialscale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px; /* 设置字体大小 */
}
a {
color: black;
text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉
超链接 下面默认的下划线 */
}
</style>
</head>
<body>
<img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/"
target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span>
<span>
<a
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
2.shtml" target="_blank">央视网</a>
</span>
<hr>
</body>
</html>
