前端基础：HTML

ntroduction

HTML 是一种描述网页语言，指的是超文本标记语言 (Hyper Text Markup Language)。其中，超文本指的是网页上可以包含图片，视频，连接信息。标记也叫做标签，所以标签书写的是<内容>。语言就是一种交流工具，HTML 是用户与浏览器之间交互工具。

简单说，HTML 是由浏览器解析执行的，它不会将 HTML 标签展示出来，而是会解析 HTML 标签，以特定效果展示出来。

Syntax

HTML 可以直接使用文本编辑器来编写
HTML 文件它的后缀名是 .htm 或 .html
<html> 标签它代表当前页面是一个 HTML
<head> 标签中可以声明 HTML 页面的相关信息
<body> 标签中它主要是用于显示页面信息
标签要有开始，有结束。开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭 <br/>。
大多数标签它具有属性，属性值要使用引号引起来。
HTML 本身是不区分大小写的。

<html>
    <head>HEAD</head>
    <body>BODY</body>
</html>

Tools

可以使用 JetBrains WebStorm 或者 VS Code 进行开发。

HTML Tags

文件标签

<html> 代表当前书写的是一个 HTML 文档

<head> 存储的本页面的一些重要的信息，它不会显示

标签下有一个子标签 <title> 它是用于定义页面的标题的

<body> 书写的内容会显示出来，属性：1. text 用于设置文字颜色；2. bgcolor 用于设置页面的背景色；3. background 用于设置页面的背景图片

排版标签

HTML 注释

<br/> 标签

br 标签就是一个换行功能标签

<p> 标签

在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行

常用属性 align 的作用是设置段落中的内容对齐方式，可取值有 left right center

<hr> 标签

hr 标签会在页面上产生一个水平线

常用属性：

align：可取值有 left right center 代表水平线位置

size：代表水平线高度（厚度）

width：代表水平线宽度

color：水平线的颜色

关于 HTML 中标签属性

两种方式:

直接设置值，默认单位是 px （像素） <HR WIDTH="200">
可以设置百分比 <HR WIDTH="35%">

<div> 标签

Div 是一个块标签

Div 与 CSS 结合，会更好对页面进行排版

<span> 标签

Span 标签也是一个块标签Div 与 span 区别：Div 会自动换行，我们也叫这样的标签为行级元素Span 标签它不会自动换行，我们也叫它为行内元素

字体标签

<font> 标签

Font 标签可以设置字体，字的大小及颜色

常用属性：

Face：用于设置字体，例如宋体隶书楷体

Size：用于设置字的大小

Color：用于设置字的颜色

我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。每一种颜色的饱和度和透明度都是可以变化的，用 0～255 的数值来表示。如纯红色表示为 (255，0，0)，十六进制表示为 #FF0000。按这种表达方式，理论上我们可以得到 256 * 256 *256=16777216 种颜色。

使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为 #cc3300 时，也可以使用 #c30 这种简化的方式来表示。
RGB 颜色表示法：RGB(x,y,z)，x、y、z 是 0 ～ 255 之间的整数。
在线颜色选择器：http://www.86y.org/code/colorpicker/color.html

标题标记

<h1> 最大 <h6> 最小，它们代表的是标题，可以使用 <b> <i> 对文字设置加粗或倾斜

注意：在 HTML 中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

清单标记（列表标记）

有序清单：

<!-- 有序列表 I II III-->
<ol type="I" start="3">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

图形标签

<img> 可以让我们在网页引入一张图片

常用属性

src 代表的图片的路径
width 图片的宽度
height 图片的高度
border 用于设置图片的边框
alt 如果图片不可以显示时，默认显示的文本信息
align 图片附件文字的对齐方式，取值有：left right middle top bottom

超连接标签

<a> 标签可以实现跳转到其它页面操作。超链接内容不仅可以是文本，也可以是图片等信息

常用属性

href 代表的要跳转的路径
name 属性可以在本页面设置一个锚点
target 这个属性规定在何处打开这个链接文档，可取值：_blank _self _parent _top framename

表格标签

<!-- 学习表格标签 -->
<table border="2" align="center" width="400px">
    <caption>学生成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>语文成绩</th>
        <th>数学成绩</th>
        <td colspan="2" align="center"><b>操作</b></td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>修改</td>
        <td>删除</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>90</td>
        <td>66</td>
        <td>修改</td>
        <td>删除</td>
    </tr>
