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="替代文本" /> table标签

用于结构一个表格

<table 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></div> <!-- 如果a标签的href属性值为空，那么这个a标签就会酿成一个隐藏的锚点，，看似href属性什么都没有，但是点击之后会跳转到网页的顶部 --> <a href="##">这里是网页的底部</a> <!-- 如果一个网页中存在过多的隐藏锚点(href值为空的a标签)，会严重的影响网页的加载效率 --> 表单 <form action="try" method="post"> <input type="text" ...> <input type="password" ...> <a>Check if visualCaptcha is filled</a> <button type="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>内容</div>

或者写在style标签内

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

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

<link ref="stylesheet" href="http://www.mamicode.com/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

权重