HTML与CSS的学习

什么是HTML,CSS？

HTML(HyperText Markup Language):超文本标记语言。

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等
标记语言:由标签构成的语言

>HTML标签都是预定义好的。例如:使用<a>展示超链接，使用<img>展示图片，<vide0>展示视

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS(Cascading Style Sheet):层叠样式表，用于控制页面的样式(表现)

HTML结构标签

<html><head><title>标题</title></head><body></body>
</html>

特点：

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

1.标题标签

标签:<h1>..</h1>(h1 →h6 重要程度依次降低)

注意:HTML标签都是预定义好的，不能自己随意定义。

2.水平线标签 <hr>

用于在网页界面添加一条水平线

3.图片标签

<img src "图片路径" width=""height="">

width大小有两种单位

一种是像素点（px)

另一种是百分比（%）

标签使用样例：

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想务实大国粮仓</title>
</head>
<body><img src="./img/news_logo.png" height="35px"> 新浪政务>正文<h1>焦点访谈：中国底气 新思想务实大国粮仓</h1><hr>2023年03月02日21:50央视网<hr>
</body>
</html>

运行后网页

CSS引入方式

1.行内样式:写在标签的style属性中(不推荐)

该方式只能使得h1一个标签有该属性，复用性较低

2.内嵌样式：写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

3.外联样式:写在一个单独的.css文件中(需要通过 1ink标签在网页中引入)

代码样例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想务实大国粮仓</title><!-- 方式二：内嵌方式 --><style>h1{/* 颜色描述方式 *//* 第一种：关键字 *//* color: red; *//* 第二种：RGB表示 *//* color: rgb(255,0,0); *//* 第三种：基于16进制 */color: #ff0000;}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="./img/news_logo.png"> 新浪政务>正文<!-- 方式一：行内样式 --><!--  <h1 style="color: red;">焦点访谈：中国底气 新思想务实大国粮仓</h1> --><h1>焦点访谈：中国底气 新思想务实大国粮仓</h1><hr>2023年03月02日21：50央视网<hr>
</body>
</html>

CSS文件：

h1{color: red;
}

颜色表示的三种方式

1.关键字

如 red表示红色，green表示绿色，blue表示蓝色

2.rgb表示

红绿蓝三原色，每项取值0-255。

3.十六进制表示法

#开头，将数字转换成十六进制表示

每两个表示rgb的一个数

若有两个相同可以缩写

#000000缩写#000

CSS选择器

作用：用来选取需要设置样式的元素(标签)

1.元素选择器

2.id选择器

为标签设置id:

3.类选择器

为标签设置类:

优先级

id选择器>类选择器>元素选择器

CSS属性

color:设置文本的颜色

font-size:字体大小 (注意:记得加px)

text-decoration:规定添加到文本的修饰，none表示定义标准的文本

 text-decoration: none;/* 设置没有下划线 */

text-align:规定元素中的文本的水平对齐方式（左，中，右）

 text-align: right;/* 靠右对齐 */

text-indent:定义第一个行内容的缩进

 text-indent: 35px;/* 设置首行缩进 */

4.<pane>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

5.超链接

标签: <a href=" "target="...">央视网</a>

属性:

href:指定资源访问的ur1(路径）

target:指定在何处打开资源链接

_self:默认值，在当前页面打开

_blank:在空白页面打开

代码样例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想务实大国粮仓</title><!-- 方式二：内嵌方式 --><style>h1{color: #4D4F53;}#time{/* 颜色 */color: rgb(151,142,144);/*  字体大小 */font-size: 12px;}a{color: black;text-decoration: none;}</style>
</head>
<body><img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >正文<!-- 方式一：行内样式 --><!--  <h1 style="color: red;">焦点访谈：中国底气 新思想务实大国粮仓</h1> --><h1>焦点访谈：中国底气 新思想务实大国粮仓</h1><hr><span class="cis" id="time">2023年03月02日21：50</span><span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span><hr>
</body>
</html>

6.视频标签：<video>

属性：

src:规定视频的url

controls:显示播放控件

width:播放器的宽度

height:播放器的高度

 <!-- 视频 --><video src="video/1.mp4" controls width="950px"></video>

7.音频标签：<audio>

属性：

src:规定音频的url

controls:显示播放控件

 <!-- 音频 --><audio src="audio/1.mp3" controls></audio>

8.段落标签：<p>

<P>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</P>

9.文本加粗标签：<b>/<strong>

<b>单纯加粗

<strong>有强调的意思

盒子布局

盒子:页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

10.<div>标签

特点：

一行只显示一个(独占一行)

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高(width、height)

代码样例：

<!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>盒子模型</title><style>div {width: 200px;height: 200px;box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px; /* 内边距, 上 右 下 左 */border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px; /* 外边距, 上 右 下 左 */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

11.表格标签：<table>

场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表。

<th>具有加粗效果

代码样例：

<!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><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table>
</body>
</html>

运行效果：

12.表单标签<form>

表单属性:

action:表单数据提交的url地址

method:表单提交方式

get:表单数据拼接在url后面，?username=java,大小有限制

post:表单数据在请求体中携带，大小没有限制

表单项

<input>:表单项，通过type属性控制输入形式。

 姓名: <input type="text" name="name"> <br><br>

<select>:定义下拉列表，<option>定义列表项。

学历: <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>:文本域

 <textarea name="description" cols="30" rows="10"></textarea>  <br><br>

cols 属性定义了文本输入框的列数，即水平方向上的字符数。一个列相当于一个等宽的字符，但实际上显示的字符宽度可能会根据字体而变化。这个属性的值是一个正整数，表示文本输入框的列数。
rows 属性定义了文本输入框的行数，即垂直方向上的文本行数。一个行相当于一行文本，但实际上显示的行高可能会根据字体和浏览器而变化。这个属性的值也是一个正整数，表示文本输入框的行数。

代码样例：

<!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>

运行效果：