HTML详细介绍1

tml概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>网页标题</title>
 </head>
 <body>
 网页显示内容
 </body>
</html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。

此版本文档用sublime text创建方法： html:xt + tab

文档示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab

文档示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文档类型 </title>
</head>
<body>
</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

<!-- 这是一段注释 -->

html标题标签

通过

、

,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题，其后是

，再其次是

，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
 </p>
 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
 页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入

来强制换行，代码如下：

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html块标签、含样式的标签

html块标签

1、

标签块元素，表示一块内容，没有具体的语义。

2、标签行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、 标签行内元素，表示语气中的强调词

2、标签行内元素，表示专业词汇

3、 标签行内元素，表示文档中的关键字或者产品名

4、标签行内元素，表示非常重要的内容

语义化的标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

html图像标签、绝对路径和相对路径

html图像标签

标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性定义图片的引用地址

alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址

相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签

标签可以在网页上定义一个链接地址，它的常用属性有：

href属性定义跳转的地址

title属性定义鼠标悬停时弹出的提示文字框

target属性定义链接窗口打开的位置

target="_self" 缺省值，新页面替换原来的页面，在原来位置打开

target="_blank" 新页面会在新开的一个浏览器窗口打开

TML基础简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML是一个网页文件的拓展名，和txt、jpg、mp3一样，是一个文件格。.html文件就是网页文件。

2.html 的格式化标签

<!DOCTYPE>
<html>
--html是一个双标签开始标签
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是标题
</head>
<body>--用来存放页面中的内容
</body>
</html> --结束标签

DOCTYPE----文档类型声明
meta标签----设置页面编码格式，关键字，以及页面的描述
<title></title>--------->标题部分
<head></head>------>页面的头部分
<body></body>------>页面的主体部分

2.内容标签

这其中<hr> <br> 是单标签
<div></div> <span></span> 无意义区块容器标签
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

HTML标记—注释标记

<!--注释语句-->

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

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

HTML 链接

<a href="http://www.runoob.com">这是一个链接</a>
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
URL - 统一资源定位器
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

这里需要注意:使用超链接做下载,并不是超链接完成的下载功能,而是通过超链接跳转到了一个有下载功能的页面。

常见的 URL Scheme

HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本。

3.HTML属性

属性实例:

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a>

4.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定
当用户要在表单中键入字母、数字等内容时，就会用到文本域
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
单选有时需要设置默认选项,需要设置checked属性:
<input type="radio" name="sex" checked ="checked"/>男

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多选框一般不需要设置默认选项,如果要设置,也是设置checked属性

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
这里需要注意的是: Submit必须要和form一起使用才能达到效果
action 设置表单提交参数路径
method 当前请求方式(同iOS开发网络请求一样,get/post)

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

图片按钮(使用不多)

Select下拉框

selected默认选项
<select>
<option selected="selected" >选项一</option>
<option>选项二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除点去除下划线
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.内联样式- 在HTML元素中使用"style" 属性

HTML样式实例 - 背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

而关于其他CSS内容,这里就简单介绍一下:

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

最后提一下什么是Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容：正式引入HTML网页开发，学习并了解HTML的相关知识。变身Web开发达人，做全栈程序员。这是以第一课，希望以我的方式，你将学会HTML这门课程。

写在前面

今天的话，主要讲解一下HTML相关知识，同样在接下来的一段时间的安排中，也以HTML为主。崇尚全栈，也就意味着我们，需要学习主流的技术知识。在前一段时间内，主要讲解了.Net的只是教程。当然.NET并没有完毕。

C#语言

只是在这里把HTML穿插进来，一则巩固自己所得，二来学习一下这门非常简单的HTML技术。学习完毕HTML之后则会，继续进行基础加强、数据库、MVC等教程的协作工作。

PDF文档

同时在前一个阶段内，讲解的并不是很好，在这个HTML阶段内，则会吸取教训，争取写出更符合初学者学习的技术教程。当然前面的课程也会不断的修正，最后我会生成PDF的文档，发给大家。

HTML概述

HTML，超文本标记语言，超文本就意味着有多于文字的形式，比如包含超链接、图片、视频、动画等形式。HTML是应用在网站网页展现的一种语法结构。我们在使用浏览器浏览网页的时候，看到的界面都是由HTML代码表现出来的。HMTL可以说是一种展示文字图片视频等元素的一种方式。通过特定的标记就能展示出来自己想要的效果。如何展现？就让我一步步教你。

学习HTML的必要性

物联网

互联网的飞速发展，导致了形形色色的网站应用被创建。云计算、物联网仿佛唾手可得。把诸多应用建立在云上，通过这种浏览器与用户交互的形式让人们使用。这些所有网络应用，只要是通过浏览器进行使用的情况，都是需要HTML技术。当然HTML作为基础之用。这就要求我们程序员，必须学习并熟悉HTML语言。能在这个基础上进行Web的开发。

HTML语言的特点

HTML是解释性语言，不需编译，直接书写之后，就可以运行。
HTML是纯文本类型的语言，你完全可以通过记事本程序进行创建书写。
虽然HTML可以通过记事本来创建写代码，但是并不推荐，因为以前学习过.Net，所以依旧使用Visual Studio。VS也是前端的开发神器。
自己写的HTML代码，在不同的浏览器内，可能会有不同的展示效果。这是由浏览器的渲染引擎决定的。
HTML具有平台无关性，在任何平台只要拥有一款浏览器，你就可以打开HTML网页。
HTML代码运行在浏览器中，也就是需要使用浏览器进行测试。

HTML

今天就先说一下HTML的基本知识，电脑编程系列教程，下节继续。

在线咨询

上一篇：JavaScript中本地存储的方式有哪些？
下一篇：HTML基础之HTML常用标签

您的项目需求

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

整合营销服务商