前言
一、HTML
1.标准模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.常见标签
1.标题标签: h1-h6,有六个, 从 h1 - h6. 数字越大, 则字体越小.
<h1>hello</h1>
2.段落标签: p
<p>这是一个段落</p>
3.换行标签: br
br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
<br/>
4.格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
5.图片标签: img
img 标签必须带有 src 属性. 表示图片的路径.
<img src="rose.jpg">
img 标签的其他属性
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失
衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">
关于目录结构:
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
- 相对路径: 以 html 所在位置为基准, 找到图片的位置.
同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: …/image/1.jpg - 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
6.超链接标签: a
href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self,在当前页面打开. 如果是 _blank 则用新的标签页打开
<a href="跳转地址">当前看到的</a>
<a href="http://www.baidu.com">百度</a>
链接的几种形式:
①空链接: 使用 # 在 href 中占位.用于跳转到当前页面的首部
<a href="#">空链接</a>
②下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.zip">下载文件</a>
③网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>
④锚点链接: 可以快速定位到页面中的某个位置.
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
3.表格标签
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
合并单元格
跨行合并: rowspan="n"
跨列合并: colspan="n"
4.列表标签
主要使用来布局的. 整齐好看.
①无序列表[重要] ul li
②有序列表[用的不多] ol li
③自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
<h3>无序列表</h3>
<ul>
<li>RM</li>
<li>v</li>
<li>jk</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>RM</li>
<li>JIN</li>
<li>J-HPOE</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>BTS</dt>
<dd>SUGA</dd>
<dd>Jimin</dd>
<dd>RM</dd>
</dl>
5.表单标签
输入型,让用户输入信息的途径
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.
5.1 form 标签
表单框出一块区域
<form action="test.html">
... [form 的内容]
</form>
几种常见属性
①method=" “,表示以HTTP协议什么样的方法向上提交,有get和post两种,默认为post
②action=” “,跟的是一个路径,表示这个from表单提交后引导浏览器 向哪个路径去跳跃
③enctype=” ",默认的是application/x-www-form-urlencoded
5.2 input 标签
①type(必须有):取值种类很多多, button, checkbox, text, file, image, password, radio 等.
②name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
③value: input 中的默认值,真正提交的值.
<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="2"> 女
④checked: 默认被选中. (用于单选按钮和多选按钮),不用写多余的东西直接写就行
<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="2" checked> 女
⑤maxlength: 设定最大长度.
常见类型
type属性更多值
- 文本框
<input type="text">
- 密码框
<input type="password">
- 单选框
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
单选框之间必须具备相同的 name 属性, 确定哪些radio是一组的,才能实现 多选一 效果.
4) 复选框
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏
- 普通按钮
<input type="button" value="我是个按钮">
- 提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
还有一种,更直观
<button type="submit">提交2</button>
- 清空按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
8) 选择文件
<input type="file">
5.3 select标签
下拉菜单
option 中定义 selected=“selected” 表示默认选中.
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
<form>
<select name="学历">
<option value="1">小学</option>
<option value="2">高中</option>
<option selected="selected" value="3">大学</option>
</select>
</form>
5.4 textarea标签
文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的.
<textarea rows="3" cols="50">
</textarea>
6、无语义标签: div & span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子
div>
性别:
<label>
<input type="radio" name="gender" value="女"> 女
</label>
<label>
<input type="radio" name="gender" value="男"> 男
</label>
</div>
<div>
<label>
出生日期
<select name="year">
<option value="2000">2001</option>
</select>
<select name="mouth">
<option value="12">12</option>
</select>
<select name="day">
<option value="31">31</option>
</select>
</label>
</div>
<div>
<span>咬人猫</span>
<span>咬人猫</span>
<span>咬人猫</span>
</div>
其中label可以实现一种联系更多查看
二、CSS
CSS:层叠样式表(Cascading Style Sheets)
1.css样式
①内部样式:
写在 style 标签中. 嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.
②外部样式
1 .创建一个 css 文件.
2 .使用 link 标签引入 css
<link rel="stylesheet" href="[CSS文件路径]">
创建 demo.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>上帝为你关上一扇门, 然后就去睡觉了</div>
</body>
创建 style.css
div {
color: red;
}
③内联样式
<div style="color:green">带点绿</div>
2.选择器
2.1标签选择器
能快速为同一类型的标签都选择出来.
但是不能差异化选择
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>你好</p>
<p>世界</p>
<div>加油</div>
2.2类选择器
差异化表示不同的标签
可以让多个标签的都使用同一个标签.
<style>
.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red">hello</div> //其中有两个类一个是box,一个是red
<div class="box green">ok</div>
<div class="box red">fun</div>
语法:
①类名用 . 开头的
②下方的标签使用 class 属性来调用.
③一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
④如果是长的类名, 可以使用 - 分割.
⑤不要使用纯数字, 或者中文, 以及标签名来命名类名.
2.3id 选择器
<style>
#ha {
color: red;
}
</style>
<div id="ha">哈哈哈</div>
和类选择器类似.
①CSS 中使用 # 开头表示 id 选择器
②id 选择器的值和 html 中某个元素的 id 值相同
③html 的元素 id 不必带 #
④id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
2.4全部选择器(通配符选择器)
使用 * 的定义, 选取所有的标签
* {
color: red;
}
2.5伪类选择器
选择一个元素的不同状态
a:link { /* 未被点击之前 */
color: green;
}
a:visited { /* 点击过之后 */
color: red;
}
a:hover { /* 鼠标放在 <a> 之上 */
color: blue;
}
a:active { /* 鼠标左键按下但没有松开时 */
color: orange;
}
input:focus { /* 获取到焦点时 */
font-size: 4em;
}
2.5并集选择器
用于选择多组标签. (集体声明)
元素1, 元素2 { 样式声明 }
通过 逗号 分割等多个元素.
表示同时选中元素 1 和 元素 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
1. 把苹果和香蕉颜色改成红色
div, h3 {
color: red;
}
2. 把鸭梨和橙子也都一起改成红色
div,
h3,
ul>li {
color: red;
}
2.6后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素
元素1 元素2 {样式声明}
元素 1 和 元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
ul li a {
color: yellow;
}
或者
ul a {
color: yellow;
}
元素 2 不一定非是 儿子, 也可以是孙子.
2.7子选择器
和后代选择器类似, 但是只能选择子标签.
元素1>元素2 { 样式声明 }
使用大于号分割
只选亲儿子, 不选孙子元素
<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
后代选择器的写法, 会把链接1 和 2 都选中
.two a {
color: red;
}
子选择器的写法, 只选链接 1
.two>a {
color: red;
}
更多选择器可以查看帮助文档
3.常见属性
3.1字体属性
①设置字体
body {
font-family: '微软雅黑','宋体';//优先使用微软雅黑,没有的情况下选择宋体,如果依然找不到,选择默认字体
font-family: 'Microsoft YaHei';
}
字体名称可以用中文, 但是不建议.
多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
如果字体名有空格, 使用引号包裹.
建议使用常见字体, 否则兼容性不好.
②大小
p {
font-size: 20px;
}
不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
可以给 body 标签使用 font-size
要注意单位 px 不要忘记.px像素:绝对单位,em 相对单位
标题标签需要单独指定大小
③粗细
p {
font-weight: bold;
font-weight: 700;
}
可以使用数字表示粗细.
700 == bold, 400 是不变粗, == normal
取值范围是 100 -> 900
④文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
⑤设置文本颜色
color: red;
color: #ff0000;//可以大写可以小写
color: rgb(255, 0, 0);
color: rgba(255, 0, 0,.7);//透明度,可以省略小数点之前的0,
⑥文本对齐
text-align: [值];
center: 居中对齐
left: 左对齐
right: 右对齐
⑦文本装饰
text-decoration: [值];
underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]
⑧文本缩进
控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
⑨行高
行高指的是上下文本行之间的基线距离.
line-height: 40px;
注意: 行高也可以取 normal 等值
3.2背景属性
①背景颜色
background-color: [指定颜色]
默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.
<style>
body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
</style>
<div class="bgc">
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</div>
②背景图片
background-image: url(...);
url 上可以加引号, 也可以不加.
<style>
.bgi .one {
background-image: url(rose.jpg);
height: 300px;
}
</style>
<div class="bgi">
<div class="one">背景图片</div>
</div>
背景图片也可以是渐变色
background-image: radial-gradient(#2193b0 5%, #2193b0 10%, #6dd5ed 20%, #6dd5ed);
③背景平铺
background-repeat: [平铺方式]
重要取值:
repeat: 平铺(默认)
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
<style>
.bgr .one {
background-image: url(rose.jpg);
height: 300px;
background-repeat: no-repeat;
}
<style>
④背景位置
background-position: x y;
参数有三种风格:
1.方位名词: (top, left, right, bottom)
2.精确单位: 坐标或者百分比(以左上角为原点)
3.混合单位: 同时包含方位名词和精确单位
⑤背景尺寸
background-size: length|percentage|cover|contain;
可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法
显示在背景定位区域中。
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域.
3.3圆角矩阵
通过 border-radius 使边框带圆角效果.
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
<div>蛤蛤</div>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 10px;
}
①生成圆形
让 border-radius 的值为正方形宽度的一半即可.
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%;
}
②生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}
③展开写法
border-radius 是一个复合写法. 实际上可以针对四个角分别设置.
border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;
4.元素显示模式
此处只重点介绍两个:
块级元素
行内元素
4.1块级元素
常见的元素:h1 - h6、p、div、ul、ol、li…
特点:
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.
4.2行内元素
常见的元素:a、strong、b、em、i、del、s、ins、u、span
特点:
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素
4.3行内元素和块级元素的区别
块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.
4.4改变显示模式
使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
5.盒模型
每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成
边框 border
内容 content
内边距 padding
外边距 margin
5.1边框
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
支持简写, 没有顺序要求
border: 1px solid red;
可以改四个方向的任意边框.
border-top/bottom/left/right
5.2内边距
padding 设置内容和边框之间的距离.
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
复合写法
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
5.3外边距
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right
复合写法
规则同 padding
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
5.3.1块级元素水平居中
前提:
指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto
三种写法均可.
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:
这个水平居中的方式和 text-align 不一样.
margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.
另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.
5.4去除浏览器默认样式
浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.
为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.
使用通配符选择器即可完成这件事情.
* {
marign: 0;
padding: 0;
}
6.弹性布局
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div>span {
background-color: green;
width: 100px;
}
</style>
6.1flex 布局基本概念
flex 是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
基础概念:
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效
6.2justify-content
设置主轴上的子元素排列方式.
使用之前一定要确定好主轴是哪个方向
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
display: flex;
}
div span {
width: 100px;
height: 100px;
background-color: green;
}
</style>
6.3align-items
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
}
div span {
width: 150px;
background-color: red;
}
</style>
可以使用 align-items 实现垂直居中.
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}
div span {
width: 150px;
height: 100px;
background-color: red;
}
</style>
总结