Web-HTML+CSS入门笔记

一、 Web-HTML入门笔记
1.注释无法嵌套。
2.a标签：可做跳转、下载、锚点。
属性href必须有；
属性target的值：
_blank：在新的标签页打开连接；
_self：在当前页面打开连接（默认情况）；
外部连接：域名；
内部连接：非域名；
锚点连接：用于跳转到指定的名称的部件处，目标部件名前必须打上#；

伪类一般用在a标签中，分别有4个：link（默认情况）、visited、hover、active。
伪类的语法格式：a:伪类{a的样式}；

锚点连接例子：
这里是顶部，单击可到达底部
这里是底部，单击可到达顶部
3.audio标签：
属性src：音频的URL；
属性autoplay：自动播放；
属性controls：出现播放控件；
属性muted：静音；
标签中间放打开失败的提示信息。
4.video标签：
属性src：播放的视频的URL；
属性autoplay：自动播放；
属性controls：出现播放控件；
属性width：设置视频的宽度；
属性height：设置视频的高度；
属性poster：播放前显示海报，海报图片的URL；
属性width、height：当只修改某一个时，另一个会等比例缩放；
标签中间放打开失败的提示信息。
5.ul、li标签：ul是一个无序列表区域，li是列表里的项；子项里可以嵌套列表；
ul里的属性type：
disc：实心小圆点（默认情况）；
square：实心正方形；
circle：空心小圆圈；
ul与li必须组合使用。
6.ol、li标签：ol是一个有序列表区域，li是列表里的项；子项里可以嵌套列表；
ol里的属性type：
1：li前的是阿拉伯数字（默认情况）；
i：li前的是小写罗马数字；
I：li前的是大写罗马数字；
a：li前的是小写字母；
A：li前的是大写字母；
ol与li必须组合使用。
7.dl、dt、dd标签：dl是一个自定义列表域，dt是概念名词、dd是对概念的描述；
子项里可以嵌套列表；
dl、dt、dd必须组合使用。
例子：

1.江户川柯南：: 真实身份是工藤新一
2.毛利小五郎：: 一个老油条

8.p标签：段落标记。 9.font标签：属性size的值：size = [1,7]。 10.b标签与strong标签：都是加粗效果，只是名称不同。 11.i标签与em标签：都是强调，即斜体效果，只是名称不同。 12.pre标签：在页面中，原样输出标签中的文本。 13.u标签：一个下划线，尽量不使用。 14.del标签：一个删除横线，不常用。 15.sub标签：一个下标效果。 16.sup标签：一个上标效果。 17.hn标签：一套标签，其中n = [1,6]，常用于做标题，n与字体大小呈负相关。 18.small标签：相对其前一个标签里的字体大小小一号。 19.big标签：相对其前一个标签里的字体大小大一号。 20.div标签：一个div独占一行，其默认宽度为浏览器宽度的100%。 21.span标签：多个span可并排一行，其宽度、高度、边距均不可修改；用于修饰你想修饰的文字。 22.table标签：属性border：整个表格边框的宽度；属性bordercolor：边框的颜色；属性width：整个表格的宽度；属性height：整个表格的高度；属性cellspacing：单元格之间的间距；属性cellpadding：单元格中的内容与单元格的间距； table的结构： table：一个表格区域； caption：一个表格的标题内容； thead：一个表头区域； tr：表的一行区域； td：一个普通的单元格； th：一个表头单元格的内容； tbody：一个表格主体区域； tfoot：一个表格尾部的区域；例子： …… …… ……

一张表的标题内容
表头单元格的内容
普通单元格的内容
表脚注单元格的内容

table的特性：一个table独占“一行”，单元格是内容撑开宽度，支持宽高；

对表格加样式，就加在table、th、td中，不要对其他表格的东西加样式；
默认情况下，单元格的宽度和高度自动按需分配；
每一列必须设置宽度；
若想固定单元格的宽高，则需要设置单元格的宽高；

