网页的构成
HTML:超文本标记语言,是一种标记语言,使用元素和属性来编写页面
超文本:比普通文本更强大
标记:就是标签,可以使用一系列的标签,将网络上的文档格式统一,使分散的资源连接为一个逻辑整体
快速入门:
<h1 align="center">这是我的第一个入门案例<h1> ## align="center" 居中显示
页面说明
组成部分
学习html的重点:
掌握标签所代表的含义
掌握在标签中属性的含义
标签的分类
标签的嵌套
块级元素和行内元素
块级元素:在页面中以块的形式展现,自己独占一行,后面的内容会自动换行
行内元素:在页面中以行的形式展现,不会换行。加粗 斜体 可以给文本内容添加下划线
div和span
:是一个通用的行内容器,没有特殊语义,一般用来编织元素以达到某种样式
HTML的特殊字符
文本标签
hr的属性:size-大小 color-颜色
ul的属性:type-列表样式(disc实心圆、circle空心圆、square实心方块)
ol有序列表的属性:type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置
斜体标签:
加粗标签:
文字标签: size-大小 color-颜色
图片标签:
表单标签:
autocomplate开启的话会把之前输入过的内容自动提示出来
get:表单数据会显示在地址栏中,不安全,地址栏的url长度有限制!
post:表单数据不会显示在地址栏中,数据封装在请求体中,安全。长度没有限制。
标签:
该标签用于定义超链接,作用是从一个页面链接到另一个页面
1、语法格式:
2、属性
3、锚点链接
在href属性中,设置属性值为#名字的形式,如:
找到目标标签,里面添加一个id属性=刚才的名字,如:
特殊字符:
表单项标签:
type属性值:
radio为了达到单选的效果,name属性值必须一致
合并单元格
注意:
ul中只能放li,但是li中是可以放其他元素的
无序列表中各项是没有顺序之分的,是并列的
无序列表会带有自己的样式属性,在实际中我们会用css样式来控制
表单控件
是单标签
type属性设置不同的属性值来指定不同的控件类型
input标签的重要属性:
checked属性针对input中的radio和checkbox
lable标签
行内元素
行内块元素
背景颜色
background-color:transparent; 透明的,清澈的;
background-image: 属性描述了元素的背景图像
none是默认值
背景平铺:可以使用background-repeat属性来设置。
页面元素既可以添加背景图片,也可以添加背景颜色,但是背景图片会压住背景颜色
background-position属性可以改变图片在背景中的位置
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
相同样式才会覆盖
子元素会继承父元素的某些样式
优先级
复合选择器会有权重叠加的问题
权重虽然有叠加但是不会有进位
内边距padding不会撑开盒子的情况
如果盒子本身没有指定width/height属性,此时padding不会撑开盒子
margin属性用于设置外边距,即控制盒子与盒子之间的距离
margin: 30px; 只写一个代表上下左右都是30px的距离
margin: 20px 30px; 写两个代表上下30,左右50像素
四个的话是上右下左
典型应用
外边距可以让块级盒子水平居中,但是必须满足2个条件
常见的写法,以下三种都可以
margin-left:auto; margin-right:auto;
margin:aoto;
margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可
嵌套块元素垂直外边距塌陷问题
对于两个嵌套关系的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
解决方法:
网页元素有很多默认的内外边距,而且不同浏览器默认的也不一致,因此在布局前,首先要清除下网页元素的内外边距
* { padding: 0; /*清除内边距*/ margin: 0; /*清除外边距*/ }
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内元素就可以了
行内元素尽量只设置左右的内外边距
布局为啥不都用div?
标签是有语义的,在合理的地方用合理的标签。比如产品标题就用h,大量文字就用P,靠积累
为啥用南无多类名?
类名就是给每个盒子都起来一个名字,可以更好地找到这个盒子,选取盒子更加容易,后期维护方便
到底用margin还是padding
大部分情况下可以混用,两者各有优缺点,根据实际情况来,总是有更简单的方法来实现。
padding会把盒子撑大
自己没有思路?
布局有很多实现方式,先模仿后作出自己的风格
在css3中增加了圆角效果
border-radius: 属性设置元素的外边框圆角
语法:border-radius:length;
圆角边框的原理:
radius:半径圆的半径 :椭圆与边框的交集形成圆角效果
参数可以为数值或者百分比的形式
要是圆形可以是宽度的一半,或者50%
可以跟4个值:左上 右上 左下 右下
两个值是对角线一样
可以只改变一个角:border-top-left-radius
css3中增加了box-shadow这个属性为盒子增加阴影
语法:
文字阴影
text-shadow:设置文字阴影
网页布局的本质-用css来排放盒子,把盒子摆到相应位置
css中提供了3中传统布局方式
普通流
就是标签按照规定好的方式进行排列
1.块级元素会独占一行,从上到下顺序排序
常用元素:div、hr、p、h1-h6、ul、ol、dl、form、table
2.行内元素会按照顺序排序,从左到右顺序排序,碰到父元素边缘会自动换行
常用元素:span、a、i、em等
标准流是最基本的布局方式
浮动
定位
为什么需要浮动?
如何让多个块级盒子水平排成一行?
浮动最典型的应用:可以让多个块级元素排列一行显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
什么是浮动?
float属性用于创建浮动框,将其移动到一边,直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘。
语法:
float:属性值;
浮动特性:
浮动元素会脱离标准流(脱标)
浮动的盒子不再保持原先的位置
如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对其排列
浮动元素会有行内块元素特性
任何元素都可以浮动,不管原先是什么模式的元素,添加浮动后都具有行内块元素相似的特性
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
浮动的盒子中间是没有缝隙的,是紧挨着一起的
行内元素同理
为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动左右位置,符合网页布局第一准则
网页布局第二准则:先设置盒子大小,后设置盒子位置
'>'子代选择器,div>li 只选择亲儿子
浮动布局注意点:
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
一个元素浮动了,理论上其余兄弟元素也要浮动。
一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
display:none;隐藏对象
display:block; 除了转换为块级元素之外,同时还有显示元素的意思
注意:display隐藏元素后,不再占有原来的位置
inherit:继承上一个父对象的可见性
visible:对象可视
hidden:对象隐藏
collapse:主要用来隐藏表格的行和列
注意:隐藏元素后继续占有原来的位置
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么?
visible:不剪切内容,也不添加滚动条
auto:此为body对象和textarea的默认值,在需要时剪切内容或者添加滚动条,溢出的时候才显示滚动条
hidden:不显示超过对象尺寸的内容
scroll:总是显示滚动条,不溢出也显示滚动条
为什么要学习精灵图?
为了有效地减少服务器接收和发送请求的次数,提高网页的加载效率,出现了CSS精灵技术
核心原理:将网页中一些小背景图整合到一张大图上,这样服务器只需要一次请求就·可以了。
用于设置一个元素的垂直对齐方式,但是他只针对行内元素或者行内块元素才有效
先强制一行内显示文本
white-sapce:nowrap; (默认是nomal自动换行)
超出的部分隐藏
overflow:hidden;
文字用省略号替代超出部分
text-overflow: ellipsis;
多行文本溢出显示省略号
多行文本溢出显示省略号有较大的兼容性问题,适合于webKit浏览器或者移动端(移动端大部分都是weKit内核)
层叠样式表。
用于设置和布局网页的一种计算机语言,告知浏览器如何渲染解析页面元素。
组成:
选择器:选择HTML元素的方式,可以使用标签名,class属性值,id值等多种方式
样式声明:用于给HTML元素设置具体的样式,格式是 属性名:属性值
格式如下:
选择器{ 属性名:属性值; 属性名:属性值; 属性名:属性值; } h1{ color: red; font-size: 5px; }
内联样式
在标签中通过style属性来控制样式,只能影响当前这一行
格式:
<标签 style="属性名:属性值;属性名:属性值;">内容</标签>
内部样式
在标签中通过