网页前端基本模板
<!DOCTYPR html>
<html>
<head>
</head>
<body>
</body>
</html>
说明：
以上是网页前端的固定基本模板。其中的的标签可分为：
块儿级标签，行内标签和双标签，自闭和标签
（使用专门的编程软件后会自动调整，了解即可。）
1.行内标签 b s u i
自身文本多大就占多大
2.块儿级标签 h p
标签独占一行
块儿级标签可以嵌套块儿级标签和行内标签
特例:<p>标签虽然是块儿级标签但是它不能嵌套块儿级标签
行内标签只能嵌套行内标签
1.双标签
有头有尾<h1></h1>
2.自闭和标签
有头<hr>
html的标签用法一般为：
<标签名 附加效果=效果内容>标签内的内容</标签名>
head标签
其中head和/head中主要添加的是针对网页本身的编码，如：
title
网页的标题
style
内部可以直接书写css代码调节html样式
（要在html网页中引入css代码一共有三种方法：
1.style标签内部直接书写
<style>css代码</style>
2.link标签href属性引入外部css文件
<link href=‘css代码‘ rel=‘stylesheet‘></link>
3.在标签内部直接书写
<p style=‘css代码;‘></p>
（上述三种方式最正规的是第二种引入外部css文件）
）
script
内部可以直接书写js代码
也可以通过src参数引入外部的js文件(绝对路径与相对路径)
meta
定义网页源信息
参数description
定义网站的简介
参数keyword
定义用户可能搜索到的关键字 增加网页被搜索到的概率
body标签
其中body和/body中主要添加的是针对网页内容的编码，如：
标题系列
<h1>一级标题</h1>
<h2>二级标题</h2>
（以此类推，最多六级）
加粗 斜体 下划线 删除线
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
段落
<p>分行的文字</p>
（默认状态下打字永远在一行，回车也不能换行）
水平线，换行
<hr>
<br>
特殊符号
>大于号
<小于号
 空格
