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