HTML介绍
1.HTML文件以.html结尾
2.HTML结构标签（以下为基础结构）<html> <head> <title></title> </head> <body> </body> </html>3.HTML标签不区分大小写
4.HTML标签属性值单双引号都可以
5.HTML语法松散，但会不适合阅读
HTML标签
1.<h1>-<h6> 定义标题，从大到小
2.<font> 定义文本字体，字体尺寸，字体颜色
3.<b> 定义字体加粗
4.<i> 定义斜体文本
5.<u> 定义文本下划线
6.<center> 定义文本居中
7.<p> 定义段落
8.<br> 定义这行
9.<hr> 定义水平线实例：
<!-- html5 标识 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 页面的字符集 -->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<font face="宋体" color="#a52a2a"><h1>使用<h1>~<h6></h1></font>
<h1>标签基础学习</h1>
<h2>标签基础学习</h2>
<h3>标签基础学习</h3>
<h4>标签基础学习</h4>
<h5>标签基础学习</h5>
<h6>标签基础学习</h6>
<hr>
<font face="宋体" color="#a52a2a"><h1>使用加粗、斜体、下划线</h1></font>
<b>
<h2>嗨~害~嗨，我是一段文字，还是加粗的~</h2>
</b>
<i>
<h2>嗨~害~嗨，我是一段文字，还是斜体的~</h2>
</i>
<u>
<h2>嗨~害~嗨，我是一段文字，还是带有下划线的~</h2>
</u>
<hr>
<font face="宋体" color="#a52a2a"><h1>使用<br></h1></font>
<h4>3.HTML标签不区分大小写<br>
4.HTML标签属性值单双引号都可以<br>
5.HTML语法松散，但会不适合阅读
</h4>
<hr>
<font face="宋体" color="#a52a2a"><h1>使用<p></h1></font>
<h4>
<p>
3.HTML标签不区分大小写
</p>
<p>
4.HTML标签属性值单双引号都可以
</p>
<p>
5.HTML语法松散，但会不适合阅读
</p>
</h4>
<hr>
<center>
<font face="宋体" color="#a52a2a"><h1>没错我就是居中</h1></font>
</center>
<hr>
</body>
</html>
HTML公司简介练习
实例（本内容仅学习使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公司简介</title>
</head>
<body>
<font face="楷体" color="black"><h1>公司简介</h1></font>
<hr color="yellow">
<p>
<b>北京爱奇艺科技有限公司 [4] （爱奇艺），原名奇艺</b>。中国第一影视门户。2010年4月22日，奇艺正式上线，2011年11月26日，<br>
奇艺正式宣布品牌升级，启动“爱奇艺”品牌并推出全新标志。
</p>
<p>
<font color="#a52a2a">爱奇艺</font>严格依循国家版权保护相关法律法规，所有视频内容均为正版，切实保护著作权人的合法权益。爱奇艺的优质版权视频丰富多元，<br>
涵盖了电影、电视剧、综艺、纪录片、动漫、旅游等众多内容形态，同时，爱奇艺拥有强大的自制内容团队，提供最新最全的娱乐内容报道。
</p>
<p>
作为国内领先的网络视频播放平台，爱奇艺由全球最大的中文搜索引擎——百度创立，是国内首家专注于提供免费、高清网络视频服务的大型专业网站。
</p>
<hr color="yellow">
<center>
©2022 Baidu 使用百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号
京公网安备11000002000001号
</center>
<hr>
</body>
</html>
HTML图像视频音频
1.<img> 定义图片
src：规定显示图像的URL
height：定义图像的高度
width：定义像素的宽度
2.<audio> 定义音频
src：规定音频的URL
controls：显示播放器控件
3.<video> 定义视频
src：规定视频的URL
controls：显示播放控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片视频音频</title>
</head>
<!--
src 可以写网络地址，也可以是文件路径地址
#一般建议使用文件路径地址
1.绝对路径：完整路径
2.相对路径：相对位置
单位：
1.px；像素数字
2.百分比；
-->
<body>
<hr>
<font face="楷书" color="black"><h2>用户壁纸图片</h2></font>
<center>
<img src="../resource/微信图片_20220508121332.jpg" height="10%" width="20%">
</center>
<hr>
<font face="楷书" color="black"><h2>网络壁纸图片</h2></font>
<center>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.nfC2tVNM9TgwQ5QuqECd6wHaFj?pid=ImgDet&rs=1">
</center>
<hr>
<font face="楷书" color="black"><h2>视频</h2></font>
<center>
<video src="../resource/WeChat_20220508121256.mp4" controls></video>
</center>
<hr>
<font face="楷书" color="black"><h2>灰色轨迹尾奏</h2></font>
<center>
<audio src="../resource/果味纯氧%20-%20灰色轨迹（尾奏加长版）.mp3" controls></audio>
</center>
<hr>
</body>
</html>
HTML超链接&列表
1.超链接标签
<a></a> 定义超链接，用于一个链接跳转到另一个链接
href：指定访问资源的URL
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页打开
2.列表标签
<ol></ol> 有序列表
<ul></ul> 无序列表
<li></li> 定义列表项
加type值设定项目符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接&列表</title>
<style>
#_04html{
color: brown;
}
#04html{
color: crimson;
}
</style>
</head>
<body>
<a href="03-html图片视频音频.html" target="_self">点我有惊喜</a><!--本网页-->
<a href="03-html图片视频音频.html" target="_blank">点我有惊喜</a>
<font face="楷体" color="#7fffd4"><h1>有序列表+超链接</h1></font>
<hr>
<ol type="A"><!--type选择样式-->
<li>
<a href="01-html标签.html" target="_self">基本文本标签</a>
</li>
<li>
<a href="02-html公司简介案例.html" target="_self">公司简历案例</a>
</li>
<li>
<a href="03-html图片视频音频.html" target="_self">图片音频视频</a>
</li>
<li>
<a href="04-html超链接&列表.html" target="_self">超链接&列表<b id="_04html">*这就是当前页面*</b></a>
</li>
<li>
<a href="05-html表格标签.html" target="_self">表格&局部</a>
</li>
<li>
<a href="06-html案例课程表.html" target="_self">课程表案例</a>
</li>
<li>
<a href="07-html局部标签.html" target="_self">局部标签</a>
</li>
<li>
<a href="08-html表单标签.html" target="_self">表单标签</a>
</li>
<li>
<a href="09-html表单项标签.html" target="_self">表单项标签</a>
</li>
</ol>
<font face="楷体" color="#7fffd4"><h1>无序列表+超链接</h1></font>
<hr>
<ul>
<li>
<a href="01-html标签.html" target="_self">基本文本标签</a>
</li>
<li>
<a href="02-html公司简介案例.html" target="_self">公司简历案例</a>
</li>
<li>
<a href="03-html图片视频音频.html" target="_self">图片音频视频</a>
</li>
<li>
<a href="04-html超链接&列表.html" target="_self">超链接&列表<b id="04html">*这就是当前页面*</b></a>
</li>
<li>
<a href="05-html表格标签.html" target="_self">表格&局部</a>
</li>
<li>
<a href="06-html案例课程表.html" target="_self">课程表案例</a>
</li>
<li>
<a href="07-html局部标签.html" target="_self">局部标签</a>
</li>
<li>
<a href="08-html表单标签.html" target="_self">表单标签</a>
</li>
<li>
<a href="09-html表单项标签.html" target="_self">表单项标签</a>
</li>
</ul>
</body>
</html>
HTML表格标签
1.table：定义表格
border：规定表格边框的宽度
width：规定表格的高度
cellspacing：规定单元格之间的空白
2.tr：定义行
align：定义表格的对其方式
3.td：定义单元格
rowsapn：规定单元格可横跨的行数
colspan ：规定单元格可横跨的列数实例:（本内容仅学习使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<hr>
<font face="楷书" color="black"><h1>表格标签</h1></font>
<hr>
<table border="1" cellspacing="0" width="600">
<tr align="center">
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>001</td>
<td><img src="../resource/微信图片_20220508121332.jpg" height="60" width="50"></td>
<td>小米</td>
<td>小米有限公司</td>
</tr>
<tr align="center">
<td>020</td>
<td><img src="../resource/微信图片_20220508121332.jpg" height="60" width="50"></td>
<td>华为</td>
<td>华为有限公司</td>
</tr>
<tr align="center">
<td>006</td>
<td><img src="../resource/微信图片_20220508121332.jpg" height="60" width="50"></td>
<td>三只松鼠</td>
<td>三只松鼠有限公司</td>
</tr>
</table>
<br>
<hr>
<br>
<table border="1" cellspacing="0" width="600">
<tr align="center">
<th colspan="2">品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>001</td>
<td><img src="../resource/微信图片_20220508121332.jpg" height="60" width="50"></td>
<td>小米</td>
<td>小米有限公司</td>
</tr>
<tr align="center">
<td rowspan="2">020</td>
<td><img src="../resource/微信图片_20220508121332.jpg" height="60" width="50"></td>
<td>华为</td>
<td>华为有限公司</td>
</tr>
<tr align="center">
<td><img src="../resource/微信图片_20220508121332.jpg" height="60" width="50"></td>
<td>三只松鼠</td>
<td>三只松鼠有限公司</td>
</tr>
</table>
</body>
</html>
HTML课程表练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th>课节</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td colspan="6">早自习</td>
</tr>
<tr align="center">
<td>第一节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>第二节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>第三节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">午自习</td>
</tr>
<tr align="center">
<td>第四节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>第五节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>第六节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">放学</td>
</tr>
</table>
</body>
</html>
HTML局部标签
1.<div> 定义HTML文档中的一个区域部分，和CSS一起使用
2.<span> 用于结合行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部</title>
</head>
<body>
<span>hello</span>
<span>hello</span><br>
<font>span横着排列</font>
<div>h</div>
<div>h</div><br>
<font>div竖着排列</font>
</body>
</html>
HTML表单标签
表单：在网页中主要负责数据采集功能<form>标签定义表单。
表单项（元素）：不同类型的input元素、下拉列表、文本域等。
<form> 定义表单
<input> 定义表单项
<label> 为表单项定义标注
<select> 定义下拉列表
<option> 定义下拉列表的列表项
<textatea> 定义文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<center>
<!--
action;指定表单提交数据的URL
*表单想要提交，则必须要有指定其name属性
method：规定用于发送表单数据的方式
get：浏览器会将数据直接附在表单的action URL
有大小的限制
post：浏览器会将数据放到http请求消息体中。大小无限制
-->
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
</form>
</center>
</body>
</html>
HTML表单项标签
<input>：表单项，通过type属性控制输入形式
<select>: 定义下拉列表，<option>定义列表项
<textarea>: 文本域
type 取值 描述
text 默认值，定义单行的输入字段
password 定义密码字段
radio 定义单选按钮
Checkbox 定义复选框
file 定义文件上传按钮
hidden 定义隐藏的输入字段
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
reset 定义重置按钮，重置按钮会清除表单的所有数据
button 定义可点击的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden" name="id" value="123456">
<label for="user_name">用户名:</label>
<input type="text" name="userName" id="user_name"><br>
<label for="user_pass_world">密码 : </label>
<input type="password" name="userPassWorld" id="user_pass_world">
<br>
性别：
<input type="radio" name="Sex" value="1" id="male"><label for="male">男</label>
<input type="radio" name="Sex" value="0" id="female"><label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1" id="Movie"><label for="Movie">电影</label>
<input type="checkbox" name="hobby" value="2" id="tour"><label for="tour">旅游</label>
<input type="checkbox" name="hobby" value="3" id="shopping"><label for="shopping">购物</label>
<input type="checkbox" name="hobby" value="4" id="Music"><label for="Music">听歌</label>
<br>
头像：
<input type="file" value="文件"><br>
城市：
<select name="City">
<option>内蒙古自治区</option>
<option value="Beijing">北京</option>
<option>上海</option>
<option>天津</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<input type="submit" value="免费注册"><!--value可以改名称-->
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
</html>小结
本节只做了基础的web网页制作时候所遇到的页面设计基础知识，如果要进一步学习可以学习一些优秀的框架如Element-ui等等。
扫一扫
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