链接标签
<a链接>文字</a>
href参数
1.放网址点击可以直接跳转
<a href=‘https://www.baidu.com‘>百度</a>
2.锚点功能
（需要先设置锚点——<p id=‘d1‘>标题1</p>）
放其他标签的id值点击就可以跳转到对应的标签位置
<a href=‘#d1‘>跳转到标题1</a>
target参数
控制跳转页面是在当前页还是新建页
_self（当前网页直接跳转到链接）
_blank（新建网页到链接）
图片标签
<img src=‘111.jpg‘/>
src参数
1.可以放网络图片的地址
2.也可以放本地图片的地址
title参数
鼠标悬浮在图片上之后可以展示的文字信息
alt参数
图片由于某些原因加载不出来的时候可以提示的文字信息
width、height参数
调节图片的长宽 默认调节一个就可以 另外一个等比例缩放
如果两个都调节那么可能会出现图片失真的情况
列表标签-无序标签
<ul>
<li>小李</li>
<li>小明</li>
<li>小红</li>
</ul>
(页面上看似有规则的横向或者竖向一次排列的标签大概率都是无序列表)
表格标签
<table>
<thead>（在head和body代码里面，所以要用thead和tbody）
<tr> （一个tr就代表一行）
<th>序号</th> （th加粗的文本）
<th>姓名</th>
<th>年龄</th>
</tr>
</thead> （<thead>表头行</thead>）
<tbody>（<tbody>表格内容行</tbody>）
<tr>（第二行）
<td>1</td> （td普通文本）
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
form表单标签
（该标签可以接受用户的数据并发送给后端服务器——让用户填）
获取用户数据的标签最为常见的就是input并且获取用户数据的标签最好都要有一个name属性用来表示该数据到底是用户的什么数据
input标签 # 变形金刚
type参数
（<input type=‘要用的type参数‘ name=‘自行设置name属性表示是什么数据，便于之后操作‘>）
text——普通输入框，中文英文数字都可以，一行到底，不能换行（账号，用户名等）
password——密码输入框，英文数字可以，不能打中文，输入后的内容会变成星号隐藏（密码）
date——日期输入框，会有日历可以选择日期（日期，生日等）
email——邮箱输入框，输入邮箱，如果不是邮箱格式，将会无法提交并且有提示（邮箱）
radio——选择框，可以通过重复代码设置多个选项，单选（单选内容）
checkbox——选择框，可以通过重复代码设置多个选项，可多选（多选内容）
file——上传文件框，点了可以从电脑里选择文件上传，加上multiple，可以上传多个文件。（上传简历，提交文件作业等）
按钮（中间需要加上value=‘按钮上文字‘）
button——没有任何用的按钮，可以点，但没有作用（恶作剧？）
reset——重置按钮，重置全部表单内容（重置按钮）
submit——提交按钮，将所有填写内容提交到网页（提交按钮）
select标签
下拉选择——下拉选择框，可以收起拉开选项栏，点击选择。每个选项的格式：<option>选项文字</option>。加上multiple可以多选（选择内容）
textarea标签
大文本——大文本框，中文英文数字都可以，写满会自动换行，也可以回车换行（自我介绍等）
input标签
value参数
相当于默认值
本质:用户数据其实都是由value参数存储
（用户在输入框中输入了jason其实就相当于value=jason）
placeholder参数
相当于提示信息
针对radio和checkbox可以默认选中
checked参数
checked=‘checked‘
（在html中如果标签的属性名和属性值相等 那么可以简写）
简写 checked
select标签
option子标签
selected=‘selected‘
简写 selected 默认选中
form标签
action参数
用来控制数据提交的地址
novalidate参数
取消浏览器的校验动作
（后续重要参数爬虫课程再介绍）
button标签
如果写在了form表单的内部 那么也可以出发提交动作
（能够触发form表单提交数据的标签有两个
<input type=‘submit‘/>
<button></button>）
块儿级标签
div
行内标签
span
（上述两个标签主要用于页面的前期结构布局）
以上标签都可以在标签内部附加id值和class值便于之后的css操作：
1.id值
类似于标签的身份证号码 在同一个html文件内 id值不能重复
<a id=‘d1‘></a>
2.class值
类似于标签的群体号码 多个标签可以属于一个群体 多个标签也属于多个群体
<a class=‘c1‘></a>
<a class=‘c1 c2‘></a>
css编码
主要用于对前端进行美化和排版
（前端永远都是你抄我我抄你 其乐融融）
css就是用来调节html标签样式的
1.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
2.语法注释
/*注释内容*/
3.css引入方式
1.style标签内部直接书写
<style>css代码</style>
2.link标签href属性引入外部css文件
<link href=‘css代码‘ rel=‘stylesheet‘></link>
3.在标签内部直接书写
<p style=‘css代码;‘></p>
（上述三种方式最正规的是第二种引入外部css文件）
css选择器
1.标签选择器(直接写标签名称即可)
p {
color:red;
}
2.类选择器(书写标签class属性值并在前面加点)
.c1 {
color:blue;
}
3.id选择器(书写标签id属性值并在前面加#)
#d1 {
color:black;
}
4.通用选择器(了解 指代所有的标签)
* {
color:green;
}
5.儿子选择器(大于号)
div>p {}
6.后代选择器(空格)
div p {}
7.毗邻选择器(加号):同级别紧挨着的下一个
div+p {}
8.弟弟选择器(数字1左边的键)
div~p {}
（上述的案例使用的都是标签选择器 其实也可以切换为任意选择器）
小练习
#d1>p {}
找id为d1标签内部所有的儿子p
.c1 .c2 {}
找class为c1标签内部所有class为c2的后代标签
div>.c1 {}
找div标签内部class为c1的儿子标签
.c1+#d1 {}
找class为c1标签同级别紧挨着的id为d1的标签
HTML标签除了可以有自带的属性之外还支持自定义属性
关键性的符号就是中括号
[name] {color:red}
查找含有属性名name的标签
[name=‘jason‘] {color:red}
查找含有属性名name并且属性值是jason的标签
p[name=‘jason‘] {color:red}
查找含有书名name并且属性值是jason的p标签
分组(逗号隔开 同级别) 找p标签、div标签、span标签
p,div,span {
color:yellowgreen;
}
# 嵌套(不同的选择器可以混合使用) 找id=d1、class=c1、div标签
#d1,.c1,div {
color:yellowgreen;
}
div.c1 {} # 找class=c1的div标签
# 通过css代码给html标签添加文本内容或者修改
# 改变文本第一个字
p:first-letter {
font-size:48px;
color:red;
}
# 在文本开头添加内容
p:before {
content:‘#‘;
color:red;
}
# 在文本末尾添加内容
p:after {
content:‘?‘;
color:blue;
}
（该知识点在浮动中应用）
1.长宽
width height
# 行内标签无法设置长宽 完全取决于内部文本
2.字体大小
font-size
3.字体颜色
第一种: color:red
第二种: color:#4d4d4d
第三种: color:RGB(128,128,128)
"""
如何利用常见软件取色
1.qq微信截图自带三基色取色（alt+a，鼠标下会显示鼠标指的颜色）
RGB(128,128,128)
2.利用浏览器自带的取色器取色（查看编码）
#4d4d4d
"""
1.文字对齐(掌握)
text-align:center
2.文字装饰(重要)
text-decoration:none # 主要用于a标签取出自带的下划线
3.首行缩进(了解)
text-indet:32px
1.背景色
2.背景图片
background-image:url(‘111.png‘);
3.不自动填充（正常状态下背景大下大于图片大小会自动复制填充数张图片）
background-repeat:no-repeat;
4.图片居中
background-position:center
/*如果多个参数都是相同的前缀 那么可以简写*/
background:#336699 url(‘111.png‘) no-repeat center center;
border-（left，right，top，bottom）-（color，width，style）:想要的效果内容;
根据上述代码可以自动调整某一边边框的颜色，粗细，种类。
如何画圆
border-radius:50%
display:none
（可以隐藏内容，内容位置也被覆盖，不看代码就发现不了）
具体调整方式和上面的边框属性相同。
浮动会导致父标签元素"塌陷" >>> 缺点
1.推导步骤一(不可取)
自己再写一个div撑着
2.推导步骤二(不好理解)
clear属性
clear:left、right、both # 不允许标签左侧有浮动的元素
3.终极结论(记住就可以)
.clearfix:after {
content:‘‘;
display:block;
clear:both
}
"""
在写css代码之前先写好上述解决浮动带来塌陷的css代码
哪个父标签塌陷了就给哪个父标签加一个clearfix类属性即可
"""
overflow
div {
width:100px;
height:100px;
border:3px solid black;
border-radius:50%;
overflow:hidden
}
img {
width:100%;
}
固定定位 # 掌握
position:fixed 相对于浏览器窗口做定位
（位置：
top：50px
left：50px
bottom: 50px;
right: 50px
）
浮动 相对定位 绝对定位 固定定位
脱离文档流
浮动
绝对定位
固定定位
不脱离文档流
相对定位
# 脱离文档流:简单的理解为原来的位置是否可以被其他标签占用
总结
建议先写html代码再写css代码
<!DOCTYPR html>
<html>
<head>
</head>
<body>
</body>
</html>
3.根据自己的需要添加head内标签，详见上head的内容
4.把自己想要的内容在body内写好，详见上body的内容
5.打开css文文档先进行简单排版防止乱掉，如：
/*通用样式*/
/*左边样式*/
/*右边样式*/
6.把需要事先写的标签写好，如：
去除网页默认边距，加上背景色
body {
margin:0px;
}
去除链接的下划线
a {
text-decoration:none;
}
去除列表的标号
ul {
list-style-type:none;
padding-left:0px;
}
防塌陷用代码
.clearfix:after {
content:‘‘;
display:block;
clear:both;
}
7.完成css文档的编写，详见上css的内容
8.完成