HTML和 CSS学习笔记.docx
- 文档编号:11389597
- 上传时间:2023-02-28
- 格式:DOCX
- 页数:24
- 大小:613.45KB
HTML和 CSS学习笔记.docx
《HTML和 CSS学习笔记.docx》由会员分享,可在线阅读,更多相关《HTML和 CSS学习笔记.docx(24页珍藏版)》请在冰豆网上搜索。
HTML和CSS学习笔记
HTML和CSS学习
一、HTML篇
1、网页的构造快
每个网页都会包含三个部分:
文本内容、对其他文件的引用、标记
1.1、HTML思想
Html元素描述内容是什么而非看起来是什么样的。
1.2、标记:
标记由元素、属性、值构成。
1.3、对文件名和文件夹名的命名:
1:
文件名采用小写字母,省去切换大小写的麻烦,单词之间使用短横线分隔;
2:
使用正确的拓展名;
1.4、Url:
Uniformresourcelocator同一资源定位符是地址的别名,包含着关于文件的存储位置和浏览器该如何处理它的信息。
URL:
http:
///tofu/index.html;
模式(scheme)主机名路径名:
目录+文件名
常见的模式:
http超文本传输协议:
http:
///shangpin/index.html
ftp文本传输协议;ftp:
///pub/proposal.pdf;
Mailto邮件mialto:
someone@;
绝对URL:
包含了指向目录或者文件的完整信息,包括模式、主机、路径。
相对URL:
以包含URL本身的文件位置为参照点,描述目标文件的位置。
注:
访问同意网站的文件时最好使用相对URL;
2、基本的HTML结构
2.1、文档大纲:
DOCTYPEhtml>
2.2、常见容器
普通页面构成:
页眉、主体内容区域的文章、次要信息的附注栏和页脚
页眉:
headerrole=”banner”
导航:
navrole=”navigation”
主要区域:
mainrole=”main”注:
一个页面只能有一个main
文章:
article注:
article是一个容器;
区块:
session注:
具有相似主题的一组内容;
section和article的区别在于:
section在本质上组织性和结构性更强,而article代表的是自包含的容器。
附注栏:
asiderole=”complementary”
页脚:
footerrole=”contentinfo”
通用容器:
divdivision(分割)块级通用容器
:
span(跨度,范围)行内通用容器
2.3、为元素添加标识符
class和Id的命名规范:
使用短横线分割多个单词【短横线是搜索引擎更容易接受的方式】
2.4、其他常识:
title属性、title元素、h元素
title:
位置:
位于head部分,且必须放在指定字符编码的meta元素后面;
作用:
对SEO优化搜索有非常大的作用,所以命名需要能概括出页面的特点;而且数字控制在60个字符之内(包含空格);
h作用:
对SEO优化有重要作用。
title属性:
任何元素都可以添加title属性,不过多用于链接元素。
3、文本元素
3.1、文本元素使用规则:
文本元素会根据语义产生对应的格式,但不要因为达到某种格式,就乱用文本元素。
3.2、常见的文本元素
段落:
p
细则:
small【通常包括免责声明、注意事项、法律限制、版权信息等】
强调:
strong重要;em重点
图片:
figure【图片】figcaption【图片的标题】
引用参考:
cite【指明对某内容源的引用或参考,如音乐专辑、电影作品的标题】
引述文本:
blockquote引述块级文本q引述行内文本
时间:
time【YYYY-MM-DDThh:
mm:
ss】datetime
datetime属性(或者没有datetime属性的time元素)
必须提供特定的机器可读格式的日期和时间
缩写:
abbr
定义术语:
要定义的术语
上标:
下标:
H2OH2O
联系信息:
address
email标注编辑:
新内容
标注删除:
要删除的内容
标记代码:
要输入的代码
预格式化:
预格式化的文本可以保持文本固有的换行和空格突出显示:
输入希望引起注意的字词
其他:
u:
u元素用于非文本注解;
wbr:
代表“一个可换行处,此处可以在必要的时候进行换行。
【与br不同,wbr不会强制换行,而是让浏览器知道哪里可以根据需要进行换行。
】
ruby:
旁注标记
【rt:
对基准字符进行注解的旁注字符
rp:
用于在不支持ruby的浏览器中的旁注文本周围显示括号】
【ruby元素以及它们的子元素rt和rp是HTML5中为内容添加旁注标记的机制】
bdi:
bdo:
主要是页面中混合了两种不同书写顺序的字符
meter:
用meter元素表示分数的值或已知范围的测量结果
【meter支持好几个属性。
value是其中唯一必需包含的属性。
如果不指定min(最小值)和max(最大值),则默认将它们分别设为0和1.0。
low、high和optimum属性通常共同作用,它们将范围划分为低、中、高三个区间。
optimum代表范围内的最优位置,】
progress:
它指示某项任务的完成进度;
**%saved 支持三个属性:
max:
【任务总量】value【已经完成的量】
如果progress没有嵌套在form元素里面,又需要将它们联系起来,
可以添加form属性并将其值设为该form的id。
4、图像
4.1、web图像和打印图像的区别
格式、尺寸、颜色、透明度、下载速度、动画等六个主要方面还是有区别的。
格式:
质量高,文件小的格式:
jpeg:
有损格式;png、gif无损格式;但png压缩算法更好。
尺寸:
svg可缩放矢量图片;1:
放大或缩小不影响质量,也不影响文件大小。
透明度:
jpeg不支持透明度;gif【索引色透明】、png【索引色+alpha】。
动画:
一般使用:
css、js、H5canvas、svg、flash来创建动画。
保存用gif.
综上所述:
动画:
gif;
透明度:
png;
尺寸:
svg;
质量:
png
4.2、web图片的常见属性
插入图片:
替代文本:
指定尺寸:
5、链接
5.1、链接的组成部分:
1:
目标:
目标可以是跳转到另外的页面;也可以是到其他页面的特定位置:
锚【anchor】
2:
标签:
标签就是中间的那部分。
5.2、创建链接:
标签文本 Target:
target=”_blank”在新的标签页打开;【在PC端这样做很棒,在手机端就不太妙了,所以,慎用】
【小注】href和src的区别:
href:
超文本引用,引用,以链接的形式跳转到另外的页面,而不会在本页面显示。
Src:
源:
引入;将引入的东西在本页面显示。
5.3、创建锚
文本标签
段落 5.4、创建其他类型的链接
邮件:
name@”>邮箱地址
电话:
电话号码 2、CSS篇
1、CSS的构造块
1.1、构造样式的规则:
样式表中的每条规则都有两个主要部分:
选择器(selector)和声明块(declarationblock);
选择器决定那些元素受影响;
声明块以键值对的形式,定义要应用的格式化
1.2、css的继承:
当为某个元素应用css属性时,不仅会影响到该元素,而且还会影响到其分支元素。
1.3、css的层叠:
如果一个元素有多种样式规则,这些样式规则就可能会出现冲突!
解决冲突的方法是要按规则办事:
Css样式层叠规则:
特殊性(行内样式优先级最高)、顺序(最后出现的优先级最高)、重要性(|important)比所有规则的优先级都高;
1.4、属性的值
1:
inherit:
沿袭;该属性值会是当前元素沿袭弗父类元素的属性值。
P{border:
inherit}
2:
预定义的值;
3:
长度和百分数;
长度:
em【一个em的长度与对应元素的字号相等】、px;
百分数:
百分数是相对于父类元素的。
4:
纯数字;
line-height:
1.5【行高】;z-index【将一个元素放置在另一个元素的后面】:
opacity【设置元素的不透明级别(0.0完全透明-------1.0完全不透明)】
5:
url
Background:
url(file.ext);file.ext指代具体的目标资源的路径和文件名;
6:
颜色:
hex、RGB、HSL【一种工业颜色标准,通过色相,饱和度,明度三个颜色通道】、RGBA、HSLA
其中RGBA和HSLA有透明度(Alpha)
2、操作样式表
2.1、外联式:
2.2、内联式
选择器{}
2.3、行内式
style=””
3、定义选择器
定义选择器的五种标准:
3.1、元素名称
h2{color:
red;}
3.2、元素所在的上下文
根据元素的祖先祖先元素空格后台元素
根据父类元素:
父类元素>子类元素
相邻同胞元素:
同胞元素+相邻同胞元素
普通同胞元素:
同胞元素~普通同胞元素
3.3、元素类或ID
./#classname/idname{}
3.4、元素的伪类或伪元素
伪类:
第一个子元素:
:
first-child;
最后一个子元素:
:
last-child;
如果:
前面没有那将选择所有的第一个子元素;
如果:
前面有,那将从所有的第一个子元素中选择冒号前面的元素。
:
link
:
hover
:
active
:
visited
:
focus
伪元素:
:
第一个字母:
:
:
first-letter
第一行:
:
:
first-line
:
:
before
:
:
after
3.5、元素是否有某些属性和值
【】:
方括号包围目标属性和目标属性值;
=”value”:
属性值等于value的元素;
~=”value”属性值是以空格分隔的多个单词,其中有一个完全匹配指定值;
|=”value”属性值等于这里的value或以value开头的元素将被选中
^=”value”属性值以value开头,value为完整的单词或单词的一部分
$=”value”属性值以value结尾,value为完整的单词或者单词的一部分;
*=”value”属性值至少包括这里的value一次的元素被选中;
4、为文本添加样式
4.1、字体
font-family:
name;【注:
包含多个单词的应使用引号括起来】
替代字体:
font-family:
name1,nane2,name3;【注:
如果没有第一个字体,就使用第二个】
4.2、大小
font-size:
直接使用:
px、特定字号;font-size:
35px;xx-small/x-small/small/medium/large/x-larger/xx-large
使用百分数、emfont-size:
2em/100%;
【em:
父元素】
【rem:
根元素】
4.3、粗细
Font-weight:
三种格式:
bold/bolder/lighter/light/normal;
100~900之间的100的整数倍;400表示正常,700表示粗体;
4.4、倾斜
Font-style:
italic/oblique/normal;
4.5、行高
Line-height:
;
1):
数字,与元素字体大小相乘得出需要的行高;
2):
以em、像素、磅为单位的值;
3):
p%字体大小的百分数;
4.510、同时设置所有的字体值
可以同时设置:
字体的样式、粗细、变体、大小、行高、和字体系列等;
font:
normal/italic/obliquenormal/bold/lighter/400/700sizeline-heightfont-family
4.6、颜色
颜色/十六进制/RGB/HSL/RGBA/HSLA
Color:
colorname/#rrggbbrgb(r,g,b)/rgba(r,g,b,a)/hsla(h,s,l,a)
背景色:
Background-color
background-imageurl()none
background-repeatrepeatrepeat-xrepeat-yno-repeat
background-attachmentfixedscrolllocal
background-positionx:
leftcenterrighty:
topcenterbottom
4.8、间距
单词之间的距离称为:
字间距;word-spacing:
length;normal/0;
字母之间的距离成为:
字偶距;letter-spacing:
length;normal/0;
4.9、缩进
Text-indent:
length;
缩进对内敛元素没有效果;可以设置:
display:
block;display:
inline-block;
4.10、对齐方式
Text-align:
left/right/center/justify
4.11、修改文本大小写
text-transform:
capitalize/uppercase/lowercase/none;
4.12、使用小型大写字母
font-variant:
small-caps/none;
4.13、装饰文本
给文本添加下划线等其他类型的线条;
text-decoration:
underline/overline/line-through/none;
4.14、设置空白属性
设置空白属性就是让浏览器显示额外的空格。
white-space:
pre/nowrap/normal;
pre:
让浏览器显示源文本中所有的空格和回车;
nowrap:
确保所有空格不断行,文本全部显示在一行。
overflow:
hidden;text-overflow:
ellipses;超出的文本会显示为省略号;
5、用css进行布局
5.1、开始布局的注意事项
1):
内容和显示分离;2):
布局分为固定式fixed和响应式fluid3):
注意浏览器之间的差异性;
5.2、构建页面的原则
总的原则是结构良好、语义化的HTNL;
1:
恰当使用容器元素,将页面分成不同的逻辑区块;
2:
根据许哟啊,可以给容器元素配上角色;
3:
按照一定的顺序来放置内容,确保页面在不使用css的情况下也是合理的。
5.3、常见的容器元素及其对应的角色:
页眉:
headerrole=”banner”
导航:
navrole=”navigation”
主要区域:
mainrole=”main”注:
一个页面只能有一个main
文章:
article注:
article是一个容器;
区块:
session注:
具有相似主题的一组内容;
附注栏:
asiderole=”complementary”
页脚:
footerrole=”contentinfo”
通用容器:
divdivision(分割)块级通用容器
:
span(跨度,范围)行内通用容器
5.4、盒子模型
Margin:
5px;
Border:
5px9px;
Padding:
5px9px11px;
Padding:
5px9px11px0;
使用一个值:
这个值会应用于全部四个边;
使用两个值:
前一个应用上下两边,后一个应用左右两边;
使用三个值:
第一个会应用上边,第二个应用左右两边,第三个应用下边;
使用四个值:
按照顺时针的顺序:
上右下左;
值:
可以是带有单位的数字,百分数,或者em/rem;
Width
Height
5.5、控制元素的显示类型和可见性
显示类型:
块级元素:
显示在单独的行;
行内元素:
显示在行内;
Display:
block:
Inline:
None:
Inline-block:
让元素与其他内容显示在同一行,同时也具有块级元素的属性;
这里的块级元素属性是指:
with、height、margin-top、margin-bottom等;
可见性:
Visibility:
hidden/visible;
5.6、设置元素的高度和宽度
Height:
带单位的数字或者auto
Width:
带单位的数字或者auto或者父元素的百分数;
Min-width:
Min-height:
Max-width:
Max-height:
5.7、使元素浮动
Float:
left/right/none;
Width:
600px;//设置浮动元素显示的宽度
Clear:
left/both/right/none;//设置该属性后,该元素及它后面的元素就会显示在浮动元素的下面;
是容器具有清楚浮动的能力:
clearfix;
5.8、对元素进行定位
相对定位:
Position:
relative;
Top/right/bottom/left:
d;
使用position:
static覆盖position:
relative;
绝对定位:
Position:
absolute;
Top、right、bottom、left:
d;
在栈中定位元素
Z-index:
n;n为元素在定位过的对象堆中的层级的数字;n的值越大,元素在堆中就越高;
5.9、处理溢出问题
Overflow:
visible/hidden/scroll/auto;
Visible:
让所有的内容可见,包括溢出的部分;(这是默认项)
Hidden:
隐藏盒子装不下的内容;
Scroll;无论元素是否需要都给元素添加上滚动条;
Auto;让滚动条仅在访问者访问溢出的内容时才出现;
5.10、使元素垂直对齐
Vertical-align:
baseline/middle/top/bottom/text-top/text-bottom/sub/super/百分比/带单位的值;
Baseline:
使元素的基准线对齐父元素的基准线;
Middle:
使元素位于父元素的中央;
Top:
使元素的顶部对齐当前行里最高元素的顶部
Bottom:
使元素的底部对齐当前行里最低元素的底部
Text-top:
使元素的顶部对齐父元素的顶部;
Text-bottom:
使元素的底部对齐父元素的底部;
Super:
成为父元素的上标;
Sub:
成为父元素的下标;
5.11、修改鼠标指针
Cursor:
pointer【手】/default【箭头】/crosshair【+】/move【四向箭头】/waite【沙漏】/help【?
】/text【I】/progress【沙漏】/auto/x-resize【双向箭头,x:
n、nw;】;
6、列表
6.1、创建列表
所有的列表都是由父元素和子元素组成的。
三种列表类型:
有序列表:
父元素:
ol;子元素:
li;
无序列表:
父元素:
ul;子元素:
li;
描述列表:
父元素:
dl;子元素:
dt【术语】/dd【描述】
6.2、标记
List-style-type:
marker;
Marker:
可以是以下属性中的一种:
disc、circle、square、decimal、upper-alpha、lower-alpha、
Upper-roman、lower-roman、none;
自定义标记:
控制标记的位置:
List-style-option:
inside;outside(default);
Inside:
outside:
6.3、编号
olstart=”n”设置列表的起始编号;
livalue=”n”设置当前列表项目的值;
6.4、同时设置所有的列表样式属性
ul{
List-style:
circleinside;
}
7、表单
7.1、表单的输入和输出元素
7.2、表单的属性
7.3、对表单元素的组织
1:
使用filedsetlegend进行组织;
2:
使用分隔表单元素;
3:
使用说明标签并使用for属性;
4:
使用pattern正则表达式验证;
注意nameidfor的使用规范;
注意使用required/required=”required”;
autofocus/autofocus=”autofoucs”;
multiple/multiple=“multiple”
disabled/disabled=”disabled”;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML和 CSS学习笔记 HTML CSS 学习 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)