✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：Web前端
目录
一：HTML概述
1. B/S架构和C/S架构
B/S架构：Browser / Server （浏览器/服务器的交互形式）
（1）Browser支持哪些语言：HTML、CSS、JavaScript
（2）S是服务器端Server，Server端的语言很多：C C++ Java python…..（我主要是使用Java语言完成服务器端的开发）（3）B/S架构的系统的优点和缺点（网页版）
优点：升级方便，只升级服务器端代码即可；维护成本低
缺点：速度慢、体验不好、界面不炫酷
（4） 企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。（5）B/S架构的系统代表：京东、百度、天猫、新浪….
C/S架构：Client / Server （客户端/服务器端的交互形式）
（1）C/S架构的系统的优点和缺点（APP版）
缺点：升级麻烦，维护成本较高
优点：速度快，体验好，界面炫酷（娱乐型的系统多数是C/S架构的）（2）常见的C/S架构的系统：QQ、微信、支付宝 ….
2. HTML是什么
（1）HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。超文本: 流媒体、图片、声音、视频….
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>（2） HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…..直接采用浏览器打开HTML文件就是运行。
（3）HTML是谁制定的？
W3C：世界万维网联盟，W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。
HTML规范目前最高的版本是：HTML5.0，简称H5W3C制定了很多规范：HTML/XML/http协议/https协议……
为了方便中国web前端程序员的开发，提供大量的帮助文档，为开发提供方：
w3school：先出现的，和W3C 没有关系
w3cschool：后出现的，和W3C也没有关系
3. 第一个HTML页面
（1）<!—->这是HTML的注释
（2）加上<!doctype html>就表示HTML5语法。去掉就表示HTML4.0
（3）HTML不区分大小写，语法松散不严格。
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容，欢迎学习HTML！
</body>
</html>
二：HTML实操
1. HTML基本标签
（1）段落标记：
<p>段落标记</p>（2）标题字：是HTML预留的格式，1-6
<h1>标题字1</h1>
<h2>标题字2</h2>
<h3>标题字3</h3>
<h4>标题字4</h4>
<h5>标题字5</h5>
<h6>标题字6</h6>（3）换行，独目标记
Hello <br> World!（4）水平横线，独目标记
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--语法很松散-->
<hr color='green' width=30%>（5）预留格式
<pre>
for(int i=0;i<10;i++){
System.out.println("Hello");
}
</pre>（6）删除字
<del>删除字</del> （7）插入字
<ins>插入字</ins>（8）粗体字
<b>粗体字</b>（9）斜体字
<i>斜体字</i>（10）右上角加字
10<sup>m<sup>（11）右下角加字
10<sub>n<sub>（12）font字体标签
<font color="read" size="50">字体标签</font>效果展示：
<!doctype html>
<html>
<head>
<title> HTML基本标签 </title>
</head>
<body>
<!--段落标签-->
<p>黛玉葬花》是文学名著《红楼梦》中的经典片段。</p><p>林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。</p><p>她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。</p><p>贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
<!--标题字：是HTML预留的格式，和word中的标题字相同-->
<h1>标题字1</h1>
<h2>标题字2</h2>
<h3>标题字3</h3>
<h4>标题字4</h4>
<h5>标题字5</h5>
<h6>标题字6</h6>
<!--换行标签，br标签是一个独目标记-->
Hello <br>World!
<!--水平横线标签，hr标签是一个独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--语法很松散-->
<hr color='green' width=30%>
<!--预留格式-->
<pre>
for(int i=0;i<10;i++){
System.out.println("Hello");
}
</pre>
<!--删除字-->
<del>删除字</del> <br>
<!--插入字-->
<ins>插入字</ins> <br>
<!--粗体字-->
<b>粗体字</b> <br>
<!--斜体字-->
<i>斜体字</i> <br>
<!--右上角加字-->
10<sup>m<sup> <br>
<!--右下角加字-->
10<sub>n<sub> <br>
<!--font字体标签-->
<font color="read" size="50">字体标签</font>
</body>
</html>
2. HTML实体符号
体符号特点：以&开始，以;结束；&nbps;是空格，< 是小于号， > 是大于号
（1）空格
<!--这样写实际上显示的只有1个空格-->
a b
<!--显示多个空格-->
a &nbps; &nbps; &nbps; &nbps; &nbps; b（2）大于号
<!-- a>b -->
a > b（3）小于号
<!-- a>b -->
a < b效果展示：
<!doctype html>
<html>
<head>
<title> HTML实体符号 </title>
</head>
<body>
<!--空格-->
Hello World! <br>
Hello World! <br>
<!--大于号-->
a > b <br>
<!--小于号-->
b < c <br>
<!--大于号和小于号联合使用,中间b就会被当做特殊符号-->
a<b>c
a < b > c
</body>
</html>
3. HTML的表格
（1）基本表格
1. table是整个表格框架
（1）border=”1px” 设置表格的边框为1像素宽度
（2）width=”300px” 设置表格的宽度为300像素宽度，也可以写成百分比的形式，例如：width=”60%” 占整个窗口的60%
（3）height=”100px” 设置表格的高度为100像素宽度
（4）align = “center” 对齐方式为中间对齐，也可以使用<center></center>标签2. tr代表一行
3. td代表一行里的一个格子
<center> <table border="1px" width="60%" height="100px"> </center>
</table>
<table align="center" border="1px" width="60%" height="100px">
</table>效果展示：
<!doctype html>
<html>
<head>
<title> HTML表格 </title>
</head>
<body>
<!--基本表格-->
<h1 align = "center" >员工信息表</h1> <!--添加标题-->
<hr></hr> <!--添加横线-->
<center> <table border="1px" width="60%" height="100px"> </center> <!--table是整个表格结构-->
<tr> <!--tr代表一行-->
<td align = "center" >1</td> <!--td代表一行的一个格子-->
<td align = "center" >2</td>
<td align = "center" >3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html> 
（2）单元格合并
（1）row(行)合并的时候，删除“下面的”单元格，保留上面的；然后使用rowspan
（2）col(列)合并的时候，对删除哪个没有要求，都可以；然后使用colspan（3）例如：6和9合并，6在上面，我们删除9，然后使用rowspan合并
7和8合并，左右关系，删除或保留那个都可以，然后使用colspan
<!doctype html>
<html>
<head>
<title> HTML表格 </title>
</head>
<body>
<center> <table "center" border="1px" width="60%" height="100px"> </center>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<!-- <td>7</td> -->
<td colspan="2">8</td>
<!-- <td>9</td> -->
</tr>
</table>
</body>
</html>
（3）th标签
th 标签也是单元格标签，比td多的是居中、加粗！
<!doctype html>
<html>
<head>
<title> HTML表格 </title>
</head>
<body>
<center> <table "center" border="1px" width="60%" height="100px"> </center>
<tr>
<!--使用th,不使用td-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
（4）thead、tbody、tfoot标签
thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写；本质就是把整个表分为：头、体、尾三部分！但是没有任何的效果
<!doctype html>
<html>
<head>
<title>thead tbody tfoot </title>
</head>
<body>
<table border="1px" width="50%">
<!--头-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>4. 图片和超链接
（1）背景颜色和背景图片
（1）bgcolor：设置背景颜色
（2）backgroud：设置背景图片（3）这张图片我是在HBuilder建了一个img目录，把图片复制进去，然后使用的相对路径
<!DOCTYPE html>
<html>
<head>
<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意：并不是设置当前页面的字符编码方式。-->
<meta charset="utf-8">
<title> 背景颜色和背景图片 </title>
</head>
<!--
bgcolor：设置背景颜色
backgroud：设置背景图片
-->
<body bgcolor="red" background="img/1649903301308.jpg">
</body>
</html>
（2）HTML图片img标签
（1）设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
（2）img标签就是图片标签。
（3）src属性是图片的路径。
（4）width设置宽度，height设置高度。
（5）title设置鼠标悬停时显示的信息。
（6）alt设置图片加载失败时显示的提示信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片img</title>
</head>
<body>
<img src="img/1.jpg" width="500px" title="我是小花" alt="图片找不到"/>
<img src="img/2.jpg" width="500px"/>
<img src="img/3.jpg" width="500px"/>
</body>
</html>
（3）超链接
（1）a标签就是超链接标签
（2）href：hot references 热引用，href属性后面一定是一个资源的地址（url）。
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径！（3）超链接可以是文字超连接，也可以是图片超连接
（4）超链接有一个target属性；可取值：
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式）
_top ： 顶级窗口
_parent ： 父窗口（5）超链接的作用：通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
（6）用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。从操作上来讲，超链接使用更方便。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--文字超连接-->
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com">百度新闻</a>
<a href="http://www.sina.com.cn">新浪</a>
<!---也可以链接我们前面做的网页-->
<a href="008图片img.html">008的超连接</a>
<!--图片超连接-->
<a href="http://www.baidu.com">
<img src="img/百度.png" width="120px">
</a>
<a href="http://www.baidu.com" target="_blank">
<img src="img/百度.png" width="120px">
</a>
</body>
</html>
5. HTML列表（了解）
（1）有序列表
（1）<ol><li></li></ol>，表示有序列表；并且可以嵌套使用
（2）前面的标记，默认是阿拉伯数字1,2,3……，也可以用type属性自己定义为：大小写英语字母A,a、大小写罗马数字I,i
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>中国
<ol type="A">
<li>安徽
<ol type="I">
<li>合肥</li>
<li>阜阳</li>
<li>太和</li>
</ol>
</li>
<li>北京</li>
<li>上海</li>
</ol>
</li>
<li>美国</li>
<li>日本</li>
</ol>
</body>
</html>
（2）无序列表
（1）<ul><li></li></ul>，表示无序列表；并且也可以嵌套使用
（2）前面的标记，默认是：实心圆、空心圆、黑方框，也可以使用type属性自己定义；
square是黑方框、disc是实心圆、circle是空心圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ul type="square">
<li>中国
<ul type="disc">
<li>安徽
<ul type="circle">
<li>合肥</li>
<li>阜阳</li>
<li>太和</li>
</ul>
</li>
<li>北京</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/128464.html