单元格的合并：合并前需要去掉结构化区域，同时记得删除原来的单元格，即删除紧跟着它的相应个数的单元格；
单元格的属性：
属性rowspan：跨行合并；
属性colspan：跨列合并；
23.form标签：
属性action：数据发送的目标URL；
属性method：数据发送的方式，为get或post；
get：
在URL中可以看到数据，数据传送量小，数据传送的格为：
?name1=value&name2=value……；
post：
在URL中看不到数据，数据传送量较大；
属性enctype：当input标签里的type为file时，必须将enctype的值置为“multipart/form-data”，同时将method的值置为“post”；
24.label标签：label标签没有任何特效，用于将内容与input关联起来，一般用在单复选框中；
使用方法：
a)单选框或多选框，直接将单复选框包住即可。ie6不支持这种用法；
b)关联的内容；ie6支持；
25.textarea标签：一个多行文本域；属性name：多行文本域的名称。
26.select、option标签：select是一个下拉框域，option是下拉列表里的一个子项；select与option一般组合使用；
select的属性：
属性name：下拉列表框的名称；
属性multiple：允许同时选中多个子项；
option的属性：
属性value：被选中的一个值；当没有value时，提交的内容是option里的内容；
属性selected：与单复选框里的checked的意思一样；
27.iframe标签：将当前页面与iframe内的东西分离开。
在iframe中可以存放另一个网页或文件；
属性src：显示文档的URL；
属性frameborder：是否显示框架的边框，0则不显示，1则显示；
属性width：框架的宽度；
属性height：框架的高度；
属性name：框架的名称，把该名称填入a标签里的target，则a跳转的内容会显示在该框架中；
属性scrolling：是否显示框架滚动条，yes则显示，no则不显示，auto则自动；
标签中间放打开失败的提示信息：
28.frameset标签：
frameset是在整体上划分空间，而frame是具体的部分；frameset与frame必须组合使用；
使用框架集，必须去掉body标签；
frameset的属性：
属性rows：将空间拆分成多少行，多行间的大小用英文逗号隔开；
属性clos：将空间分成多少列，多列间的大小用英文逗号隔开；
例子：

29.几个常用的特殊字符：：空格；：大一点的空格 >：> <：< &：& 30.
：一个换行标记。 31.

：一条水平分割线。 32. ：属性src:图片的URL；属性alt:图片打开失败显示的文字；属性title：鼠标放在图片上时显示的文字；属性width、height：当只修改某一个时，另一个会等比例缩放；

img标签默认会在图片下多出几px的间隙；
去除该间隙的方法：给img加上vertical-align:top\middle\bottom；
33.：对提供的资源依次进行选择，直到遇到能够播放的、或选择完为止；
属性src：播放的音频或视频的URL；
属性type：audio或者video；
必须与audio标签或video标签组合使用。
34.：支持宽高，一般不改单复选框的宽高和select的高度；
在ie6下，input里的背景会被多出的内容挤走，因此一般不给input加除了宽高以外的样式；
属性name：要提交数据的input标签必须具有name；
属性type：所有input标签必须说明属性type的值；
text或password或button或submit或file或reset或radio或hidden或checkbox；
text：文本域，value是文本域中的文本内容；
password：密码框，会以*号或.来显示密码框的内容，value是密码框里的密码；
submit：提交按钮，value是提交按钮显示的名称；
button：普通按钮，结合js使用，value是该按钮显示的名称；
reset：恢复当前form里提交数据的全部的input的初始状态，value是该按钮显示的名称；
radio：单选，同一组里的radio型的input的name必须相同，value是被选中的一个值；
checkbox：多选，同组的checkbox型的input的name必须相同，value是被选中的多个值；
hidden：隐藏性质的input，会把value的值提交上去；
属性readonly：只读性质的，该内容会被提交，用在text、password型的input中才有效；
属性placeholder：在文本域中，显示提示用户要输入的信息内容，用在text、password型的input中才有效；
属性maxlength：最多可在文本域中输入的字或字符个数，用在text、password型的input中才有效；
属性disabled：禁用该所有类型的input，该内容不会提交上去；
属性checked：选中的意思，用在radio或是checkbox型的input中才有效；
35.：
frame的属性：frane标签与frameset标签组合使用。
属性src：显示文档的URL；
属性scrolling：是否显示滚动条，yes则显示，no则不显示，auto则自动；
属性noresize：不允许缩放框架的空间大小；
36. ：用于规定默认的href和target，使用位置在head。

