HTML超文本标记语言(Hyper Text Markup Language),是用来描述网页内容的一种语言,HTML文档也就是网页,Web浏览器的作用是读取HTML文档,并以网页形式显示它们,浏览器不会显示HTML标签,而是使用标签来解释页面的内容。
HTMLHTML标签
用以表达页面内容及结构。
HTML用来描述网页的被称之为HTML标签,HTML标签是由尖括号包围的关键词,页面上的所有元素都是由各种标签组成,HTML标签一般是成对出现的,比如<p>
和</p>
有些标签是没有结束标签的,称为“单标签”,比如<br/>
,在HTML5的时代,不再推崇加 ‘/’ 闭合的方式。HTML标签对大小写步敏感,但提倡使用小写。
HTML 属性
提供有关HTML元素的更多信息。
以键值对形式出现,在HTML元素的开始标签中规定,一个元素可以有多个属性,且属性名和属性值对大小写不敏感。属性值可以不使用引号,当值里有空格等特殊符号的时候,需要双引号或单引号引起,但是不建议不是用引号。
常用属性:
- class:规定元素的类名
- id:规定元素的唯一 id
- style:规定元素的行内样式
- title:规定元素的额外信息
- align:规定对齐方式的附加信息
- bgcolor:规定背景颜色
HTML 注释
<!--单行注释-->
<!--
多行注释
balabala
-->
一个网页的组成
<!DOCTYPE html>
<html>
<head>
</head>
<body>
这里是<p>显示内容</p>
</body>
</html>
-
<!DOCTYPE >
必须是HTML文档的第一行。声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 -
<html></html>
用来包住所有HTML标签,包含<head></head>
和<body></body>
两部分 -
<head></head>
是网页的头部信息,是浏览器中每一个标签页的名字 -
<body></body>
是页面上要显示的内容
head里的标签
meta, link, script, title,style
- title:定义文档的标题。title对于搜索引擎优化很重要。
- meta:可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta name="keywords" content="HTML,CSS,Javascript,在线编程,在线学习">
再比如,规定浏览器用什么编码来解析这个html页面。例如,中文乱码可以通过以下语句设置所用的字符集为utf-8:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- script:定义客户端脚本
- link:定义文档与外部资源之间的关系,常用来引入css
- style:定义样式信息
body里的标签
body里的标签就太多了,主要分为几类:
文字相关类:
- h:定义标题1到标题6,h1,h2,h3,h4,h5,h6,文字大小一次减小
- p:html段落
- a:html链接,href属性中指定链接地址,target属性定义被链接的文档在何处显示
- b, strong:定义粗体文字
- em, i:定义内容为斜体
- q:定义短引用,浏览器通常会为 <q> 元素包围引号。
- blockquote:定义长引用,浏览器通常会对 blockquote 元素进行缩进处理
- abbr:定义缩写或首字母缩略语,对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
图像类
- img:空标签,src属性的值是图像的 URL 地址,alt属性用来为图像定义一串预备的可替换的文本
表格类
- table:定义表格,border属性定义边框,默认不显示边框
- tr:定义表格行,大多数浏览器会把表头显示为粗体居中的文本
- td:定义表格列,<td> </td>表示空单元格
列表类
- ul:无序列表
- ol:有序列表
- li:列表项
表单类
- form:定义HTML表单,action属性定义在提交表单时执行的动作
- input:根据type属性,可以是文本(text)、单选按钮(radio)、复选框(checkbox)、提交按钮(submit)、密码(password)、按钮(button)等
- fieldset:组合表单中相关数据,<legend>为<fieldset>元素定义标题
- select:定义下拉列表,<option>定义待选择的选项
- textarea:多行文字输入域
代码类
- code:定义编程代码示例,不保留多余的空格和折行
- pre:解决code不保留多余的空格和折行,用
<pre>
元素包围代码
其它类
- hr:
标签在HTML页面中创建水平线 - br:
在不产生一个新的段落情况下换行
以上指列出了使用频率较高的标签,更多标签和属性见W3School
HTML<div>和<span>
<div>标签可以将网页分割成不同的、清晰的、独立的局部模块,然后在不同的模块中添加内容。 这样使网页布局结构更加清晰,代码更加独立,代码修改时能尽量少地影响到整体页面, 所以在网页开发中提倡使用<div>标签。
<div>图层常见属性设置:
- id: 用于标识<div>块(即<div>标签的名字)
- class: 修饰<div>块的css样式组
- position:绝对定位和相对定位 (abosolute,relative)
- height:<div>模块的高度
- width:<div>模块的宽度
- left:相对于窗口左边的位置
- top:相对于窗口上边的位置
<div> vs <span>
<div>是块级元素,用于组合其他HTML元素的容器;<span>是内联元素,可用作文本的容器。二者都是为了逻辑分块,<div>表示一个单独的块,<span>表示一个行内的块。
参考资料
html在线验证
html在线格式化代码
W3School上的HTML基础教程
Html5新特性
CodeForDream上提供的HTML课程
网友评论
现在居然是这样的了吗?已经不需要让它是一个合格的xml了?