您的位置：首页 > Web前端 > HTML

html之基础概要

2016-03-18 11:08 435 查看

html（HyperText MarkupLanguage 超文本标记语言）

是网页内容的载体，内容是网页制作者放在页面上想要让用户浏览的信息，可以包括文字、图片、视频等。

1、网页中每一个内容在浏览器中的显示，都要存放到各种标签中。

2、标签由英文尖括号“<”和“>”括起来，如<html>就是一个标签，标签不区分大小写，但根据html规范建议小写。

（2.1）html中的标签一般都是成对出现的，分开是标签和结束标签。结束标签比开始标签多了一个“/”。如：<p></p>、<div></div>、<span></span>;如下图：

（2.2）标签与标签之间是可以嵌套的，先先后顺序必须保持一致，如<div>里嵌套<p>，那么</p>必须在</div>的前面。如下图：

3、html结构，<html></html>称为根标签，所有的网页标签都在根标签中。

（3.1）<head></head>标签用于定义文档的头部，它是所有头部元素的容器，例如：<title></title>；文档的头部标签，文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

（3.1.1）<title></title>标签，在该标签之间的文字内容是网页的标题信息，他会出现在浏览器的标题栏中，网页的title标签会用于告诉用户和搜索引擎这个网页的主要内容是什么。

（3.2）<body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

我们常用的标签大部分为内容标签，主要注意两方面的学习：标签的用途，标签在浏览器中的默认样式。

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。你说的通俗点就是：明白每一个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签标示强调等等。

语义化带来的好处：1.更容易被搜索引擎收录。2.更容易让屏幕阅读器读出网页内容。

内容标签如下，复杂的标签将在后期文章中着重拿出来讲解。

内容标签	标签语义	默认样式
<body>…</body>	网页上要展现的页面内容都要放在body标签中。
<p>…</p>	文章的段落放在<p>标签中，注意一段文字一个<p>标签。	段前段后都会有空白。
<hx></hx>	文章的标题标签，一共有6个，h1、h2、h3、h4、h5、h6分别为一、二、三、四、五、六级标题，并且依据重要性递减，<h1>是最高的等级。	标签样式都会加粗，h1标签字号最大，h2标签字号相对于h1要小，以此类推，h6标签的字号最小。
<strong></strong> <em></em>	强调标签，<em>表示强调，<strong>表示更强烈的强调。	<em>默认用斜体表示，<strong>用粗体表示
<span></span>	没有语义，它的作用就是为了设置单独的样式用。
<q></q>	短文本引用，比如在网页中文章里想引用一句诗，就可以用<q>来帮忙。	浏览器会对q标签自动添加双引号，所以引用的文本不用加双引号。
<blockquote></blockquote>	长文本引用	浏览器对<blockquote>标签的解析是缩进样式，左右各缩进两个文字。
<br/>	分行显示文本，空标签只需要写一个开始标签要有结束符/ ，在html中输入回车是没有作用的，	样式相当于word文档中的回车。
	空格，是一个空标签，输入多个空格只会显示一个。	显示一个空格，输入多个就可以显示多个空格。
<hr/>	添加水平横线。也是一个空标签。	默认样式线条比较粗，颜色为灰色。
<address></address>	为网页添加地址信息。如公司地址、电子邮箱地址、签名或者文档作者本身。	默认样式为斜体。
<code></code>	想加入一行代码时使用
<pre></pre>	预格式化文本，在网页中加入大段代码时常使用。	被包围在pre元素中的文本通常会保留空格和换行符。
<ul><li></li><li></li>…</ul>	无序列表	默认每项li前都自带一个圆点
<ol><li></li><li></li>…</ol>	有序列表	默认每项li前都自带一个序号，序号默认从1开始。
<div id=””></div>	容器，可以把一些独立的逻辑部分划分出来。一般都会给这个独立的逻辑部分设置一个名称，用id属性来为div提供唯一的名称，这个就相当于每个人都有一个身份证号，唯一标识。
<table summary=”"></table>	表格，summary为表格添加摘要摘要的内容不会显示出来，它的作用是增加表格的可读性（语义化）	默认是没有表格线的
<caption></caption>	为表格添加标题	显示在表格的上方，居中。
<thead></thead>	表格的头标签
<tr></tr>	表格的行标签
<th></th>	表格的表头的一个单元格	文本默认是粗体并且居中
<tbody></tbody>	表格的内容部分	当表格内容非常多时，表格会下载一点显示一点，加上tbody后，要等表格内容全部加载完才会显示。
<td></td>	表格的内容的一个单元格
<tfoot></tfoot>	表格的底部，比如“总计：###”
<a></a>	实现超链接，语法<a href=”目标地址” title=”鼠标滑过显示的文本”>链接显示的文本</a>	链接显示的文本默认为蓝色，并且带有下划线。
<img>	用来为网页插入图片，语法<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<form></form>	表单标签，语法：<form method=”传送方式” action=”服务器问件”></form>，所有的表单元素都要放在<form></form>标签之间。
<input type=”text” name=”” value=””>	文本输入框
<input type=”password” name=”” value=””>	密码输入框
<textarea row=”” cols=””>文本</textarea>	支持多行文本输入
<input type=”radio” value=”” name=””>	单选框，注意同一组的单选按钮，name取值一定要一致。
<input type=”checkbox” value=”” name=””>	复选框
< select ><option value=”提交值”>选项 </option><option value=”提交值”>选项</option>…</ select >	下拉框（<select multiple=” multiple”></select>可以实现下拉框多选）。
<input type=”submit” value=”” name=””>	提交按钮（提交表单信息到服务器）
<input type=”reset” value=”” name=””>	重置按钮（使输入框恢复到初始状态）
<lable for=”控件id名称”></lable>	不会向用户呈现任何特殊效果，作用是为鼠标用户改进可用性。如果再lable标签内点击文本，就会触发到相应的表单控件上。

4、html的代码注释（<!-注释文字->），代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起来这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便很多人合作开发网页代码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航