本文详细介绍了HTML的基础知识，包括HTML标记的组成、常用标记及其格式、字体设置、文字布局等内容，并讲解了如何使用表单和超链接。
1.HTML的标记组成
HTML用于描述功能的符号称为标记
eg: HTML BODY TABLE 等
标记使用时必须用<>括起来
1.1单标记
有些标记能完整的表达标记里的意思，只需要在尖括号中输入标记名，一种单标记表示一种功能。
eg:<hr>表示画一条横线;<br>在标记处换行。
1.2双标记
这种标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线。开始标记告诉浏览器从本处
开始标记所表达的功能，再由结束标记告诉浏览器结束。
语法形式：<标记>内容</标记>
1.3html基本结构
HTML基本结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2.常用HTML标记和格式
2.1设置正文的标记和格式
2.1.1标题设置的语法
<h#>主题文字</h#>
其中#是标题里数字1-6的任意一个，数字越大，标题字号就越小。
2.2设置段落
段落的语法：
<p>这里表示段落</p>
关于段落中的空格，当浏览器解释HTML文件多个空格时，会自动去掉多余的空格，只显示出一个空格的效果。
如果想出现多个空格的效果，必须加上HTML代码" ",想要多个空格，可以加上多个"nbsp"，注意后面的分号。
2.3强制换行
换行标记<br> 单标记
2.4给代码添加注释
单行注释:<!--给代码添加注释-->
多行注释：<!--
第一行注释
第二行注释
-->
2.5粗体与斜体
粗体标记<b>文本</b>
斜体标记<i>文本</i>
2.6下划线与删除线
<u>下划线</u>
<s>删除线</s>
2.7上标与下标
<sup>上标</sup>
<sub>下标</sub>
3.字体标记
3.1设置字体大小
在网页中常常可以看到，有的新闻网站为了满足不同年龄的读者浏览，有三种不同的字体大小。
12、14、16像素，默认的是14像素。
字体的语法：
<font>要放的文字</font>
在front中加一部分属性，即可以达到对字体设置的效果。
<font size="1">文字</font>
size用来表示大小，1-7，数越大字体也越大。
3.2设置字体颜色
字体颜色语法
<font color=""></font>
参数color后面可以接RGB颜色值，如#000000（16进制）。也可以用颜色的单词表示，如red。
3.3设置标题字体样式
3.3.1标题字体大小
<h#></h#> "#":1-6
3.3.2字体的大小和颜色
eg:<h1><font color="red">文字</font></h1>
3.4字体标记
3.4.1物理字体
<B>...</B>粗体
<I>...</I>斜体
<U>...</U>下划线
<S>...</S>删除线
<TT>...</TT>打字机字体
<SUP>...</SUP>上标字体
<SUB>...</SUB>下标字体
3.4.2逻辑字体
<EM>...</EM>强调文字
<STRONG>...</STRONG>字体加重
<CODE>...</CODE>显示编程代码
<SAMP>...</SAMP>显示示例文字
<KBD>...</KBD>显示键盘按键文字
<SMALL>...<SMALL>缩小文字
<BIG>...</BIG>放大文字
4.文字布局
4.1 行的控制
4.1.1换行控制
第一种方式：<p>标记
第二种方式：<br>强制换行符
<!-- p usage-->
<html>
<head>
<title><p> use </title>
</head>
<body>
文字一<p>文字二
</body>
</html><!--<br> usage -->
<html>
<head>
<title><br> use</title>
</head>
<body>
文字一
<br>
文字二
</body>
</html>4.1.2不换行控制
<nobr></nobr>本标记对不经常使用
4.2文字对齐
当对一个段落或层里面的文字做对齐布局时，就会用到align标签；
对齐标签不会单独使用，往往与某些标记配合使用，如在<p>标记，<table>标记都会用到。
具体的语法如下：
align = "#"
其中#代码表示方位，可选择的有：left,right,center。
align可以放在<p></p>和<div></div>里，表示文字在标记中向哪个方向偏移，可以包括文字与图片，也可以是全文字。
<html>
<head>
<title>文字对齐</title>
</head>
<body>
<p align="right">文字内容</p>
</body>
</html>其中居中显示也可以不用设置align为center，可以换个方法来居中，语法如下
<center>文字内容</center>
4.3段落设置
段落设置就是在一张网页上用到段落的地方，会对其布局或字体进行设置，网页中的文章都会有多个段落，所以段落上要注意。
多个段落有多个段落标记：
<p>段落一</p>
<p>段落二</p>
有多少个段落就有多少个<p>标记，然后对每个段落进行必要的设置。
<!--段落设置-->
<html>
<head>
<title>段落设置</title>
</head>
<body>
<p><font color="red">段落一</font></p>
<p><b>段落二</b></p>
<p><s>段落三</s></p>
<p><h1>段落四</h1></p>
</body>
</html>4.4列表
列表分为有序列表和无序列表，列如在门户网站上浏览新闻时，在网站的新闻列表中，新闻标题前会有一个小圆点，而有的是有序号的数字，前者表示的是无序列表。
4.4.1无序列表
列表没有顺序可言，表里的每项都是相同的。
<ul>
<li>表项一</li>
<li>表项二</li>
</ul>决定无序的是<ul>，而<li>只是里面的一列表项。
<ol>
<li>表项一</li>
<li>表项二</li>
</ol>
在有序列表中还可以用其他有序符取代数字
<ol type="#"></ol> #可以为A、a、1等
4.5其他方式修饰文本
4.5.1欲格式化文本
欲格式化文本在网页中输出的是在代码中的样式，因为代码没有欲格式化的话会去掉里面的空格。
<!-- 欲格式化标记对-->
<pre>
文字内容
</pre>另外一组标记对xmp，相较于pre它不会解释html代码
<!--pre&xmp比较-->
<html>
<head>
<title>欲格式化文本</title>
</head>
<body>
<pre>
<ol>
<li>文字一</li>
<br>
<li>文字二</li>
</ol>
</pre>
<xmp>
<ol>
<li>文字一</li>
<br>
<li>文字二</li>
</ol>
</xmp>
</body>
</html>4.5.2 计算机输出格式
现今IT技术网站越来越多，在网页中显示计算机代码的需求也多了。
<!--下面一行表示计算机输出格式标记对-->
<code>
代码样式小型固定宽度字体显示文本
</code>
<kbd>
代码样式固定宽度字体渲染
</kbd>
<tt>
代码样式固定宽度字体渲染文本
</tt>
<var>
代码样式斜体字渲染
</var>5.图像
5.1图像的基本语法
在网页中放入图像只需在<body></body>标记对中插入图像标记<img>,其中图像标记用来连接图像地址，同时还可以设置其他参数，如宽度、高度等。只要会设置<img>标记的语法点就可以放入图片了。不过想要控制它还需要几个属性如宽度width、对齐align等。
5.1.1 在网页中插入图像
插入图像的属性是src，完整格式为<img src="#">,其中#表示图像url路径，如下面的代码表示连接一幅图像。
<img src = "cn.jpg">上述代码表示在一个<img>标记中，插入一张名为cn.jpg的图片。应当注意<img>标记是放在<body></body>里面的，大部分标记都是在网页体放置。
5.1.2图像无法显示时的提示信息
在浏览网页时，会出现不能正常显示图像的问题，如图像地址不存在等，此时图像右上角有叉显示，表示未正常显示图像。
第二个参数alt，alt表示鼠标指针在图片上面时显示交互文本信息，当图像非正常显示时，也给用户提供图像的信息。
<html>
<head>
<title>alt用法</title>
</head>
<body>
<img src = "html.jpg" alt="风景">
</body>
</html>5.1.3控制图像的大小
在<img>标记中用width表示宽度，用height表示高度。例如 width = 200px 其中px表示像素，属于长度单位。
<img src="cn.jpg" alt="fengjing" width=400px height=300px>5.2图像的链接
所谓的超链接是指从一个网页向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
图像的连接需要使用<a>标记表示链接，在<a></a>标记里是图像标记，然后再输入链接的地址，图像也就是用<img>插入的图片，即在<a></a>标记下放置了<img>标记，同样链接指向百度首页。
<a href="http://www.baidu.com"><img src="cn.jpg" alt="风景"></a>5.3图像和文字对齐
用<img>里面的align来决定对齐方式，对齐方式有top,right,bottom,left,middle.默认的是底部(bottom）对齐
5.4图像的边框
在有超链接是默认是有边框的
<a href="http://www.baidu.com"><img src="cn.jpg" alt="fengjing" border="0px"></a>上面的代码把链接后面的图像设置成无边框，其关键代码border="0px"起作用。
5.5图像映射图
有时，单击同一图像中不同位置，会出现不同的连接，有矩形、圆形、和多边形等。分别用rect,circle,poly实现，结果是图像相同，单击地点不同就会使连接不同。
在<img>里放的是usermap，后面接地图名。在声明地图时，用<map></map>包围，map里放name表示它的名称，以便在其他地方调用。在<map></map>里有区域，由<area>属性指定用什么形状，后面紧跟shap，shape后面接rect、circle、和poly中的一个，coords里是像素，herf是链接的地址。
<img src="html.jpg" usemap="#face">
<map name="Face">
<area shape="rect" href="page.html" coords ="140,20,280,60">
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<area shape="circle" href="new.html" coords="80,100,60">
</map>在<body></body>标记对中加上以上代码，其中有三个热点区域即coords中坐标范围的区域。
热点区域可以用Dreamweaver画出来，即选择图像后，在下面属性栏中的左边有圆形、多边形、四边形的按钮，单击其中一个后，在图像上可以画出对应的区域来，在后面的连接中设置目标地址即可设置映射图，免去了检测图像的位置。
6.超链接
6.1文字连接
6.1.1最简单的文字连接
文字连接就是为文本加上超级连接，以达到跳转网页的效果。
<a href="http://www.163.com">163网站</a>超链接的文字默认是蓝色，鼠标指针放上去变成手型。
6.1.2超链接网页的打开方式
一个重要的属性：target，也是放在起始标记里，表示所连接的网页在浏览器中的打开方式，后面接一个参数可以是_blank,_parent,_self或_top,这些参数代表的含义如下：
_blank：在新浏览器打开窗口。比较常用。
_parent：将要链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像_self参数一样。
_self：在同一框架或窗口中打开所有链接的文档。此参数为默认值，通常不用指定。
_top：在当前的整个浏览器窗口中打开所有链接的文档，因而会删除所有框架。
<a href="http://www.163.com" target="_blank">163网站</a>
6.1.3链接的注释
属性title，当鼠标指针放在文字上时，他就会出现在鼠标指针后方
6.2图片链接
<a href=""><img src=""></a>
6.3锚点链接
锚点常常在很长的文章中用到，以便链接到页面中的具体位置。锚点由name属性来创建一个命名的锚，使用命名的锚后，单击带有命名锚的地址直接跳转到一个页面中的锚点位置。这样打开网页直接指到某一段落，从而不用从上到下慢慢找。
命名锚的语法如下
<a name="锚命名">文章中的文字</a>定义好命名锚后，链接中要指定这个命名锚，在其名称前加上“#”。使用name 属性，要设置两方面：一是设置name的名称；二是设置一个href指向这个name。
<html>
<head>
<title>锚点链接</title>
</head>
<body>
<a href="#html">点击到锚点链接</a>
<br>
<br>
<a name="html">锚点链接</a>
</body>
</html>代码第9行定义了命名锚，代码第7行的文字链接指向这个锚，当链接介入本网页中，在URL（即网页地址）后面的#字符串链接到本页的字符串中，当然，字符串要存在才可以指定到字符串的位置。
锚点应用在文章内容比较多时，用锚点链接来指定位置，即指定到中间一段落，在网页中时常用到。
6.4邮箱地址链接
下面代码为设置邮箱地址链接
<a href="mailto:leiningcn@163.com">作者的邮箱</a>在链接标记内href属性中加入mailto，然后加冒号，后面接上邮箱地址即可。这样一个邮箱链接就设置好了。
邮箱链接的文字表达可以多样化，如可以直接显示邮箱地址，或者可以用“联系我们”等文本代替。
6.5相对路径与绝对路径
路径在网页中常出现，出了用到超链接外，还会用到背景音乐地址、CSS文件等。在引用文件时（如加入超链接，或者插入图片等），如果使用了错误的文件路径，就会导致引用失效。
6.5.1相对路径
相对路径是指这个文件所在的位置与其他文件或文件夹的关系。也可以说是相对位置。
如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
为了表示上一级目录可以用“../”，上上级可以用“../../”
6.5.2绝对路径
带域名文件的完整路径
假设用户注册了域名www.blabla.cn，并申请了虚拟主机，虚拟主机提供商会给一个目录，例如www，这个www就是网站的根目录，假设在www根目录下放了一个文件index.html，这个文件的绝对路径就是http://www.blabla.cn/index.html
7.表单
7.1表单的基本语法
表单是一个能够包含表单元素的容器，表单元素是能够让用户在表单中输入信息的元素。表单语法是一对<form>标记对组成。
表单有两个属性会经常用到，就是action和method，form中的action是表示表单提交后发送的URL地址，发送的方式用method表示，可选择的参数有GET和POST。GET传输量比较小，而POST传输值比较大，这是二者最基本的区别。
<!--表单的两种属性-->
<html>
<head>
<title>表单的两种属性</title>
</head>
<body>
<form action="show.aspx" method="get">
<!--设置文本框 -->
<input type="text">
<br>
<!--设置密码框 -->
<input type="password">
<br>
<!-- 设置按钮提交-->
<input type="button" value="提交">
</form>
</body>
</html>表单里的input语法
<input type="#">
其中#代码可选项有text、password、checkbox、radio、hidden、submit、reset。分别代表：文本、密码、多选框、单选框、隐藏、提交按钮和重置按钮。
<form>以php、aspx、jsp等为后缀的动态网页结合，所用的动态语言会不同，但用的表单和表单元素都是相同的。
7.2文本框和密码框
7.2.1文本框
文本框是用来输入文本信息的，可以输入汉字、数字、字母等。
<input type="text"><html>
<head>
<title>文本框</title>
</head>
<body>
<form>
文本框：<input type="text">
</form>
</body>
</html>
文本框的上限是255个字符。
7.2.2密码框
当在密码框输入密码时，密码的信息不会显示出来。
<input type="password">7.3单选框和复选框
7.3.1单选框
单选框是在表单中有多个选项，且只能选一个的情况下使用。
在表单中，对于单选框是存在多个选项的，当从多选项中选一个选项后，为了区别这几个选项是属于哪个单选框，用属性name表示。如果
想指定某个选项处于选中状态，用checked在<input>为radio的类型里表示选中状态，从第一个<input>结束到下一个<input>开始前表示第一个<input>的选项值。
<html>
<head>
<title>单选框</title>
</head>
<body>
<form>
<input type="radio" name="book">DIV
<input type="radio" name="book">HTML
<input type="radio" name="book">CSS
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
