HTML & CSS之小白初入江湖

1. HTML

超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

——维基百科

1.1 HTML语义化

在HTML中语义化是一个非常重要的概念。

语义化就是配位，其含义就是用正确的标签做正确的事情。HTML语义化就是通过正确使用标签构建页面以达到使页面结构化得目的；便于浏览器和搜索引擎解析。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。并且使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

1.2 HTML常用标签

功能类标签

img标签

用于显示图像，常用属性有

• alt 图像替代文本

• width, height 宽和高

• ismap 图像映射

table标签

用于构造一个表格

    
                          
                  
                                      
Name:
                   
Age:
                   
Sex:
              
             
             
                  
                   
张
                   
10
                   
?
              
              
                   
赵
                   
15
                   
?
              
             
             
                  
                   
王
                   
20
                   
?
              
             
        

a标签

定义超链接实现页面跳转

定义锚点实现书签功能

    
    点击跳转到网页的底部
    
    这里是网页的底部
    

表单

    
    
         
         
     Check if visualCaptcha is filled    
     Submit form
    

type属性相关属性值

• button

• file

• hidden

• text

• password

• radio

• checkbox

• image

• reset

• submit

文本输入区使用<textarea>标签

下拉菜单标签： <select>

ul ol li标签

带有语义的标签

• em 强调

• strong 比em强调级别更高

• address 定义地址元素

• blockquote 定义块引用，通常情况下会产生缩进

• cite 通常情况下某段/句话引自某著作，使用此标签

• ins 定义被插入文本

• del 定义被删除文本

带有一定样式的标签(同时也带有语义)

• b 定义粗体文本

• i 斜体

• big 大号字体文本

• small 小号字体文本

• bdo 定义问本显示方向

• sup 上标文本

• sub 下标文本

输出类标签

• pre 代码中样式原样输出

• code 代码文本

• var 定义变量

h1~h6标签

用于设置标题

一级标题
...
六级标题

div span

div与span两个标签都是无意义的容器标签。常用于页面的布局。

div是块级元素，span是行内元素。

2. CSS

层叠样式表(Cascading Style Sheet,简称CSS)是一种用来为结构化文档如HTML添加样式的工具。

使用方式

CSS使用方式分为三种，它可以直接写在HTML标签内

    
     内容
    

或者写在style标签内

或者通过link标签引入样式表

选择器

基本选择器

• id选择器： #element  {}

• 类(class)选择器： .element  {}

• 类型(HTML标签)选择器： div  {}

• 通配符：   {}

综合选择器

• 后代选择器：div  p  {}

• 交集选择器：div.p  {}

• 并集选择器：div,p  {}

• 子选择器： div>p  {}

• 相邻兄弟选择器：div+p  {}

• 普通兄弟选择器：div~p  {}

• 序列选择器： ul li:last-child;  ul li:last-child

权重

当有不同选择器的不同样式作用在同一标签上，通过比较几个选择器的权重来确定由哪个选择器决定显示的样式。下面是不同选择器的权重量级大小关系

id选择器 > 类选择器 > 类型选择器权重比较过程如下：

1. id选择器数量多的权重大

2. id选择器数量相等时类选择器多的权重大

3. 前两个选择器数量各自相同时类型选择器数量多的权重大

4. 没有选中标签的选择器权重为0

5. 带有!important属性的选择器权重无限大(滥用会导致权重混乱问题)