前端学习之一_html学习

html元素分类

内连元素：出现在行内的元素

           <img>,<q>,<a>

块元素：前后自动插入换行的元素

        <h1>,<p>,<blockquote>

空元素：元素的开始标志和结束标志没有内容的元素

        <br>,<img>

 

特殊元素

<q>：

内连元素（出现在行内），用于简短文字的引用

<blockquote>

块元素（前后有换行符），引用一大段文字并独立显示

<br>

没有内容的元素即空元素，表示换行

<a>

链接元素

1）可以用title属性提供提示；

2）可以跳转到其他页面（herf属性），也可以通过锚跳转到同一个页面其他地方(id属性)；

3）target属性控制本窗口还是新窗口打开

<img>

图像元素，提供一种途径指定需要在页面中显示图像的位置；html是纯文本文件，图像并非是html文件的一部分，需要进行额外的依次请求和显示。

1）目前使用最广的图像格式是gif（支持透明），jpg；

2）可以使用alt属性，在图像不能正常显示时，给出文字提示信息；

3）最好给出图像的width和height属性，并不是为了控制样式，而是在图像下载之前，告诉浏览器图像的大小来调整布局，但不建议利用width和height属性来调整图像大小，因为这样的话，首先需要下载整张图像，因此，最好事先将图像大小调整为需要的类型。

 

 

html结构要点以及嵌套规则

1）html元素名称不区分大小写，不过最好都用小写

2）html总是用一个DOCTYPE开始，用于说明超文本类别（如协议版本4.0.1）

3)在DOCTYPE之后，网页以<html>标记开始，以</html>标记结束

4）<title>,<meta>和<style>元素可以放置的唯一位置就是<head>

5)<body>元素只能直接放置块元素<h1>,<p>,<blockquote>等，所有的内联元素和文本都必须在块元素中才能运行。

6）块状元素禁止包含在<p>元素中，因为只有文本才能组成段落，当然，段落中可以包含任何内联元素。

7）列表<ul>,<ol>只能包含列表项<li>,列表项<li>可以使任何内容，包括内联元素或者块元素。

8）和其他块元素不同，<blockqoute>只能直接包含块元素，请将文本或内联元素置于块元素之内，再一起加入<blockqoute>

9)可以讲内联元素任意嵌入另外一个内联元素中，不过有两种例外，<a>不能自我嵌套，<img>是空元素，也不能嵌套。

10）div用来将块级的内容分成不同的逻辑结构；在页面中，使用而不要滥用div，借用div将页面分成几个合理的逻辑结构，有助于网页结构的清晰和样式化，如果添加<div>仅仅使得页面拥有更多的结构，那除了使得页面变得更复杂之外，没有任何好处。

11）span可以把内联内容分成不同的逻辑部分，不会造成换行。

 

css样式

1）text-align只能用于块元素，可以使得块元素中的所有内联元素集中（不仅仅限于文本），也可以被任何嵌套的块元素继承。

2）可以设置内联元素的宽度，但是只有排版时才能看到效果，也可以为内联元素增添边界或补白——如果在内敛元素的四周都添加了边界，只能看到左边和右边的空间。可以在内敛元素的上侧和下侧添加补白，不过这些补白不影响周围其他内连元素的空间，所以补白会跟其他内联元素重叠。图像跟其他内联元素不同，其width，padding和margin属性更接近于块元素。