,当用户想输入大量文字的时候,使用文本域。cols,多行输入域的列数,rows,多行输入域的行数。 ####其他语义化标签 盒子
网页头部
,html5新增语义化标签,定义网页的头部,主要用于布局,分割页面的结构 底部信息
,html5新增语义化标签,定义网页的底部,主要用于布局,分割页面的结构 导航,html5新增语义化标签,定义一个导航,主要用于布局,分割页面的结构 文章
,html5新增语义化标签,定义一篇文章,主要用于布局,分割页面的结构 侧边栏,语义化标签,定义主题内容外的信息,主要用于布局,分割页面的结构。 时间标签,语义化标签,定义一个时间 ####网页结构 定义文档类型,告知浏览器用哪一种标准解释HTML 可告知浏览器其自身是一个 HTML 文档 标签之间的内容是网页的主要内容 标签用于定义文档的头部,它是所有头部元素的容器 元素可定义文档的标题 标签将css样式文件链接到HTML文件内 定义文档的元数据 ####模块划分 常见的企业网站,多由头部区,展示图片区域,主题区域,底部信息区域组成 网页拆分原则: – 由上到下 - 由内到外 ####CSS代码语法 CSS全称为层叠样式表(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 css代码通常存放在标签内 css 样式由选择符和声明组成,而声明又由属性和值组成 选择符{属性:值} 选择符:又称选择器,指明网页中要应用样式规则的元素 ####CSS 放置位置 行内样式,不建议使用 内联式样式表 外联样式表 ####CSS的继承 CSS的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。 不可继承样式:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear 可以继承的样式:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor ####选择器的种类 标签选择器:通过标签的名字,修改css样式 通配符选择器:选择页面中所有的元素 属性选择器 后代选择器:选择某个父元素下面所有的元素 一级子元素选则器:选择某个父元素的直接子元素,后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素,不会再向下查找元素 id选择器:通过id查找页面中唯一的标签 class选择器:通过特定的class(类)来查找页面中对应的标签,以 .class名称 伪类选择器::hover鼠标移入某个元素;:before在某个元素的前面插入内容;:after在某个元素的后面插入内容 群组选择器:可以对多个不同的选择器设置相同的样式 ####选择器的优先级 当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。 通过测算那个选择器的权重值最高,应用哪一个选择器的样式 ######权重计算方式: 标签选择器:1 class选择器:10 id选择器:100 行内样式:1000 !important 最高级别,提高样式权重,拥有最高级别 ####背景样式 背景颜色background-color 背景图片background-image ```background-image:url(bg01.jpg);``` 背景图片位置background-position ```background-position:10px 100px;``` // 代表坐标x,y轴 背景图片重复background-repeat ```background-repeat:no-repeat``` // no-repeat 设置图像不重复,常用 // round 自动缩放直到适应并填充满整个容器 // space 以相同的间距平铺且填充满整个容器 背景图片定位background-attachment ```background-attachment:fixed``` // 背景图像是否固定或者随着页面的其余部分滚动 // background-attachment的值可以是scroll(跟随滚动),fixed(固定) background缩写 ```background:#ff0000 url(bg01.jpg) no-repeat fixed center``` ####字体样式 字体族font-family font-family:"微软雅黑","黑体"; 字体大小font-size ```font-size:12px;``` 网页默认字体大小是16px 字体粗细font-weight ```font-weight:400; normal(默认) bold(加粗) bolder(相当于标签) lighter (常规) 100 ~ 900 整百(400=normal,700=bold) ``` ####字体颜色color ``` 颜色的英文单词color:red; 十六进制色:color: #FFFF00; RGB(红绿蓝)color:rgb(255,255,0) RGBA(红绿蓝透明度)A是透明度在0~1之间取值。color:rgba(255,255,0,0.5) ``` ####字体斜体font-style font-style:italic normal 文本正常显示 italic 文本斜体显示 oblique 文本倾斜显示 ####文本属性 行高line-height line-height:50px; 可以将父元素的高度撑起来 文本水平对齐方式text-align left 左对齐 center 文字居中 right 右对齐 文本所在行高的垂直对齐方式vertical-align baseline 默认 sub 垂直对齐文本的下标,和标签一样的效果 super 垂直对齐文本的上标,和标签一样的效果 top 对象的顶端与所在容器的顶端对齐 text-top 对象的顶端与所在行文字顶端对齐 middle 元素对象基于基线垂直对齐 bottom 对象的底端与所在行的文字底部对齐 text-bottom 对象的底端与所在行文字的底端对齐 文本缩进text-indent text-indent:2em; 通常用在段落开始位置的首行缩进 字母之间的间距letter-spacing 单词之间间距word-spacing 文本的大小写text-transform capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义仅有小写字母。 ####文本的装饰text-decoration none 默认。 underline 下划线。 overline 上划线。 line-through 中线。 ####自动换行word-wrap word-wrap: break-word; ####基本样式 宽度width width:200px; 定义元素的宽度 高度height height:300px 元素默认没有高度 需要设置高度 可以不定义高度,让元素的内容将元素撑高 ####鼠标样式cursor 定义鼠标的样式cursor:pointer default默认 pointer小手形状 move移动形状 ####透明度opacity opacity:0.3 透明度的值0~1之间的数字,0代表透明,1代表完全不透明 透明的元素,只是看不到了,但是还占据着文档流 可见性visibility visibility:hidden; visible 元素可见 hidden 元素不可见 collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。 ####溢出隐藏 overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容 visible 默认值,内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 ####边框颜色outline input文本输入框自带边框,且样式丑陋,我们可以通过outline修改边框 outline:1px solid #ccc; outline:none清除边框 ####样式重置 早期的网页没有css样式,为了界面美观,很多元素自带margin、padding等样式,但这些样式在不同浏览器解析的值都不一样,需要将css样式重置,保证在不同浏览器显示一致。 清除元素的margin和padding 去掉自带的列表符 去掉自带的下划线 ####盒模型样式 块状元素、内联元素和内联块状元素。 #####块级元素: 每个块级元素都从新的一行开始,并且其后的元素也另起一行。 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。 #####行内元素: 和其他元素都在一行上 元素的高度、宽度、行高及顶部和底部边距不可设置 元素的宽度就是它包含的文字或图片的宽度,不可改变。 #####行内块状元素: 和其他元素都在一行上 元素的高度、宽度、行高以及顶和底边距都可设置。 #####元素分类转换display block:将元素转换为块级元素 inline:将元素装换为行级元素 inline-block:将元素转换为内联块元素 none: 将元素隐藏 #####描边border border:2px solid #f00; #####线条的样式: ```dashed(虚线)| dotted(点线)| solid(实线)。 css样式中允许只为一个方向的边框设置样式: 下描边border-bottom:1px solid red; 上描边border-top:1px solid red; 右描边border-right:1px solid red; 左描边border-left:1px solid red; ``` #####间距margin ``` div{margin:20px 10px 15px 30px;} ``` #####内填充padding ``` padding:10px ``` #####浮动float 浮动原理 浮动使元素脱离文档普通流,漂浮在普通流之上的。 浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向向左或者向右浮动,直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止,且允许文本和内联元素环绕它。 浮动会产生块级框(相当于设置了display:block),而不管该元素本身是什么。 清除浮动带来的影响 clear 清除浮动: none : 不清除(默认值)。 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许两边有浮动对象 利用伪类实现清除浮动 ``` .clearFix { content=""; display:block; width:0; height:0; clear:both; } ``` #####定位position 定位功能可以让布局变的更加自由。 层模型--绝对定位(相对于父类) 绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 ```#box_relative { position: absolute; left: 30px; top: 20px; } ``` 如下图所示: 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。 层模型--相对定位(相对于原位置) 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 ```#box_relative { position: relative; left: 30px; top: 20px; } ``` 如下图所示: ``` 如果想为元素设置层模型中的相对定位,需要设置position:relative(相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于原位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。 ``` 层模型--固定定位(相对于网页窗口) ``` position:fixed 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed属性功能相同。 ``` 浏览器默认样式 页边距 IE默认为10px,通过body的margin属性设置 要清除页边距一定要清除这两个属性值 body { margin:0; padding:0;} 段间距 IE默认为19px,通过p的margin-top属性设置 p默认为块状显示,要清除段间距,一般可以设置 ```p { margin-top:0; margin-bottom:0;}``` html5 HTML5 的优势 解决跨浏览器,跨平台问题 增强了 web 的应用程序 ``` HTML5 废弃元素 frame frameset noframes acronym applet dir basefont big center font strike tt HTML5 新增元素
用于定义文档或节的页眉
用于定义文档或节的页脚
用于定义文档内的文章
用于定义文档中的一个区域(或节)