二、 WEB-CSS入门笔记
1.外部样式的引用方法：在head中，
2.盒子的width、height指的是盒子的容积，并非盒子的大小。
3.属性background的属性值:
background-color：背景颜色；
background-image：背景图片；url(背景图片的URL)；
background-position：设置背景图片在盒子里的位置；x y或
center top right bottom left；
background-repeat：是否在盒子里重复背景图片；no-repeat或repeat-x或repeat-y；
background-attachment：是否固定背景图片在盒子里的位置；fixed：相对固定；
默认情况：绝对固定，fixed的参照物是浏览器大小，而默认情况的参照物是盒子；
4.属性border的属性值：border会改变盒子的大小。
border-width：边框的宽度；
border-style：边框的样式；多数用solid；要显示边框必须给出此属性值；
border-color：边框的颜色。
5.可以将属性padding内边距理解为，给盒子内部周边填充了与盒子背景颜色相同的区域，因此padding会改变盒子的大小；
padding的语法格式：top right bottom left
属性padding的属性值：
padding-top
padding-right
padding-bottom
padding-left
6.在垂直方向上相遇的margin会产生合并，即：
第一种情况：当两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
第二种情况：当两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
第三种情况：当两个外边距一正一负时，折叠结果是两者的相加的和。
常用解决方法：加border或用padding代替margin或去掉其中一个margin，
把另一个margin的值改为自己想要的值；
属性margin不会给盒子填充东西，因此不会改变盒子的大小，但是，但是，margin会占用空间，要注意margin后该盒子是否会从父级盒子产生溢出；margin是从该元素向四周散发出去的，在垂直方向上，直至遇到border或是padding才会断，不然垂直方向上的margin会整个直接溢出；
margin的语法格式：top right bottom left
属性margin外边距的属性值：
margin-top
margin-right
margin-bottom
margin-left
属性margin的auto值的作用：将该元素附近的可用空间转移到指定的水平方向，auto在垂直方向上无效；
auto的应用：a)居中；b)左对齐、右对齐。
7.属性font的值（一般不使用font的复合）：
font-style：文字斜体之类的，不常用；默认情况：normal；
font-weight：文字加粗；默认情况：normal；bold；
font-size：通常使用偶数，汉字一般不小于12px；
line-height：行高；对行高的理解：行高就像信笺纸的一行，行高就是一行的高度，文字就在行高的上下居中处；
行高的应用：将行高设置成盒子的高度，可以使得文字在该盒子中上下居中；
font-family：可以使用英文逗号提供多种字体，以供浏览器选择；字体名建议加双引号；
默认情况：中文的为宋体，英文的为arial。
8.属性color：此color指的是字体的颜色。
9.属性text的值（一般不使用text的复合）：
text-align：文本对齐方式；left或right或center或justify（两端对齐）；
text-indent：单位为em时，首行缩进多少个汉字；单位为px时，首行缩进多少像素；
text-decoration：underline或overline或line-through；
默认情况：none。
10.样式选择符：
a)#：id选择符；
b)id a+一个英文逗号+id b：群组选择符；
c).：class选择符；
d)类型名：类型选择符；
e)类型名a+一个空格+类型名b：包含选择符；
不只是类型才有包含选择符；

当同一个同时面临多种选择时，需要考虑样式优先级：
a)不同级别时：js>行间style>id>class>类型=伪类（有包含的类型>没有包含的类型）；
b)相同级别时：按照解析顺序看；
包含时，对包含的一切该类型均有效；
一个标签同时使用多个class时，用空格隔开，不分前后。

11.重置默认的样式(css reset)常用代码：
body{
margin:0;
}

ul,ol{
margin:0;
padding:0;
list-style:none;
}

dl,dd,p,h1,h2,h3,h4,h5,h6{
margin:0;
}

a{
text-decoration:none;
}

img{
border:none;
vertical-align:top;
}

table{
border-collapse:collapse;
}

th,td{
padding:0;
}

form{
margin:0;
}

input{
padding:0;
margin:0;
}

select{
margin:0;
}

textarea{
margin:0;
padding:0;
}
12.行标签和块标签：
行标签里不可以有块标签；
a标签里不可以嵌套a标签；
p标签、hn标签、dt标签里不可以有块标签；
行标签特性：
行标签代码之间的换行会被解析成半个汉字的px；
不支持垂直方向的margin和padding；

行标签有：a标签、span标签、strong标签、em标签；
块标签有：p标签、div标签、列表标签、hn标签。

13.属性display的值：
block：将该元素显示为块元素；
inline：将该元素显示为行元素；
inline-block：将该元素显示为行块元素（即块与行的综合）【ie7及以下不支持】。
14.属性float的属性值：
left
right
默认情况：none；
特性：除了不解析行标签代码之间的换行以及能够漂浮外；其他的特性与inline-block同；
所谓漂浮：
按照指定方向漂；
脱离文档流；
其里面的内容与元素本身分离。
使得块可以内容撑开宽度；
使得行元素支持宽高；
float只会影响其后头的元素，不会影响到其前头的元素。

