这篇博客介绍了HTML的基本概念和常用标签，包括文本、字体样式、标题、链接、表单元素等，并提供了示例代码，是HTML初学者的良好入门资源。
web项目:通过浏览器使用的应用程序
HTML CSS JS前端页面
HTML是英文 HyperText Markup Language 的缩写，它的意思是"超文本标记语言"，用它编写出文档的文件的扩展名是“.html”或“.htm”（微软的操作系统），他是可供浏览器解释浏览的文件格式。你可以使用记事本，写字板或者是专业的IDE如：Dreamweaver等等编辑工具来编写HTML文件。
HTML：由一些预定义的标签组成，属超文本标记语言：用来定义网页元素，比如扸，文字，表格等
标签一种称围堵标签：开始标签，结束标签、 自闭和标签（例如：</hr></br>）
<!--标签会带有一些属性 格式 属性名="值" -->
<font color="red" size="7" face="楷体" ></font>
//字体标签,字体大小只能是1到7 face为字体 颜色标签除了使用color外，也可以设置颜色的十六进制值red=#FF0000
<hr color="" size="1px" width="300px" align="left" noshade="noshade">
<!--分隔线size宽width长度，可以用像素 也可以用百分比-->HTML标记两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的，比如“<html>”和“</html>，前一个是开始标签，后一个是结束标签。在开始和结束标记之间的的文本是元素内容。html标记是与大小写无关的，“<html>”和
“<HTML>”所表示的意思的一样的。标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。
html的文档结构主要是有3部分组成的：
1.<html></html>
<html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
2.<head>和</head>
<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
在头部的<head></head>中，有另一组标签<title></title>。其标签内部内容会在浏览器的窗口显示，作为网页主题。
3.<body>和</body>
<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
下面介绍一些常用标签：
强制断行标记“<br>”
强制分段标记“<p>”
转义字符 ，代表空格“ ；
设置位置居中标签 <center>需要居中的内容</center>
1.标题标记
使用方法：<h1>内容</h1>
2.设置字体标记 使用方法：<font size=“2” color=“red” face=“黑体”>内容</font>
3.字体变化标记 使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<b> 加粗</b> <i>斜体 </i> <u> 底线 </u>
<kbd>用粗体等宽字体显示文字</kbd> <var>用较小的固定宽度显示字体</var>
我们在使用文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<dfn>用于名词解释，斜体显示</dfn> <sup></sup> 上标（比如2的立方就可以写成 2<sup>3</sup>）
<smap>用于字母序列等宽</smap> <sub></sub> 下标
<em></em> 强调 <address>模拟信封上的字体</address>
<strong></strong> 加强 <s></s>删除线
<strike>删除线</strike> <big>比默认字号大一号</big>
<small>比默认字号小一号</small> <code>以等宽字体显示计算机程序代码</code>
背景标签：
使用：<body bgcolor="red" backgroud="bg.jpg">
<!-- 例子1：-->
<html>
<head>
<title>背景颜色</title>
</head>
<body bgcolor="red">
<font size="4" face="黑体" color="black">背景颜色</font>
</body>
</html>IMG标签是用来向网页中插入图片的
<!--例子：-->
<html>
<head>
<title>图片</title>
</head>
<body>
<img src="boy.jpg" alt="haha" align="left" border="0“ height="56px" width="32px">
</body>
</html> 序列标签：
1.无序列表< ul>
2.有序列表 <ol>
3.自定义列表 <dl>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 无序列表
type 列表项前面的小图标
-->
<ul type="circle">
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表嵌套
<ol>
<li>列表项目</li>
<li>列表项目</li>
</ol>
</li>
</ul>
<!-- 有序列表
type 设置列表项前面的各种序号 比如 数组，大小写字母，罗马字母
start 序号从几开始
-->
<ol type="I" start="6">
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>列表标签</dt>
<dd>列表的描述</dd>
<dt>列表标签</dt>
<dd>列表的描述</dd>
<dt>列表标签</dt>
<dd>列表的描述</dd>
<dt>列表标签</dt>
<dd>列表的描述</dd>
<dt>列表标签</dt>
<dd>列表的描述</dd>
</dl>
</body>
</html>上述代码结果截图：
html中有很多特殊的字符是需要特殊的处理。
下面看几个特殊的字符处理： 转义字符 < < > > & & &qout; “ 空格
<!--例子：-->
<html>
<head><title>特殊的字符</title> </head>
<body>
<<br>><br>&<br> &qout;<br>
</body>
</html>超链接标签：
1.连接到其他的文档
2.网页的内部链接
3.网页的外部链接
4.图片的锚点链接： 锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- href 链接的页面路径
target 打开的页面在新窗口打开_blank 还是在本窗口打开_self
-->
<a href="http://www.baidu.com" target="_blank">进入百度</a>
<a href="http://www.163.com">进入网易</a>
<a href="http://www.sina.com">进入新浪</a>
<!-- 跳转本站的页面 -->
<a href="index.html">进入首页</a>
</body>
</html>
<input />标签的
type分为： text -文本框 button -按钮 submit-提交 reset-重置 password -密码 checkbox-多选 radio-单选 file -上传文件 date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取 时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间）
邮箱输入框 <input type="email" name="user_email" />
数字输入框 <input type="number" name="points" min="1" max="10" />
数字范围输入框（进度条） <input type="range" name="points" min="1" max="10" />
颜色选择框 <input type="color" name="colortext"/><br>
下拉列表：Select标签
<select>
<option value="qxz" selected/>请选择
<option value=“A”/>苹果
<option value=“B”/>香蕉
<option value=“C”/>橘子
<option value=“D”/>西瓜
</select> 表单的用途 ：表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
表单构成 : <form></form>
<form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。
<from>标记具有action，metnod,target属性。
action属性是处理处理程序的程序名称。
method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
target属性用来制定目标窗口的。
表单的工作原理 :
1.访问者填写表单，并提交给web服务器处理；
2.在web服务器上的后台处理程序对提交后的数据进行处理；
3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。
框架标签：frame
<!--混合框架-->
<html>
<head>
<title>框架页示例</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.baidu.com">
<frameset cols="25%,75%">
<frame src="http://www.sina.com.cn">
<frame src="http://www.baidu.com">
</frameset>
</frameset>
</html>
多媒体标记音频：
1、HTML4多媒体
<embed src="文件源" width="宽度" autostart="true" loop="true">
其中： src 设置文件源 width 设置宽度 autostart 设置是否自动播放，如果是true就是自动播放，是flase不自动播放 loop 设置是否循环播放true就是循环播放，false就是不自动播放
2、HTML5多媒体 <audio src="G:\Media\霍比特人3：五军之战.mp4" controls="controls"></audio>
3、添加背景音乐 <bgsound src="明月几时有.mp3" loop=5>
多媒体标记视频：
视频标签
<video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls">
</video>control 属性供添加播放、暂停和音量控件。Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
| <代表< | " 双引号 |
| © 版权符 | <p></p>段落标签 |
| <pre>预编译标签:可以保持文本样子不变<pre> | <u>下划线<u> |
| <b>加粗文本</b> | <s>删除文本</s> |
| <i>斜体文本</i> | <kbd>粗体等宽字体显示文本</kbd> |
| <var>用较小固定宽度显示文本</var> | <br></br>换行标签 |
| <h1>最大的标题</h1> | <h2>二级标题</h2> |
| <h3>三级标题</h3> | <h4>四级标题</h4> |
| <h5>五级标题</h5> | <h6>六级标题</h6> |
如何快速的用文本文件编写网页，先用记事本：先新建文本文档，后缀名为.html,打开记事本,编写网页
Hbulider快捷方式：
ctrl+/ 快速注释
alt+/ 提示键
颜色三要素：红绿蓝
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
