1. Web服务本质
浏览器发请求 → HTTP协议 → 服务端接收请求 → 服务端返回响应 → 服务端把HTML文件内容发给浏览器 → 浏览器渲染页面
2. 关于HTML
2.1 HTML是什么
- 超文本标记语言(Hypertext Markup Language,HTML)是一种用于创建网页的标记语言
- 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释(兼容性问题)
- 网页文件的扩展名:.html或.htm
2.2 HTML不是什么
- HTML是一种标记语言(markup language),它不是一种编程语言
- HTML使用标签来描述网页。不像Python编程语言一样,这个标记语言是没有逻辑的
3. HTML介绍
3.1 HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
</body>
</html>
标注:
① <!DOCTYPE html>:声明为HTML5文档;
② lang='zh-CN':表示整个文档的内容以中文为主,如果以英文为主则写成lang='en';
③ <html></html>:表示文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body);
④ <head></head>:定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示,包含了文档的元数据(meta),配置信息等;
⑤ <title></title>:定义了网页标题,在浏览器标题栏显示(标签页);
⑥ <body></body>:这里面的文本是可见的网页主体内容
注意:
① 标签要封闭,全封闭/自封闭;
② HTML文件不识别多个空格或换行,均识别成一个空格,此时需借助特殊字符
注意:对于中文网页需要使用 <meta charset="UTF-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="GBK">
3.2 HTML的注释
找到一行内容 ,按住键盘“ctrl 加 / ” 就能注释,注释的内容不会在网页上显示出来
3.3 HTML标签格式
3.3.1 标签说明
- HTML标签是由尖括号包围的关键字,如<html>、<div>等
- HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线
- 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等
- 标签里面可以有若干属性,也可以不带属性
3.3.2 标签语法
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
有些属性是没有特殊的效果的,而有些属性是有效果的,如下:
- <p><a s='name'><h3>这是名字</h3></a></p>,其中s='name'是没什么效果的,不可点击
- <p><a href="https://Baidu.com"><h3>这是链接</h3></a></p>,你会看到一些效果,可以点击,有下划线,有颜色
3.3.3 重要属性
① id:定义标签的唯一ID,HTML文档树中唯一,将来页面上的标签有很多,例如:来几个a标签,然后怎么区分这些标签呢,可以通过<a id='a1'>这是id为a1的标签</a>,id不能重复,将来我们想找这个标签的时候,可以通过这个id的值来找到这个标签
② class:为HTML元素定义一个或多个类名(classname)(CSS样式类名)
③ style:规定元素的行内样式(CSS样式) 简单来个示例:<h3 style="color:red;">它会变红</h3>你会发现变成红色了,如下图:
4. HTML常用标签
4.1 head内常用标签
标签 | 意义 |
---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部样式表 |
<script></script> | 定义JS代码或引入外部JS文件 |
<link/> | 引入外部样式表文件 |
<meta/> | 定义网页原信息 |
4.2 Meta标签
- <meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
- <meta>标签位于文档的头部,不包含任何内容
- <meta>提供的信息是用户不可见的
meta标签的组成:meta标签共有两个属性,它们分别是 http-equiv 属性和 name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
4.2.1 http-equiv属性
相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值
<!-- 2秒后跳转到对应的网址,注意引号 -->
# 如果把URL和后面的内容去掉,就是2秒钟刷新一次
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!-- 指定文档的编码类型 -->
<meta http-equiv="content-Type" charset=UTF8">
<!-- 告诉IE以最高级模式渲染文档 -->
# 告诉IE浏览器,按照最高标准来渲染此页面
<meta http-equiv="x-ua-compatible" content="IE=edge">
4.2.2 name属性
主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
# 关键字,别人可以通过这些关键字搜索到我的这个文章的
# 搜索引擎能够通过content内容来帮别人搜索到此文档
<meta name="keywords" content="meta总结, html meta, meta属性, meta跳转">
# 是对这个文档的描述
<meta name="description" content="这里是文档的一些描述内容">
PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因
常见的浏览器及内核如下:
浏览器 | 内核 |
---|---|
IE | trident |
Chrome | blink |
火狐 | gecko |
Safar | webkit |
4.3 bod内常用标签
4.3.1 基本标签(块级标签和内联标签)
# 不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
# 独占一个段落
<p>段落标签</p>
# 一级标题至六级标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
# 换行
<br>
# 就是单独个一个水平线
<hr>
特殊字符(还有好多其他的,可以直接百度搜HTML特殊符号对照表)
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权标识(写公司网站的时候会用到) | © |
注册商标(一个圆圈里面有个R) | ® |
特别注意:HTML中默认是不显示空格的,也就是说通过空格键加了空格也没有多个空格的效果,加多少个都是显示一个空格效果,需要这些特殊字符才能显示出空格效果
4.3.2 div标签和span标签(常用)
- div标签:用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现
- span标签:用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现
块级元素与行内元素的区别:
- 块级元素(块级标签/行外标签),是以另起一行开始渲染的元素
- 行内元素(内联标签)则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的
刚学的标签:
- 块级标签:p、h1 - h6、hr、div
- 内联标签:b、i、u、s
注意:
① 关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。div是可以包含div的
② p标签比较特殊,不能包含块级标签,p标签也不能包含p标签。可以试一下p标签套p标签,f12你会发现三个p标签
4.3.3 img标签(内联标签)
<img src="图片的路径" alt="图片未加载成功时的提示"
title="鼠标悬浮时提示信息" width="宽" height="高">
注意:
① src的路径分为两种:网上的一个图片路径和本地的一个相对图片路径
② alt后的提示内容,在图片未显示前会提示,图片显示出来后则不提示
③ title后的提示内容,当鼠标悬浮在图片上,会显示提示
④ 宽高两个属性只用一个会自动等比缩放
4.3.4 a标签(内联标签)
超链接标签:是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
<a href="http://www.baidu.com" target="_blank" >点我就可以跳转到百度啦</a>
target:
- _blank:表示在新标签页中打开目标网页
- _self:表示在当前标签页中打开目标网页(默认效果)
注意:
① 没有写href属性,只显示普通文本
② 写了href属性但没有值,有特殊效果(文字有颜色、有下划线),点击会刷新当前页面
拓展:
① 什么是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
href属性指定目标网页地址,该地址可以有几种类型:
① 绝对URL - 指向另一个站点(比如 href="http://www.baidu.com)
② 相对URL - 指当前站点中确切的路径(href="index.htm"),学django的时候会用的比较多
③ 锚URL - 指向页面中的锚(href="#top"),博客的目录经常用到,还可以跳转到 name属性为p1的a标签上,<a name='top'>xxx</a>
例1:如下代码体现了URL跳转的作用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#p1" >点我就可以跳转到id为p1的p标签啦</a>
<div style="height:1000px"></div>
<p id="p1">哈哈,我就是id为p1的p标签</p>
<div style="height:1000px"></div>
</body>
</html>
我们一运行,会出现以下界面,当我们再次点击这个超链接时
就会直接跳转到目标的URL,如下图
例2:如下代码体现了锚点跳转的作用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{height: 1000px;width: 200px;background-color: black;}
</style>
</head>
<body>
<!-- 设置锚点 -->
<a name="top">这是顶部</a>
<div class="c1"></div>
<!-- 跳转锚点,写的是a标签name属性对应的值,写法 href='#值' -->
<a href="#top">回到顶部</a>
</body>
</html>
注:在设置锚点时,可写name=''值'',或者写成id=''值''都可以
4.3.5 列表标签
4.3.5.1 无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
(1)disc(实心圆点,默认值)
(2)circle(空心圆圈)
(3)square(实心方块)
(4)none(无样式)
4.3.5.2 有序列表
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性:
(1)1 数字列表,start是从数字几开始(默认值)
(2)A 大写字母
(3)a 小写字母
(4)Ⅰ 大写罗马
(5)ⅰ 小写罗马
4.3.5.3 标题列表
就像大纲一样,有一个层级效果,代码及效果如下
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
4.3.6 表格标签
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据
表格的基本结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border='1'>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>特点</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>雨落</td>
<td>贼帅</td>
</tr>
<tr>
<td>2</td>
<td>庆言</td>
<td>美女</td>
</tr>
</tbody>
</table>
</body>
</html>
其中:
- <thead>:表示的是标题部分 </thead>
- <tbody>:表示的是内容部分 </tbody>
- <tr>:表示的是一行 </tr>
- <th>:表示的是一个单元格,文字是加粗效果 <th>
- <td>:表示的是一个单元格,文字是常规字体 <td>
注释-常用属性:
- border:表格边框
- cellpadding:内边距(内边框和内容的距离)
- cellspacing:外边距(内外边框的距离)
- width:像素 百分比(最好通过css来设置长宽)
- rowspan:单元格竖跨多少行(即合并单元格)
- colspan:单元格横跨多少列(即合并单元格)
上面这几个属性基本上用不到,其实标签又可以分为两类:
1、展示给用户看的
2、获取用户输入内容的标签
刚才前面的这些标签都是展示内容用的,下面要学的标签是捕获用户输入的标签。基本上HTML中常用的就这些标签
4.3.7 input标签
<input> 元素会根据不同的 type 属性,变化为多种形态
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type="text" /> |
password | 密码输入框(不显示明文) | <input type="password" /> |
date | 日期输入框 | <input type="date" /> |
checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
radio | 单选框 | <input type="radio" name='x' /> |
submit | 提交按钮 | <input type="submit" value="提交" /> |
reset | 重置按钮 | <input type="reset" value="重置" /> |
button | 普通按钮 | <input type="button" value="普通按钮" /> |
hidden | 隐藏输入框 | <input type="hidden" /> |
file | 文本选择框 | <input type="file" /> |
属性说明:
① name:表单提交时的“键”,注意和id的区别
② value:表单提交时对应项的值
- type="button", "reset", "submit"时,为按钮上显示的文本内容
- type="text","password","hidden"时,为输入框的初始值
- type="checkbox", "radio", "file",为输入相关联的值
③ checked:radio和checkbox默认被选中的项
④ readonly:text和password设置只读
⑤ disabled:将当前标签作废,对于所有input均适用
1、输入框与单多选
2、日期输入框
3、提交与重置按钮
- submit:发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
- reset:页面不会刷新,将所有输入的内容清空
4、文本选择框
5、设置为只读
4.3.8 form标签
功能:
① 表单用于向服务器传输数据,从而实现用户与Web服务器的交互
② 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
③ 表单还可以包含textarea、select、fieldset和 label标签
表单元素
基本概念:HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息
表单工作原理:访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上,服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息
表单属性
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集) |
action | 规定向何处提交表单的地址(URL)(提交页面) |
autocomplete | 规定浏览器应该自动完成表单(默认:开启) |
enctype | 规定被提交数据的编码(默认:url-encoded) |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET) |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name) |
novalidate | 规定浏览器不验证表单 |
target | 规定 action 属性中地址的目标(默认:_self) |
注意:
① submit只有写在form表单里面才能进行提交,否则只是一个普通的按钮
② method的默认提交方法是get,效果是可以在网址上看到提交的内容
除了form表单内的submit可以进行提交,button按钮也可以实现
4.3.9 select标签
属性说明:
- multiple:布尔属性,设置后为多选下拉框(按住Ctrl可多选),否则默认单选
- disabled:禁用
- selected:默认选中该项
- value:定义提交时的选项值
4.3.10 label标签
定义:<label> 标签为 input 元素定义标注(标记)。如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签
注意:
1、label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同
除此之外,以下这两种写法实际效果是一样的
4.3.11 textarea标签
主要作用就是多行文本输入框,像input标签只能在一行输入,但是利用textarea标签就可以进行多行输入了,通过改变行数和列数来控制文本框的大小
属性说明:
- name:名称
- rows:行数(相当于文本框高度设置)
- cols:列数(相当于文本框长度设置)
- disabled:禁用
- maxlength:显示字符数,例如:maxlength='10' 最多输入十个字符