H5零碎知识点整理

来源：互联网发布：潍坊四中的网络签章编辑：程序博客网时间：2024/05/22 08:26

由于不注重基础知`识的系统化学习，被一份笔试题打败，所以潜心修炼，加油！！

一、零零碎碎

标签属于行内元素标签，给它宽高是不起作用的，必须转化为块级元素（display:block;或者display:inline-block;）才能设置宽高。
起到强调作用，浏览器默认为斜体
起强调作用，浏览器默认为粗体
设置字间间距
<q>简短文本引用：即加双引号功能</q>//”夕阳无限好，只是近黄昏
<blockquote>长文本引用：加双引号</blockquote>
<code>代码标签</code>
ol自动设置有序序号

 <ol> <li>信息</li>   //1.信息 <li>信息</li>   //2.信息 </ol>

二、标签

1.划分版块div
2.<caption>为表格添加标题和摘要</caption>
3.<a href="http://www.imooc.com" target="_blank">标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开需要用到target。</a>
4.给a标签中加入邮箱地址：可以直接发送
这里写图片描述

三、表单标签

form标签是成对出现的
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ：数据传送的方式（get/post）。

<form method="post" action="save.php">      <label for="username">用户名:</label>      <input type="text"  name="username" id="username"          value="" /> //label中for的值必须与input中的id值一样      <label for="pass">密码:</label>      <input type="password"  name="pass" id="pass" value="" />        <input type="submit" value="确定"  name="submit" />      <input type="reset" value="重置" name="reset" /></form>  </body>

注意：
（1）name：为文本框命名，以备后台程序ASP 、PHP使用；
（2）value：提交数据到服务器的值（后台程序PHP使用）（一般起到提示作用），在提交与重置按钮时：value表示按钮上显示的文字；
（3）checked：当设置 checked=”checked” 时，该选项被默认选中
（4）label：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

常见类型：

<form>    用户名： <input type="text" value=""/>   //文本框    密码：<input type="password" value=""/>  //密码框    <input type="submit" value="确定"/>      //提交按钮    <input type="reset" value="重置"/>       //重置    <input type="radio" />                  //单选框    <input type="checkbox"/>                //复选框</form>

4.文本输入域

<textarea cols="列数" rows="行数">在这里输入内容...</textarea>

5.下拉列表框
注意：
（1）设置selected=”selected”属性，则该选项就被默认选中。
（2）下拉列表多选操作：在select标签中设置multiple=”multiple”属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击）；

<form action="save.php" method="post">    <label>最喜欢的科目：<label/>    <selected>        <option value="数学" selected="selected">        数学</option>   //将数学设置为默认选项        <option value="英语">英语</option>        <option value="政治">政治</option>        <option value="物理">物理</option>    <selected></form>

如图：
这里写图片描述
注意：
单选框radio在name相同的情况下只能选中一个！！！
取消已经选择过的按钮则需要更多代码：

<!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript"> $(function(){ // var $browsers = $("input[name=browser]"); var $cancel = $("#cancel"); var $byhide = $("#byhide"); var $remove = $("#remove"); // $cancel.click(function(e){ // 移除属性,两种方式都可 //$browsers.removeAttr("checked"); $browsers.attr("checked",false); }); // $byhide.click(function(e){ // 切换到一个隐藏域,两种方式均可 //$("#hidebrowser").attr("checked",true); $("#hidebrowser").attr("checked","checked"); }); // $remove.click(function(e){ // 直接去的DOM元素,移除属性 // 如果不使用jQuery,则可以移植此方式 var checkedbrowser=document.getElementsByName("browser"); /* $.each(checkedbrowser, function(i,v){ v.checked = false; v.removeAttribute("checked"); }); */// var len = checkedbrowser.length; var i = 0; for(; i < len; i++){ // 必须先赋值为false,再移除属性 checkedbrowser[i].checked = false; // 不移除属性也可以 //checkedbrowser[i].removeAttribute("checked"); } }); }); </script> </head> <body> <p>您喜欢哪款浏览器？</p> <form> <input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> <input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> <input type="radio" name="browser" value="Firefox">Firefox<br /> <input type="radio" name="browser" value="Netscape">Netscape<br /> <input type="radio" name="browser" value="Opera">Opera<br /> <br /> <input type="button" id="cancel" value="取消选中方式1" size="20"> <input type="button" id="byhide" value="取消选中方式2" size="20"> <input type="button" id="remove" value="取消选中方式3" size="20"> </form> </body> </html>

四、CSS样式

1.样式有三种：内联式、嵌入式、外部式
优先级：就近原则！！！
2.若标题标签例如h1默认为粗体,想要去掉粗体，则可以设置为：font-weight:normal;
3.子选择器与后代选择器区别：
子选择器：父元素的直接（第一代）后代；
后代选择器：父元素的所有后代（包括儿子、孙子）
4.伪类选择符：hover
5.权值：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/p>span{color:green} //权值也是1+1=2.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：
* 继承权值最低。
* 最高权值：！important 写法：

p{    color:green!important;}p{    color:red;}

最终p的颜色为green；

6.层叠：
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。（后面的样式会覆盖前面的）
7.（1）设置文字斜体：italic

font-style:italic;

或者使用i标签；
（2）.文字下划线：

text-decoration:underline;或者使用u标签

（3）删除线：
类似于这种：
这里写图片描述

<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p>

.oldPrice{    text-decoration:line-through;}

（4）段前缩进：即空两个字

    text-indent:2em；//2em即就是文字的两倍大小

（5）中文字间距、字母间距

letter-spacing:20px;

（6）块状元素居中：

text-align:center;

8.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
（1）常用的块状元素：
div、p、h1-h6、ol、ul、dl、table、address、blockquote 、form
（2）常用的内联元素有：内联元素不可以设置宽高；
a、span、br、i、em、strong、label、q、var、cite、code
（3）常用的内联块状元素有：
img、input
注意：
（1）blockquote 标签定义块引用。
blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
（2）dl标签定义了定义列表
dl标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）。
例：
代码：

<html><body><h2>一个定义列表：</h2><dl>   <dt>计算机</dt>   <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>   <dd>以视觉方式显示信息的装置 ... ...</dd></dl></body></html>

结果：
这里写图片描述
（3）
* cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。
* 用 cite标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 a 标签中，从而把一个超链接指向该联机版本。
* cite 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。cite标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。
（4）
* code标签是用于文本编辑的一个标签，所以作为大部分网站建设人员都不会用到。
* code标签的功能表现形式是将一段文本中的“代码”部分作区别于文本其他部分的显示。
* code标签的应用：当需要处理这些代码文本的显示的时候、可搭配css来制作更友好的页面。可以抓取code标签的内容进行处理，简单如设置复制按钮，使浏览者可以复制这一段代码
另外建议可以看一下pre标签，与code主要搭配使用。

9.块级元素有什么特点：
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

10.将内联元素设置为块级元素：

display:block;

将块级元素设置为内联元素：

display:inline;

11.内联块状元素：如 img 与input
同事具备内联元素与块状元素的特点；

display:inline-block;

特点：
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

五、盒子模型

1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。

六、CSS布局模型

在网页中，元素有三种布局模型：
1、流动模型（Flow）
（1）在流动模型下，内联元素的特点：“包含元素内从左到右水平分布显示”。（内联元素可不像块状元素这么霸道独占一行）
（2）默认状态下，块状元素宽度都为100%；
2、浮动模型 (Float)
3、层模型（Layer）
层模型有三种形式：
（1）绝对定位(position: absolute)
（2）相对定位(position: relative)
（3）固定定位(position: fixed)
4.Relative与Absolute组合使用
（1）参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->    <div id="box2">相对参照元素进行定位</div><!--相对定位元素--></div>

box1是box2的父元素，即属于前辈元素

（2）参照定位的元素必须加入position:relative;

#box1{    width:200px;    height:200px;    position:relative;        }

（3）定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

    position:absolute;    top:20px;    left:30px;         }

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

七、盒模型代码简写

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意:padding、border与margin缩写方法相同！

4、颜色值缩写
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
如：

#000000——#000#336699———#369

八、颜色值

1.英文命名颜色
例如：red 、green、……..

color:red;

2.rgb命名颜色
值在0-255之间也可以是百分比

rgb(122,222,211);rgb(%13,24%,45%);

3.十六进制颜色

color:#00ffff;

九、长度值

1.像素值
因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2.em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

<p>以这个<span>例子</span>为例。</p>

p{font-size:14px}span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3.百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

十、位置

1.水平居中设置
（1）如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
（2）满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
（3）不定宽块状元素：块状元素的宽度width不固定。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
a.加入 table 标签（table标签长度自适应性，可看作是定宽块状元素,然后使用margin)
b.设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置（然后使用 text-align:center）
c.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

阅读全文

1 0