HTML/CSS基础回顾

HTML

• 1.<em><strong> 标签都表示强调 但是<strong>标签表示更强烈的强调

• 2.<span>标签没有语义，专门用于设置样式用的

• 3.<q>标签表示引用，如引用一句诗，<q>标签加了后会自动给引用语句打上双引号，长文本引用使用<blockquote>

• 4.<hr/>标签，添加一条水平横线，和<br/>标签一样，都是空标签

• 5.<address>标签，地址标签，添加地址信息，默认为斜体，样式可以用css更改

• 6.<code>标签，加入一行代码，如果是多行代码，请使用<pre>标签

• 7.<ul><li>标签，加入列表信息，如我们看到的网页中的新闻列表等都是通过这个标签得来

• 8.前面说的<ul>标签是无序的，而还有一个标签<ol>标签是有序列表标签，会有序的列出列表信息

• 9.<div>标签，这个标签在排版中很重要，相当于一个容器，把同类逻辑元素装起来，使逻辑更清晰，然后使用CSS/javascript对这个容器进行设计，<div>标签使用非常多

• 10.id属性，在上面提到的<div>标签中使用<div id="">可以为<div>命名，就像一个人的身份证一样，是唯一的，然后通过更改id的样式和其余属性等达到对div进行更改的目的

• 11.<table>标签，网页上有很多表格，这些表格就是使用<table>标签来实现的，整个table标签的完整格式为<table><tbody><tr><th><td>，tr为表行，th装表头行中的内容，td装普通表行中的内容.<table>标签中还需要加入一些其他的信息如summary（摘要） caption（标题），格式：<table summary="方便搜索引擎搜索"><caption>标题内容</caption></table>.

• 12.<a>标签，<a href="链接地址" title="鼠标划过显示的文本">链接显示的文本</a>,默认链接是在当前窗口打开，可以加上target="_blank"，表示在新窗口中打开这个链接

• 13.接上面a标签，a标签还可以用于链接邮件地址，点击直接调用系统的邮件服务，发送邮件给某某，格式：<a href="mailto:******@sina.com"?cc=*******@163.com&bcc=******@126.com&subject="邮件主题"&body="邮件内容">链接文本内容</a>，cc是抄送地址，bcc是密件抄送地址，subject为默认发送邮件主题，body是默认发送邮件内容，格式中第一个地址后面接"？"，后面用&（and）符号接

• 14.<img>标签，引用图片标签<img src="图片地址" alt="图片下载失败时显示的文本" title="鼠标划过时的提示文本">，图像可是gif.jpeg.png等格式

• 15.<form>标签，使用表单标签和用户交互，格式：<form method="传送方式" action="服务器文件(save.php等)"> <input type="" >.....，所有的文本域，单选框，复选框，按钮等都必须在<form>表单内，否则无法提交到服务器

• 16.接上面表单标签，当用户需要在表单中键入内容时，就会用到输入框，也就是<inpute>中type的分类，文本输入框使用text,即type="text"，密码输入框使用password 而里面的name起到为输入框命名的作用，供后端使用，value起到提示的作用，如密码框中加入value="请输入密码"，默认就会有请输入密码几个字，提示用户输入密码

• 17.接表单标签，当用户需要输入大段文字时，如招聘网站让我们填写简历时，就需要使用文本域标签了<textarea rows="行数" cols="列数">文字内容</textarea>

• 18.接表单标签，<inpute>中有单选框和复选框分别为 <inpute type="radio/checkbox" value="值" name="名称"  check="checked">，value和name都是供后端PHP使用 check="checked" 表示默认选中当前框，当为单选框时，value的值不能相同，当为复选框时，value的值相同

• 19.接表单标签,下拉列表框<select><option  value="向服务器提交的值"  select="selected" >选项名称</option></select>,select=selected表示默认选择此项,使用下拉列表框可以为网页节省空间

• 20.接表单标签,提交和重置按钮,提交按钮<inpute type="submit" value="提交"> ,可以把输入的值提交给后台服务器,重置按钮,<inpute type="reset" value="重置" />这里的value表示按钮的名称

• 21.接表单标签,<label>,label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）,<label for="控件id名称">内容</label>,如<inpute type="checkbox" id="box">,当使用<label for="box">盒子</label>,点击盒子的时候,就会触发复选框,然后选中此复选框