</table>

表单标签

通过表单可以将要提交的数据提交到指定的位置

<!-- 表单：用户注册案例 -->
<form name="form1" action="user/login" method="POST">
    <table border="1" width="64%" align="center">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <tr>
            <td>地址：</td>
            <td>
                <select name="province">
                    <option value="0">--请选择省--</option>
                    <option value="10001">广东</option>
                    <option value="10002">上海</option>
                    <option value="10003">山东</option>
                </select> 省
                <select name="city">
                    <option>--请选择市--</option>
                    <option value="1000301">广州市</option>
                    <option>深圳市</option>
                    <option>东莞市</option>
                </select> 市
            </td>
        </tr>
        <tr>
            <td>编程语言：</td>
            <td>
                <input type="checkbox" name="language" checked="checked">Java
                <input type="checkbox" name="language">Python
                <input type="checkbox" name="language">Go
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td>
                <input type="file" name="image">
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td>
                <textarea name="remark" rows="5" cols="100"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注册"> 
                <input type="reset" value="取消"> 
            </td>
        </tr>
    </table>
</form>

框架标签

通过框架标签可以定制 HTML 页面布局

在 HTML 页面上去描述框架信息时，不可以将 <frameset> 写在 <body> 标签中

framesetTest.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML 框架标签</title>
    </head>
    <!-- rows 定义了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
    <frameset rows="100, * , 100"> 
        <frame name="topModule" src="./top.html"></frame>
        <frameset cols="100, * ">
            <frame name="menuModule" src="./menu.html"></frame>
            <frame name="contentModule" src="./content.html"></frame>
        </frameset>
        <frame name="footModule" src="./foot.html"></frame>
    </frameset>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>top</title>
    </head>
    <body>
        <div>头部信息</div>
    </body>
</html>

foot.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>footL</title>
    </head>
    <body>
        <div>底部信息</div>
    </body>
</html>

menu.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>menu</title>
    </head>
    <body>
        <div>菜单信息</div>
    </body>
</html>

content.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>content</title>
    </head>
    <body>
        <div>内容显示区</div>
    </body>
</html>

其它标签与特殊字符

<meta> 标签

它可以对页面进行描述及热词设置，可以方便搜索引擎查找页面
通过 meta 标签设置 http 响应信息
通过 meta 标签可以设置页面的编码，<meta http-equiv="Content-Type" content="text/html; charset=gbk">
通过 meta 标签来设置页面加载后在指定的时间后跳转到指定的页面，<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

<link>标签

使用 link 标签来导入 CSS

特殊字符

详情查看菜鸟教程：https://www.runoob.com/charsets/ref-html-ascii.html

HTML DOM

Introduction

DOM, Document Object Model -- 文档对象模型，是 HTML 和 XML 文档的编程接口，以树结构表达 HTML 文档。

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM Node

DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。

节点树中的节点彼此拥有层级关系。常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

DOM 方法 & 属性

HTML DOM 方法是可以在节点（HTML 元素）上执行的动作。

HTML DOM 属性是可以在节点（HTML 元素）设置和修改的值。

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是能够执行的动作（比如添加或修改元素）。属性是能够获取或设置的值（比如节点的名称或内容）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM</title>
    </head>
    <body>
        <div id="div1">
            <p id="p1">Hello</p>
            <p id="p2">Hello</p>
        </div>
        <script>
            // 先获取 P 元素
            var element = document.getElementById("p1")
            // 直接修改 p 元素的内容
            element.innerHTML = "此时已是修改后的内容"

            // 修改 p2 标签的样式
            var ele = document.getElementById("p2")
            ele.style.color="blue"
            ele.style.fontFamily="宋体"
            ele.style.fontSize="larger"

            // 添加元素
            // 创建一个p元素
            var elementP = document.createElement("p")
            // 创建一个内容
            var nodeText = document.createTextNode("新加的 P 元素")
            // 把文字内容添加到p元素中
            elementP.appendChild(nodeText)
            // 把新创建的p元素添加div1元素中
            var div1 = document.getElementById("div1")
            div1.appendChild(elementP)

            // 插入添加新的元素
            // 创建一个新的元素
            var eleP = document.createElement("p")
            // 创建一个内容
            var noText = document.createTextNode("在 P1 元素前添加的新元素")
            // 把文字内容添加到 p 元素中
            eleP.appendChild(noText)
            // 把新创建的 p 元素添加 div 1 元素中
            var parentDiv1 = document.getElementById("div1")
            // 获取指定被添加的元素
            var p1 = document.getElementById("p1")
            // 在元素前添加；参数说明：1.要添加的元素；2.在那个元素之前添加（指定一个元素）
            parentDiv1.insertBefore(eleP, p1)

            // 删除元素
            // 获取父元素
            var pdiv1 = document.getElementById("div1")
            var removep1 = document.getElementById("p1")
            // 使用父元素删除该元素
            pdiv1.removeChild(removep1)
        </script>
    </body>
