html+css

一.HTML5大纲

1.1框架

基础模板：

<!DOCTYPE html>//这是一条文档类型声明，告诉浏览器这是一个HTML5文档。

<html>//这是HTML文档的根元素的开始标签，所有的其他HTML内容都包含在<html>标签对之间。

<head lang="en">//这是<head>元素的开始标签，并且设置了lang属性为"en"，表示页面的主要语言是英语。<head>元素包含了关于文档的元数据（比如标题、样式表链接、脚本等）。

<meta charset="utf-8">//这是一个<meta>元素，它设置了文档的字符编码为UTF-8。UTF-8是一种能够支持多种语言的字符编码方式。

<title> </title>这是设置网页标题的<title>元素，但是这里没有填写实际的标题内容。网页标题会显示在浏览器标签页上

</head>//这是<head>元素的结束标签。

<body>//这是<body>元素的开始标签，网页中所有可见的内容都放置在这个标签对之间。

</body>//这是<body>元素的结束标签

</html>//这是HTML文档根元素的结束标签，标志着HTML文档的结尾。

1.2<head>标签

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

1.3<body>标签

body 元素定义文档的主体。属性不用记住。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

1.4常用模板

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>我的第一个 HTML 页面</title>
        <link rel="stylesheet" type="text/css" href="../CSS/Basics.css">
        <style></style>
        <script></script>
    </head>
    <body>
        <h1>Header H1</h1>
        <h2>Header H2</h2>
        <h3>Header H3</h3>
        <h4>Header H4</h4>
        <p>body 元素的内容会显示在浏览器中。</p>
        <p>title 元素的内容会显示在浏览器的标题栏中。</p>
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>
        <!-- <ul> Unordered List -->
        <!-- You can use unordered list tags to display a list fo items -->
        <ul>
            <!-- <li> list item -->
            <!-- Every list item needs to be put inside of  li tag -->
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>
        <!-- You can use ordered list tags to display a list fo items in certain order -->
        <ol>
            <!-- <li> list item -->
            <!-- Every list item needs to be put inside of  li tag -->
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ol>
    </body>
</html>

2.常用标签

HTML 标签参考手册

<a>标签定义

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

提示：您可能已经注意到了，W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

常见使用方法

<a href="http://www.w3school.com.cn">W3School</a>

提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

提示：请使用 CSS 来设置链接的样式。

href	URL	规定链接指向的页面的 URL。
target	_blank _parent _self _top framename	规定在何处打开链接文档。

<area>标签定义

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 <map> 标签中。

注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

常见用法

</map>

可选属性

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
href	URL	定义此区域的目标 URL。
target	_blank _parent _self _top	规定在何处打开 href 属性指定的目标 URL。
shape	default rect circle poly	定义区域的形状。

必需属性
alt	text	定义此区域的替换文本。

<article>标签定义

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：

论坛帖子
报纸文章
博客条目
用户评论

用法

<article>

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>

</article>

<aside>标签定义

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

用法

<p>Me and my family visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

The Epcot Center is a theme park in Disney World, Florida.

</aside>

<b>加粗标签

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

1. <blockquote>块引用标签

Here comes a long quotation:

<blockquote>

Here is a long quotation here is a long quotation here is a long quotation

here is a long quotation here is a long quotation here is a long quotation

here is a long quotation here is a long quotation here is a long quotation.

</blockquote>

元素前后添加了换行，并增加了外边距。

<ol>标签
1. 定义

<ol> 标签定义有序列表。

用法

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

1. <ul>标签
  1. 定义

<ul> 标签定义无序列表。

1. 1. 用法

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

CSS选择器CSS 元素选择器

p {

text-align: center;

color: red;

}

h1, h2, p {

text-align: center;

color: red;

}

1. CSS id 选择器

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {

text-align: center;

color: red;

}

注意：id 名称不能以数字开头。

1. CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {

text-align: center;

color: red;

}

在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐：

p.center {

text-align: center;

color: red;

}

1. CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {

text-align: center;

color: blue;

}

1. 后代选择器

CSS 后代选择器

1. 子选择器

CSS 子元素选择器

一.HTML5大纲

1.1框架

1.2<head>标签

1.3<body>标签

1.4常用模板

2.常用标签

<a>标签定义

常见使用方法

<area>标签定义

常见用法

<article>标签定义

<aside>标签定义

悦读