整体结构
<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改变宽高
行内元素标签：
spanstrongaemdelCSS默认：
display: inline;凡是带有 inline 的元素，都有文字特征
-
块类元素
特点：独占一行，可以通过css改变宽高
块内元素标签：
divpulliolformaddressCSS默认：
disply: block; -
行级块元素
特点：内容决定改变大小，可以通过css改变宽高
行级块元素标签：
imgCSS默认：
disply: inline-block;
盒子模型
-
内容
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
-
结构图
-
说明
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像
-
宽度和高度的计算
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距;
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
定位
absolute 定位
- 脱离原来位置进行定位
- 位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html>； - absolute 定位使元素的位置与文档流无关，因此不占据空间
relative 定位
- 保留原来的位置进行定位
- 相对自己原来的位置进行定位
- 元素虽然偏移某个距离，但仍然占据原来的空间
ixed 定位
- 元素的位置相对于浏览器窗口是固定位置。
- 即使窗口是滚动的它也不会移动
CSS定位属性
topbottomleftright- 分别对应上，下，左，右位置的值，可用数值 与百分比 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);
效果图
角度渐变
语法
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
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
