目录
一.HTML快速入门
1.HTML 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, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HelloWord</h1>
<img src="1.jpg" />
<h2></h2>
</body>
</html>
二.VS Code开发工具
三.基础标签 & 样式
1.新闻-标题
(1)标题排版
{
"Print to console": {
"prefix": "hh",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"\t<meta charset='UTF-8'>",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<title>Document</title>",
"\t<script type='text/javascript' src=\"vue.js\"></script>",
"</head>",
"<!-- CSS -->",
"\t<style type=\"text/css\">",
"\t",
"\t",
"\t</style>\n",
"<body>",
"\t<div>\n\n",
"\t</div>",
"<!-- JS -->",
"\t<script type='text/javascript'>",
"\t",
"\t",
"\t</script>",
"</body>",
"</html>"
//"console.log('$1');",
//"$2",
],
"description": "Log output to console"
}
}<!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>
</head>
<!-- CSS -->
<style type="text/css">
</style>
<!-- JS -->
<script type='text/javascript'>
</script>
<body>
<!-- img标签
src:图片路径 width:宽度 height:高度
路径的书写方式:
绝对路径:
1.绝对磁盘路径: F:\黑马程序员资料\Java\2023新版JavaWeb开发教程\实操\HTML\快速入门\资料\3. 图片、音频、视频\img\news_log.png
<img src="F:\黑马程序员资料\Java\2023新版JavaWeb开发教程\实操\HTML\快速入门\资料\3. 图片、音频、视频\img\news_log.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="/快速入门/资料/3. 图片、音频、视频/img/news_logo.png" alt=""> 新浪政务 > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html> 
(2)标题样式
<!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>
h1 {
color: pink;
}
</style> -->
<!-- 方式三:外联样式 -->
<link rel="stylesheet" href="/快速入门/css/news.css">
</head>
<body>
<img src="/快速入门/资料/3. 图片、音频、视频/img/news_logo.png" alt=""> 新 > 正文
<!-- 方式一:行内样式
<h1 style="color: red;">焦点</h1> -->
<h1>焦点</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>h1 {
/* color: red; */
/* color: rgb(0, 0, 255); */
color: #4d4f53;
}
<!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>
<link rel="stylesheet" href="/快速入门/css/news.css">
</head>
<body>
<img src="/快速入门/资料/3. 图片、音频、视频/img/news_logo.png" alt=""> 浪 > 正文
<h1>焦点</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span class="cls">央视网</span>
<hr>
</body>
</html>h1 {
color: #4d4f53;
}
/* 元素选择器 */
/* span {
color: red;
} */
/* 类选择器 */
/* .cls {
color: pink;
} */
/* ID选择器 */
#time {
color: #968d92;
/* 设置字体的大小 */
font-size: 13px;
}
(3)超链接
<!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>
<link rel="stylesheet" href="/快速入门/css/news.css">
</head>
<body>
<img src="/快速入门/资料/3. 图片、音频、视频/img/news_logo.png" alt=""> <a href="http://gov.sina.com.cn/" target="_self">新</a> > 正文
<h1>焦</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">123</a></span>
<hr>
</body>
</html>h1 {
color: #4d4f53;
}
#time {
color: #968d92;
font-size: 13px;
}
a {
color: black;
/* 去除超链接下划线效果(设置文本为一个标准的文本) */
text-decoration: none;
}
2.新闻-正文
(1)正文排版
<!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>
<link rel="stylesheet" href="/快速入门/css/news.css">
</head>
<body>
<img src="/快速入门/资料/3. 图片、音频、视频/img/news_logo.png" alt=""> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>中间</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">123</a></span>
<hr>
<!-- 正文 -->
<!-- 视频 -->
<!-- controls -> 播放控件 -->
<video src="/快速入门/资料/3. 图片、音频、视频/video/1.mp4" controls="controls" width="950px"></video>
<!-- 音频 -->
<!-- <audio src="/快速入门/资料/3. 图片、音频、视频/audio/1.mp3" controls="controls"></audio> -->
<br>
<p> <!-- <strong>消息</strong> -->
嘎嘎嘎
</p>
<p>
人勤春来早，春耕农事忙
</p>
<img src="/快速入门/资料/3. 图片、音频、视频/img/1.jpg" alt="">
<p>
今年
</p>
<img src="/快速入门/资料/3. 图片、音频、视频/img/2.jpg" alt="">
<p>
工号
</p>
<p id="plast">
spack
</p>
</body>
</html>h1 {
color: #4d4f53;
}
#time {
color: #968d92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
p {
/* 段落首行缩进 */
text-indent: 35px;
/* 行高 */
line-height: 30px;
}
#plast {
/* 对齐方式 */
text-align: right;
} 
(2)页面布局
<!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>
<link rel="stylesheet" href="/快速入门/css/news.css">
</head>
<body>
<div id="center">
<img src="/快速入门/资料/3. 图片、音频、视频/img/news_logo.png" alt=""> <a href="http://gov.sina.com.cn/" target="_self">123</a> > 正文
<h1>焦点</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml">央视网</a></span>
<hr>
<!-- 正文 -->
<!-- 视频 -->
<!-- controls -> 播放控件 -->
<video src="/快速入门/资料/3. 图片、音频、视频/video/1.mp4" controls="controls" width="950px"></video>
<!-- 音频 -->
<!-- <audio src="/快速入门/资料/3. 图片、音频、视频/audio/1.mp3" controls="controls"></audio> -->
<br>
<p> <!-- <strong>央视网消息</strong> -->
啥啥啥
</p>
<p>
哦哦哦
</p>
<img src="/快速入门/资料/3. 图片、音频、视频/img/1.jpg" alt="">
<p>
哈哈哈
</p>
<img src="/快速入门/资料/3. 图片、音频、视频/img/2.jpg" alt="">
<p>
略略略
</p>
<p id="plast">
作者：Tom
</p>
</div>
</body>
</html>h1 {
color: #4d4f53;
}
#time {
color: #968d92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
p {
text-indent: 35px;
line-height: 30px;
}
#plast {
text-align: right;
}
#center {
width: 65%;
/* margin: 0% 17.5% 0% 17.5%;外边距:上右下左 */
margin: 0 auto; /* 简化写法 */
}
四.表格、表单标签
1.表格标签
<!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="/快速入门/资料/3. 图片、音频、视频/img/huawei.jpg" width="100px"> </td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td> <img src="/快速入门/资料/3. 图片、音频、视频/img/alibaba.jpg" width="100px"> </td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html> 
2.表单标签
<!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>
<!--
from表单属性:
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">
</form>
</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>
<!-- value: 表单项提交的值 -->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
<!-- 性别男女用的是单选框 name值必须一样 value不一样 加上<label></label>可以聚焦光标在单选框内-->
性别: <label><input type="radio" name="gender" value="1"> 男</label>
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
<!--复选框的name可以一样 value不一样 -->
爱好: <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>
<!-- 文本域 cols="30"(默认一行可以输入30个字) rows="10"(默认10行)-->
描述: <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>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
