一起学习HTML&amp;CSS（001）-

一起学习HTML&CSS（001）-简介

TML

对于HTML，百度百科给出的介绍是：

超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

HTML是用来描述网页的一种语言，换言之网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。

HTML使用标记标签来描述网页，标记标签通常被称为HTML标签 (HTML tag)。HTML标签是尖括号“<”和">"包围的关键词（例如：<html>）,并且标签通常是成对出现的（注意我说的是通常情况），分为开始标签和结束标签。

HTML5

随着移动设备的发展，为了在移动设备上支持多媒体，HTML5应运而生。

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。HTML5和HTML没有本质区别，我们可以简单的把HTML5理解为HTML的升级版，具体有何区别在学到的地方再重点提出来。

开发者可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

虽然仅仅是对HTML进行了简单的介绍，我们还是可以先做一个小Demo。

下面是Demo代码：

创建文档并命名为demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body bgcolor="white">
<h1 align="center">这是标题1</h1>
<h2 align="right">这是标题2</h2>
<p>这是段落1</p>
<p>这是段落2</p>
<a href="http://www.baidu.com">这是一个链接</a>
<br />
</body>
</html>

下面是在浏览器打开的效果：

一篇介绍了网页的基本结构，那如何编写网页的内容? 前提是要学会HTML标签的用法，本篇主要介绍HTML标签是什么，如何学习，需要大概多长时间学习。

本篇主要基于html5介绍，html5 是最新版的标准，之前的版本可以自己了解下。

HTML 简介

HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。

事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。

一个html标签基本结构如下：

<标签名称  属性="属性值"></标签名称> 或 <标签名称 属性="属性值"/>

有以下特点：

由尖括“<”、“>”号包围的标记元素，比如 <html>和</html>就是一对标记。
通常是成对出现的，比如 <div> 和 </div>，也有单独呈现的标签，如：<img />、<input/>等。
标签对中的第一个标签是开始标签，第二个标签是结束标签；
一般成对出现的标签，其内容在两个标签中间，如<h1>标题</h1>。单独呈现的标签，则在标签属性中赋值，如<input type="text" />。
网页展示的内容需写在<body>标签中。
标签不区分大小写，建议按规范小写。

HTML标签按功能大体可分以下几种类型：

构成网页基本架构的标签，比如：<!DOCTYPE>（定义文档类型）、<html>(根标签),<meta>（元信息）、<head> (网页头部区域)、<body> （网页内容区域）。
用于引入外部资源及客户端脚本的标签，比如：<link>（外部资源，css样式文件）， <script>（客户端js脚本）。
用于描述布局的标签，比如： <div>、<ul>（无序列表）、<ol>（有序列表）、<h1>到<h6>（标题1到6）、<table>（表格）、<footer>（页脚）、<header>（页头）等。
用于描述文本格式的标签，比如：<p> (段落)、<strong>(加粗)、<q>（引用）、<span>等。
用于引入多媒体资源的标签，比如：<img>、<video>、<audio>等。
用于制作表单的标签，比如：<form>(表单),<input>(输入框),<textarea>(文本域)，<select>(下拉菜单),<radio>(单选项),<checkbox>(多选项)等。
其它标签（不是很常用的）。

如何学习html的标签用法

没有捷径，需要多看，多练。在这里我不一一介绍每个标签的具体含义及用法，相关语法可以参考以下几个网站：

https://www.w3cschool.cn/html5/
https://developer.mozilla.org/zh-CN/docs/Web/HTML

制定一个学习计划,每天坚持下去

要求，每天花费3到5个小时学习，至少1到2周掌握常用的html标签含义及用法，可以按照上面介绍的标签进行分类学习，感谢关注，祝你学习愉快。

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 色调色板时，所有的计算机能够正确地显示所有的颜色。

在线咨询

上一篇：网页全屏与锁屏显示效果
下一篇：script 的三种加载模式：默认加载、defer、

您的项目需求

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

整合营销服务商

一起学习HTML&amp;amp;CSS（001）-

TML

HTML5

HTML 简介

HTML标签按功能大体可分以下几种类型：

如何学习html的标签用法

您的项目需求

一起学习HTML&CSS（001）-