CSS

• 1.p{color:red},css样式由选择符p和声明{}组成,声明内包含属性color和属性值red,用冒号隔开,不同属性间用分号隔开

• 2.css里面也有注释语句,和html的<!--注释语句-->有区别的是,css的注释语句为/*注释语句*/

• 3.css样式分为内联式,嵌入式和外部式.先说内联式,<p style="color:red">文字</p>,即把样式放到标签内部,仅对当前标签有效.再说嵌入式, <style type="text/css">p{color:red}</style>,嵌入式放在当前文件中,对当前文件中所有p标签有用.最后说外部式,外部式顾名思义就是在文件外部建立一个单独的css样式以.css的后缀命名,然后在html文件内部使用<link href="style.css" rel="stylesheet" type="text/css" />.需要注意的地方:<link>标签中,rel="stylesheet"和type="text/css"是固定的写法,而href="style.css"根据外部样式文件的命名而来.说完三种样式,就需要谈谈三种样式的优先级,不然怎么能判断系统到底使用的哪个样式呢?其实很简单,我们只需要遵循就近原则就可以了.在写<style type="text/css">的时候一定要写在外部式<link>的后面,这样离元素更近了,当然就优先使用这个样式.不过以上所有的前提都是在各个样式在同一个权值的情况下,那什么又是权值呢?后面接着....

• 4.先说选择器,样式中格式通常是,选择器{ 样式; },选择器就是可以代表标签指定标签样式的东西(好绕....)还是看实例吧,如标签选择器p{color:red}就是为html文件中所有p标签定义字体颜色为红色.类选择器.stress{样式},类选择器也很常用,前面加一个圆点,当标签中出现<p class="stress">时,标签就会调用stress的样式.ID选择器,和类选择器类似,不同处在于ID选择器在样式中声明时前面加#,如#stress,另外一个不同就是ID选择器在html文件中只能被使用一次,而类选择器可以使用多次.还有一个比较实用的选择器,子选择器,如.ul>li{样式}表示指定标签元素ul的第一代子元素的样式,如果写成.ul li{样式},即不用>符号而用空格,则代表包含的意思,>表示第一代,而空格表示包含的所有指定子标签都继承此样式.通用选择器*{样式},通用选择器可以更改整个html文件的样式.伪类选择器,a:hover{样式},可以设置鼠标划过a标签时的样式,由于浏览器兼容性问题,a:hover{}支持所有浏览器,其余的在css3中有讲解,但对于兼容性不是很好.分组选择符,p,h1,span{样式},通过逗号隔开,一次为多个标签设置样式.样式继承,某些样式是可以继承的,即标签下的子标签也继承它的样式,但是不是所有的样式都可以继承.

• 5.权值:标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100,继承的权值很低,几乎可以忽略.!important可以为某个样式设置高权值

