一、Web概念
二、Web网站工作流程
三、Web前端-介绍
四、Web前端-HTML、CSS
（一）HTML介绍
<html>
<head>
<title> HTML快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="Default.jpg"/>
</body>
</html>
①实现新浪新闻标题
标题排版：
<!-- 声明当前文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
<!--
img标签：
src：图片资源路径
width：宽度 (px:像素; %:相对于父元素的百分比)
height：高度 (px:像素; %:相对于父元素的百分比)
路径书写方式：
绝对路径：
1.绝对磁盘路径: D:\JavaWeb\day01-HTML-CSS\img\news_logo.png
<img src="D:\JavaWeb\day01-HTML-CSS\img\news_logo.png">
2.绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
第二种方法需要保证互联网上有这张图片，且访问时一定可以联网
相对路径：
./: 当前目录, ./可以省略
../：上一级目录 -->
<img src="./img/news_logo.png"> 新浪政务>正文
<h1>
焦点访谈：中国底气 新思想夯实大国粮仓
</h1>
<hr>
2023年1月12日 12：30 央视网
<hr>
</body>
</html>标题样式：
<!-- 声明当前文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<!--方式二：内嵌样式 通常写在head中-->
<!-- <style>
h1{ /* h1{..} 表示选择器，表示当前样式是针对h1设计*/
color: rebeccapurple;
}
</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年1月12日 12:30 央视网
<hr>
</body>
</html>h1{ /* h1{..} 表示选择器，表示当前样式是针对h1设计*/
color: darkcyan;
} 颜色表示形式：
h1{ /* h1{..} 表示选择器，表示当前样式是针对h1设计*/
/* color: rgb(100, 170, 100); */
/* color: rebeccapurple; */
color: #0000ff;
} CSS选择器:
<!-- 声明当前文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<link rel="stylesheet" href="./css/news.css">
<style>
h1{
color: #4D4F53;
}
/* 元素选择器 */
/* span{
color:#968D92;
} */
/* 类选择器 */
/* .cls{
color: #968D92;
} */
/* ID选择器 */
#time{
color:#968D92;
/* 设置字体大小 */
font-size: 13px;
}
</style>
</head>
<body>
<img src="./img/news_logo.png"> 新浪政务>正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time"> 2023年1月12日 12:30 </span> <span class="cls">央视网</span>
<hr>
</body>
</html>超链接：
<!-- 声明当前文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<link rel="stylesheet" href="./css/news.css">
<style>
h1{
color: #4D4F53;
}
#time{
color:#968D92;
/* 设置字体大小 */
font-size: 13px;
}
a {
color: black;
text-decoration-line: none; /* 去除下划线 */
}
</style>
</head>
<body>
<!-- href 点击连接后打开的页面 target 设置页面是当前页面打开_self 还是 新页面_blank -->
<img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time"> 2023年1月12日 12:30 </span> <span class="cls"><a href="https://cj.sina.com.cn/articles/view/1784473157/6a5ce645020033ag6" target="_blank">央视网</a> </span>
<hr>
</body>
</html>正文排版：
<!-- 声明当前文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<link rel="stylesheet" href="./css/news.css">
<style>
h1{
color: #4D4F53;
}
#time{
color:#968D92;
/* 设置字体大小 */
font-size: 13px;
}
a {
color: black;
text-decoration-line: none; /* 去除下划线 */
}
p{
text-indent: 50px;
line-height: 40px;
}
#plast{
text-align: right;
}
</style>
</head>
<body>
<!-- href 点击连接后打开的页面 target 设置页面是当前页面打开_self 还是 新页面_blank -->
<img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time"> 2023年1月12日 12:30 </span> <span class="cls"><a href="https://cj.sina.com.cn/articles/view/1784473157/6a5ce645020033ag6" target="_blank">央视网</a> </span>
<hr>
<!-- 正文部分 -->
<!-- 视频 -->
<video src="./video/1.mp4" controls width="950px"></video>
<p><strong>新农人</strong>成“兴农人”</p>
<p><b>每年小满节气</b>过后，全国“三夏”大面积机收作业由南到北渐入高潮。近年来，参与麦收作业的农机手中，开始涌现出95后、00后的新农人身影。
所谓新农人，是指那些运用现代科技知识，从事农业生产经营或服务，推动农业农村现代化的新型职业农民。近年来，新农人队伍不断壮大，在农业生产中发挥着越来越重要的作用。
今年麦收期间的每一个清晨，95后跨区农机手姜晓娜就爬上了3米高的农机,钻进驾驶室内,利落地拨着操纵杆，与发动机同时开启的还有手机直播间……
</p>
<img src="./img/1.jpg">
<p>所谓新农人，是指那些运用现代科技知识，从事农业生产经营或服务</p>
<img src="./img/2.jpg" >
<p>所谓新农人，是指那些运用现代科技知识，从事农业生产经营或服务</p>
<p id="plast">责任编辑： 农机 农业农村</p>
</body>
</html>页面布局：
<!-- 声明当前文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<link rel="stylesheet" href="./css/news.css">
<style>
h1{
color: #4D4F53;
}
#time{
color:#968D92;
/* 设置字体大小 */
font-size: 13px;
}
a {
color: black;
text-decoration-line: none; /* 去除下划线 */
}
p{
text-indent: 50px;
line-height: 40px;
}
#plast{
text-align: right;
}
#center{
width: 65%;
margin: 0% 17.5% 0% 17.5%; /* 外边距 上 右 下 左 */
}
</style>
</head>
<body>
<div id="center"><!-- href 点击连接后打开的页面 target 设置页面是当前页面打开_self 还是 新页面_blank -->
<img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time"> 2023年1月12日 12:30 </span> <span class="cls"><a href="https://cj.sina.com.cn/articles/view/1784473157/6a5ce645020033ag6" target="_blank">央视网</a> </span>
<hr>
<!-- 正文部分 -->
<!-- 视频 -->
<video src="./video/1.mp4" controls width="950px"></video>
<p><strong>新农人</strong>成“兴农人”</p>
<p><b>每年小满节气</b>过后，全国“三夏”大面积机收作业由南到北渐入高潮。近年来，参与麦收作业的农机手中，开始涌现出95后、00后的新农人身影。
所谓新农人，是指那些运用现代科技知识，从事农业生产经营或服务，推动农业农村现代化的新型职业农民。近年来，新农人队伍不断壮大，在农业生产中发挥着越来越重要的作用。
今年麦收期间的每一个清晨，95后跨区农机手姜晓娜就爬上了3米高的农机,钻进驾驶室内,利落地拨着操纵杆，与发动机同时开启的还有手机直播间……
</p>
<img src="./img/1.jpg">
<p>所谓新农人，是指那些运用现代科技知识，从事农业生产经营或服务</p>
<img src="./img/2.jpg" >
<p>所谓新农人，是指那些运用现代科技知识，从事农业生产经营或服务</p>
<p id="plast">责任编辑： 农机 农业农村</p></div>
</body>
</html>表格-表单标签：
<!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="1px" 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>
<!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>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="post">
用户名： <input type="text" name="username">
年龄： <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
（二）CSS介绍
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
