HTML基础
目录
1. HTML介绍
1.1 web服务本质
浏览器发送请求 --》HTTP协议 --》服务端接收请求 --》服务端返回响应 --》 服务端把HTML文件内容发给浏览器 --》浏览器渲染页面
1.2 HTML是什么
超文本标记语言(hypertext Markup Language,HTML) 是一种用于创建网页的标记语言。
HTML使用标签来描述网页
1.3 HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!--
<!DOCTYPE html> 指定当前html的版本以及风格
<html lang="en"></html> 表示根标签,中间所有的内容才是我们真正html,lang="en"表示哪个国家的语言
<head></head> 定义网页的全局信息
<meta charset="UTF-8"> html的编码格式
<title>Title</title> 网站的标题
<body></body> 显示网页的主要内容的
-->
1.4 HTML标签格式
HTML标签是由尖括号包围的关键字
1 标签的书写，
双标签，<head></head>
单标签 <meta charset="UTF-8">
2 标签里面的属性
<标签名 属性名="属性值"></标签名>
<标签名 属性名="属性值" />
<标签名 id="属性值" class="属性值 属性值 属性值"></标签名>
<标签名 >内容</标签名>
<标签名 属性名="内容"/>
1.5 HTML注释
<!--注释内容-->
2.HTML常用标签
2.1 head内常用标签
<title></title>：网站的标题
<style></style>：定义内部样式表
<script></script>：定义JS代码或引入外部JS文件
<link/>：引入外部样式表文件或网站图标
<meta/>：定义网页原信息
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
2.2 body内常用标签
2.2.1 基本标签
<b>加粗</b>
<i>倾斜</i>
<s>删除线</s>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<br>换行
<hr>分割线
2.2.2 特殊字符
空格
< <
> >
& &
¥ ￥
© 版权
® 注册
2.2.3 div标签，p标签，span标签
块级元素：
<div></div>：单独成行，没有任何的文本显示效果，用于布局。
<p></p>：以段落的形式显示文本，段落独占一行，它也有上下文之间的垂直空白距离，字体大小不发生变化
行级元素：
<span></span>：可以让多个span元素在一行里面显示，无任何的字体效果，可以处理一行文本内的文字不同效果。
2.2.4 a标签
<a>内容</a>:超链接标签，设置页面中允许被点击的内容，完成了网页之间的跳转。
href：链接的url，网页想要跳转到的位置
target：打开目标链接的形式
1 _blank：打开一个新的页面
2 _self：在自身网页打开该网页
title：当鼠标悬停时，提示的文字
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
2.2.5 列表
无序列表
<ul class="a" type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--无序列表标签
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
-->
有序列表
<ol type="A" start="2">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--有序列表标签
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
-->
2.2.6 标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
2.2.7 表格
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aa</td>
</tr>
<tr>
<td>2</td>
<td>zz</td>
</tr>
</tbody>
</table>
如何使用表格？
1）创建表格
定义表格:<table></table>
创建行:<tr></tr>
创建列(单元格):<td></td>
2)表格的属性：
table属性
（1）width：宽度
（2）height：高度
（3）align：对齐方式
（4）border：边框
（5）bgcolor：背景颜色
（6）cellpadding：单元格内边距,内容与边框的距离
（7）cellspacing：单元格外边距,框与框的距离
tr属性
(1)align ：该行内容水平对齐方式,left/right/center
(2)valign：该行内容垂直对齐方式,top/bottom/middle
(3)bgcolor
td属性：
(1)align
(2)valign
(3)width
(4)height
(5)colspan:跨列
(6)rowspan:跨行
表格的标题：<caption></caption>
紧跟table之后,一个表格只有一个标题
th 表格头部: 行标题或者列标题，字体有加粗的效果，它是放在tr中
