告读者
本文旨在为对HTML（hypertext markup language）超文本标记语言感兴趣的朋友提供学习参考，由于本人尚才疏学浅，本文夹杂大量不规范的说法，出现纰缪也实属正常，故此文仅可做为方便理解的参考，不可做圭臬。
版本
目前常用html版本有html4.0,xhtml,html5.0;
来个不太专业的区分：html4.0对于语法要求不是太高，所以不少野路子的学习者书写风格较为粗犷，常常在一个浏览器上可以运行成功的文件在另一个浏览器上就像中病毒了那样，xhtml,就是为了解决这个问题而产生的，它的功能与html4.0相差无几，但语法更为严格，力求减少bug,加强文件移植性。html5.0的话使用的还是html4.0语法，但功能上更加丰富与方便，可以看作html4.0升级版。
虽然html5.0对于语法要求秉持html4.0语法的随性，但为了之后的学习工作，严谨的书写习惯是很重要的。
html基本结构
超文本标记语言Hyper Text Markup Language
主要作用：做数据展示(俗话说是做网页)
来个初始代码瞧瞧结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
222222222222222222222222222
</body>
</html>
下面是内容构成：
doctype ：
网页响应文件类型 后面可跟xhtml或html。
html lang:
lang是langue的缩写它的值表示它的语言类型和它属于哪一个地区的或者国家的网页。
例如
html lang="en-US"英国
html lang=“zh-cn”(简体，中国大陆)
html lang=“zh-hk”(繁体，中国香港)
值得一提的是该内容主要是给浏览器识别，对人展示的效果不明显。
head:
表示头部分用来装头元素的， 那些元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等，但一般不是给人看的。
body:
正文部分，里面可以添加各种展示用标签，一般一般操作都是在这里面。
下面是不太严谨的整理
编译软件
编译软件就是运行程序的应用界面，虽然理论上html文件在文本框写也没什么，但毕竟只是理论上，一个初学的小白还是需要应用软件进行引导操作。
以下：
1、AdobeDreamweaver
2、Microsoft Expression Web
3、CoffeeCup HTML Editor
4、sublime text
本人使用的是sublime text，因为我身边用这软件的人挺多的，方便我向人请教。
运行环境：
大部分浏览器都能运行html文件，只是展示效果会有所区别，个人推荐下载一个火狐浏览器用于测试，在火狐浏览器上能实现的html文件通常在其他浏览器上也没问题。
标签与属性
在上文html基本结构中可知：html分为几个大部分，现在则是要讲文件中更小的构成元素，也可以说基础的构成元素，那就是标签。
什么是标签？
按个人理解它是一种功能模块，实现某种功能的函数，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分，学习这一门语言通常也是对此开始着手。
什么是属性？
为了细调标签所实现功能效果的开关，可以细调标签的具体效果。
<br/>换行
<hr/>在上方加一条线
<head></head>引入头元素
<title>sugar</title>浏览器地址栏显示标题“sugar”
<body></body>定义正文部分
这些都是标签。
双标签和单标签：
标签有所分类，即单标签和双标签，单标签往往实行某种不需要参数的功能如：
<br/> 换行
<hr/>线
<img src="地址">插入图片
这些是单标签，只有一个尖括号，只需设置属性。
<font size="5">sweet baby</font> 用size是属性将文本“sweet baby”字体改为5号大小。
<p>no zuo no die so why you try</p>将文本尖括号内的文本定义为一行（html中通常会自动省去空格和换行）
这些是双标签，有两个尖括号前后包住参数，往往需要对尖括号内的“参数”进行处理，修饰。
下面看看一些展示效果
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
我们也可以使用body标签中的align属性来要展示的内容，这里我们给align值center ，但还有left,right等值分别代表居中，左对齐，右对齐等功能。
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
html的学习总体来说就是对标签功能的学习掌握
w3school
中有着所有标签和属性的详细信息可以方便查找使用，故这里只是简单举个例，不多加赘述。
小提示：
HTML标签的大小写无关，例如“主体”跟表示的意思是一样的，推荐使用小写。
常用标签
上文讲了一些基本结构和标签的用法，接下来提一下常用标签由于不少标签仅靠图片展示难以看出效果，所以还是得自己下去练习掌握。
<h1></h1>
定义标题，并非只有h1,，还有h2、h3、h4…到h6,h后面的数字文本字体表示大小，1最大6最小，h标签在视觉层面就是加粗和字体调控罢了，但它对浏览器的索引有着影响，所以不可不加，也不能滥用。
看效果：
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<h1>我不是王毛</h1>
<h2>我不是王毛</h2>
<h3>我不是王毛</h3>
<h4>我不是王毛</h4>
<h5>我不是王毛</h5>
<h6>我不是王毛</h6>
</body>
</html>
<form>
<input >
</form>
Form—表单
该标签一般不会单独使用 会和input标签联合使用所以先讲input的使用
input标签最常用type属性，给这属性赋值产生不同效果
值：
Text ----文本框
Password ----密码框
Submit ----提交按钮
Radio ----单选框
Checkbox ----多选框
Reset 重置按钮
Button 普通的按钮
老规矩，试一下：
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<form>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="跳转"></p>
<p><input type="button" value="空"></p>
</form>
</body>
</html>
总体来说input是实现添加一些可操作的小配件，如按钮，可输入框，单选多选等等，感兴趣的自己下去试试。
form标签主要用到两个属性
属性：action=“url” url 表示路径
属性：Method=“”请求方式
属性;Enctype
属性;Target
action表示跳转的路径
<p><input type="submit" value="跳转"></p>
submit是一个按钮，我们并且用value属性给它命了名
它的作用也确实是跳转到其他html页面，但那页面的位置需要由form标签的action属性设置
例：
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<form action="14.html">
<p><input type="submit" value="跳转"></p>
</form>
</body>i
</html>
如以上效果整个网页只有一个submit按钮，但是当我们点击它时
它就跳转到了同等文件夹下名为14.html的文件中（跳转的文件是写好的，不是无中生有）
路径规则：
绝对路径：从盘符开始 要描述的文件路径 路径+文件的名称（d:/code/file样式）
相对路径：当前源文件和目标文件的相对路径位置（以当前源文件为定位目标，“.”表示上一层）
Method=“”请求方式有两个值，post和get
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<form action="14.html" method="post">
<p><input type="submit" value="跳转"></p>
</form>
</body>
</html>
请求方式默认是get即在跳转时在地址栏显示属性的相关值
两种请求方式都是能够让后台接受到数据的
Get请求 不安全 会把name属性的值暴露在地址栏上 地址栏默认大小为64kb
Post请求 安全 不会再地址栏上暴露name属性的值
Enctype 属性规定form表单提交的数据的编码
例如上传文件：二进制编码格式
Target属性：
select标签一般与option标签连用
多选 使用multiple属性
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<form method="post">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</form>
</body>
</html>
div标签，定制分区,将源文件内容分成一个个盒子模型，方便处理。但在无css参与的现在，其实效果不明显
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<div>
<form method="post">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</form>
</body>
</div>
</html>
a标签，超文本链接
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<div>
<form method="post">
<a href="14.html">跳转</a>
</form>
</body>
</div>
</html>
效果和form的action类似只不过将按钮换成了链接文本
另一种用法
锚点：使网页的展示到达某一个定位的地点，name属性设定地点
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<div>
<form method="post">
<a href="#d1">跳转</a>
<p>fdsafdfsfsdfdsdsfsa</p>
<p>fdsafdfsfsdfdsdsfsa</p>
<p>fdsafdfsfsdfdsdsfsa</p>
<p>fdsafdfsfsdfdsdsfsa</p>
<a name="d1">收到</a>
</form>
</body>
</div>
</html>
font标签控制字体样式但现在快被淘汰了
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<div>
<form method="post">
<font size="6" color="blue">文本</font>
</form>
</body>
</div>
</html>
img标签插入图片
属性Src ----source 指代的是图片的路径 url
属性Alt —表示图像的替代文本
属性Width 宽度
属性Height高度
该两个属性可以控制图片的大小 单位可以使用XXpx 100%
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body align="center">
<div>
<form method="post">
<img src="image/i.jpg" alt="找不到狗子" width="%100" height="100%">
</form>
</body>
</div>
</html>
如果需要给图片加上链接或锚点则可以使用Map 和area 这两个标签
参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="image/1.jpg" alt="美女" usemap="#one">
<map id="one" name="one">
<area
shape="circle"
coords="240,92,10"
href="https://www.baidu.com/" >
</area>
</map>
</body>
</html>
表格布局
基本已淘汰，故不多做赘述，了解一二即可主要使用的就是表格的标签
Table ----表格
Tr ----表行
Th ----表头
Td -----表元
列表ol和ul还有dl标签
<ol>
<li></li>
</ol>
reversed
reverse------反转
type类型中可以使用数字 字母 以及罗马数字
<ul>
<li></li>
</ul>
无序列表如名，它的前方存在无序的小图标作为标志
<dl>
<dt>今天</dt>
<dd>The day of today</dd>
<dt>明天</dt>
<dd>The day after today</dd>
</dl>
字体控制跑马灯marquee
<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>
<marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
<marquee scrollamount="100">我速度很快.</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
很好玩，但实用性不大
视频vedio
<video src="video/final.mp4" controls="controls"></video>
音频audio
<audio src="music/Pianoboy高至豪 - The truth that you leave.mp3" controls="controls"></audio>
常用的但是意义不明确的标签
在html5中给
多窗口框架
一个页面可以显示多个窗口
4.0 版本 多窗口
5.0版本中 内嵌窗口
注意：如果要使用frameset标签那么它不能和body标签连用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="15%,*,15%">
<frame src="2.html"></frame>
<frameset cols="25%,*">
<frame src="3.html"></frame>
<frame src="4.html"></frame>
</frameset>
<frame src="6.html"></frame>
</frameset>
</html>
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
