Html
VScode中：！+ enter键位快速生成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>
</body>
</html>-
图片标签: <img>
src:指定图片的路径
width：指定图片的宽度
height：指定图片的高度
<!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="img/1.jpg" width="50px" height="50px">
</body>
</html>绝对路径：
<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
绝对网络路径：
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径：
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
- 标题标签: <h1> - <h6>
<!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="img/news_logo.png">
<h1>h</h1>
<h2>e</h2>
<h3>l</h3>
<h4>l</h4>
<h5>o</h5>
<h6>w</h6>
</body>
</html>-
水平线标签: <hr>
<!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="img/news_logo.png">
<hr>
<h1>h</h1>
<hr>
<h2>e</h2>
<h3>l</h3>
<h4>l</h4>
<h5>o</h5>
<h6>w</h6>
</body>
</html>效果如下：
-
没有任何语义的标签：<span>
特点：可以一行显示多个（组合行内元素），宽度和高度默认有内容撑开
<span>年03月02日</span> <span>央视网</span>-
超连接标签：<a>内容</a>
<a href="https://www.bilibili.com/" target="_self">原神日报</a>herf：指定url
target：在何处打开资源连接 _self：默认值，当前页面打开 _blank：空白页面打开
- 视频标签：<video>
src: 指定url
controls：显示播放控件
width：播放器宽度
height：播放器高度
<video src="video/1.mp4" controls = "controls" width="950px"></video>- 音频标签：<audio>
src: 指定url
controls：显示播放控件
<audio src="audio/1.mp3" controls></audio>- 段落标签：<p>
<br>:换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/my.css">
<style>
a{
color: rgb(203, 194, 194);
text-decoration: none;
}
/* 元素选择器 */
span{
color: green;
}
/* 类选择器 */
.color{
color: gray;
}
/* id选择器 */
#time{
color: gray;
font-size: 15px;
/* 设置字体大小 */
}
p{
text-indent: 50px;
line-height: 35px;
}
#last{
text-align: right;
}
</style>
</head>
<body>
<img src="img/news_logo.png"><a href="https://www.bilibili.com/" target="_self">原神日报</a>
<h1>原神新闻</h1>
<hr style="color: red;">
<span class="time" id="time">年03月02日</span> <a href="https://ys.mihoyo.com/" target="_self">原神</a>
<hr style="color: red;">
<video src="video/1.mp4" controls = "controls" width="950px"></video>
<audio src="audio/1.mp3" controls></audio>
<p>
原神启动！
</p>
<img src="img/1.jpg">
<p>
<br>这里是七种元素交汇的幻想世界“提瓦特”。
<br>在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
<br>五百年前，古国的覆灭却使得天地变异……
<br>如今，席卷大陆的灾难已经停息，和平却仍未如期光临。
<br>作为故事的主人公，你从世界之外漂流而来，降临大地。你将在这广阔的世界中，自由旅行、结识同伴、寻找掌控尘世元素的七神，直到与分离的血亲重聚
</p>
<img src="img/2.jpg">
<p id="last">
编辑人：派蒙
</p>
</body>
</html>- 文本加粗标签<b>/<strong>
<strong>原神启动！</strong>- 布局标签:<div> <span>
div:
一行只显示一个（独占一行）
宽度默认是父元素的宽度，
高度默认由内容撑开 可以设置宽高（width、height）
span:
行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/my.css">
<style>
a{
color: rgb(203, 194, 194);
text-decoration: none;
}
/* 元素选择器 */
span{
color: green;
}
/* 类选择器 */
.color{
color: gray;
}
/* id选择器 */
#time{
color: gray;
font-size: 15px;
/* 设置字体大小 */
}
p{
text-indent: 50px;
line-height: 35px;
}
#last{
text-align: right;
}
#main{
width: 65%;
/* 上右下左 */
/* margin: 0% 17.5% 0% 17.5%; */
margin: 0 auto;
}
</style>
</head>
<body>
<div id="main">
<img src="img/news_logo.png"><a href="https://www.bilibili.com/" target="_self">原神日报</a>
<h1>原神新闻</h1>
<hr style="color: red;">
<span class="time" id="time">年03月02日</span> <a href="https://ys.mihoyo.com/" target="_self">原神</a>
<hr style="color: red;">
<video src="video/1.mp4" controls = "controls" width="950px"></video>
<audio src="audio/1.mp3" controls></audio>
<p>
<strong>原神启动！</strong>
</p>
<img src="img/1.jpg">
<p>
<br>这里是七种元素交汇的幻想世界“提瓦特”。
<br>在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
<br>五百年前，古国的覆灭却使得天地变异……
<br>如今，席卷大陆的灾难已经停息，和平却仍未如期光临。
<br>作为故事的主人公，你从世界之外漂流而来，降临大地。你将在这广阔的世界中，自由旅行、结识同伴、寻找掌控尘世元素的七神，直到与分离的血亲重聚
</p>
<img src="img/2.jpg">
<p id="last">
编辑人：派蒙
</p>
</div>
</body>
</html>- 表格标签
<table> 用于定义整个表格, 可以包裹多个， 常用属性如下：
border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 规定单元之间的空间
<tr> 表格的行，可以包裹多个
<td> 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为<th>
<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>- 表单标签：<form>
在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登 录页面、注册页面、个人信息提交页面，其实都是一个一个的表单 。 当我们在这些表单中录入数据之 后，一点击 "提交"，就会将表单中我们填写的数据采集到，并提交， 那其实这个数据呢，一般会提交 到服务端，最终保存在数据库中
表单属性:
action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
method: 规定用于发送表单数据的方式，常见为： GET、POST。
GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx? username=Tom&age=12，url中能携带的表单数据大小是有限制的
POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签:
不同类型的input元素、下拉列表、文本域等。
input: 定义表单项，通过type属性控制输入形式
select: 定义下拉列表
textarea: 定义文本域
<!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>
<form action="" method="get">
用户名：<input type="text" name="username">
年龄：<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
为POST时：
- 表单项标签
<input>表单项 , 通过type属性控制输入形式
<select>定义下拉列表,<option>定义列表项
<tetxarea>文本域
<!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>
<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>Css
-
CSS的引入方式
1.行内样式：写在标签的Style属性中
<h1 style="color: red;">星浪新闻</h1>
2.内嵌样式：写在Style标签中（可以写在页面的任何位置，但通常约定写在head标签中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: aqua;
}
</style>
</head>
<body>
<img src="img/news_logo.png">
<h1>星浪新闻</h1>
<hr>
2023年03月02日
<hr>
</body>
</html>3.外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/my.css">引入对应的CSS文件
</head>
<body>
<img src="img/news_logo.png">
<h1>星浪新闻</h1>
<hr>
2023年03月02日
<hr>
</body>
</html>
- Css选择器：用来选取需要设置样式的元素（标签）
三种选择器的优先级：id > 类 >元素
1.元素选择器：根据标签的名字设置样式
2.id选择器
3.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/my.css">
<style>
/* 元素选择器 */
span{
color: green;
}
/* 类选择器 */
.color{
color: gray;
}
/* id选择器 */
#time{
color: gray;
font-size: 15px;
/* 设置字体大小 */
}
</style>
</head>
<body>
<img src="img/news_logo.png">
<h1>原神新闻</h1>
<hr style="color: red;">
<span class="time" id="time">年03月02日</span> <span class="lianjie" id="blue">央视网</span>
<hr style="color: red;">
</body>
</html>- 盒子模型
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个 矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边 距区域（margin）
- CSS属性：
设置字体大小：font-size: 15px;
定义颜色：color：red;
规定文本无下划线：text-decoration:none;
首行缩进： text-indent: 50px;
行高：line-height: 20px;
对齐方式：text-align: right;
扫一扫
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