ie6、ie7下的兼容问题，即被挤出的内容会与漂浮的元素有一定的距离，并非紧紧排在一起；
解决方法：要求浮动元素紧排在一行；得给相关元素都加float；    在ie6下，float的块标签的水平方向margin会被加大一倍；
解决方法：给float的块加上display:inline；在ie6下，float的li之间会产生几个px的间隙；
解决方法：给li加上vertical-align:top\middle\bottom；

15.vertical-align是垂直方向上的对齐方式；属性值有：top；middle、bottom；
对齐的相关元素都得加上相同的vertical-align，否则vertical-align无效；
vertical-align只对行元素起作用，对块元素无效，对浮动的元素也无效；
16.属性clear的值：
left
right
both
默认情况：none：
作用：清除上一层中指定方向的浮动，使得当前层不会受到上层浮动的影响。
17.简单的布局模型：
html：

 css：body{margin:0;font-size:14px;}dl,dd,p,h1,h2,h3,h4,h5,h6,ol,ul{margin:0;}ul,ol{padding:0;list-style:none;}a{text-decoration:none;}img{border:none;}#box{width:900px;margin:0 auto;zoom:1;}#box:after{content:"";display:block;clear:both;}.left,.right,.center{width:300px;}.left div,.center div,.right div{border:1px solid white;}.left div,.right div{height:298px;background:gold;}.left,.center{float:left; }.right{float:right;}.center div{height:198px;background:orchid;}

18.清除浮动的弊端的方法：
a)给父级加dislay:inline-block；但是会使得水平方向的margin失效；
b)给父级指定高度；但是不便于以后修改；
c)给所有相关“父级”加float；但是会使得水平方向的margin失效；
d)加一个“clear和font-size:0”的空标签；但是ie6、ie7不兼容；
e)加一个
；但是不符合结构、样式、行为分离的原则；
f)给父级加overflow:hidden；
属性overflow的值：auto、hidden、scroll（会始终显示滚动条）、visible（默认情况）；
以上方法不是常用的方法，以下的方法是常用的清除浮动弊端的方法；
g)给父级加上：zoom:1;和after:content:"";display:block;clear:both；
对g方法的理解：属性zoom：缩放页面；after是个伪类，after里必须有content、display、clear才能起到清除浮动弊端的效果；
g中的after效果，可以理解为是在父级最后新加了一个clear的div。
19.在ie6下，高度小于ie6默认px的元素，其高度均会被作为ie6默认的高度处理；
解决方法：给该元素加上overflow:hidden；
20.网页设计模型（步骤）：
(1)确定结构：
a)根据整个网页的内容，将其分成多个块；即确定哪些内容属于哪些块；
b)确定用哪些标签来展示内容；不同块的内容用div包起来；
(2)样式的书写顺序：
a)布局前须明确每个元素的最终效果；
b)书写css reset；
c)从左到右一个一个元素地写；最好样式的作用对象就是元素它自己，而不是隔着其他元素；
d)确定元素的宽度、高度和border；对于图片、视频、音乐类的内容，最好定高度、宽度和border，以免这类元素加载不出来时，影响到其他元素的布局；
e)确定元素的字体样式；
ps：修改hn，strong，em，b，i标签里头的字体时，注意需要在这些标签的css里也加上字体修改，不然对布局有一定影响；
f)确定元素本身的位置；
g) 元素里的内容的位置；即float、margin、padding等；
h)记得清除浮动的弊端；
i)确定背景及其位置；
21.属性position的值：
relative：相对定位；相对自己发生移动；不会使得元素脱离文档流；不会影响元素本身的特性，但是在ie6下，当相对定位元素溢出父级时，使用overflow无效；
absolute：绝对定位；默认相对文档发生移动，若有定位父级，则相对该定位父级移动（一般用relative来给absolute当定位父级）；使得块支持内容撑开宽度，行标签支持宽高；使得元素完全脱离文档流；
在ie6下，定位父级的width或height的值为奇数时，那么水平方向或是纵向方向上的定位会有1px的偏差；

margin:0 auto无效的解决方法：
left:50%;top:50%;margin-top:-元素水平方向的大小的一半;-元素纵向方向的大小的一半;

fixed：固定定位；特性同上，不同在于，fixed定位是始终相对文档进行相对定位；ie6不支持fixed；
static：默认情况；absolute或是fixed定位元素可以清楚浮动的弊端，即当该元素内元素都float时，不需要再考虑该元素的清浮动；

