目录
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中