初窥HTML

2016-12-02  本文已影响0人  Tyjo

HTML简介

HTML(Hyper Text Mark-up Language超文本标记语言)的缩写,标记:就是用来描述网页内容的一些特定符号.HTML不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。

HTML 最基本的语法是<标记符>内容</标记符>，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠"/",当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。

文档结构

所有的网页文件，通常由四对标记来构成文档的结构：

<html>
    <head>
        <title>
            标题
        </title>
    </head>
    <body>
        正文
    </body>
</html>

常见的HTML标签

CSS介绍

CSS语法结构

选择器{属性:值} 例：div {font-size:12px;}
参数说明：

CSS长度单位

相对长度单位：

CSS的三种书写方式

  1. 行内样式：直接在标签的style属性中书写。
  2. 内嵌样式：在本网页的style标签中书写。
  3. 外部样式：可以单独写在一个css文件中，然后在网页中用link标签引用，可以应用到多个html文件中。

它们的优先级为：行内样式 > 内嵌样式 > 外部样式
优先级遵循就近原则，作用范围越小，优先权越高。但是，可以通过使用!important语法来提升优先级（IE6不支持该语句）。

CSS选择器类型

标签选择器：就是针对HTML文档中的标签

p {font-size:12px;}
div {background:blue;}

类选择器:可以自己定义样式，应用于一个或多个网页内，类在网页中可以多次出现，用于定义重复的样式。

.example {color:red;}

id选择器：与类选择器基本相似，但是ID具有唯一性，在网页中只能出现一次，用于定义只出现一次的样式。

#example {color:red;}

群组选择器：将同样的样式定义用于多个选择器，选择器之间用逗号隔开。

p , div , .example { color : red; }

标签指定式选择器：既使用id或者class，又同时使用标签选择器。

h1.content { color : red; } //表示针对所有类选择器为content的h1标签

子标签选择器：作用于直接子标签

div > p { color : red; }

相邻选择器：作用于相邻的两个选择器

div + p { color : red; }

伪类：伪类用于向某些选择器添加特殊的效果

属性 描述
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定lang属性的元素添加样式。
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

CSS样式的特点

CSS中的元素分类

HTML中有许多标签，根据显示类型，主要分为两大类：

CSS布局

上一篇 下一篇

猜你喜欢

热点阅读