本文介绍了HTML的基础知识，包括HTML和XHTML的定义，HBuilder开发工具的常用快捷键，以及如何建立站点。讲解了HTML文档的基本结构，如<!doctype html>、<html>、<head>和<body>等标签。还详细阐述了HTML标记的语法、标题字体、字体标记、空标记、字符实体、列表、超链接和图像的用法，以及表单元素的创建和属性。最后提到了GET与POST请求的区别。
HTML的基础属性介绍。
什么是网页？
一个html文件，就是一个网页
什么是网站？
把所有的网站资源文件（html，css，js，图片，视频等）整合到一起的一个文件夹
什么是html？
HTML指的是超文本标记语言（Hyper Text Markup Language）
什么是XHTML?
XHTML指可扩展超文本标记语言（标识语言）（Extensible Hyper Text Markup Language）是一种置标语言，表现方式和超文本标记语言类似，但语法上更加严格。
HBuilder开发工具：
ctrl+n: 新建文件
ctrl+s: 保存
ctrl+r: 运行
ctrl+z: 撤销
ctrl+c ：复制
ctrl+v :粘贴
ctrl+x ：剪切
ctrl+a ：全选
ctrl+shift+F:整理代码
ctrl+/：注释
ps:以上快捷键可能与输入法快捷键有冲突（工具->选项->常规->快捷键中可以自定义快捷键）
建立站点：
文件名规范：名称全部用： 小写英文字母、数字、下划线的组合， 其中不得包含汉字、空格和特殊字符； 必须以英文字母开头
目的：规划网站的所有内容和代码 整合资源
HTML文档的基本结构：
<!doctype html>命名文档类型
<html>说明我们写的是标记语言
<head>文件头部(描述区)
<meta charset=“utf-8”/>编码格式(gb2312/gbk中文编码)
<title>html5</title>文件标题（显示在状态栏上的内容） </head>
<body> 文件主体(所有要写的内容)
</body>
</html>
网页的调试工具：
（1）PC端调试工具的使用 -浏览器 测试浏览器(chrome,ie,firefox)
（2）移动端调试工具chrome可以测试移动端页面（有很多模拟器）
HTML标记的语法：
<单词 年龄="30" 爱好="拍戏" 特征=“”></单词>
<单词 年龄="30" 爱好="吃饭"></单词>
1、常规标记： <标记名称 属性1名="属性1值" 属性2名="属性2值" ………… ></标记名>
2、空标记：<标记名 属性1名="属性1值" />
标记有两种形式，我们分别称单标记和双标记,或者叫空标记和普通标记；
说明：
1）写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；
2）标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
3）一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序；
4）空标记是指没有结束标签的标记，必须使用"/" 关闭 例如：<hr />
标题字体：
语法：<h1></h1>
说明：文本标题共有6个（h1-h6）
<h1>一级标题</h1> （唯一性，放网站LOGO）
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
字体标记：
语法：<p></p>
说明：段落标记，标识一个段落，默认情况下堕落与段落之间有段间距
语法：<i></i> | <em></em>
说明：设置字体文本的倾斜效果，据说后边的倾斜程度大一点
语法：<b></b> | <strong></strong>
说明：设置字体的加粗效果，据说后边的加粗语气强烈一些。
语法：<u></u>
说明：设置文本加下划线
空标记：
语法：<br />
说明：空标记，用来设置字体换行
字符实体：
在HTML中直接写空格可能不会显示，中文的空格显示，但是不会这样写，会通过转移字符来写。
不换行空格
> >右尖括号
< <左尖括号
列表（ul，ol，dl）
HTML中有三种列表，分别是：无序列表，有序列表，自定义列表
- 无序列表：
<ul>
<li></li>
……
</ul>
这个显示的是前边带点的列表，可以通过属性去掉
- 有序列表：
<li></li>
……
</ol>
扩展内容
知识扩展----有序列表的属性
- type:规定列表中的列表项目的项目符号的类型
语法：<ol type="a"></ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（I, ii, iii, iv）。
2、start 属性规定有序列表的开始点。
语法：<ol start="5"></ol>
自定义列表：
<dl>
<dt>名词</dt>
<dd>解释</dd> (definition description 定义描述)
……
</dl>
超链接和图像：
语法： <a href=“目标文件路径及全称或者连接地址” title=“提示文本”>链接文本或图片</a>
<a href="#">空链接</a>
说明：
href 部分中url后边跟的是链接页面的路径(包含文件名) title属性,加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示title的内容;
target 属性参数定义了打开链接的目标窗口。 _blank -- 在新窗口中打开链接 页面（会保留原窗口） _self -- 在当前窗口打开链接页面，此为默认值
插入图片：
语法：<img src=“图片的路径” border=“边框" alt="图片替换文本" title="图片标题" width="" height="" />
说明：
属性src表示图片的来源（存放路径）
border属性标识了图片的边框 width和 height设定其图像在页面上显示的宽度和高度。
title的作用: 鼠标悬停在该图片上时显示的信息，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的，图片标题；
alt:当图片不显示的时候，提示的信息。用户体验较好
相对路径和绝对路径：
相对路径的写法：
（同级） 1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；
（上级找下级） 2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名；
（下级找上级） 3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下： ../目标文件文件名+扩展名；
路径的写法：
1、相对路径链接（上级找下级） <a href="news/news.htm">北京培训中心</a>
2、相对路径链接（下级找上级） <a href="../news.htm">新闻中心</a>
3、 相对路径链接（同级链接） <a href="news.htm">新闻中心</a>
4、链接到其他站点的链接 <a href=“http://www.baidu.com”>百度</a>
常用元素：
语法：<div ></div>
说明：没有具体含义，统称为块标签， 用来设置文档区域，是文档布局常用对象
语法：<span> </span>
说明：文本结点标签 可以是某一小段文本，或是某一个字。
HTML中的注释：
<!- -注释的内容- ->
表格属性：
语法：
<table>
<tr>
<td></td>
</tr>
</table>
注释：
注：一对tr表示一行;一对td表示一个单元格（一列）
*表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式" 取值：left、right、center、 valign=“垂直对齐” top\bottom\middle
8）合并单元格属性：(td) 合并列： colspan=“所要合并的单元格的列数" 合并行： rowspan=“所要合并单元格的行数”
表单：
表单的作用：用来收集用户的信息的;
1、表单框
<form name=“表单名称” method=“post/get” action=“路径"> </form>
2、表单控件
<input type="" />
语法：
<input type=“” name=“” value=“” size=“” maxlength=" " />
说明：
Input：标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。
name：属性标识表单域的名称；
type：属性标识表单控件的类型，大概有十几种；
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。
maxlength：控制最多输入的字符数，
Size：控制框的宽度（以字符为单位）
1）文本框 <input type="text" value="默认值"/>
2)密码框 <input type="password" />
3)提交按钮 <input type="submit" value="按钮内容" />
4)重置按钮 <input type="reset" value="按钮内容" />
5)空按钮 <input type="button" value="按钮内容" />
6）单选按钮组 <input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/>(默认选中)女
7）复选框组 <input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" />
*disabled="disabled" (禁用) * checked="checked" (默认选中)
表单域下拉列表（菜单）
语法：
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
…………
</select>
表单域多行文本定义：
语法：
<textarea name="" cols="" rows="" > </textarea>
说明：
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
扩展知识点：
GET与POST的区别:
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
扫一扫
2889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
