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元素）
必须提供特定的机器可读格式的日期和时间
缩写：
abbrNFL
定义术语：
要定义的术语
上标：
下标：
H2OH2O
联系信息：
address
emailaa@标注编辑：
新内容
标注删除：
要删除的内容
标记代码：
要输入的代码
预格式化：
预格式化的文本可以保持文本固有的换行和空格突出显示：
输入希望引起注意的字词
其他：
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”;
升级会员 