HTML超文本标记语言
HTML基本结构
1.1 head 标签
meta 标签
1,文档字符编码
<meta charset="UTF-8">
2, 页面刷新时间
<meta http-equiv="Refresh" content="1" />
3, 网站关键字
<meta name = "keywords" content="搜索关键字">
4,网站描述内容
<meta name = "description" content="网站描述">
5, 页面刷新时间
<meta http-equiv="Refresh" content="1" />
3, 触屏缩放
meta标签可以设置页面是否支持触屏缩放功能，其中各元素的含义如下：
-
width=device-width，表示宽度按照设备屏幕的宽度。 -
initial-scale=1.0，初始显示缩放比例。 -
minimum-scale=0.5，最小缩放比例。 -
maximum-scale=1.0，最大缩放比例。 -
user-scalable=yes，是否支持可缩放比例（触屏缩放）
<!--支持触屏缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
title 标签
<!--网站的标题-->
<title>py31期脱产班</title>
link 标签
1,网站图标
<link rel="icon" href="封面.ico">
2,xxxx
1.2 body 标签
标签的分类:
1,文本级:h/p/a/img/span/strong/em
2,排版级:
div 区域
br/hr 换行/分割线
ul/ol/dl/li 列表
table/thead/caption/tr/th/tbody/td 表格
form/input/select/option/textarea 表单
1.2.1 块级标签
特点:
1,独占一行
2,能够设置高度和宽度(如果不设置宽度为父级标签的100%宽度)
height: 高度 200px 像素(截图)
width : 宽度 50%(宽度:页面一半;高度依照父级标签,默认为0)
1,标题标签(h1~h6)
<h1>欢迎来到老男孩教育</h1>
<h2>个人信息登录</h2>
2, 换行标签 br
<h1>欢迎来到老男孩教育</h1><br><h2>个人信息登录</h2>
3, 列表标签( ul , ol , dl ) 配合( li , dt,dd) 用
1,ul 无序列表标签
type属性 设置内容标识符 (圆点)
<ul>
<li>篮球</li>
<li>IT</li>
<li>跑步</li>
</ul>
2,ol 有序列表标签
type属性 设置内容条数(1,I,A...)
start属性 设置起始值
<ol type="A" start="1">
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
3,dl 分级列表标签(了解)
<dl>
<dt>山西省</dt>
<dd>忻州</dd>
<dd>忻府区<dd>
</dl>
4, 表格标签 (table)
<table border="5" cellpadding="5" cellspacing="3">
border : 表边距 cellspacing : 单元格间距 cellpadding : 单元格边距
<thead> # 设置表头
<caption>表格名称居中显示</caption>
<tr> # 一行框架
# 表头内容
<th>名称</th>
<th>年龄</th>
<th>爱好</th>
</tr>
# 行合并 rowspan="2"纵行合并
<tr>
<td>baozhu</td>
<td>18</td>
<td>琵琶</td>
</tr>
<tr>
<td>meizhu</td>
<td colspan="2">18</td>
# 行合并,少写一列
</tr>
# 列合并 colspan='2' :横列合并
<tr>
<td>baozhu</td>
<td rowspan="2">18</td>
<td>琵琶</td>
</tr>
<tr>
<td>meizhu</td>
# 注意上一条内容
<td>琵琶</td>
</tr>
5, 表单标签 (form)
<form action="http://127.0.0.1:8001" method = "paost"> method = 默认为(get)
action属性: 指定提交路径,提交到哪里去,按什么方式
</form>
#form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径
6,div 区域标签(没有任何文本修饰效果)
<div>111</div>
7, p标签
# 段落标签:上下有边距
<p>111</p>
1.2.2 行内标签
特点:
1,一行显示
2,不能设置宽高,默认宽高为文本内容宽高
1, 超链接标签(a标签)
2.1 普通文本
<a>游客:你好!</a>
2.2 href 属性
# href属性
属性值为空时:文字有颜色效果,还有下划线,并且点击后会刷新当前的html页面
<a href="">注册</a>
# 跳转到 href 指定的网页,覆盖当前页,未访问之前是蓝色的字体颜色,之后是紫色的字体颜色
<a href="https://www.oldboyedu.com/">登录</a>
# target属性
_self:在当前标签页打开 href属性值的那个网址 (默认)
_blank:在新的标签页打开 href属性值的那个网址
# title 属性
鼠标放上去显示的内容
2.3 页内跳转
描述:标签设置id属性=值(xx),a标签href属性的值写法:href='#xx',点击这个a标签就能跳转到id属性为xx的那个标签所在位置.
# 设置顶部位置
<a id="top">顶部位置</a>
# 跳转到顶部位置
<a href="#top">回到顶部</a>
2.4 发送邮箱
<a href = "mailto:邮箱地址">点击发送</a>
2, strong标签
<strong>加粗</strong>
3,em标签
<em>斜体</em>
4,span标签
<span>无效果</span>
5, label 关联表单标签
# 点击用户名然后鼠标移至用户名输入框
<lable for = "username">用户名</lable>
<input id = "username" type = "text"></input>
1.2.3 行内块标签
特点:
1,一行显示
2,可以设置宽高
1, 输入标签(input)
# input标签,如果要提交数据,别忘了写name属性 例如:name='username' -- username='zhangjianzhi'
<input type="text"> 普通文本输入框
<input type="password"> 密文输入框
<input type="number"> 纯数字输入框
<input type="date"> 时间日期输入框
<input type="file"> 文件选择框
<input type="submit" value="登录"> 提交按钮 触发form表单 action 提交数据的动作
<input type="reset"> 重置按钮 清空输入的内容
<input type="button" value="注册"> 普通按钮 不会触发form表单提交数据的动作
单选框
性别(name值相等表互斥)
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
复选框(多选框)
喜欢的明星:
<input type="checkbox" name="hobby" value="1"> 波多
<input type="checkbox" name="hobby" value="2"> 小泽
<input type="checkbox" name="hobby" value="3"> 仓井
下拉框 select标签
性别单选
<select name="sex" >
<option value="1">男</option>
<option value="2">女</option>
</select>
喜欢的明星多选
<select name="star" multiple="multiple"> # multiple:多选的意思
<select name="star" multiple> #简写形式
<option value="1">蔡徐坤</option>
<option value="2">胡歌</option>
<option value="3">范冰冰</option>
<option value="4">罗志祥</option>
</select>
多行文本输入框 textarea 标签
<textarea name="" cols="30" rows="10">
</textarea>
placeholder = "提示内容" 空就显示提示内容
注意：选择框写的时候，尽量将name属性和value属性都写上
2, 图片标签 (img)
src 属性:图片路径+文件名
alt 属性:加载失败或加载中 的提示内容
title属性:鼠标悬浮显示的内容
# file:///user/home.....绝对路径
# 不常用(像素) 只设置一个值默认等比例补全,不失真;
width :设置宽度
height:设置高度
3 span 标签 (无任何文本修饰效果)
CSS层叠样式表
1,css样式引入方式(style)
# 优先级
不同选择器:
!important*999999 > 内联式*1000 > id *100 > class *10 > 元素选择器 *1
同级:覆盖后执行的代码
1.1 head 标签中引入
<style>
/* 选择器{css属性名称:属性值;css属性名称:属性值;} */
</style>
1.2 内联式引入
<div style="height:100px; 100px;"></div>
1.3 stylesheet 文件引入
创建一个css文件,stylesheet文件,比如test.css文件,里面写上以下代码
div{
/* css注释 */
200px;
height: 200px;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径
2, 选择器
元素选择器
head 标签下
<style>
div{background-color: green;}
</style>
id 选择器
head 标签下
<style>
#1 {background-color: green;}
</style>
body 标签下
<div id = "1">嘿嘿嘿</div>
<div id = "2">嘿嘿嘿</div>
<div id = "3">嘿嘿嘿</div>
class 选择器
head 标签下
<style>
.a{background-color: green;}
</style>
body 标签下
<div id = "d1" class = "a">嘿嘿嘿</div>
<div id = "d2" class = "a">嘿嘿嘿</div>
<div id = "d3" calss = "b">嘿嘿嘿</div>
自定义属性选择器
head 标签下
<style>
[xx = "oo"]{background-color: green;}
</style>
body 标签下
<div id = "d1" class = "a" xx = "oo">嘿嘿嘿</div>
<div id = "d2" class = "a" xx = "gg">嘿嘿嘿</div>
<div id = "d3" calss = "b" xx = "oo">嘿嘿嘿</div>
后代选择器
head 标签下
<style>
.a .b{background-color: green;}
</style>
body 标签下
<div id = "d1" class = "a" xx = "oo">嘿嘿嘿
<div id = "d4" class = "b" xx = "oo" >叫爸爸
<span>wahaha</span>
</div>
</div>
<div id = "d2" class = "a" xx = "gg">嘿嘿嘿</div>
<div id = "d3" calss = "b" xx = "oo">嘿嘿嘿</div>
. : 所有后代
> : 只有一层
组合选择器
选择器1,选择器2....
交集选择器(了解)
选择器1选择器2{}
伪类选择器
爱恨准则 love
针对 a 标签:
a:link{} 没有被访问过的a的状态
a:visited{} 访问过后的状态
a:active{} 按下去没起来的状态
a:hover(不只是a标签) 鼠标悬浮状态
选择器 hover{cursor:pointer; # 小手
color:red # 悬浮时为红色
break-after: avoid-page; break-inside: avoid; orphans: 4; font-size: 1.17rem; margin: 0px 0px 1.5rem; font-family: "Lucida Grande", Corbel, sans-serif; clear: both; overflow-wrap: break-word; padding: 0px; color: rgb(222, 222, 222); line-height: 1.5rem; letter-spacing: -1px; white-space: pre-wrap; position: relative;">3, css样式style属性
塌陷问题：
重置样式表：reset css
body 默认margin：8
p 默认margin：16
ul 默认margin：16 padding 40 实心点 list-style：none
input border/outline 去除边框
3.1字体属性
color : 字体颜色
font-family : 字体样式("楷体","宋体")
font-size : 设置字体大小 (浏览器默认字体大小为16px)
font-weith : 100 字体粗细(默认400) bold 加租
font-style : 默认值(正的) italic 斜体
3.2 文本属性
text-align: 对齐方式 (center;left;rigth)
text-decoration: 文本装饰
none 无任何装饰(a标签去下划线)
overline 上划线
line-through 中横线
underline 下划线
text-indent : 文本缩进(1em = 文字大小px) 2em个文字大小缩进
line-height : 行间距(文本正常居中)
letter-spacing: 字符间距(中文)
word-spacing: 字符间距(英文)
注意:行间距要大于文字大小
3.3 颜色属性
1,red 英文
2,#ffffff 十六进制数
3,rgb(255,255,255)
4,rgba(255,255,255,1)
5,opacity:1; 整个标签设置透明度
3.4 display显示属性
display:none 隐藏标签(常用)
display:block 块级标签
display:inline 行内标签
display:inline-block 行内块标签
display:flex 弹性盒子
align-items:center 垂直居中
3.5 盒子模型
占用空间大小:内容的宽高+padding+border
margin :外边距(上右下左4个方向)
padding:内边距(内容边框;上右下左4个方向)
border :边框
标签/内容的宽高
3.5.1盒子居中显示
<style>
body{margin: 0;}
.base{
100%;
height: 40px;
background-color: #000;}
.base .sub{
1000px;
height: 100%;
background-color: red;
margin-left: auto;
margin-right: auto;}
/* margin-left: auto;
margin-right: auto;
相当于 margin：0 auto (上下0，左右自动)*/
</style>
3.6 浮动
float:left 左浮动
float:right 右浮动
float:inherit 继承父级浮动属性
clear:both 清除浮动
overflow:hidden 隐藏溢出
overflow:scroll 溢出滚轮解决
overflow:auto 溢出滚轮解决
3.6.1 浮动现象
1,文字环绕
2，脱离标准文档流
3，浮动元素相互贴靠(同为浮动元素left1,left2,2贴着1)
4，收缩现象(同为浮动元素left1,left2,如果1没有设置宽度，则压缩为文档宽度)
3.6.2 浮动破坏性（清除浮动）
父级元素塌陷问题：
1,给父元素设置固定 (不灵活,要改都改)
2,内墙法 (在最后一个浮动元素后面设置一个块级元素) --> (clear:both) 结构多余
3,为元素清除法
<style> div::after{content:"";display:block;clear:both;}</style>
4,父级元素设置 overflow:hidden
BFC区域:计算高度时,浮动元素参与计算;
3.7 伪造元素选择器
伪元素选择器:
<style> div::after{content:"加内容,不可选中"}</style>
3.8 定位
position:relative;
1,不脱离正常文档流,占据原来位置
2,参考点:原来的位置
position:absolute;
1,脱离正常文档流,不占原来位置,有压盖现象,层级变高
2,参考点:(子绝父相)
1,如果单独设置absolute,以页面左上角为参考点
2,如果父级设置relative,以父级盒子左上角为参考点
3,如果爷爷级设置了relative,父级没有设置定位,以爷爷级左上角为参考点
position:fixed;脱离正常文档流,不占原来位置,滚动页面位置不变,20
参考点:浏览器左上角
3.9 边框
border : 1px solid red 红色实线边框
border : 1px dashed red 红色虚线边框
border-radius: 边框圆角
border-10px 边框宽度
border-lelf:10px solid color 单边框简写
3.10 模态对话框
z-index:0 最底层
z-index:999 最表层
// 示例
3.11 背景相关
background-color :背景颜色
background-image: url("图片路径") 背景图片
background-repeat: no-repeat; 是否平铺
background-repeat: repeat-x; 横向平铺
background-repeat: repeat-y; 纵向平铺
background-position:left top 图片放置
background-position:50px 100px 图片放置
background:颜色 路径 是否平铺 图片位置(简写形式)
css 继承,优先级
继承:color,font-size
不同选择器:(继承来的属性几乎为0)
!important*999999 > 内联式*1000 > id *100 > class *10 > 元素选择器 *1
javascript (es5)
1,引入方式
1,(内部js)head/body后 标签中直接使用
<script>
js代码
<script>
2,(外部引入)
<script src="文件路径">
aletr("弹框")
</script>
2,基本语法
注释符 //
//1,声明变量
var a = 10
// 常量
const b = 20
//2,数据类型(typeof)
number //数字类型
boolean //布尔类型(true,false)
null,undefined
string //字符串类型
s[0],s.charAT(0) //索引取值
substring(0.2) //切片取值
trim() //去空格(Left,Right)
//3,数组
lst.push() //尾部追加
lst.pop() //删除尾部
lst.unshift() //头部插入
lst.shift() //删除头部
lst.splice(索引,个数) //删除元素
lst.slice() //切片
lst.reverse() //反转
lst.join() //拼接
lst.concat(lst) //迭代添加 extend
lst.sort() //排序
++/-- //算数运算符
//4,dict自定义对象
d1 = new Object()
d1.name = "bajie"
delete dict["key"] 删除(其他都一样)
//5,流程控制
if (条件){console.log('真的')}else if{console.log('假的')} else{console.log('真的')}
1>2?3:4 //三元运算 约吗?约:不约
//6,for循环
var a = [11,22,33]
for (var i in a){console.log(a[i])}
for (var i=0;i<10;i++){console.log(i)}
for (var i=0;i<a.lenth;i++){console.log(i)}
//each循环
循环普通数组
var a = [11,22,33];
$.each(a,function(k,v){console.log(k,v)})
//7,while循环
var a =