② 行内元素（内联元素）：在同一行显示，典型的比如<span></span>标签
要回家了有点按捺不住心里的躁动，来点简单轻松的话题。
这是个有趣的问题，应该有不少人搜过，我也搜过。出现这个问题主要还是滥用块级元素，或者是不会使用一些小技巧。举个例子，有时候我们想实现如下表单效果：
但有时候写着写着会变成下面的样子：
按我从以前遇到过情况来说，出现上面的情况的原因，可能有2个：
第一，就是可能在某个地方<label>被设置块级元素包住了
解决方法： 在外部样式使用 display: inline-block
第二，就是<label>的样式使用了 display: block
所以如果以后在写表单的时候，出现这个问题，可以从上面2个方向去查找原因，以及找出相应的解决方法。
（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。使用 <!Doctype>会让文档中的所有盒子模型以w3c标准盒子模型呈现。
（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式： 标准模式 和 怪异模式 。在 标准模式 下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在 怪异模式 下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
Reference1 - h5新增标签
Reference2 - HTML元素分类
Reference3 - html标签分类及常用元素
Reference4 - HTML5常用标签分类
【(一)HTML语言的基本结构元素有几个，分别是什么？什么作用？】<html>
<head>
<title>标题</title>
</head>
<body>
正文部分
</body>
</html>
这个例子包含了html中最基本的元素，首先是<html></html>这一组标记符，然后在它里面是标记符的元素体。html元素的元素体由两大部分组成，头元素<head></head>,体元素<body></body>另外还有一些注释。这样就可以形成一个个我们看到的美伦美奂的网页。
1、“文件头”标记符()
文件头标记符也就是通常见到的标记符，标记符在网页中是看不到的，因为它包含在HTML语言的“<head>…</head>”标记符之间，而通常我们所见到的网页内容只有在“<body>…</body>”之间的才可以在文档中显示出来.
2、“文件标题”（Title）
Title元素是文件头里唯一一个必须出现的元素，它也只能出现在文件头里.它的格式如下：
<title>标题</title>
标题表示该HTML文件的名称，是对文件的概述。标题对于一个文件来说是非常重要的，我们可以从一个好的标题中判断出该文件大概的内容。不过文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。
3.“文件体”标记符（body）
文件体标记符由<body>开始.</body>结束，它的中间是网页文档的正文部分。我们在网页中进行的背景颜色的设定，或是图片的设定或是连结字体的颜色,都要放在<body>这个标记符里。
4.“标题”标记符（hn）
标题标记符用于显示HTML文件的各级标题，格式如下：
<hn>标题内容</hn>
其中n为1－6的数字，数字越大，字越小。也就是说（h1）最大，（h6）最小，希望大家记住这一点。标题内容用黑体字显示，各行之间自动换行。
在我们制作网页时，<h4>一般作文本正文，而h6字体由于太小，一般用得很少。
5、字体和段落标记符
（1）网页中字体大小设定标识符
下面我们来看一看它的有关设置方法。它的语法是：<font size=3>文字内容</font>。它的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为3。
（2）文字的字型设定标记符
我们在这里说的字型设定主要是指文字的字型，比如说宋体，楷体等。它们在网上用得也十分广泛。唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标记符无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！
（3）分段标记符
由于在HTML里它的浏览器是基于窗口的，因此用户可以随时改变显示区的大小。不过由于HTML语言是不认识我们所谓的Enter键或空白键，所以不管按了多少次的空白或Enter，浏览器都会当作没看见。因此我们在HTML里的分段依赖于强制断行标记符<br>和强制分段标记符<p>。
6、图像标记符
在HTML里，一般用<img src=“”width=“”height=“” align=“”>来表示我们插入的图像。在这里，img表示图像的标记符，而属性src后面的引号中表示图像路径及文件名，width后面填写的是图像的宽度,height后面填写的是图像的高度,align为图像的对齐方式.一般我们使用的图像格式有2种，gif和jpeg.二者的加载方法一样。在使用图像标记符时有两件事值得我们注意一下，一是文件名，二是路径。如果文件名和路径不正确的话在网页中的图像是无法显示的。
7、表格标记符
在HTML里，一个表格由<table>开始，由</table>结束，在表格里的属性由<tr>表示表格的行，<th>表示表格的列数和相应栏目的名称，<td>表示单元格组成。此外我们还可以设置表格的表宽“width=#”和表高“height=#”，#表示是以象素为单位的整数。边框宽度“border＝＃”，#为宽度值，单位是象素。表格间距即划分表格的线的粗细用“cellspacing=#”来表示.以及表格颜色用“bgcolor=#”来表示,#是十六进制的6位数，格式为rrggbb,表示红，绿，蓝三色的分量。表格的合并在<td>中使用rowspan或colspan。
8、框架标记符
使用框架可以将浏览器分成多个区域，每个区域都是相对独立的，可以显示HTML文件
9、层标记符
所谓层,也就是网页内容的容器.只有在Dreamweaver里才有层。层分为两种类型：CSS和Netscape层。前者在HTML文件中的层标记符使用Div和Span，被浏览器Internet explore4.0和Netscape4.0支持。后者使用Layer和Ilayer，被Netscape4.0支持。Dreamweaver 8对以上4种层都支持。
层的基本语句如下：
<div id="Layer1" style="position:absoluteleft:141pxtop:58pxwidth:210pxheight:137pxz-index:1"></div>
在这里，id表示层的编号，style表示层的方式，left表示层左边界距离浏览器窗口左边界的距离，top表示层上边界距离浏览器窗口上边界的距离，width表示层的宽度，height表示层的高度，z-index表示在垂直平面的方向上层的顺序号。
【（二）用HTML语言编写个三行两列的表格。】
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
【（三）HTMl语言的常用元素有什么？举至少5个例子。】
<a href=...>~〈/a>:插入超链接
<form action=...>~</form>：提交表单
<link href=...插入相关的CSS文件>
<style>~</style>：插入相应的图标，比如鼠标样子图标
<table>~<table>:插入显示HTML的一个表格，需要class和id的属性
<div>~</div>:定义显示文本的位置，需要class和id的属性
<font>~</font>：文字颜色和大小布局
<p>~</p>：文字段
<input />：输入表格属性，一般分为name和password两种。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）