上传html网页到后天,【从入门到上岗】web布局篇--html标签

我们看到一个html文档是由一对对标签组成的，它们就相对于一个个容器，按照我们给定的布局显示，同时容器之间又能一层层嵌套，形成我们所见的网页内容。

我们把一对标签可以称作一个网页元素，除了如上你所看到的div,它还有很多兄弟，这些兄弟元素大概分为两类，块级元素和行内元素。如上，两个div如果不定义float属性，第二个就会换行，它是一个块级元素。顾名思义行内元素是定义在行内的，它不会强制换行，如span标签就是一个行内元素，如果定义它的宽和高这时并不会生效，因为它不是块级元素。但当你给它float属性或定义display:block的方式，它才会具有宽和高的属性，这是一种转化为块级元素的方式。

实际上html标签都具有一些隐藏的或说自带的属性，我们先认识下display这个样式属性，我们可以理解为它可以表示元素的显示方式。块级元素自带display:block属性，而行内元素自带display:inline属性，它们之间可以相互转换，同时你还能设置display:inline-block，意为行内块级显示，这样span标签也能在行内标示出宽和高。

通常比较常用的块级元素有：//

/

• /
• ///////等，行内块级元素有：///等。

  虽然感觉挺多，但一般用到的并不多，只靠div我们也能完成大部分布局。除了div，我们常用的还有span。它们的共同点是没有太多自己的特征，方便自定义输出我们想要的布局效果。

  一些有特征性的标签同样也很重要，比如

  标签自带字体加粗的属性font-weight:bold; 自带设置字体为斜体属性font-style: italic; 表示图片区域，可以定义src="./1.jpg" 表示显示的同目录下的1.jpg图片。

  和
• 也是很常用的标签，它们是嵌套的关系，可以表示列表内容：
• 1

2

注意到行前圆点标记了吗，那是

自带属性，一般我们不需要它，把属性list-style-type设置成list-style-type: none;就可以了。

除此之外还有表格标签组，当我们用到一些UI框架之后，一般就不会用表格了，除了我们确实需要它进行一些高度自定义化的布局。

品类数量

共计10苹果4桃子6

table标签上可以设置border属性。thead表示表头部分，tfoot表示表尾部，tbody是主题部分，如果无需定义，这三个子标签都可以省略，只留下tr行,td列就好了，th表示列标题。

标签组也是很常用的文本标签，一段文本可以有多个p标签，每一组p标签代表一个段落。可以用

标签换行，但区别是它不具有段落格式。

庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐 贤今人诗赋于其上，属予作文以记之。

予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？

若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。

至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。

嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲，居庙堂之高则忧其民，处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶？其必曰“先天下之忧而忧，后天下之乐而乐”乎！噫！微斯人，吾谁与归？

代码中预留的空格并没有显示，如果要显示多个空格，可以在文档中用多个&nbsp占位符显示多个空格。p标签之间的p标签可以不闭合也可以表示段落分层，这只是一个特例。