body<html<文档；当html和body的heigh均被设置为100%时，他们的height才能与文档的height一样;

定位元素具有以下位置控制的属性（单位px或%）：top、right、bottom、left；
正值就是在该方向向原中心靠，负值则是在该方向向原中心远离；
移动后，依然会占据着原先的位置；
22.定位元素之间存在层级关系：
默认情况下，后者的层级高于前者；
属性z-index的值：阿拉伯数字（自己定）；该属性用于控制元素所在的层级；
只有当不同元素处于同一层的时候，z-index才有效；
23.属性opacity的值：[0,1]；
属性opacity是不透明度；
ie里没有属性opacity，用filter:alpha(opacity=[0,100])可以实现同样的效果；
24.属性outline的值：none：去除聚焦效果；
25.滑动门：；
26.css spirit：；
27.ps的web基础：
a)常用的选项卡：
信息；历史记录；图层；
b)常用工具介绍：
移动工具：移动图层，注意与抓手工具不同，对图像有影响；

抓手工具：用于移动视角，对图像无影响；

矩形选框工具：用于选中一个图层里的一块区域，然后可对该区域进行复制，剪切，删除；
按住Ctrl键进行，可微调选框大小与参考线一致；Ctrl+c之后Ctrl+v，可快捷地将该选区创建在一个新的图层，大小同原图层；
若在上步骤之前Ctrl+n，则可以创建出与选区大小一致的图层；

配合标尺，可用于测量大小；

自由变换：快捷键：Ctrl+t，调整图层的大小、可使图层旋转；

取消选择：快捷键：Ctrl+d，取消选择；

裁剪工具：回车，快捷地将工作区里所有图层里的选中的区域独立地剪切出来；

吸管工具：吸取颜色值；

横排文字工具：设置横排文字的字体、大小、颜色等属性；

缩放工具：Ctrl+“+”、Ctrl+“-”、快捷地放大或缩小图像；

标尺工具：Ctrl+r快捷地打开或关闭标尺；每单击标尺往图层拖拽，可出现一条参考线；

png8：支持透明，不支持半透明；
png24：支持半透明和透明；
jpg：用于存储高清图；不支持半透明以及透明，所有透明区域均会被白色填充；
gif：用于存储动态图；支持透明，不支持半透明；
*.疑问：
* 1.如截图所示
* 2.float的行元素；
*3.块中margin-right无效；

Web-HTML+CSS入门笔记相关推荐

每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
python开发web项目_Django2：Web项目开发入门笔记（20）
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这一篇教程,我们一起来了解如何在CentOS系统中将Django2的Web项目部署到Nginx服务器. CentOS系统虽然和Ubuntu系统都是Linu ...
Html和CSS入门(笔记)—HTML
HTML入门(笔记) 第一章 Html介绍 1-1 代码初体验-Hello World网页 1-2 Html和CSS的关系 1-3 认识 Html标签 1-4 标签的语法 1-5 认识html文件基本 ...
web前端开发入门笔记（更新中）
前言假期曾上过6节HTML与微信小程序开发基础课,对前端开发有所了解,今天上完大英就开始看了下课程,出乎意料的易于接受,也许是之前打下的基础,但还是系统地学习比较好,毕竟作为一门知识. 此外,有兴趣 ...
html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...
CSS入门笔记5(浏览器渲染，CSS动画全解)
CSS动画要说的话 i.动画是什么呢? ii.怎么写出动画效果呢? iii.和动画息息相关的是浏览器的渲染 1) 浏览器渲染过程 2)怎么更新样式呢? 3)这些方式有三种不同的渲染方式* 4)三种更 ...
前端小白的html+css入门笔记
?和客户第一次见面要带模版去(5-8个表)? 1.主页面 2.列表页 (图+表/表/图/视频) mata标签规定字符集 !!规定的字符集和编辑软件保存发类型要一致(utf-8/gbk) Utf-8:包 ...
web前端CSS入门知识点总结
1.css:级联样式表2.用途:通俗说,用来美化html内容: 专业说,用来设置html内容的样式. 3.语法: 选择器{属性名:属性值;.......}4.css语言的引入 (1)行内样式表 < ...
CSS入门学习笔记+案例(1)
CSS入门学习一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...

Web-HTML+CSS入门笔记

Web-HTML+CSS入门笔记相关推荐

最新文章

热门文章