上书房之HTML

作者: 上书房_张强 | 来源:发表于2016-12-16 14:38 被阅读399次

第一章 HTML概述

1.1 什么是HTML

HTML(Hyper Text Markup Language) 是用来描述网页的一种超文本标记语言（不是编程语言），它由一套标记标签组成，用来描述网页结构和内容。目前使用最多的版本HTML 4.01 和HTML5。

网站主流研发技术

HTML定义了网页的内容。
CSS定义了网页样式（长相）。
JavaScript定义了网页的行为。

1.2 HTML结构

HTML由head和body两部分组成。其中<head>包含了所有的头部标签元素, 在 <head>元素中可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。<body>定义了文档的主题，包含了网页的结构信息和内容信息。

HTML结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
        <script type="text/javascript" src="js/index.js" ></script>
    </head>
    <body>
        <div id="container">
            <div id="content">
                <form>
                    <div>
                        <label for="userName">用户名</label>
                        <input type="text" id="form-field-userName" name="userName" />
                    </div>
                    <div class="space-8"></div>
                    <div>
                        <label for="password">密码</label>
                        <input type="password" id="form-field-password" name="password" />
                    </div>
                    <div class="space-8"></div>
                    <button type="button" id="btnRegister">注册</button>
                </form>
            </div>
        </div>
    </body>
</html>

1.3 HTML编辑器

在学习初期推荐使用Notepad++作为编辑器，在实际项目中，可使用Sublime Text、HBuilder以及WebStorm等编辑器。

Notepad++

Sublime Text

HBuilder

WebStorm

第二章 HTML标签

2.1 DOCTYPE 文档类型

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。<!DOCTYPE>不是 HTML标签，它是指示web浏览器网页使用的是哪个HTML版本进行编写的。目前统一使用html5的定义方法：

<!DOCTYPE html>

2.2 html 注释

注释用于定义html文档的说明部分，浏览器不会对其进行解析。html使用符号对需要说明的部分进行注释。

<!--这里是注释内容，浏览器不会对其进行解析-->

2.3 title 标签

使用<title>元素来定义html文档的标题，必须定义在head里面。

<!DOCTYPE html>
<html>
    <head>
        <title>CSS样式</title>
    </head>
</html>

2.4 link 标签

使用<link>元素来定义网页需要加载的样式表文件。，必须定义在head里面。

<!DOCTYPE html>
<html>
    <head>
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
</html>

2.5 meta 标签

使用<meta>元素来描述HTML文档的描述、关键词、作者、字符集等。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
</html>

2.6 script 标签

使用<script>元素来定义网页需要加载的脚本文件和网页内使用的脚本内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
</html>

2.7 style 标签

使用<style>元素来定义网页需要使用的独立样式（很少使用）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
        <style>
            .content{
                border: 1px solid blue;
            }
        </style>
    </head>
</html>

2.8 h1到h6标签

h1,h2,h3,h4,h5,h6这六个标签用于描述html文档的6个级别的标题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <h1>上书房之HTML</h1>
        </div>
    </body>
</html>

2.9 p 标签

HTML 可以将文档分割为若干段落。段落是通过 p标签定义的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <h1>上书房之HTML</h1>
        </div>
        <div id="container">
            <p>
                微信搜索公众号“上书房Jia”, 这是当今对大学生最有用的公众账号，在如今互联网+的时代里，无论你学的什么专业，你都将在这里学到互联网+时代中最实用的技术并得到相关的就业信息，使你在毕业时具备过人的竞争力。
            </p>
            <p>
                我们还与多家软件公司及互联网公司达成了人才培养协议，我们将以企业见习和企业实习等方式，让学生了解企业，融入企业，并签约企业。
            </p>
        </div>
    </body>
</html>

2.10 br 标签

使用
可在html文档中插入一个简单的换行符。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <h1>上书房之HTML</h1>
        </div>
        <div id="container">
            <span>陕西省</span><br />
            <span>西安市</span><br />
            <span>高新区</span>
        </div>
    </body>
