HTML与CSS基础知识补遗（一）

 

开始从零基础系统地学习前端知识了，虽说html和css多少了解一些，但是学着还是能发现很多新大陆....

 

一. HTML中head标签

1. <meta>标签：

　　meta标签里是一些基础的辅助信息，一般不在页面上显示出来。

　　（1）<meta charset="utf-8" />　　定义的页面字符集。

　　（2）<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" />　　这里是为爬虫方便提供的关键字信息，在使用搜索引擎的时候保护这些关键字的会被索引到然后被搜索到。

　　（3）<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />　　这里是会显示在搜索引擎摘要里的一些内容。

               

　　（4）<meta name="robots"content="none">　　用于告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

 　  （5）特别要注意的http-equiv属性，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。比如：

　　A)  <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">　　 间隔 content的秒数时间后刷新页面，可以重定向到其他URL。

 　  B)  <meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> 　　设置socket值和过期时间等。

　　C）<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 　　设置页面过期时间，过期以后需要从新从服务器获取信息。

2. 在head中其他的重要标签：

　　（1）<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon" /> 　　是设置页面在浏览器标签栏上的小图标，如图所示。

　　　　　　 

　　（2）<title>博客园 - 开发者的网上家园</title> 设置标签上的文字信息，也可以参考上图。

 

 

二. HTML中body标签

1. 内联标签和块标签的概念

　　html的标签主要可分类为内联和块标签两种，可以通过css样式里的display来设置，内联的值为inline，块为block，还有一种inline-block。

　　（1）块级标签示例：<p><h1><table><ol><ul><form><div>

　　特点包括：总是在新行上开始；高度，行高以及外边距和内边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。它可以容纳内联元素和其他块元素。

 

　　（2）内联标签示例：<a><input><img><sub><sup><textarea><span>

 　　特点包括：和其他元素都在一行上，直到该行填满；高，行高及外边距和内边距不可改变；宽度就是它的文字或图片的宽度，不可改变；内联元素只能容纳文本或者其他内联元素。

　　设置height，上下的margin和padding无效，或可通过line-height来设置。

 

　　（3）inline-block：就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

 

 

三. CSS

　　1. 选择器！

　　赶脚选择器应该是CSS的核心了，如果不是直接在行内元素处写css，则我们必须在外部的css中定义所有内容，那么势必会面对定义的属性如何与HTML内的元素关联起来的问题。选择器就是告诉CSS属性对哪些元素起作用的。主要包括如下的选择方式：

　　（1）* 通配选择器，可以匹配所有的元素；如 * {margin 0}，就会给所有的标签加上这个样式。

　　（2）通过标签选择，即给所有的某标签加上属性；如 p {margin 0}，就会给所有的p标签加上这个样式。

　　（3）通过class来选择，我们在定义HTML的时候可以给元素加上class命名，多个元素可以有相同的class；如有一些标签我们命名其 class="aaa"，通过 .aaa{margin 0}，就可以给所有class为aaa的加上样式。

　　（4）通过id来选择，HTML的标签还可以定义id，这个id必须是唯一的；如我们命名一个标签 id="bbb"，通过 #bbb{margin 0}，就可以添加样式。

　　（5）限定后代的组合选择：上述除了通配符意外，任意的选择方法，我们都可以通过空格的方式组合起来，组合多次，其意思就是从最前面的标签开始找，找到最后面都符合的标签设定样式。最前面的表示在最外层，然后依次向里面推进；如 .aaa ul li .bbb a {color:white}，意思就是从所有class aaa的标签开始找，到里面的ul，再到li，再到class为bbb的里面的所有超链接标签，设定其颜色。

　　（6）我们还可以给多个选择赋予同样的样式，通过","逗号来讲所有要加上同样样式的放在一起，可以节省很多空间和人力...比如 body,p,ul,li,h1,h2,h3 {margin:0px;}。

　　（7）通过子元素选择；这个方式和（5）有点像，但是这个子元素是严格限定了必须是直接子元素才会被选择，如果被嵌套在了其他子元素里面（类似孙子之类的...）就选择不到了。比如<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>和 <h1>This is <em>really <strong>very</strong></em> important.</h1>，如果通过 h1 > strong {color:red;}来选择，前者是可以添加上样式的，后者就不行了，因为后者的string嵌套在了内层的em里面。

 　  （8）通过相邻元素来选择：这个描述起来比较抽象，示例如下：h1 + p {margin-top:50px;} 会给所有紧接在h1标签后面的p标签设定样式。

 

未完待续....

还需要些其他一些选择器，css的继承和覆盖原则，盒子模型...