• 6.文字排版,设置字体:{font-family:"microsoft Yahei"}或者{font-family:"微软雅黑"},字号,颜色{font-size:10px;color:#666},粗体{font-weight:bold;}斜体{font-style:italic;},下划线{text-decoration:underline;},删除线{text-decoration:line-through;},缩进{text-indent:2em;}2em就是指文字两倍大小,行高{line-height:1.5em},字母间间隔{letter-spacing:50px},单词间间距{word-spacing:50px},对齐{text-align:center/left/right}分别为居中,左对齐,右对齐

• 7.元素分类,分为内联元素,块状元素,内联块状元素.内联元素(<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>),块状元素(<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>),内联块状元素(<img>、<input>).....a{display:block}将a标签设置为块状元素,使其具备块状元素的特性(块状元素有如下特性:1.每个块状元素都独占一行,2.元素的宽度,高度,行高以及顶和底边距都可以设置,3.宽度如果不设置,默认为父元素的100%),div{display:inline}设置div为内联元素,使其具备内联元素的特性(内联元素特性如下:1.和其他元素都在同一行,2.元素宽度,高度,底边距不可设置,3.元素中包含的文字图片宽度不可改变),{display:inline-block}设置元素为内联块状元素,使其具备内联元素和块状元素的特性.

• 8.css盒模型,所有的块标签都具备盒子模型的特征,http://www.imooc.com/video/3225(盒子模型介绍) , ①边框(border),可设置border-width(边框宽度),border-color:red(边框颜色),border-style:solid/dashed/dotted;(边框样式,实线/虚线/点线),还可以单独设置一边的边框,如boder-bottom/left/right/top,②.填充(padding),同样具备四个方向,③边界(margin),也有四个方向.一个盒子的实际宽度等于左边框+左填充+内容宽度+右填充+右边框(左边距+右边距),左右边距是和另外一个盒子的距离,可以加上或者不加上,实际上是存在的,看自己怎么理解方便.另外定义四个方向宽度的时候可以直接写border:10px,代表四个方向是一样的,也可以border:10px 20px;代表上下10px,左右20px,平时4个方向都写的话border:10px 20px 30px 40px;分别按照顺时针方向数,为上右下左.

• 9.css布局(重要),三种布局模型,flow(流动模型),float(浮动模型),layer(层模型).
• 9.1.flow模型,默认情况下都是flow模型,块状元素自上而下按顺序垂直延伸分布,即一行一行的向下分布,而内联元素由于不会独占一行,则从左到右分布,就和我们平时的书写习惯一样.
• 9.2.float模型,由于流动模型下块状元素每个独占一行,为了使一行能有多个块状元素,这时候就要使用到浮动模型了,定义div{float:left},即让div元素左浮动
• 9.3.layer模型,layer模型虽然用得不多,但是其实用性确是不容忽视的,层模型可以实现精准定位,层模型分为三种情况:[position:absolute(绝对定位)],[position:relative(相对定位)],[position:fixed(固定定位)].下面一个一个来说明,绝对定位:绝对定位的作用是把一个块级元素从文档流中拖出来,然后相对于父包含块进行方向上的定位(position:absolute;left:100px;top;200px),这条语句的意思是相对于其父包含块的位置,如果没有父包含块,则相对于<body>定位,即相对于浏览器窗口进行定位.相对定位:确定元素在正常文档流中的偏移位置,相对于以前的位置移动,偏移前的位置保持不变(里面的内容跟着以前的位置).固定定位:相对于浏览器窗口的一个固定位置,不会随文档流的变化而变化.说了这些特性,绝对定位和相对定位可以配合使用,先给父元素设置相对定位,然后给子元素设置绝对定位,这样子元素就可以随着父元素的偏移而偏移了.
• 10.各类代码缩写,如font,font-style:italic;font-size:10px;font-height:1.5em;可以直接简写为font:10px/1.5em italic ;注意,10px和1.5em一定要用"/"隔开,并写在一起
• 11.水平居中设置:text-align:center;(针对行内元素),当为块状元素时就失效了,想要为块状元素居中,就需要先将块状元素定宽,即设置width:500px,然后设置margin:auto;这样块状元素就居中了,当然实在不想为元素定宽,也还是可以居中的,有三种方法:①加入table标签,然后为table标签设置margin:auto,我猜这里应该是table标签默认定宽了,相当于一个定宽了的块状元素,所以可以这样使用.②既然块状元素居中这么麻烦(哈哈!!),那为何不设置其为内联元素呢,所以第二种办法就是display:inline;然后使用text-align:center;就可以居中了,但是这样有个坏处就是失去了块状元素的特性了,所以慎用!③还有一个不失去块状元素属性的办法,设置父元素float:left;position:relative;left:50%,然后设置子元素position:relative;left:-50%,如果无法理解画图就很清晰了,简单点说就是父元素相对于左边框(即初始位置)右移了50%,此时子元素也跟着移过来了,然后子元素在相对现在的位置向左偏移50%,这样就实现了子元素的居中了,这个方法当然也有坏处,就是增加了relative属性,会带来副作用.
• 12.垂直居中,父元素高度确定的单行文本可以使用代码:height:10px;line-height:10px;来实现垂直居中,也就是说高度和行高相等.如果是多行文本呢,和水平居中类似,可以插入table标签,然后设置vertical-align:middle;当然还需要为table标签设置height,由于td标签默认设置vertical-align:middle;所以通常没有设置这一行.还有第二种方法,就是为父元素添加代码:dispaly:table-cell;vertical-align:middle;这个方法的好处是不用添加多余的标签,只是这个方法对于ie6/7的兼容性不好,需要留意.
• 13.隐性改变元素类型,position:absolute或float:left/right,元素会自动设置为display:inline-block;