html之基础概要
Posted Lydia_zero
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html之基础概要相关的知识，希望对你有一定的参考价值。
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之基础概要的主要内容，如果未能解决你的问题，请参考以下文章