HTML和CSS基础知识总结

Published on:

一:先说HTML

1. div / span 不同

div是块级元素,是把HTML 元素装起来的容器,或者说是container,container里面可以有很多其他不同的container。
span是内联元素,是把文本装起来的容器,

div可包含 span,但反过来不可以。

不可以这样写

<span>
    <div></div>
<span>

div用于布局,所有元素都包起来;而span只能把小部分的文字/图片包起来。

举个例子:

<div>
      <h1>我是<span>标题</span></h1>
     <div>
          <span>我是文字内容</span>
     </div>
</div>
2. id与class的不同

一、id有唯一性
同一个id不能被两个html元素使用,比如:

<div>
     <h1 id=a>文字</h1>
     <p id=a>文字</p>
</div>

这样是不允许的;但相同class 可以被多个html元素同时引用

二、id 定义范围更广
id会被用在框架布局、表格上,而class 只用于纯css样式。

三、id优先
如果一个元素同时被id 和 class 定义,最终会显示 id 的 css 规则

3.<p><br> 不同

<p> (paragraph)是一个块级元素,定义整段文字。
<br/>只是个换行符,用于换行。

4.如何使用 table 排版

<table>把行<tr><th><td>包在里面。

<table>
     <tr>
          <th>标题格子1</th>
          <th>标题格子2</th>
     </tr>
      <tr>
          <td>内容格子1</td>
          <td>内容格子2</td>
     </tr>
</table>

浏览器显示如下:

标题格子1 标题格子2

内容格子1 内容格子1

5.超链接常用写法
<a href="http://example.com/legal.html" target="_blank">legal page</a>  其中target="_blank"另外单独开一个页面
<a href="http://example.com/legal.html" target="_self">legal page</a>   target="_self"直接换成新页面打开
(http://example.com)不依赖任何服务器的相对地址
6.标签常用
<p> ... </p>    段落
<b> ... </b>    加粗
<a href="url"> ... </a>  超链接
<b> ... </b>    粗体t
<i> ... </i>    斜体
<u> ... </u>    下划线
<strike> ... </strike>  删除线
<sup> ... </sup>    上标文字
<sub> ... </sub>    下标文字
<small> ... </small>    纤细字体
7.img用法
Images  
<img src="url" alt="text">  Basic Image
<img> Tag Attributes:  
src="url"   URL or filename of image (required!)
alt="text"  Alternate Text (required!)
align="?"   Image alignment within surrounding text (*)
width="??"  Image width (in pixels or %)
height="??" Image height (in pixels or %)
border="??" Border thickness (in pixels) (*)
vspace="??" Space above and below image (in pixels) (*)
hspace="??" Space on either side of image (in pixels) (*)
8.特殊符号
&lt;    < - Less-Than Symbol
&gt;  > - Greater-Than Symbol
&amp;   & - Ampersand, or 'and' sign
&quot;  " - Quotation Mark
&copy;  © - Copyright Symbol
&trade; ™ - Trademark Symbol
&nbsp;    - A space (non-breaking space)
&#??;   ISO 8859-1 character - replace ?? with the iso code

添加背景颜色:
<body bgcolor="yellow">
添加电子邮件:
<a href="mailto:xxx@yyy">
产生文本框:
<input type="text">

二:再说所CSS

1. margin 与 padding 的差异

margin 是轮胎,padding是轮毂

2. 什么是 box model

如果margin 是轮胎,padding是轮毂,box model 就是整个轮子。只是,这个轮子是方形的,利用不同尺寸规格的轮子排出网页版面。

3. 为何要使用 em 而非 px 来定义字的大小

em更灵活,em会根据其他因素的改变而改变,使字体在原设计中的比例不变。例子,当

size变化时,“我是标题”与文字内容的相对大小不变,还是原来的相对比例。

我是标题

文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

h1 {margin : 10px 0px 15px 5px;}
margin-top: 10px;
margin-right: 0px;
margin-left: 5px;
margin-bottom: 15px;

Comments

comments powered by Disqus