首页手记 html与css基础小结

html与css基础小结

标签：

Html/CSS CSS3

 1.<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
 2.<code>代码语言</code>。若是多行代码，可以使用<pre>标签。
 3.<tbody>…</tbody>：若加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
 4.摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的  读懂表格内容。
    语法：<table summary="表格简介文本">
5. <a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>： title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。
    注意：只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）

6. <a href="目标网址" target="_blank">click here!</a>：打开新窗口。
7. <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片地址" alt="下载失败时的替换文本" title = "提示文本">
8.下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性
9. <label for="控件id名称">
    注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

块级元素特点（a{display:block;}）
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。
块状元素也可以通过代码display:inline将元素设置为内联元素。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
如果上、右、下、左的填充都为10px;可以这么写div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可写为：div{padding:10px 20px;}
padding和margin的区别，padding在边框里，margin在边框外。
在网页中，元素有三种布局模型：流动模型（Flow）,浮动模型 (Float),层模型（Layer）
层模型有三种形式：绝对定位(position: absolute),相对定位(position: relative),固定定位(position: fixed).
参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1">
<div id="box2">相对参照元素进行定位</div></div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了），参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; }
定位元素加入position:absolute；#box2{position:absolute;top:20px; left:30px; }
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
1. p{color: #336699;}可以缩写为：p{color: #369;}
2. 当被设置元素为块状元素时用 text-align：center 就不起作用了，
  不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：（1）加入 table 标签，（2）设置 display;inline 方法，（3）设置 position:relative 和 left:50%;
  20.a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。