html与css基础小结

317 查看

 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 src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
8.下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性
9. <label for="控件id名称">
    注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
  1. 块级元素特点(a{display:block;})
    (1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。
    (2)元素的高度、宽度、行高以及顶和底边距都可设置。
    (3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)。

  2. 块状元素也可以通过代码display:inline将元素设置为内联元素。
  3. 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。
  4. 如果上、右、下、左的填充都为10px;可以这么写div{padding:10px;}
    如果上下填充一样为10px,左右一样为20px,可写为:div{padding:10px 20px;}
  5. padding和margin的区别,padding在边框里,margin在边框外。
  6. 在网页中,元素有三种布局模型:流动模型(Flow),浮动模型 (Float),层模型(Layer)

  7. 层模型有三种形式:绝对定位(position: absolute),相对定位(position: relative),固定定位(position: fixed).
  8. 参照定位的元素必须是相对定位元素的前辈元素:
    <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 以后,就可以了。