整体结构
<html> <!--开始标签-->
<html>
<head>
<meta charset="utf-8" /> <!--字符编码避免网页文字乱码-->
<title>网页的标题</title>
</head>
<body>
<!--网页的基本内容-->
</body>
</html> <!--结束标签-->
初级标签
-
标题标签
H1,H2,…,H6。(1–>6)大标题–>小标题,成对出现,开始标签
<H1>
,一个结束标签</H1>
。 -
段落标题
段落是通过
<p>
标签进行定义的,成对出现,开始标签<p>
,一个结束标签</p>
。 -
文字标签
<strong></strong>
,加粗文字标签;<em></em>
斜体文字标签,可嵌套 -
符号标签
<del></del>
,在文字上添加删除线,如:文字
高级标签
-
块状标签
<div></div>
,每一个div占满一整行。<span></span>
,文本信息在一行展示 -
空格和换行,尖括号
<br>
换行标签,<
左尖括号,>
右尖括号 -
有序列表标签
<ol> <!--网页显示--> <li>第一条</li> <!--1.第一--> <li>第二条</li> <!--2.第二--> <li>第三条</li> <!--3.第三--> </ol>
<ol>
可以增加属性,type,换排序符号;如
<ol type="A">
,就从A,B顺序排列;符号可以换A,a,1,i I
,不填默认数值1
;倒叙
<ol reversed="reversed">
;<ol start="数值">
,更换开始符号的数值; -
无序列表标签
<ul> <li>第一条</li> <li>第二条</li> <li>第三条</li> </ul>
默认每一段文本前面显示小圆点
属性:
<ul type=disc>
默认值实心小圆点,circle
空心小圆点,square
小方块 -
图片插入
<img src="图片路径">
包括:
1,网上url;
2,本地的绝对路径(同一个文件夹下,直接写图片文件名);
3,本地的相对路径(不同一个文件夹下,写完整图片路径);
属性:
1,
<img src="图片路径" alt="图片占位符">
,即图没有加载出来时显示2,
<img src="图片路径" title=”图片提示符“>
,即鼠标移到图时显示 -
链接标签a
- 超链接:
<a href="网址">网站名</a>
- 锚点:
<a href="#id">文字</a>
;id指某个标签的id名字,运用于:页面目录,回到顶部 - 打电话或发邮件:
<a href="tel:电话号码">文字</a>
;<a href="mailto:邮箱地址">文字</a>
- 协议限定符:使用js
属性:
target=_blank
点击链接在新页面弹出 - 超链接:
-
表单
-
信息输入框
<form method="get" action="" > <!--action:发送出去的地址--> name: <input type="text" name="name" /> <!--文本输入框,name:数值内容--> password: <input type="password" name="password" /> <!--密码输入框,name:数值内容--> <input type="submit" value="Submit" /> <!--提交按键,value:数据值--> </form>
-
单选框
<form method="get" action="" > <!--action:发送出去的地址--> <p> 选择其中一个 </p> 1.第一个<input type="radio" name="name" value:"one"> <!--name相同表示同个选择问题--> 1.第二个<input type="radio" name="name" value:"two"> 1.第三个<input type="radio" name="name" value:"three"> <input type="submit" value="Submit" /> <!--提交按键, value:数据值--> </form>
-
副选框
<input type="checkobx" name="题目" value:"提交的数值"> <!--大致与上面相同-->
-
选项下拉菜单
<select name=""> <option>选项一</option> <option>选项二</option> </select>
表单添加默认选项:标签后加入
checked="checked"
-
CSS
引入CSS
-
行间样式
<div style="css定义内容"> </div>
-
页面级CSS
在头部标签
<head>
下加入<style type="text/css"> <!--css定义内容--> </style>
-
外部CSS文件 新加一个文件后缀为.CSS
在头部标签
<head>
下加入<link rel="stylesheet" type="text/css" href="CSS文件位置"/>\
CSS选择器
-
id
,在div标签加入id名<!--id创建--> <div id="填id名"></div> <!--下面css定义,引入css页面填写--> #id名{ "css定义内容" }
-
class
,在div标签加入class名<!--class创建--> <div class="填calss名"></div> <!--下面css定义,引入css页面填写--> #id名{ "css定义内容" }
-
标签选择
<!--下面css定义,引入css页面填写--> 标签名{ "css定义内容" }
-
属性
,如[id],[class],[id=“123”]…<!--下面css定义,引入css页面填写--> [属性]{ "css定义内容" }
-
通配符
,对所以标签都生效<!--css定义,引入css页面填写--> *{ "css定义内容" }
-
父子选择器/派生选择器
<div> <span>1</span> <!--对 1 进行css定义--> </div> <!--下面css定义,引入css页面填写--> div span{ "css定义内容" }
-
直接子元素选择器
<div> <span>1</span> <!--对 1 进行css定义--> <span>2</span> </div> <!--下面css定义,引入css页面填写--> div > span{ "css定义内容" }
-
并列选择器
<div> 1 </div> <div calss="demo"> 2 </div> <!--对 2 进行css定义--> <p calss="demo"> 3 </p> <!--下面css定义,引入css页面填写--> div.demo{ "css定义内容" }
-
分组选择器
<!--对 1,2,3 进行css定义--> <em> 1 </em> <strong> 2 </strong> <span> 3 </span> <!--下面css定义,引入css页面填写--> em,strong,span{ "css定义内容" }
-
伪类选择器
<!--将鼠标悬浮在改标签时的变化,css定义--> <a href="链接地址">链接文本</a> <!--下面css定义,引入css页面填写--> a:hover{ "css定义内容" }
CSS选择器的优先级
!import `> `行间样式` > `id` > `class` =`属性` > `标签选择` > `通配符
!import
在CSS定义内容后可加上
优先级是根据各个选择器的权重大小
比较的
选择器 | 权重 |
---|---|
!import | Infinity (无穷大) |
行间样式 | 1000 |
id | 100 |
class 属性 伪类 | 10 |
标签 伪元素 | 1 |
通配符 | 0 |
注
:权重之间是256进制
CSS语法
-
基本样式
选择器{ 属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3; } /*例如定义一个div*/ div{ width:100px; height:100px; background:red; }
-
文字定义
font-size:16px; /* 调整文字大小 */
font-weight:bold; /* 调整文字粗细 可选属性,默认是 "normal","bold" 是加粗,可直接写数值: "100-900" 之间。*/
font-style:normal; /* 属性值:"italic" 斜体的字体样式, "oblique" 倾斜的字体样式*/
font-family:字体名称; /* 可以修改显示的字体 */
/*字体颜色定义,三种方法*/
color:rgb(0,0,0); /* 红,绿,蓝 三个颜色的值 0-255*/
color:#000000; /* 可以分开00-00-00,代表红,绿,蓝的值,用16进制数表示 */
color:red; /*直接所以英文颜色名字*/
-
段落文字定义
/* 段落文字水平居中 */ text-align:center; /* 可以选属性,靠左 "left",靠右:"right" */ line-height:10px; /* 行高,行间距 */ text-indent:2em; /* 首行缩进两个字符大小;1 em= 1 font-size */ text-decoration:line-through; /* 删除线 */ text-decoration:underline; /* 下划线 */ text-decoration:overline; /* 上划线 */
-
边框
borde(边框)
/* 边框宽度 | 边框样式 | 边框颜色 */ border:1px dashed green; /* "dashed" 虚线;"solid" 实线 */ /*可以分开4个边角定义*/ /* 例如左边left,可选 tiop,right,bottom */ border-left:1px dashed green;
margin(外边距)
padding(填充)
margin/padding:1px ,margin/padding:30%;
对应四个上,下,左,右位置大小的值
可拆开, margin/padding-top,依此类推
元素的类型
每一个元素都有默认的
display
属性值;
-
行类元素
特点:内容决定元素所占位置,不可以通过css改变宽高
行内元素标签:
span
strong
a
em
del
CSS默认:
display: inline;
凡是带有 inline 的元素,都有文字特征
-
块类元素
特点:独占一行,可以通过css改变宽高
块内元素标签:
div
p
ul
li
ol
form
address
CSS默认:
disply: block;
-
行级块元素
特点:内容决定改变大小,可以通过css改变宽高
行级块元素标签:
img
CSS默认:
disply: inline-block;
盒子模型
-
内容
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
-
结构图
-
说明
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像
-
宽度和高度的计算
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距;
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
定位
absolute 定位
- 脱离原来位置进行定位
- 位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
<html>
; - absolute 定位使元素的位置与文档流无关,因此不占据空间
relative 定位
- 保留原来的位置进行定位
- 相对自己原来的位置进行定位
- 元素虽然偏移某个距离,但仍然占据原来的空间
ixed 定位
- 元素的位置相对于浏览器窗口是固定位置。
- 即使窗口是滚动的它也不会移动
CSS定位属性
top
bottom
left
right
- 分别对应上,下,左,右位置的值,可用数值 与百分比 top:1px ,top:30%;
利用绝对定位居中
.conter{
with:100px;
higth:200px;
/* 方法一 */
position:absolute;
left:50%;
top:50%;
margin-top: -100px; /* ⾼度的⼀半 */
margin-left: -50px; /* 宽度的⼀半 *
/* 方法二 */
position:absolute;
left:0; top:0; right:0; bottom:0;
margin:auto; /*实现绝对定位元素的居中(上下左右均0位置定位;margin: auto)*/
/* 子绝父相的居中*/
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 让子盒子往左+往上走自己的一半 */
}
伪元素
伪元素:不存在文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
::after和::beore
/*标签前面*/
.item::before {
content: ''; /* 内容 ,不需要可以空,但是必定写上*/
color: red /* 和其他正常元素一样都可以定义其他属性*/
}
/*标签后面*/
.item::after {
content: '';
color: red
}
margin塌陷,合并
BFC
块级格式化上下文,它是一个独立的渲染区域,让处于BFC内外的元素相互隔离,使内外元素的布局不会相互影响。
触发方法:1.
position:absolute;
2.disply:inline-block;
3.float:left/right;
4.overflow:hidden;
注意:
position:absolute;
float:left/right;
把内部元素转换成inline-block
margin塌陷*
父子关系的子元素里,让子元素距离父元素的顶部50px,如果直接只给子元素
margin-top:50px;
子元素并没有距离父元素顶部50px,而是让父元素距离顶部有了50px的距离,也就是父元素的顶棚对子元素来说没有作用
,相当于塌陷下来了,这就是所谓的margin塌陷。解决方式
方案1: 子元素的margin-top改为padding-top 方案2:给父元素添加样式触发BFC
margin合并
- 两个兄弟元素,一个设置下边距为50px,一个设置上边距为30px;
- 结果:两个元素之间的间距是50px,也就是它们的margin-top和margin-bottom合并了,显示的是较大值。
- 解决方案
方案1:给其中一个兄弟元素套一个父元素,并且设置为overflow:hidden
方案2:只给其中一个元素margin-top或margin-bottom设置想要的间距
CSS float 属性
float属性指定一个盒子(元素)是否应该浮动。
注意: 绝对定位的元素忽略float属性;
div{
float:right; /* 向右浮动 */
}
div{
float:left; /* 向左浮动 */
}
浮动元素会产生浮动流
- 浮动流元素,块级元素(block)看不见,会覆盖浮动流元素
- 产生BFC的元素和文本类属性(inline)的元素看得到浮动元素,不会覆盖
解决方法
-
方法一
给浮动的父级元素设置高度来占位,这样后面的元素就不会向上补齐。
-
方法二 在浮动元素的后面添加一个元素,并添加一个
clear:both
的属性来清除浮动 -
方法三
利用
overflow: hidden/auto
清除浮动。子元素可以撑开父级的高度 -
方法四
利用伪元素清除浮动,给父级添加伪元素
.item::after { content: ''; display: block; clear:both; }
CSS补充
-
单行文本超出容器截断文字用
...
省略white-space: nowrap; /* 文本强制在一行上显示 */ overflow: hidden; /*对超出内容进行裁减 */ text-overflow:ellipsis; /* 显示省略符号...来代表被修剪的文本*/
-
背景图片
div{ background-image:url(图片路径); /* 插入背景图片 */ background-repeat:no-repeat; /* 如果图片小,默认下,铺满容器,no-repeat取消重复 */ background-position:center; /* 图片位置 */ /* 图片位置可用值: left top left top .... ===== x% y% 水平垂直位置 */ }
-
嵌套问题
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
特殊注意:
p
标签不能嵌套div
标签a
标签不能嵌套a
标签
仿写淘宝静态网页笔记
重置样式写网页时,新建一个reset.css,用来重置HTML页面的样式,因为许多标签默认有padding和margin
CSS@用法
/*
@charset 设置样式表的编码
@import 引入其他样式文件
@media 媒体查询
@font-face 自定义字体
*/
设置网页图标
<link rel="icon" href="favicon.ico">
/* ico的图标的格式 其他格式需要转换成ico格式才可设置网页图标篇 */
效果图
网页的logo图片通常用H标签
base标签的作用
一个单标签,位于网页头部文件的head标签内,一个页面最多只能使用一个base元素,用来提供一个指定的默认目标,也算是一种表达路径和连接网址的标记
base target属性
/* 例如 */
<base target="_blank">
target属性是网页窗口的打开方式,在base标签中设置该属性,那么页面中所有的链接都将遵循这个方式来打开网页,分别有如下几种选择:
_blank
:在新窗口打开链接页面_parent
:在上一级窗口中打开链接。_self
: 在当前窗口打开链接,此为默认值,可以省略。_top
: 在浏览器的整个窗口打开链接,忽略任何框架
引入字体图标
阿里巴巴矢量图标库
- 选择想要的图标加入购物车
- 然后进入购物车点击下载代码,解压
- 项目目录下新建了个fonts目录来放
iconfont.ttf
文件 - 在index.css通过@引入字体和css
怪异盒模型
盒模型:
1)标准盒模型
总宽度 = border(左右) + width + padding(左右)
总高度 = border(上下) + height + padding(上下)
2)IE混杂模型(怪异盒模型 --> box-sizing: border-box)
总宽度 = width
总高度 = height
以图换字
网速不够的时,浏览器就会采用默认的加载策略,也就是去掉网页的css和javaScript.但这时仍需保证网站的可用性,所以采用以图换字方法
-
文字隐藏
/* 文字放span标签 设置display隐藏 */ h1 { width: 66px; height: 66px; background: url(...); font-size: 12px; } span { display: none; }
-
负缩进
h1 { width: 66px; height: 66px; background: url(...); font-size: 12px; text-indent:-9999px; }
-
字体大小
h1 { width: 66px; height: 66px; background: url(...); font-size: 0; }
渐变颜色
线性渐变
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/* 方向(可省略,默认:to bottom), 起始颜色, 结束颜色*/
从上到下(默认情况下)
background-image: linear-gradient(#e66465, #9198e5);
效果图
![img](https://picgo-fantasy06.oss-cn-guangzhou.aliyuncs.com/img/image-20220515103930539.png)
角度渐变
语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
/* 与上类似*/
实例
background-image: linear-gradient(-90deg, red, yellow);
效果图
使 ul 列表元素居中对齐
- 当ul列表中的所有li元素需要在父级盒子内部居中显示时,不能用 float: left;
- 直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block,就可以实现居中显示。
表格布局
-
table
标签/* 表头为th;普通单元格为td;行为tr */ <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>100</td> </tr> <tr> <td>February</td> <td>80</td> </tr>
效果图:
-
淘宝实用
/* 边框模式---合并的模式:即两个单元格之间的的边框只需要显示一个就行 */ table { border-collapse: collapse; } th,td { padding: 0; }
.webp(图片格式)
- .webp 是谷歌开发的一种图片格式,只能用于在网站中显示,其体积相较于普通的图片格式小得多,且图片的清晰度不变,目前 IE不支持、火狐在65以上的版本支持,谷歌支持。
词强制换行
/* 在空格的地方强制换行 */
word-break: keep-all;
HTML5 CSS3
要在父级盒子内部居中显示时,不能用 float: left;
- 直接在ul中设置"text-align: center;", 再将li元素的display设置为inline-block,就可以实现居中显示。
表格布局
-
table
标签/* 表头为th;普通单元格为td;行为tr */ <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>100</td> </tr> <tr> <td>February</td> <td>80</td> </tr>
效果图:[外链图片转存中…(img-58ri2rzO-1675587737376)]
-
淘宝实用
/* 边框模式---合并的模式:即两个单元格之间的的边框只需要显示一个就行 */ table { border-collapse: collapse; } th,td { padding: 0; }
.webp(图片格式)
- .webp 是谷歌开发的一种图片格式,只能用于在网站中显示,其体积相较于普通的图片格式小得多,且图片的清晰度不变,目前 IE不支持、火狐在65以上的版本支持,谷歌支持。
词强制换行
/* 在空格的地方强制换行 */
word-break: keep-all;
HTML5 CSS3
![HTML5CSS3](https://picgo-fantasy06.oss-cn-guangzhou.aliyuncs.com/img/HTML5CSS3.png)