</html>

2.11 div 标签

<div> 是一个块级元素，可定义文档中的分区或节，把文档分割为独立的、不同的部分。主要用于页面布局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是放置网页的头部信息-->
        </div>
        <div id="container">
            <!--这里放置网页的内容信息-->
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.12 span 标签

<span> 标签被用来组合文档中的行内元素。在网页中添加一些文字，一般应使用<span></span>将文字包起来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <span>这里放置网页中的文字</span>
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.13 label 标签

<label> 标签用于为input元素定义标注（标记）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <label for="userName">用户名：</label>
            <input type="text" class="form-control" name="userName" id="userName" /><br />
            <label for="password">密码：</label>
            <input type="text" class="form-control" name="password" id="password" />
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.14 a 标签

a 标签定义超链接，用于从一张页面链接到另一张页面。a元素最重要的属性是href 属性，它指示链接的目标.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <a href="https://www.baidu.com">百度</a>
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.15 img 图片标签

img标签用于在html文档中嵌入一张图片，src属性用于定义图片的地址（绝对地址及相对地址）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            ![](https://img.haomeiwen.com/i1507236/6706f61c06ea1193.jpg)
            [站外图片上传中……(2)]
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.16 ul 无序列表标签

ul标签用于定义无序列表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
            </ul>
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.17 ol 有序列表标签

ol标签用于定义无序列表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <ol>
                <li>A</li>
                <li>B</li>
                <li>C</li>
            </ol>
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.18 table 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
一个完成的table应该由thead和tbody两部分组成，其中thead定义表头内容，tbody定义表格内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <table>
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>客户编号</th>
                        <th>客户姓名</th>
                        <th>下单时间</th>
                        <th>订单金额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>10001</td>
                        <td>C00101</td>
                        <td>张三</td>
                        <td>2016/12/18 12:50:10</td>
                        <td>100.00</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.19 form 表单

HTML表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域、下拉列表、单选框、复选框等等。表单使用表单标签<form>来设置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS样式</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-2.2.0.min.js" ></script>
    </head>
    <body>
        <div id="header">
            <!--这是网页的头部信息-->
        </div>
        <div id="container">
            <form id="form-login">
                <div class="form-group">
                    <label for="form-field-userName">用户名：</label>
                    <input type="text" class="form-control" name="userName" id="form-field-userName" placeholder="请输入用户名" />
                </div>
                <div class="form-group">
                    <label for="form-field-userName">密码：</label>
                    <input type="password" class="form-control" name="password" id="form-field-password" placeholder="请输入密码" />
                </div>
            </form>
        </div>
        <div id="footer">
            <!--这里放置网页的页脚信息-->
        </div>
    </body>
</html>

2.20 表单文本框

表单中的文本框用来收集需要用户输入的信息，由<input>标签来定义，type类型为text。

<input type="text" class="form-control" name="userName" id="form-field-userName" placeholder="请输入用户名" />

2.21 表单单选框

表单单选框用于向用户收集一组选项中，用户选择的某一个选项（只能选择一个选项）。单中的文本框用来收集需要用户输入的信息，由<input>标签来定义，type类型为radio。

<label>性别</label>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

2.22 表单复选框

表单单选框用于向用户收集一组选项中，用户选择的多个个选项。单中的文本框用来收集需要用户输入的信息，由<input>标签来定义，type类型为checkbox。

<label>爱好</label>
<input type="checkbox" name="interest" /> 旅游
<input type="checkbox" name="interest" /> 读书
<input type="checkbox" name="interest" /> 音乐

2.23 表单密码框

表单密码框用于向用户收集用户输入的密码，处于安全考虑，用户输入的内容显示为掩码。表单中的密码框由<input>标签来定义，type类型为password。

<input type="password" class="form-control" name="password" id="form-field-password" placeholder="请输入密码" />

2.24 表单隐藏域

表单的隐藏域用于保存一些不需要在页面显示的内容，表单的隐藏域由<input>标签来定义，type类型为hidden。

<input type="hidden" name="soNumber" id="form-hidden-soNumber" />

2.25 表单多行文本框

表单的多行文本框用于收集用户输入的多行的内容，表单的隐藏域由< textarea>标签来定义。使用rows和cols来定义多行文本框的高度和宽度。

<textarea rows="5" cols="10"></textarea>

2.26 表单下拉框

表单下拉框用于让用户从多个选择中选择某一个内容，下拉框有<select>和<option>共同组成

<select>
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
  <option value="3">D</option>
</select>

2.27 表单提交按钮

表单提交按钮用于将form表单中的用户输入的内容提交到服务器。提交按钮由<button>定义，type为submit。

<button type="submit" class="btn-submit">提交</button>

2.28 表单重置按钮

表单重置按钮用于将form表单中的设置为页面初始状态。提交按钮由<button>定义，type为reset。

<button type="reset" class="btn-submit">提交</button>

2.29 表单普通按钮

表单普通按钮用于结合单击事件执行在页面上执行执行的逻辑行为。提交按钮由<button>定义，type为button。

<button type="button" class="btn-submit">提交</button>

2.30 article标签

<article>标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article>元素的潜在来源：

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

<article>
  <h1>专访陈勇： 敏捷开发现状及发展之路</h1>
  <p>
敏捷这个含着金钥匙诞生的“霹雳娇娃”是软件开发行业的救星，从头到脚、从里到外无不闪着金光，透着与众不同。但国内少有团队能真正理解其精髓和奥秘。为此，社区之星第15期采访了敏捷开发老兵陈勇。他站在企业管理者的角度来讲解敏捷开发并分析的字字珠玑。
  </p>
</article>

2.31 块及元素与行内元素

块及元素列表

元素	说明
address	定义地址
caption	定义表格标题
dd	定义列表中定义条目
div	定义文档中的分区或节
dl	定义列表
dt	定义列表中的项目
fieldset	定义一个框架集
form	创建 HTML 表单
h1	定义最大的标题
h2	定义副标题
h3	定义标题
h4	定义标题
h5	定义标题
h6	定义最小的标题
hr	创建一条水平线
legend	元素为 fieldset 元素定义标题
li	标签定义列表项目
noscript	定义在脚本未被执行时的替代内容
ol	定义有序列表
ul	定义无序列表
p	标签定义段落
pre	定义预格式化的文本
table	标签定义 HTML 表格
tbody	标签表格主体（正文）
td	表格中的标准单元格
tfoot	定义表格的页脚（脚注或表注）
th	定义表头单元格
thead	标签定义表格的表头
tr	定义表格中的行

行业元素列表

元素	说明
a	标签可定义锚
abbr	表示一个缩写形式
acronym	定义只取首字母缩写
b	字体加粗
bdo	可覆盖默认的文本方向
big	大号字体加粗
br	换行
cite	引用进行定义
code	定义计算机代码文本
dfn	定义一个定义项目
em	定义为强调的内容
i	斜体文本效果
img	向网页中嵌入一幅图像
input	输入框
kbd	定义键盘文本
label	标签为 input 元素定义标注（标记）
q	定义短的引用
samp	定义样本文本
select	创建单选或多选菜单
small	呈现小号字体效果
span	组合文档中的行内元素
strong	语气更强的强调的内容
sub	定义下标文本
sup	定义上标文本
textarea	多行的文本输入控件
tt	打字机或者等宽的文本效果

第三章 HTML属性

HTML属性是元素提供的附加信息，定义于元素的开始标签，总是以名称/值的键值对的形式出现，比如：name="value"。

HTML元素的常用属性如下：

属性	描述
class	规定元素的类名（classname）
data-*(New)	用于存储页面的自定义数据
id	规定元素的唯一 id
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）