第一章
1、HTML网页基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
作用：
1)<!DOCTYPE html>告诉浏览器使用什么规范
2)<head>网页头部
3)<meta charset="UTF-8">设置网页的字符编码
4)<title>网页标题
5)<body>主体部分
2、标题标签
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
3、段落标签
<p>
4、换行标签
<br />
5、水平线标签
<hr />
6、字体样式标签
<strong>、<b>加粗效果
<em>、<i>斜体效果
7、注释和特殊符号
注释：<!-- -->
空格：
大于号：>
小于号：<
引号："
版权符号：©
8、图像标签
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
9、超链接标签
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
target属性的值：_blank和_self
10、锚链接
创建跳转标记：<a id="marker">乙位置</a>
创建跳转链接：<a href="#marker">甲位置</a>
11、功能性链接
电子邮件：<a href="mailto:[email protected]">联系我们</a>
12、块元素和行内元素
块元素特征：无论内容多少，该元素独占一行。
行内元素特征：内容撑开宽度，左右都是行内元素的可以排成一行。
第二章
1、无序列表
<ul>
<li>列表项</li>
</ul>
特性：
1)没有顺序，每个<li>标签独占一行（块元素）
2)默认<li>标签项前面有个实心小圆点
3)一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
type属性的值：disc(实心圆)(默认值)、circle(空心圆)、square(实心方块)
2、有序列表
<ol>
<li>列表项</li>
</ol>
特性：
1)有顺序，每个<li>标签独占一行（块元素）
2)默认<li>标签项前面有顺序标记
3)一般用于排序类型的列表，如试卷、问卷选项等
type属性的值：1(阿拉伯数字)(默认值)、a(小写字母)、A(大写字母)、i(小写罗马数字)、I(大写罗马数字)
3、定义列表
<dl>
<dt>列表项</dt>
<dd>内容</dd>
</dl>
特性：
1)没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
2)默认没有标记
3)一般用于一个标题下有一个或多个列表项的情况
4、表格
<table border="1">
<tr>
<td colspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Data</td>
</tr>
</table>
<table>表格标签
<tr>行标签
<td>单元格标签
colspan属性：跨列
rowspan属性：跨行
5、媒体元素
<video src="vedio/vedio.mp4" width="800px" height="800px" controls autoplay />
<audio src="vedio/vedio.mp4" width="800px" height="800px" controls autoplay />
<video>视频标签
<audio>音频标签
controls属性：提供播放、暂停和音量的控件
autoplay属性：自动播放
6、结构元素
<header>标题头部区域的内容（用于页面或页面中的一块区域）
<footer>标记脚部区域的内容（用于整个页面或页面的一块区域）
<section>Web页面中的一块独立区域
<article>独立的文章内容
<aside>相关内容或应用（常用于侧边栏）
<nav>导航类辅助内容
7、内联框架
<iframe name="框架标识名" src="引用页面地址" />
<a href="引用页面地址" target="框架标识名">iframe</a>
第三章
1、表单语法：<form method="get/post" action="result.html">
method属性：规定如何发送表单数据。
属性值：get、post
action属性：表示向何处发送表单数据
2、表单元素语法：<input type="text" name="fname" value="text" />
type属性：指定元素的类型。
属性值：text(默认值)、password、checkbox、radio、submit、reset、file、hidden、image 和 button
name属性：指定表单元素的名称。
value属性：元素的初始值。type 为 radio时必须指定一个值。
size属性：指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength属性：type为text 或 password 时，输入的最大字符数。
checked属性：type为radio或checkbox时，指定按钮是否是被选中。
3、列表框：
<select name="列表名称">
<option value="选项的值" selected="selected">…</option>
<option value="选项的值">…</option >
</select>
selected属性：默认选中项
4、多行文本域：
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>
cols属性：显示的列数
rows属性：显示的行数
5、文本域：<input type="file" name="files" />
6、邮箱：<input type="email" name="email"/>
7、网址:<input type="url" name="userUrl"/>
8、数字：<input type="number" name="num" min="0" max="100" step="10"/>
9、滑块：<input type="range" name="range1" min="0" max="10" step="2"/>
10、搜索框：<input type="search" name="sousuo"/>
11、隐藏域：<input type="hidden" value="666" name="userid">
12、readonly属性：只读文本框
disabled属性：禁用
13、表单元素的标注：
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
14、表单出击验证的方法：
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
placeholder属性：文本框输入内容提示
<input type="text" name="username" required/>
required属性：规定文本框填写内容不能为空，否则不允许用户提交表单
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
pattern属性：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
第四章
1、CSS基本语法结构
选择器{
属性:值;
}
2、行内样式语法：
<h1 style="color:red;">style属性的应用</h1>
内部样式表语法：
<style>
h1{color: green; }
</style>
引用外部样式表语法：
<link href="style.css" rel="stylesheet" type="text/css" />
3、CSS3基本选择器的种类和特点
标签选择器：标签名 { 属性名:属性值;}
直接应用于HTML标签
类选择器：类名 { 属性名:属性值;}
可在页面中多次使用
ID选择器：id名 { 属性名:属性值;}
在同一个页面中只能使用一次
4、基本选择器的优先级
ID选择器>类选择器>标签选择器
5、层次选择器
后代选择器：E F
子选择器：E>F
相邻兄弟选择器：E+F
通用兄弟选择器：E~F
6、结构伪类选择器
E是父元素中的第一个元素：E:first-child
E是父元素中的最后一个元素：E:last-child
E是父元素中的第N个元素：E:nth-child(n)
E是父元素中的E类型的第一个元素：E:first-of-type
E是父元素中的E类型的最后一个元素：E:last-of-type
E是父元素中的E类型的第N个元素：E:nth-of-type(n)
7、属性选择器
E元素要有能匹配的属性名：E[属性名]
E元素要有能匹配的属性名和属性值：E[属性名=属性值]
E元素要有能匹配的属性名和属性值的前缀匹配：E[属性名^=属性值]
E元素要有能匹配的属性名和属性值的后缀匹配：E[属性名$=属性值]
E元素要有能匹配的属性名和属性值的任意位置匹配：E[属性名*=属性值]
第五章
1、字体样式
字体类型：font-family
字体大小：font-size
字体风格：font-style
字体的粗细：font-weight
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
2、文本样式
文本颜色：color
元素水平对齐方式：text-align
首行文本的缩进：text-indent
文本的行高：line-height
文本的装饰：text-decoration
3、文本阴影
text-shadow : 颜色 X轴位移 Y轴位移 阴影模糊半径;
4、超链接伪类
未单击访问时超链接样式：a:link
单击访问后超链接样式：a:visited
鼠标悬浮其上的超链接样式：a:hover
鼠标单击未释放的超链接样式：a:active
设置伪类的顺序：a:link->a:visited->a:hover->a:active
5、列表样式
类型：list-style-type
图像：list-style-image
位置：list-style-position
列表属性的顺序：列表类型→列表位置→列表图像
6、背景样式
背景颜色：background-color
背景图像：background-image
背景重复方式：background-repeat
背景定位：background-position
背景属性的顺序：背景颜色→背景图像→背景定位→背景重复方式
背景尺寸：background-size
7、背景颜色渐变样式
线性渐变：background: linear-gradient ( 定位，颜色，颜色，......)
第六章
1、边框样式
边框颜色：border-color
边框粗细：border-width
边框样式：border-style
border简写：粗细 样式 颜色
2、外边距：margin
内边距：padding
网页居中对齐：margin:0px auto;
3、盒子模型总尺寸=边框+内边距+外边距+内容宽度
拯救布局：box-sizing
4、圆角边框：border-radius
利用border-radius属性制作圆形的两个要点：
1)元素的宽度和高度必须相同
2)圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
5、盒子阴影：box-shadow:阴影类型内阴影 X轴位移 Y轴位移 阴影模糊半径 阴影颜色
第七章
1、常见的网页布局
1)1-3-1
2)1-2-1
2、标准文档流的默认排列方式
元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。
3、display属性的值
1)block：元素会被显示为块级元素，该元素前后会带有换行符
2)inline：元素会被显示为内联元素，该元素前后没有换行符
3)inline-block：元素既具有内联元素的特性，也具有块元素的特性
4)none：元素不会被显示
4、float属性的值
1)left：元素向左浮动
2)right：元素向右浮动
3)none：元素不浮动，并会显示在其文本中出现的位置
5、clear属性的值
1)left：在左侧不允许浮动元素
2)right：在右侧不允许浮动元素
3)both：在左、右两侧不允许浮动元素
4)none：允许浮动元素出现在两侧
6、overflow属性的值
1)visible：内容不会被修剪，会呈现在盒子之外
2)hidden：内容会被修剪，并且其余内容是不可见的
3)scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
4)auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
7、伪类after的使用
选择器名称:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
8、清除浮动，防止父级边框塌陷的四种方法
1)浮动元素后面加空div
简单，空div会造成HTML代码冗余
2)设置父元素的高度
简单，元素固定高会降低扩展性
3)父级添加overflow属性
简单，下拉列表框的场景不能用
4)父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
9、inline-block和float的区别
display:inline-block
1)可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
2)位置方向不可控制，会解析空格
3)IE 6、IE 7上不支持
float
1)可以让元素排在一行并且支持宽度和高度，可以决定排列方向
2)float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
第八章
1、position属性的值
1)static：没有定位
2)relative：相对定位
3)absolute：绝对定位
4)fixed：固定定位
2、相对定位元素的规律、特性和使用场景
规律：
1)设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
2)设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
3)设置相对定位的盒子原来的位置会被保留下来
特性：
1)相对于自己的初始位置来定位
2)元素位置发生偏移后，它原来的位置会被保留下来
3)层级提高，可以把标准文档流中的元素及浮动元素盖在下边
使用场景：
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量。
3、绝对定位元素的规律、特性和使用场景
规律：
1)使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
2)如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
3)绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
4)元素位置发生偏移后，它原来的位置不会被保留下来
特性：
1)绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
2)元素位置发生偏移后，原来的位置不会被保留
3)层级提高，可以把标准文档流中的元素及浮动元素盖在下边
4)设置绝对定位的元素脱离文档流
使用场景：
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
4、固定定位元素的规律
规律：
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
特性：
1)相对浏览器窗口来定位
2)偏移量不会随滚动条的移动而移动
使用场景：
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
5、z-index属性
1)z-index属性值：整数，默认值为0
2)设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
3)z-index值大的层位于其值小的层上方
6、元素透明度
1)opacity:x
x值为0~1，值越小越透明
2)filter:alpha(opacity=x)
x值为0~100，值越小越透明
第九章
1、变形函数
translate()：平移函数，基于X、Y坐标重新定位元素的位置
scale()：缩放函数，可以使任意元素对象尺寸发生变化
rotate()：旋转函数，取值是一个度数值
skew()：倾斜函数，取值是一个度数值
2、transition过度属性
1)过渡属性（ transition-property ）
定义转换动画的CSS属性名称
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
2)过渡所需的时间（ transition-duration ）
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
3)过渡动画函数（ transition-timing-function ）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
4)过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行
3、animation动画
使用@keyframes制作关键帧
语法：
animation:
animation-name（由@keyframes创建的动画名称）
animation–duration（动画时间）
animation-timing-function（动画方式）
animation-delay（延迟时间）
animation-iteration-count（动画的播放次数）
animation-direction（动画的播放方向）
animation-play-state（动画的播放状态）
animation-fill-mode;（动画开始之前和结束之后发生的操作）
说明：
1)动画的播放次数（animation-iteration-count）
值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放
2)动画的播放方向（animation-direction）
normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放
3)动画的播放状态（animation-play-state）
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
4)动画发生的操作（animation-fill-mode）
forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果
23、老师的笔记，html基础全部要记住的东西
猜你喜欢
转载自blog.csdn.net/qq_44739706/article/details/90114190
今日推荐
周排行