</html>

DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时，可以执行 JavaScript，比如发生用户点击一个 HTML 元素的事件。

如需在用户点击某个元素时执行代码，可以把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM 事件</title>
        <!-- JavaScript 代码必须写在 script 中 -->
        <script>
            function onLoadFun(){
                alert("已载入...");
            }
            // 文本框失去焦点事件
            function onBlurFun(){
                alert("此方法是文本框失去焦点事件，用来校验此文本框输入数据的")
            }
            // 表单被提交时执行事件
            function onSubmitFun(){
                alert("此表单已提交，这个方法也可以来作为数据校验的");
            }
            // 元素被改变时触发事件
            function onChangeFun(){
                alert("文本框元素已输入新的数据")
            }
            // 当鼠标悬停在某一个元素上时执行的方法
            function onMouseOverFun(element){
                element.innerHTML = "鼠标已停在H1元素上了"
            }
            // 当鼠标离开某一个元素时执行事件
            function onMouseOutFun(element){
                element.innerHTML = "鼠标已离开H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求：当页面被载入时，执行一个代码，弹框提示已载入 -->
    <body onload="onLoadFun()">
        <!-- 需求：在一个表单中有用户名录入的文本框，当输入完文本框的时候进行名称校验，提交的时候弹框显示 -->
        <form onsubmit="onSubmitFun()">
            用户名：<input id="username" name="username" onchange="onChangeFun()" >
            <br/>
            <button type="submit">提交</button>
        </form>
        <!-- 需求：有一个 H1 标签元素，当鼠标移动到 H1 元素上时，修改文字，当鼠标移出元素时执行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1>
    </body>
</html>

想了解更多，欢迎关注我的微信公众号：Renda_Zhang

TML 简介

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合开发(www.zixue365.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

尝试一下 »

实例解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 网页结构

下面是一个可视化的HTML页面结构：

<html>

<head>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

HTML 编辑器

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

接下来我们将为大家演示如何使用Notepad++工具来创建 HTML 文件，其他两个工具操作步骤类似。

Notepad++

Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

步骤 1: 新建 HTML 文件

在 Notepad++ 安装完成后，选择" 文件(F)->新建(N) "，在新建的文件中输入以下代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合开发提供(www.zixue365.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

步骤 2: 另存为 HTML 文件

然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html:

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。

在一个容易记忆的文件夹中保存这个文件，比如h5混合开发

步骤 3: 在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择"文件"菜单的"打开文件"命令，或者直接在文件夹中双击您的 HTML 文件,

运行显示结果类似如下:

Notepad++ 和 Sublime Text 还可以配合 Emmet 插件来提高编码速度。
Emmet 官网：http://emmet.io/

HTML 基础- 4个实例

不要担心本章中您还没有学过的例子，

您将在下面的章节中学到它们。

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

实例

<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3>

尝试一下 »

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

实例

<p>这是一个段落。</p><p>这是另外一个段落。</p>

尝试一下 »

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

实例

<ahref="http://www.zixue365.com">这是一个链接</a>

尝试一下 »

提示:在 href 属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识).

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

实例

<imgsrc="/images/logo.png"width="258"height="39"/>

尝试一下 »

注意： 图像的名称和尺寸是以属性的形式提供的。

HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素

开始标签 *	元素内容	结束标签 *
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

<p大多数 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.

元素内容是: 这是第一个段落。

<body> 元素:

<body>

<p>这是第一个段落。</p>

</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>

<p>这是第一个段落。</p>

</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

h5混合开发使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

TML+CSS

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

注释格式：<!—内容 –>

编码与特殊符号

1.  (空格)

2.> (大于号)

3.&lt；(小于号)

4."(引号)

5.©(版权号@)

路径

1.相对路径(Relative Path) 同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

2.Web根目录下建了一个目录叫html_demo，然后在该目录下放了一个文件index.html，

这个文件的绝对路径:

http://127.0.0.1:8080/html_demo/index.html

表单（form）元素

1.单行文本框（text)

2.密码框（password）

3.单选按钮（radio) 选中的话checked=="true"

