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 图像映射

    <img alt="替代文本" width="100" height="200" />

table标签

用于构造一个表格

    <table border="1" frame="void">
        <!-- 行使用tr标签来表示 -->
        <thead>
            <tr>
            <!-- 单元格使用td来表示 -->
            <th>Name:</th>
            <th>Age:</th>
            <th>Sex:</th>
        </tr>
        </thead>
        <tbody>
            <tr>
            <td>张</td>
            <td>10</td>
            <td>?</td>
        </tr>
        <tr>
            <td>赵</td>
            <td>15</td>
            <td>?</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
            <td>王</td>
            <td>20</td>
            <td>?</td>

        </tr>
        </tfoot>
    </table>

a标签

定义超链接实现页面跳转

<a href="http://..."></a>

定义锚点实现书签功能

<!--回到页首-->
<a href="#"></a>

<!--跳转到页末-->
<a href="#test">点击跳转到网页的底部</a>
<div style="height: 2000px"></div>
<!-- 如果a标签的href属性值为空，那么这个a标签就会变成一个隐藏的锚点，看似href属性什么都没有，但是点击之后会跳转到网页的顶部 -->
<a href="##" name="test">这里是网页的底部</a>
<!-- 如果一个网页中存在过多的隐藏锚点(href值为空的a标签)，会严重的影响网页的加载效率 -->

表单

<form name="sample" class="sample" action="try" method="post">
    <input type="text" ...>
    <input type="password" ...>
    <a id="check-is-filled" class="info-btn">Check if visualCaptcha is filled</a>
    <button type="submit" class="submit">Submit form</button>
</form>

type属性相关属性值

button
file
hidden
text
password
radio
checkbox
image
reset
submit

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

下拉菜单标签： <select>

ul ol li标签

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

带有语义的标签

em 强调
strong 比em强调级别更高
address 定义地址元素
blockquote 定义块引用，通常情况下会产生缩进
cite 通常情况下某段/句话引自某著作，使用此标签
ins 定义被插入文本
del 定义被删除文本

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

b 定义粗体文本
i 斜体
big 大号字体文本
small 小号字体文本
bdo 定义问本显示方向
sup 上标文本
sub 下标文本

输出类标签

pre 代码中样式原样输出
code 代码文本
var 定义变量

h1~h6标签

用于设置标题


<h1>一级标题</h1>
...
<h6>六级标题</h6>

div span

div与span两个标签都是无意义的容器标签。常用于页面的布局。
div是块级元素，span是行内元素。

2. CSS

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

使用方式

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

<div style=" color: red;">内容</div>

或者写在style标签内

<style>
    div {
        color: red;
    }    
</style>

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

<link ref="stylesheet" href="test.css">

选择器

基本选择器

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选择器 > 类选择器 > 类型选择器

权重比较过程如下：

id选择器数量多的权重大
id选择器数量相等时类选择器多的权重大
前两个选择器数量各自相同时类型选择器数量多的权重大
没有选中标签的选择器权重为0
带有!important属性的选择器权重无限大(滥用会导致权重混乱问题)

技术图片