前端学习之一_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属性更接近于块元素。