4.文件选择框（file）

5.复选框（checkbox）

6.下拉列表（select）

7.提交按钮（submit）

8.重置按钮（reset）

9.文本域（textarea）

表单高级用法

1.关联表单元素（label）

2.只读属性（readonly）

3.禁用属性（disabled）

表格高级标签

1.表格标题<caption>

2.页眉<thead>

3.表头<th>

4.数据主体<tbody>

5.页脚<tfoot>

表格的跨行与跨列

1.跨列 colspan

2.跨行rowspan

文档的内联框架

使用<iframe>标签嵌套另一个页面

面试题：get方法和post方法区别

1.get方法提交参数在地址栏可见

2.post方法一般用于多数据、保密数据提交

CSS

Cascading Style Sheet 级联样式表

能控制页面的样式和布局，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

网页文件与样式文件相分离，提高开发效率

应写在<head>标签之间，加上 type="text/css"属性

<div>和<span>提高网页加载速度

1．常用块元素div，p，ul，li //ul是定义无序列表的样式 li是列表内行的样式 ol是有序 dl.dt是自定义列表

2．常用内联元素span，a，label //span定义一个区域 //label标签主要用于绑定一个表单元素

SEO搜索引擎优化：在搜索时从搜索结果中获取的访问量将更高

CSS手册：http://www.w3school.com.cn/cssref/index.asp

注释格式：/* 内容 */

CSS属性

1．CSS 背景属性（Background）

background-color	背景色，取值如，red，#FF0000
background-image	背景图片,如:background-image:url(“./images/bg.png”);
background-position	背景开始位置,包括水平方向(X轴)和竖直方向(Y轴)的设置 X轴取值：left，center，right或像素值或百分比 Y轴取值：top，center，bottom或像素值或百分比
background-repeat	背景填充方式,取值：repeat-x\|repeat-y\|no-repeat

2．CSS 内边距属性（Padding）

3．CSS 文本属性（Text）

color	设置文本的颜色，如red，#FF0000
line-height	设置文本的行高
text-align	设置文本的对齐方式,如left、center、right
text-decoration	设置文本装修，如underline、none、line-through

4．CSS 字体属性（Font）

font-weight	设置字体粗细
font-size	设置字体的尺寸
font-family	设置字体系列

类选择器（.class）

格式：.classname { font-size : 16px; }

注意：网页中可给不同标签相同的class

ID选择器（#id）

格式：#idname { font-size : 16px; }

注意：网页中标签的ID 不能重复,唯一存在

复合选择器

1．并集选择器

格式：p , #idname , .classname{ font-size : 16px; }

注意：多个选择器之间必须用英文半角的逗号“,”隔开

2．交集选择器

格式：

input#idtest { font-size : 16px; }

p.classname{ font-size : 16px; }

注意：选择器之间不能有空格

3．后代选择器

格式：p a { color:red; }

注意：选择器之间用空格隔开；选择器之间可以是多个不同或相同类型并有层级关系的。

CSS的引入方式

1．行内样式：

<h1 style="color:red; " >style行内样式的应用</h1>

2．内部样式：（必须写在head标签中间）

h3{ color: red; }

</style>

3．外部样式：

a) CSS代码保存在扩展名为.css的文件中

b) 引用扩展名为.css文件的两种方式：

i.链接式：

ii.导入式：

@import url("css/stylefile.css");

</style>

CSS中的优先级

1.行内样式 > 内部样式表 > 外部样式表（链接式 > 导入式）

2.ID选择器 > 类选择器 > 标签选择器

/*样式hover，文本修饰：下划线*/

