1.什么是HTML？
HTML 指的是超文本标记语言: HyperText Markup Language
超文本---超越文本格式【文字性质的数据】
HTML可以显示操作文字性质数据，也可以操作图片,视频,声音...
标记---标签--我们在使用HTML显示操作数据的时候，使用的都是一个一个独立的标记来控制html中的内容。
还有一些其他的标记语言 比如:xml
2.HTML的作用？
制作网页。目前几乎所有的软件操作界面都可以使用网页来代替，因此制作网页的深层含义就是可以用来制作软件界面。
3.常见的HTML开发工具
Notepad++：Notepad++免费下载_2019最新 - html中文网
Sublime Text：Sublime Text免费下载_2019最新 - html中文网
WebStorm:https://www.html.cn/tool/edit/8.html
HBuilderX: HBuilderX-高效极客技巧
VS Code：Visual Studio Code - Code Editing. Redefined
后续我用VS Code
4.浏览器
浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。
1、Trident 内核
代表产品为 Internet Explorer，又称其为 IE 内核。Trident（又称为 MSHTML），是微软开发 的一种排版引擎。使用 Trident 渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、 腾讯 TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等 。
2、Gecko 内核
代表作品为 Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最 流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器Firefox、Netscape6 至 9。
3、WebKit 内核
代表作品有 Safari、Chrome。WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对 网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 。
4、Presto 内核
代表作品 Opera。Presto 是由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0 及以上使 用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页 或其部分可随着 DOM 及 Script 语法的事件而重新排版。
不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。
5.html的文件结构
VSCode编写的html文件
<!DOCTYPE html>
<html>
<head>
<title>two</title>
</head>
<body>
<h1>这是VSCode工具编写的html</h1>
</body>
</html>
<!DOCTYPE html> --- html声明【用来告知 Web 浏览器页面使用了哪种 HTML 版本】，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
<html></html>---就相当于整个网页
<head></head>---在这个网页中网页头部部分
<body></body>---网页身体部分
6.html中的标记
因为html是超文本标记语言，所以它提供了制作网页的一组标记，标记不能自己发明。
（1）绝大部分的标记都是有三部分组成：
<h1>这是VSCode工具编写的html</h1> -- 内容的标题标记
<h1> -- 开始标记
这是VSCode工具编写的html --- 文本内容
</h1> -- 结束标记
（2）也有一些单标记【只有开头，没有文本内容和结束标记】
例如：<meta charset=”utf-8”>
7.常用标记的使用
7.1 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>这是HBuilderX编写的html文件</h1>
</body>
</html>
<!DOCTYPE html> --- html声明【用来告知 Web 浏览器页面使用了哪种 HTML 版本】，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
从初期的网络诞生后，已经出现了许多HTML版本:
从初期的网络诞生后，已经出现了许多HTML版本:
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE html>---是html5版本声明
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html> / <!DOCTYPE HTML> / <!doctype html> / <!Doctype Html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> ---- 是html4.01版本声明
7.2 head标记中的常见标记
<html></html>-----双标记，整个网页
<head></head>----双标记，网页头部部分，为浏览器运行html文件提供附加信息的，既然是附件信息，那么设置在<head></head>中的内容自然要对用户免疫【<title></title>除外】。
<meta charset="utf-8">---设置当前网页的字符变量是utf-8，防止中文在网页中乱码显示【最后是在所有网页中将这一句化设置上】
<title></title>---设置当前网页的标题
<body></body>---网页身体部分,使用我们制作网页的主要操作区域，因为body中的元素是对用户可见的。
<h1></h1>----网页中内容的标题。
VS Code 产生基本标记的快捷键感叹号！
7.2.1 meta标记
<!DOCTYPE html>
<html>
<head>
<title>meta标记</title>
<!--1.设置当前网页的字符编码-->
<!--charset是meta的一个属性-->
<meta charset="utf-8">
<!-- 2.为搜索引擎定义关键词-->
<!--name/content是meta的一个属性-->
<meta name="keywords" content="HTML,CSS">
<!--3.为网页定义描述内容-->
<meta name="description" content="这是一个html网页">
<!--4.设置当前网页自动刷新-->
<!--http-equiv-->
<!--<meta http-equiv="refresh" content="5">-->
<!--5.设置当前在间隔时间以后自动跳转到其他页面-->
<meta http-equiv="refresh" content="5,https://www.baidu.com/">
<!--6.设置当前网页的作者-->
<meta name="author" content="伟伟">
</head>
<body>
</body>
</html>7.2.2 <style></style>
设置当前网页的css的内部样式块
<!DOCTYPE html>
<html>
<head>
<title>meta标记</title>
<meta charset="utf-8">
<style>
p{
color: brown;
font-size: 30px;
background-color: cornsilk;
}
</style>
</head>
<body>
<p>测试style标记--设置当前网页的css的内部样式块</p>
</body>
</html>
7.2.3 <link>
导入外部样式文件【.css】到当前html文件中
rel：relationship的英文缩写·rel属性用于定义链接的文件和HTML文档之间的关系。StyleSheet的意思就是样式调用，rel=StyleSheet指定一个固定或首选的样式。
rel="stylesheet"
href="独立的样式表文件路径"
test.css
p{
color:greenyellow;
font-size: 40px;
background-color: hotpink;
}
test.html
<!DOCTYPE html>
<html>
<head>
<title>meta标记</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>测试link标记--导入外部样式文件【.css】到当前html文件中</p>
</body>
</html>
7.2.4 <script></script>
设置当前网页中需要执行的javascript脚本语言
也可以导入外部的js文件进入当前html文件中
test.js
function testscript(){
window.alert("测试script标记");
}
test.html
<!DOCTYPE html>
<html>
<head>
<title>script 标记</title>
<meta charset="utf-8">
<script src="test.js"></script>
</head>
<body>
<input type="button" value="测试script标记" onclick="testscript()" />
</body>
</html>7.3 body标记中的常用标记
7.3.1 h1~6标记
<h1> ~ <h6>------设置网页内容的标题
<h1> ~ <h6>标记的前后会自动换行
<h1>最大标题，<h6>最小标题
<!DOCTYPE html>
<html>
<head>
<title>h标记</title>
<meta charset="utf-8">
</head>
<body>
<h1>重庆大学</h1>
<h2>重庆大学</h2>
<h3>重庆大学</h3>
<h4>重庆大学</h4>
<h5>重庆大学</h5>
<h6>重庆大学</h6>
</body>
</html>
7.3.2 <hr>
单标记，设置一条水平的分割线。可以利用属性来设置分割线的颜色【color】，长短【width】，粗细【size】，水平对齐方式【align= left，center，right】。
<!DOCTYPE html>
<html>
<head>
<title>h标记</title>
<meta charset="utf-8">
</head>
<body>
<h1>重庆大学</h1>
<h2>重庆大学</h2>
<h3>重庆大学</h3>
<hr color="red" width="200px" size="30px" align="left">
<h4>重庆大学</h4>
<h5>重庆大学</h5>
<h6>重庆大学</h6>
</body>
</html>
7.3.3 <p></p>标记，段落标记
<p>---在html文件中设置一段文字【段落】的标记
<p>在它的前后会自动换行
段落和段落之间间隙比行距大，很明显看得出来是两个段落
<!DOCTYPE html>
<html>
<head>
<title>h标记</title>
<meta charset="utf-8">
</head>
<body>
<p>月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例25例。
其中境外输入病例24例（云南13例，河南3例，上海2例，福建2例，广东2例，山西1例，四川1例），
含5例由无症状感染者转为确诊病例（河南2例，广东2例，四川1例）；本土病例1例（在福建莆田市）。
无新增死亡病例。新增疑似病例2例，均为境外输入病例（均在上海）。
当日新增治愈出院病例50例，解除医学观察的密切接触者1197人，重症病例较前一日减少1例。
境外输入现有确诊病例606例（其中重症病例7例），现有疑似病例3例。累计确诊病例8592例，累计治愈出院病例7986例，无死亡病例。
</p>
<p>月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例25例。
其中境外输入病例24例（云南13例，河南3例，上海2例，福建2例，广东2例，山西1例，四川1例），
含5例由无症状感染者转为确诊病例（河南2例，广东2例，四川1例）；本土病例1例（在福建莆田市）。
无新增死亡病例。新增疑似病例2例，均为境外输入病例（均在上海）。
当日新增治愈出院病例50例，解除医学观察的密切接触者1197人，重症病例较前一日减少1例。
境外输入现有确诊病例606例（其中重症病例7例），现有疑似病例3例。累计确诊病例8592例，累计治愈出院病例7986例，无死亡病例。
</p>
</body>
</html>
7.3.4 HTML注释
解释说明html代码的含义。
<!-- 注释内容 -->
不会被执行，可以使用注释调试代码
7.3.5 <br>换行
设置回车换行，在在html文件中使用键盘上的回车键换行是没有效果，所以在html文件想要内容换行使用<br>标记。
<!DOCTYPE html>
<html>
<head>
<title>h标记</title>
<meta charset="utf-8">
</head>
<body>
<p> 华为笔记本，<br>
联想笔记本，<br>
苹果笔记本，<br>
小米笔记本。<br>
</p>
</body>
</html>
7.3.6 格式化标签
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p>
<b>定义粗体文本</b><br>
<em>定义字体倾斜</em><br>
<i>定义斜体字</i><br>
<small>定义小号字</small><br>
<strong>定义加粗字体</strong><br>
X<sup>2</sup>-2x+1=0<br>
X<sub>1</sub>=1;<br>
<ins>字体下面的下划线</ins><br>
<del>字体上面的删除线</del>
</p>
</body>
</html>
7.3.7 <img>---单标记
设置在html文件中显示图片。
绝对路径--从操作系统的指定盘中的目录开始查找图片资源所形成的路径【不推荐】。
- 如果图片保存目录太深，图片的操作路径就会很长
- 当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。
相对路径--从当前网页开始查找图片资源所形成的路径【推荐】
- 图片与当前网页在同一个目录下【src=”图片名称”】
- 图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
- 图片保存在当前网页所在目录的父文件夹中[../---上一层]
网络地址 src=”url”
width--设置图片宽度
height--设置图片宽度
alt--设置图片的文字提示【当图片无法显示时才会显示】
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<img src="222.jpg" alt="图片1" width="200px" height="200px">
<img width="200px" height="200px" alt="测试img"
src="https://img0.baidu.com/it/u=2809737200,31955359&fm=26&fmt=auto&gp=0.jpg">
<img src="22sdas.jpg" alt="图片4" width="200px" height="200px">
</body>
</html>
7.3.8 <a></a> 超链接
href---设置链接地址
target ---被打开的内容何处显示【_blank[新窗口] _self[覆盖当前窗口] ifram的name属性值】
id属性---设置超链接的编号【可以连接到当前网页中指定位置】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="test.html" target="_blank" id="top">打开test.html</a><br>
<a href="test.html" target="_self">打开test.html</a><br>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<p>这边显示该章节的内容……</p>
<h2>章节 4</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>
<a href="#top">回到顶端</a>
</body>
</html>8. HTML表格
<table>---表示表格
<thead>---表示表头
<tbody>---表示表格的身体
<tr>-----表格中的行
<td>----行中的列
注意:表格中没有内容的时候表格不显示，thead和tbody可以省略。
border--设置表格的边框
width / height----设置表格的宽度和高度
cellpadding---设置单元格中的内边距[单元格中的内容距离4边边框的距离]
cellspacing--- 增加单元格之间的距离。
colspan--设置表格跨列【左右合并单元格】
rowspan--设置表格跨行【上下合并单元格】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="2px" width="300px" cellpadding="1px" cellspacing="0px">
<tr>
<td rowspan="4" align="center">学生信息</td>
<td colspan="5" align="center">学生信息</td>
</tr>
<tr>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>25</td>
<td>西安</td>
</tr>
<tr>
<td>李四</td>
<td>130</td>
<td>26</td>
<td>重庆</td>
</tr>
</table>
</body>
</html>
个人简历练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<table border="1px" cellspacing="0px">
<tr height="50px">
<td width="70px">姓名</td>
<td width="70px"></td>
<td width="70px">性别</td>
<td width="70px"></td>
<td width="70px">出生年月</td>
<td width="70px"></td>
<td rowspan="3" width="150px"><img src="biaoqb.png" alt="个人照片" width="150px" height="170px" align="center"></td>
</tr>
<tr height="50px">
<td>籍贯</td>
<td></td>
<td>民族</td>
<td></td>
<td>身体状况</td>
<td></td>
</tr>
<tr height="50px">
<td>政治面貌</td>
<td></td>
<td>身高</td>
<td></td>
<td>外语程度</td>
<td></td>
</tr>
<tr height="50px">
<td>所在学院</td>
<td></td>
<td>学历</td>
<td></td>
<td>曾任职务</td>
<td colspan="2"></td>
</tr>
<tr height="50px">
<td>毕业时间</td>
<td colspan="2"></td>
<td colspan="2">联系电话</td>
<td colspan="2"></td>
</tr>
<tr height="50px">
<td rowspan="2">家庭住址</td>
<td colspan="2" rowspan="2"></td>
<td colspan="2">邮政编码</td>
<td colspan="2"></td>
</tr>
<tr height="50px">
<td colspan="2">邮政地址</td>
<td colspan="2"></td>
</tr>
<tr height="50px">
<td>主修课程</td>
<td colspan="6"></td>
</tr>
<tr height="50px">
<td>教育经历</td>
<td colspan="6"></td>
</tr>
<tr height="50px">
<td>工作经历</td>
<td colspan="6"></td>
</tr>
<tr height="50px">
<td>操作技能</td>
<td colspan="6"></td>
</tr>
<tr height="50px">
<td>个人特长</td>
<td colspan="6"></td>
</tr>
<tr height="100px">
<td>自我评价</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
9.HTML列表
9.1 有序列表
ol---表示有序列表
li---表示有序列表中的每一个项目
ol上添加type属性设置修改有序列表前面的标号【a A i I 1】
ol上添加start属性设置修改有序列表前面的标号的开始值
9.2 无序列表
ul---表示无序列表
li---表示无序列表中的每一个项目
ol上添加type属性设置修改有序列表前面的标号【disc/circle/square】
9.3 自定义列表
dl---表示自定列表
dt---表示自定列表主项目
dd---表示自定列表中主项目里的子项目
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h1>有序列表</h1>
<ol type="a" start="3">
<li>年级:五年级</li>
<li>姓名:张三</li>
<li>年龄:10</li>
</ol>
<ol type="I">
<li>年级:五年级</li>
<li>姓名:张三</li>
<li>年龄:10</li>
</ol>
<h1>无序列表</h1>
<ul>
<li>年级:五年级</li>
<li>姓名:张三</li>
<li>年龄:10</li>
</ul>
<h1>自定义列表</h1>
<dl>
<dt>家用电器</dt>
<dd>空调</dd>
<dd>冰箱</dd>
<dd>洗衣机</dd>
</dl>
<dl>
<dt>手机数码</dt>
<dd>苹果</dd>
<dd>小米</dd>
<dd>华为</dd>
</dl>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
