美文网首页我爱编程
上书房之HTML

上书房之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 规定元素的额外信息（可在工具提示中显示）

相关文章

  • 上书房之HTML

    第一章 HTML概述 1.1 什么是HTML HTML(Hyper Text Markup Language) 是...

  • 上书房之HTML5

    第一章 HTML5简介 HTML5 是 HTML 标准的最新演进版本。这个术语代表了两个不同的概念：第一、它是一个...

  • 江山梦之谋妃天下6

    文/南陌花开 《江山梦之谋妃天下》目录 上一章 江山梦之谋妃天下5 第六章 书房议事 慎德堂，顾相书房。这里不仅是...

  • 3-CSS Introduction

    上一篇 HTML Introduction，介绍了简单的HTML入门基础。本章节是简单介绍了解 CSS 。 在此之...

  • 101城市书房-商学笔记丨资本经营论（第1期 20171015）

    1、为什么在101城市书房发起“商学笔记”的分享？ 接触书房已大半年时间，深受书房影响，也感激书房提供休憩之所、动...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • 混合APP开发MUI框架书目录

    MUI框架 HTML5 APP开发之创建APP项目 HTML5 APP开发之软件打包 HTML5 APP开发之全量...

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

网友评论

    本文标题：上书房之HTML

    本文链接：https://www.haomeiwen.com/subject/kcjnmttx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们|上书房之HTML|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！