a:hover{

text-decoration:underline;

案例：北风网新闻

1．制作北风网网站信息展示页面

2．使用外部样式表创建页面样式

需求：

1．标题字体大小18px，行高40px ，居中显示

2．时间来源居中显示，文字大小 12px，字体颜色 #666666

3．段落字体12px 行高20px

4．内容中小标题<h2>行高28px，字体大小12px

案例：利用盒子模型制作登录页面

需求：

1．盒子宽度width为300px；边界margin为50px auto；盒子边框border为实线1px，颜值#3a6587

2．设置标题文字字体16px；高35px；左边距20px；背景色同盒子边框颜色#3a6587；字体白色；文字行高35px

3．设置表单上下距离30像素，左右距离20像素

4．设置表格中标题的类选择器text-align靠右；分别为表格中标题配上类样式

5．设置表格中内容与提交按钮的类选择器，边框border为实线1px颜值#ccc；分别配上类样式

分析：

盒子模型总尺度：

border + padding + margin + content内容

1、用div标签做盒子

2、设置标题

3、设置表单

4、设置表格中标题内容“姓名、邮箱、联系电话、登录”；分别加入文本域

5、设置为内部引用样式

6、设置外边距 (margin) 和内边距 (padding)

7、设置上述标签的ID选择器和类选择器

案例：为banner图片加按钮

案例：网页基本布局

需求分析：

1.使用DIV标签

2.使用id选择器

3.使用class选择器

步骤：

1.设置div上中下；使用id选择器

2.设置中间部分为div 左中右使用class选择器

3.初始化边界不留空白

4.设置id选择器，div上中下共用： width960px，border1px实线加红色

5.设置头部id选择器高度，height230px

6.设置中部id选择器最小高度，min-height300px

7.设置底部id选择器高度，height85px

8.设置中部div左中右，border1px实线加红色蓝色

案例：制作网页自动居中

需求分析：

1.元素必须为块元素div

2.元素必须设定其宽度width

3.元素的上下边距可自定义

步骤：

1.在上中下id选择器中加入自动居中margin-left和margin-right

案例：制作浮动布局

步骤：

1.设置main区域水平3栏分布，float靠左，min-height300px

2.设置main区域左，width200px，background-color绿

3.设置main区域中，width500px，background-color蓝

4.设置main区域右，width254px，background-color黄

案例：制作网页导航

需求分析：

1.使用导入CSS样式表

2.掌握CSS调试

步骤：

1.创建新的CSS文件

2.创建HTML文件

3.在HTML文件中使用外部引用样式表

4.设置导航div类选择器

5.设置菜单id选择器

6.设置7个栏目的链接与类选择器

7.在CSS文件中创建样式：

a)设置body标签样式，边距去白；font-size12px；

b)设置链接标签a样式，color黑色，文本的修饰none。

c)设置鼠标移到a标签样式hover，文本的修饰underline。

d)开始设置头部类选择器，居中；width640px；左右两侧均不允许浮动元素clear:both;

e)设置菜单id选择器，图像向左浮动；背景图片dd_head_bg_mid.gif；设置背景图像的起始位置0px -63px;高27px；宽99%；行高28px；文本居中；颜值#FFF

f)设置导航栏目类选择器，颜值白色#FFF；元素的 4 个内边距0px 4px 0px 4px （顺序：上右下左）。

最近忙着搬砖，忘记更了，以后争取每周都更一篇，好辣 ~周末来辣~大家浪起来~~~~~

在线咨询

上一篇：有趣的CSS小示例：好看的皮囊千篇一律，有趣的灵魂万里挑一
下一篇：HTML中的定位

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端基础：HTML

ntroduction

Syntax

Tools

HTML Tags

文件标签

排版标签

HTML 注释

<br/> 标签

<p> 标签

<hr> 标签

关于 HTML 中标签属性

<div> 标签

<span> 标签

字体标签

<font> 标签

标题标记

清单标记（列表标记）

图形标签

超连接标签

表格标签

表单标签

框架标签

其它标签与特殊字符

<meta> 标签

<link>标签

特殊字符

​HTML DOM

Introduction

DOM Node

DOM 方法 & 属性

DOM 事件

TML 简介

HTML 编辑器

HTML 基础- 4个实例

HTML 元素

您的项目需求

HTML DOM