HTML
来源:互联网 发布:京东金融 免费数据 编辑:程序博客网 时间:2024/05/24 01:02
HTML基础元素
引用: <q>
和<blockquote>
标签
如果想在一段中加上引用就用<q>
,内联元素;
如果想让引用自成一段则用<blockquote>
,块元素。
换行:<br />
列表
有序列表:<ol start="5"><li></li></ol>
;
无序列表:<ul><li></li></ul>
;
自定义列表:
<dl> <dt> </dt> <dd> </dd> <dt> </dt> <dd> </dd></dl>
路径
~/:根路径,可省略(~);
./:当前路径(可省略);
../:父级(上一层)路径
超链接<a>
//链接到元素<h1 id="top">top postition</h1><a href="#top">Back to top!</a><a href="localhost:8888/index.hrml#top">Go to top</a>//在新窗口打开界面<a href="#top" target="_blank">Back to top!</a><a href="#1" target="coffee">Click Here</a>//在名为coffee的窗口打开(如果没有,则打开一个新的窗口并命名为coffee)
样式
a:link{ color:green; //未访问}a:visited{ color:red; //已访问;}a:hover{ color:yellow; //悬停;}a:focus{ color:blue; //获取焦点,主要针对键盘切换;}
<img>
标签
服务器处理图像数据的过程:
- 浏览器请求一个界面,服务器返回文档数据;
- 浏览器显示文档;
- 服务器逐个返回文档上的图像数据;
- 结论:就算给img元素设置了width和height属性,仍然会从服务器获取全部大小的图像。width和height属性实际上是为了帮助浏览器确定需要为这个图像预留多大的空间。
<img>
标签是一个内联函数,也属于void元素(在开始标记和结束标记之间没有任何内容的元素)
三种图像类型:
CSS基础样式
<link>
和<style>
标签
link用来链接外部文件,而style一般只用来引用本地代码
CSS样式继承
能够继承的属性:能够影响页面外观的属性,比如颜色系列,字体系列;
不能继承的属性:如边框
字体系列样式
1.字体 font-family:Arial sans-serif;//自定义字体(移动设备和小型设备不支持)@font-face { font-family: 'Glyphicons Halflings';//为字体创建名字 src: url(../fonts/glyphicons-halflings-regular.eot); src: url(../fonts/glyphicons-halflings-regular.eot?#iefix);}h1{ font-family:'Glyphicons Halflings';}2.字体大小 font-size:14px;font-size:1.2em;//相对于父元素的1.2倍font-size:150%;//相对于父元素的150%font-size:xx-small x-small small medium large x-large xx-large;//关键字font-style:italic(斜体);//字体样式;normal(正常)oblique(倾斜) inheritcolor:red; //文本颜色font-weight:lighter normal bold bolder; //字体粗细text-decoration:none;// underline(下划线) overline(文本上的一条线) line-through(删除线) inherit(从父元素继承 text-decoration 属性);//更多样式简写方式:font:font-style font-weight font-size/line-height font-family;
盒模型
将每个元素都看成一个盒模型,有四个方面,包括内容、内边距(padding)、边框(border)和外边距(margin)。
外边距提供元素之间的间距,而内边距是在内容周围增加额外的空间。可以将内边距看成元素的一部分,而外边距包围元素,将它与其他元素隔开。
- background(背景)
background-image:url(../images/baidu.jpg);//注意:url中没有引号background-repeat:no-repeat(图像不重复); // 或者repeat-x(图像在x方向上重复) repeat-y(图像在y方向上重复) inherit(继承父元素);background-position: top left;//把图像放在左上角,还有其他指定位置的方法 (在盒子内)简写方式:background:url(../images/baidu.jpg) no-repeat top left;
- padding(内边距)和margin(外边距)
padding-left:14px;//设置左内边距margin:14px; //同时设置四个方向的外边距padding:10px 20px 10px 10px;//上、右、下、左分别指定/*当内容区宽度为auto时,浏览器会根据需要拓展内容区;外边距为auto时,浏览器会设置正确的外边距,另外会确保左右的外边距相同,所以会内容居中*/margin-left:auto;margin-right:auto;
- border(边框)
border-style:solid(实线);//dotted(虚线:点点点) dashed(破折线)border-width:thin;//边框宽度:medium thick 1px 3px 5px border-color:rgb(0,255,255);//边框颜色border-top-color:#444444;//指定其中一个边框border-radius:2px;//指定边框圆角大小简写方式:border: thin solid #444444;
- width和height
//width和height针对内容区的宽度;width:500px;height:300px;
text-align:文本对齐
text-align(只能)用在块元素上,对块元素内的所有内联元素(包括img元素)对齐。如果直接用在内联元素上则不起作用。
层叠的概念
如果要找到元素的某个属性值(如font-size):
1. 搜集所有样式表,包括作者写的、读者加的和浏览器默认的;
2. 找到所有匹配的声明;
3. 对所有匹配的规则进行排序(!important优先级最高),按作者>读者>浏览器排序;
4. 按特定性对所有声明排序:比如div > h1 比 h1更特定。
5.最后对于有冲突的规则,再按照他们在样式表中出现的顺序排序,最后出现的最重要;
6. 如果最后还是没有找到,则往上继承父元素;如果该元素不能继承,则使用浏览器默认值。
CSS位置样式
流的概念
浏览器从最上面的html文件开始,从上到下沿着元素流逐渐显示遇到的元素。显示规则为:在每个块元素之间加入一个换行;内联元素在水平方向上互相挨着。如果内容区或者浏览器太窄,内联元素会自动换行。
- 并排放置两个内联元素时
 上下放置两个块元素时
float属性
float属性尽可能的向左或者向右浮动一个元素(浮动元素必须有一个宽度),此时正常流中会将这个元素删除,它下面的所有元素都会绕流。
总结:可以将浮动元素当成块元素忽略的元素,但是内联元素知道它在哪儿。- clear解决float设置后,下面的元素往上重叠的问题
#footer{ clear:right;//设置它的右边没有浮动元素}
position
position属性默认是static;position:fixed;//将元素放置相对于浏览器的位置上(而不是相对于页面),因此fixed元素位置永远不会改变(即使滚动页面,元素位置也不会改变);position:relative;//相对定位position:absolute;//绝对定位当元素设置绝对定位时,会将其从流中完全删除,后面的块级元素和内联元素都会忽略它(与float属性不同)。//绝对定位的元素在一般元素的上面,但同时有多个绝对定位的元素时,需要用z-index属性区分top:10%;//百分数是相对于浏览器窗口宽度和高度的百分比div{ position:absolute; left:20px; //距离父元素的左边20个像素}div{ position:relative; left:20px; //将元素从原来的(相对)位置右移20个像素}
overflow
在元素太小而不能包含所有文本时控制文本的溢出方式
overflow:visible;//默认方式。自动扩大矩形区域以容纳溢出的文本overflos:hidden;//隐藏溢出的文本overflos:scroll;//给元素添加滚动条,以便可以通过滚动看到所有文本
用CSS建立表格 display:table
<div id="tableContainer"> <div id="tableRow"> //table-row表示结构中的一行 <div id="main"> //table-cell表示每行中的一列 <p>jsafkjkalfas</p> </div> <div id="siderbar"> <p>jsfjljflaf</p> </div> </div> </div>#tableContainer{ display:table;//建立表格结构 border-spacing:10px;//代替外边距margin设置,性质一样;表示每个格子之间的外边距}#tableRow{ display:table-row;//表示结构中的一行}#main,#siderbar{ display:table-cell;//表示每行中的一列(设置table-cell后margin属性无效)}
Html表格
//html<table> <!-- 开始表格 --> <caption>德玛西亚</caption><!-- 表格标题(一些老的浏览器不支持位置调整功能)--> <tr> <!--开始一行--> <th>City</th> <!-- 表头 --> <th>Date</th> <th>Temp</th> <th>Altitude</th> <th>Population</th> <th>Diner Rating</th> </tr> <tr> <td>Walla Walla,WA</td> <!-- 每一项 --> <td>June 15th</td> <td>75</td> <td>1204ft</td> <td>29686</td> <td>4/5</td> </tr> </table>//csstable{ caption-side: bottom;//将标题移到表格下方}
html表格和css表格的区别:如果确实需要在页面中创建表格数据时,采用html表格;如果只需要对内容使用表格的方式呈现,那么就用css表格。
表格中无外边距
注:border-spacing对IE6一下版本不支持
border-collapse
border-collapse:collapse;
折叠边框,可以把两个紧挨的边框合并成一个边框
text-align
规定元素中的文本的水平对齐方式
tr>td:nth-child(2),tr>td:nth-child(3),tr>td:nth-child(6){ text-align: center; //默认是left}tr>td:nth-child(4),tr>td:nth-child(5){ //nth-child从1 开始计数 text-align: right;}tr>td:nth-child(4);//nth-child(even) nth-child(2n)都可以表示偶数项
跨行rowspan和跨列colspan
<tr> <td>Walla Walla,WA</td> <td>June 15th</td> <td>75</td> <td colspan="2">1204ft</td> <td>29686</td> <td>4/5</td></tr>
使用跨行或跨列是记得要删除多余单元格
列表标记list-style-type 和list-style-image
li{ list-style-type:circle;url(image/mark.gif); list-style-position:inside;//有缩进}//还可以定制标记li{ list-style-image:url(image/mark.gif); list-style-position:outside;//无缩进(默认)}
HTML表单
//form:表单开始标记;action:web服务器地址<form action="http://www.baidu.com" method="POST"> First Name: <input type="text" name="firstname" value="" /><br /> Last Name: <input type="text" name="lastname" value="" /><br /> <input type="submit" /></form>
文本输入
<input type="text" name="lastname" value="" placeholder="123" required/>//placeholder:占位提示;required:必须输入这个域
提交输入
<input type="submit" name="submit" value="" />
单选框输入
//每个选项必须用相同的type和相同的name,不过可以用不同的value<input type="radio" name="hotornot" value="hot" /><input type="radio" name="hotornot" value="not hot" />
复选框输入
//同上<input type="checkbox" name="hotornot" value="hot" /><input type="checkbox" name="hotornot" value="not hot" /><input type="checkbox" name="hotornot" value="cold" />
多行文本区
//rows和cols分别告诉浏览去文本去高度和宽度为多少个字符<textarea name="comments" rows="10" cols="48"></textarea>
下拉菜单
//如果使用<select multiple></select>,就会变成多选菜单<select name="charac"> //用name属性指定唯一的名字 <option value="Buckaroo">Buckaroo Banzai</option> <option value="Tommy">Perfect Tommy</option> <option value="Penny">Penny Priddy</option></select>
其他(并不是所有浏览器都支持)
- 数字输入
//限制只能输入数字<input type="number" min="0" max="20" />
- 范围输入
//类似于数字输入,但是它会显示一个滚动条<input type="range" min="0" max="20" step="5" />
- 颜色输入
//单击控件会出现颜色选择器<input type="color" name="1" />
- 日期输入
//单击控件会出现日期选择器<input type="date" name="1" />
- emai、url、tel、password输入
<input type="email" name="1" /><input type="url" name="2" /><input type="tel" name="3" /><input type="password" name="4" />//文本框的输入会被隐去
- 上传文件
//可以向服务器发送整个文件,此时Method必须用POST<input type="file" name="file" />
- 元素分组fieldset和legend
<fieldset>//包围一组元素 <legend>//为元素提供标签 <input type="checkbox" name="spice">Salt<br> <input type="checkbox" name="spice">Pepper<br> <input type="checkbox" name="spice">Garlic<br> </legend></fieldset>
框架
<frameset>
(框架集)已从HTML5中移除,但是<iframe>
(内联框架)仍然存在
- frameset和frame
<frameset rows="50,*"><!-- 将浏览器窗口垂直分为两部分,上面的高度为50像素,下面的占了剩余的高度--> <frame src="top.html" name="top" /> <!-- 每个frame指定应该链接到哪个文档--> <frame src="home.html" name="home" /> <noframes> <!--支持框架的浏览器会忽略noframes中的内容,类似于<noscripts>--> <body> <!--一般可用于<body>中的标签不能用于<frameset>标签内--> <h1>Sample Framed Site</h1> Your brower dose not support frames.Sorry! </body> </noframes> </frameset><a href="home.html" target="home">Home</a><!--浏览器根据name属性来链接到目标框架-->
- iframe
iframe 仍是HTML5的一部分,与图像类似,内联框架能够具有环绕其的文字,并且可以设置围绕内联框架的边框和页面空白。
<!--html代码--><body> <h1>Inline Frame Example</h1> <div> <iframe src="iframe.html" frameborder="1"> <!--<iframe>与</iframe>之间是当浏览器不支持iframe时显示的信息--> <p>Uh oh.....your brower does not support iframe!</p> </iframe> </div> </body><!--css代码-->iframe { frameborder:"1";//0和1,0表示没有边框}
内联框架常用于 从其他网站中引入内容