web服务本质
浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->服务端返回响应 -->服务端把HTML文件内容发给浏览器-->浏览器渲染页面
HTML是什么
- 超文本标记语言（Hypertext Markup Language , HTML）是一种用于创建网页的标记语言
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html 或者 .htm
HTML不是什么
-
HTML是一种标记语言，他不是一种编程语言
-
HTML使用标签来描述网页
HTML默认格式
<!DOCTYPE html> # 声明为HTML5文档
<html lang="zh-CN"> # 是HTML文档的开始标记
<head> # 定义了HTML文档的头部分
<meta charset="UTF-8"> # 对于中文网页需要声明编码格式
<title>css样式优先级</title> # 网页的标题
</head>
<body> # 网页的身体部分
</body>
</html> # 是HTML文档的结束标记
# 一些软件默认的生成的一种固定的格式
HTML标签
重要的标签
- id : 定义标签的唯一ID，HTML文档树中唯一
- class : 为HTML元素定义一个或者多个类名（classname）(CSS样式类名)
- style : 规定元素上的行内样式（CSS样式）
注释方法
<!--注释内容-->
最开始标签
<!DOCTYPE>
- 声明必须是HTML文档的第一行,位于<html>标签之前
- 声明不是HTML标签;他是指示web浏览器关于页面使用哪个HTML版本进行编写的指令
head内常用标签
<title></title> # 定义网页的标题
<style></style> # 定义内部样式表
<script></script> # 定义JS代码或引入外部JS文件
<link/> # 引入外部样式表文件或网站文件
<meta/> # 定义网页元信息
1. <meta>元素可以提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
2. <meta>标签位于文档的头部,不包含任何内容
3. <meta>提供的信息是用户不可见的
<meta>标签的组成: <meta>标签共有两个属性,他们分别是http-equiv属性和name属性, 不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
1. http-equiv属性: 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确的显示网页内容,与之对应的值为content --> content中的内容其实就是各个参数的变量值.
<!--指定文档的编码类型-->
<meta http-equiv='content-Type' charset='UTF8'>
<!--2秒后跳转到对应的网址,注意引号-->
<meta http-equiv='refresh' content='秒数;跳转后的地址'>
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv='x-ua-compatible' content='IE=edge'>
2. name属性:只要用户描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<!--规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）.(用于搜索引擎对页面进行分类)-->
<meta name='keywords' content=''>
<!--规定页面的描述。搜索引擎会把这个描述显示在搜索结果中.-->
<meta name='description' content=''>
注意: 如果设置了http-equiv属性,则不应该设置name属性
body内常用标签
<!--基本标签(块级标签和内联标签)-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p> : 占一行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<br> : 换行
<hr> : 水平线
<!--特殊字符-->
空格,
> 大于号
< 小于号
& & 也就是他自己本身,
¥ ￥ 人民币符号,
© 版权符号,
® 注册符号,
<!--div标签和span标签-->
div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现
块级元素和行内元素的区别:
所谓块元素,是以玲一行开始渲染的元素,行内元素则不需另起一行.如果单独在网页中插入这两个元素,不会对网页产生任何的影响.
这两个元素是专门定义CSS样式而生
注意:
关于标签的嵌套:一般块级元素内可以包含内联元素和某些块级元素,但是内联元素中不能包含块级元素,他只能包含其他内联元素.
p标签不能包含块级元素,p标签也不能包含p标签
<!--img标签-->
<img src='图片的路径' alt='图片未加载成功显示的提示' title='鼠标悬停时提示的信息' width='' height=''>
宽和高两个属性只有一个会等比缩放
<!--a标签-->
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件,一个文件,甚至是一个应用程序.
<!--url-->
url --> 统一资源定位器,也被=称为网页地址,是inter网上标准的资源的地址
eg: http://www.chaoge.com/name/my.html
url组成部分:
第一部分: 协议: http://,ftp://等
第二部分: 站点地址: 可以是域名,也可以是ip地址 www.chaoge.com
第三部分: 网页在站点中的目录: /name/
第四部分: 页面名称: my.html
每个部分使用'/'隔开
<a href='点击之后跳转的地址' target='_blank/_self'>点击</a>
href:
1. 可以是绝对地址
2. 可以是相对地址
3. 可以是锚点 (href='所指向的标签的id')
target:
_blank: 重新打开一个页面显示网页
_self: 就当前页面显示点击之后的页面(默认)
<!--列表-->
1. 无序列表
<ul type='属性'>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
type属性:
1. disc - 实心圆点(默认值)
2. circle - 空性圆点
3. square - 实心方块
4. none - 啥也没有
2. 有序列表
<ol type='属性' start='从第几个开始-必须是数字'>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
type属性:
1. 1 - 数字列表(默认值)
2. A - 大写字母
3. a - 小写字母
4. I - 大写罗马
5. i - 小写罗马
3. 标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dt>内容2</dt>
</dl>
<!--表格-->
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干个单元格组成,单元格可以包含文字,列表,图案,表单,数字符号,预置文本和其他的表格等内容.
表格最重要的目的是显示表格内数据,表格内数据是指最适合组织为表格格式(即按行和列组织)的数据
表格的基本结构:
<table border='表格边框' cellpadding='内边距' cellspacing='外边距'>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
</table>
boreder: 表格边框
cellpadding: 内边距
cellspacing: 外边距
像素 百分比
rowspan: 单元格竖跨多少行
colspab: 单元格横跨多少列
实现数据交互的重点标签
<!--form表单-->
功能:
表单用于向服务器传输数据,从而实现用户与web服务器的交互.
表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等.
表单还可以包含textarea,select,fieldset和label标签.
属性:
accept-charset : 规定在被提交的表单中使用的字符集(默认:页面字符集)
action : 规定向何处提交表单的地址(URL)(提交页面).
autocomplete : 规定浏览器应该自动完成表单(默认:开启).
enctype : 规定被提交数据的字符编码(默认:url-encoded).如果是上传文件需要将 enctype='multipart/form-data'.
method : 规定在提交表单是所使用的HTTP方法(默认:GET).
name : 规定识别变淡名称(对于DOM使用:document.forms.name).
novalidate : 规定浏览器不验证表单.
target : 规定action属性中的地址目标(默认:_self).
表单其实就是用户才操作完表单里面的一些框,按钮之后,把所选的数据传输到服务器上面.
表单中的 input 标签
<!--input标签中的type属性-->
text : 单行输入文本
password : 密码输入框 -> 看不见输入的东西
date : 日期输入框
checkbox : 复选框
radio : 单选框 -> 基于name,多个单选框是同一个name,就可以实现单选
submit : 提交按钮
reset : 重置按钮
button : 普通按钮
hidden : 隐藏输入框
file : 文本选择框 -> 就是提交文件的
属性:
name : 表单提交时的"键"
value : 表单提交时的"值"
checked : radio和checkbox默认被选中的项
readonly : 输入框只能看不能摸
disabled : 所有input都适用,标签被禁用了
表单中的select标签
<!--select标签这个就是一个下拉框-->
<form action="提交到哪儿去" method="提交方式GET/POST">
<select name="city">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option> # selected默认被选中的项,类似于checked
</select>
</form>
属性:
multiple : 布尔属性,设置后为多选,否则默认单选
disabled : 禁用
selected : 默认选中的项
value : 提交时的值
表单中的label标签和textarea多行文本标签
<!--label标签-->
1. label标签不会向用户呈现任何特殊效果
2. <label>标签的for属性值应当与相关元素的id属性值相同
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
<!--textarea标签-->
<textarea name="名称" rows="行数" clos="列数" disabled(禁用)></textarea>