上一篇给大家介绍了学习HTML的准备工作，本文开始带大家步入HTML的学习
一、HTML基础
网页的组成：
HTML：页面构成
css：页面样式表现
JavaScript：交互行为
HTML简介：
Hyper Text Markup Language译为“超文本标记语言”，主要通过HTML标签对网页的文本、图片、声音等内容进行描述
HTML语法：
html框架：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>html标签以"<"开头，如果标签后面有属性，加空格然后还是 属性名=“”，如果有多个属性，属性间使用空格隔开，以“>”结束，如果是闭合标签需要在结束标签前加“/”
HTML头部标签：
doctype：<!DOCTYPE>声明帮助浏览器正确地显示网页。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
head：<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及
<style>。
title：<title> 标签定义文档的标题。元素在所有 HTML/XHTML 文档中都是必需的。元素能够：定义浏览器工具栏中的标题、提供页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题
link：<link> 标签定义文档与外部资源之间的关系。常用于连接样式表：
meta：meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时 间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。针对搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
script：<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。
style：<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。
URL协议：Uniform Resource Loacator，统一资源定位符是对可以从互联网上得到资源的位置和访问方法的一种简介的表示，是互联网上标准资源的地址，互联网上的每一个资源都有一个唯一的URL，它包含的信息之处文本的位置以及浏览器怎么处理它
协议规定格式：scheme://host.domain:port/path/filename
scheme：定义因特网服务的类型，常见的类型是http
host：定义域主机（http的默认主机是www）
domain：定义因特网域名
port：定义主机上的端口号（http默认80端口）
path：定义服务器上的路径
filename：定义文档/资源名称
常见的协议：http、https、ftp、迅雷协议
二、 HTML标签
标题：h1-h6;h1最大，h6最小。<h1>标题</h1>文字为标题就是要h标签（水平线 <hr/>） 段落：<p></p>标签，一对标签一个段落，自动换行，但是行与行之间有一定的间距。 <br/>手动换行，行与行之间在一起，中间无太大间距 格式化： 一、文本格式化：在一个HTML文件中对文本进行格式化 二、预格式文本：是要pre对空行和空格进行控制（代码一模一样的输出） 三、“计算机输出”标签：显示计算器编程代码 四、地址：在HTML中写地址 五、缩写和首字母缩写：<abbr title="wangxiang">wx</abbr>（缩写）<acronym title="wang xiang">wx</acronym>(首字母缩写)在浏览器中显示wx，当鼠标移到wx处时会显 示title中的内容 六、文字方向：改变文字的方向 <dbo></bdo>一对标签 dir属性 有rtl和ltr两个值，rtl反向输出<bdo dir="rtl">hello ! nice to meet you</bdo>反方向输出 七、块引用：实现长短不一的引用语<blockquote>长引用</blochquote>（自动换行，缩进）<q>短引用</q>（自动引号括起来） 八、删除字效果和添加字效果：标记删除文本和插入文本<del>文本中间划线</del>，<ins>文本的底部划线</ins> HTML中的样式：外部样式表，内部样式表，内联样式表。去掉连接的下划线:style="text-decoration:none" 连接： 一、超链接：<a href="http://www.baidu.com" target="_self(_blank)">连接名</a> target打开方式，_self当前网页，_blank新开网页 二、页面内的跳转：<a name="顶端" href="#底端">回到顶端</a>,<a name="底端" href="#底端">回到顶端</a> 三、发送邮件：<a href="mailto":792461583@qq.com>发送邮件</a> 图像:<p><img src="xxxx" align="right">xxxxx</p>浮动在文本的右边 三、表格（table） <table> <tr> <td>xx</td> <tr> <table>table></table>:定义表格。 <tr></tr>:行。 <td></td>：列。 属性介绍: border:定义边框的粗细。 cellspacing:单元格与单元格之间的距离。 Cellpadding:单元格边框与内容的距离。 Width：宽度。 Height:高度。 Bgcolor:背景颜色。 align：left center right 给tr和td使用时，可以设置单元格内容的水平对齐方式。如果给table使用，设置表格对齐方式。 <th></th>表格的标题标签，用法和td一样，会自动加粗th中文字，居中对齐。 表头，<caption></caption>,设置表的名字。
表格的合并
Colspan:横向合并 Colspan=“2”横向的二合一
Rowspan:纵向合并 Rowspan=“3” 纵向的三合一了
表格的标准结构
<table> <thead></thead> 表格头部文件 <tbody></tbody> 表格主体 <tfoot></tfoot> 表格尾部 </table>
四、列表：
1、无序列表：<ul type="circle">//type设置列表前面的小符号，circle小圆圈，disk小黑点，square矩形小方框
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
2、有序列表：
<ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>
3、自定义列表：
<dl> <dt>1</dt>//小标题 <dt>2</dt> <dt>3</dt> <dt>4</dt> <dt>5</dt> </dl>块：自开始自结束
布局：div和table
五、表单
表单的组成：提示信息、表单的控件、表单域
表单控件介绍
1、表单标签
<form action="1.php" method=“”></form> Action:收集信息，将信息提交给谁。 Method:提交数据的方法，get | post get:通过浏览器的地址栏传输数据，安全性低。 post:通过提交数据的文件处理数据，安全性高。2二、文本输入框
<input type="text"name="ped" maxlenght="6"> maxlength:设置文本框输入内容的长度。 readonly:将文本框设置为只读状态，只能读，不能写。 Disabled:将文本框设置为未激活状态。 Name:输入框的名字。 Value:输入框的值。3、密码输入框
<input type="password" name="pwd"maxlenght="6"/>4、单选框
<input type ="radio"name="gender"checked="checked">男 <input type="radio"name="gender"checked="checked">女 当将需要单选的单选框name属性值设置为一样的时候，才能实现单选效果。 Checked=”checked”,设置单选按钮的默认选项。5、下拉列表
<select> <option muitiple=muitiple>河南省 </option> <option>北京省</option> <option>河北省 </option> <option>南京省 </option> </select> Multiple=”multiple”,设置下拉列表为多选项。6、多选框
Checked=”checked”，可以设置多选框默认选项。 <input type="checkbox" checked="checked">7、多行输入文本域
<textarea name="#" cols="30" rows="10"></textarea>8、上传文件控件
<input type="flie" />9、按钮
<!-- 提交按钮 --> <input type="submit"> <!-- 普通按钮 --> <input type="button" value="普通按钮"> <!-- 重置按钮 --> <input type="reset" value="重置信息"> <!-- 图片按钮 --> <input type="image" src="meinv.png" /> <!--分组 --> <fieldset> <legend>用户注册信息<lengend> </fieldset>10.html5表单新特征
<!-- 判断网址 --> <input type="url"> <!-- 判断邮箱 --> <input type="email"> <!-- 日期控件 --> <input type="date"> <!-- 时间控件 --> <input type="time"> <!-- 数字控件 --> <input type="number" step="5"> <!-- 滑块控件 --> <input type="range" max="100" min="2" step="50">
六、框架：
内联框架
<iframe src="xxx.htm" width="200" height="200" frameborder="0"></frame>七、meta标签
meta对网页的描述
一、<meta name="description" content="这是一个很好的网站"/>//定义对网站的描述
二、<meta name="keywords" content="很好, 网站"/>//定义搜索关键字，用在搜索引擎搜索时
script标签：引入JS
不常用语义标签
<code>定义计算机代码
<var>定义变量
<pre>定义预格式文本
<abbr>定义缩写
<address>定义地址
<blockquote>定义长的引用
<cite>定义引用、引证
<dfn>定义一个定义项目
特殊字符标记
行内元素
行内标签不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。常用于控制页面中文本的样式
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>
块元素
每个块元素通常都会独自占据一整行或者多整行，可以对其设置宽度、高度、对齐等属性。常用于网页布局和网页结构搭建
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
转载于:https://www.cnblogs.com/wxblogs/p/7799117.html
相关资源：几个HTML5入门学习的好例子(代码)