html速查:
一、前端
任何直接能够跟用户打交道的交互界面都可以称之为前端
二、软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
三、浏览器输入网址发送了几件事?
1.输入网址
2.朝服务端发送请求
3.服务器接收请求并查询浏览器想要的数据返回给浏览器
4.浏览器拿到数据展示页面
四、HTTP协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议
文件的后缀名到底是给谁看的?
文件的后缀并不是给计算机看的,而仅仅是给人看的
五、HTML:超文本标记语言
六、标签通常都必须有的属性:
id:用来唯一标识标签
class:标签类属性,可以有多个值
可以理解为python中面向对象的继承
二、第一个html文件
<!--html文档结构-->
<!DOCTYPE html>
<html>
<head>
<!--head存放的是用户看不到的,主要是给浏览器和搜索引擎看的-->
</head>
<body>
<h1>hello big baby</h1>
<a href="https://www.luffycity.com">give you some color to see see</a>
<img src="1.jpg" alt="">
</body>
</html>
<!--单行注释-->
<!--
多行注释
多行注释
多行注释
-->
三、head内常用标签
<!--
head内常用标签:
title:页面标题
style:定义内部样式表,写css代码
script:内部可以直接写js代码,也可以通过src属性引入外部js代码文件
link:通过href引入外部css文件
meta:定义网页原信息
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>这是我的第一个前端页面</title>
<style>
h1 {
color: green;
}
</style>
<script>
alert('hello baby')
</script>
<script src="myjs.js"></script>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<h1>来了 老弟!</h1>
</body>
</html>
四、body基本标签
标签分类1:
双标签: h1-h6、p、a
自闭和标签: img、br、hr
标签分类2:
块儿级标签: div、h1-h6、p、hr、br
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签: span 、a 、img、 i、 s、 b 、u
自身内容有多的就占多大
行内标签不能设置长宽
URL:是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL地址由4部分组成
第1部分:为协议:http://、ftp://等
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。
①h1~h6:标题标签
②p:段落标签
③<br> 换行
④<s>1999</s>现价999 删除
⑤<u>下划线</u>
⑥<i>斜体</i>
⑦<b>加粗</b>
⑧<hr> 分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body基本标签</title>
</head>
<body>
我是正常文本
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<p>鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波</p>
鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波,鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波
<br> <!--换行-->
<s>1999</s>现价999 <!--删除-->
<u>下划线</u>
<i>斜体</i>
<b>加粗</b>
<hr> <!--分割线-->
</body>
</html>
五、body特殊符号
body特殊符号:
空格
> >
< <
¥ ¥
© 版权
® 注册
& &
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
  <!--空格-->
1< <!--小于-->
1> <!--大于-->
¥ <!--¥-->
© <!--版权©-->
® <!--注册®-->
</body>
</html>
六、body常用标签
常用标签(******)
div:用来定义一个块儿级元素,通过css样式为其赋予不同的表现。
span:用来定义内联(行内)元素,通过CSS样式为其赋予不同的表现。
区别:所谓块元素,是以另起一行开始渲染的元素,
行内元素则不需另起一行。
如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
p:段落标签
a:超链接标签(从一个网页指向一个目标的连接关系)
<a href=""></a>
<a href="http://www.baidu.com" target="_self">click me</a>
href:指定目标网页地址
target:
_blank:表示在新标签页中打开目标网页
_self:表示在当前标签页中打开目标网
img:
src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
alt当图片加载失败之后自动展示的提示信息
title鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div1
<div>
div2
<div>
div3
</div>
</div>
</div>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<a href="http://www.baidu.com" target="_self">click me</a>
<a href="http://www.baidu.com" target="_blank">click me</a>
<a href="" id="a1">top</a> <!--顶部-->
<a href="#a1">bottom</a> <!--底部-->
<div style="height: 1000px;background: green"></div> <!--高度和背景颜色-->
</body>
</html>
七、body列表标签
列表标签
ul:无序列表
type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
ul去除自带的样式:
ul {list-style-type:none; padding-left:0;}
ol:有序列表
type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
dl:标题列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="disc">
<li>jason</li>
<li>tank</li>
<li>owen</li>
<li>egon</li>
</ul>
<ol type="1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
</body>
</html>
八、body表格标签
表格:
是一个二维数据空间,
一个表格由若干行组成,
一个行又有若干单元格组成,
单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。
表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
表格的基本结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="20">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>28</td>
<td rowspan="2">study</td>
</tr>
<tr>
<td>egon</td>
<td>25</td>
<!--<td>sleep</td>-->
</tr>
<tr>
<td>tank</td>
<!--<td>26</td>-->
<td colspan="2">eat</td>
</tr>
</tbody>
</table>
</body>
</html>
九、form表单
form:
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
属性:
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。
input标签:
<input> 元素会根据不同的 type 属性,变化为多种形态。
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
checked 默认选中
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
label标签:
通常是和input标签结合使用的
select选择标签(默认是单选的,可以通过设置multiple参数改为多选):
一个一个的option就是一个一个的选项
属性说明:
multiple:布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值
textarea:大段文本框
button标签:也可以触发form表单的提交动作
<button>button按钮</button>
请求方法:
get请求:朝服务端获取资源(可以携带参数供服务端校验)
不准携带敏感性的参数
get请求携带的参数是有大小限制的,大小为4kb
· 可以携带一些不重要的参数
post请求:朝服务端提交数据
敏感性的信息都应该采用post提交方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" >
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birth:<input type="date"></p>
<p>gender:
男<input type="radio" name="gender" >
女<input type="radio" name="gender" checked>
</p>
<p>hobby:
篮球<input type="checkbox">
足球<input type="checkbox" >
双色球<input type="checkbox">
</p>
<p>province默认单选:
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>province多选:
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>province1:
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳区</option>
<option value="">海淀区</option>
<option value="">昌平区</option>
</optgroup>
<optgroup label="上海">
<option value="">青浦区</option>
<option value="">静安区</option>
<option value="">徐汇区</option>
</optgroup>
<optgroup label="深圳">
<option value="">南山区</option>
<option value="">宝安区</option>
<option value="">福田区</option>
</optgroup>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>file
<input type="file">
</p>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button>button按钮</button>
</form>
</body>
</html>
label标签:
通常是和input标签组合使用的