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(倾斜) inherit
color: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>
//css
table{
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表示没有边框
}
内联框架常用于 从其他网站中引入内容