一、基础知识
1、超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
2、对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
3、HTML文档的后缀名
.html
.htm
以上两种后缀名没有区别,都可以使用。
4、<!DOCTYPE html>
声明为 HTML5 文档
<html>
元素是 HTML 页面的根元素
<head>
元素包含了文档的元(meta)数据,如 <meta charset="utf-8">
定义网页编码格式为 utf-8。
<title>
元素描述了文档的标题
<body>
元素包含了可见的页面内容
5、什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
6、HTML 标签
斜体样式HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 - HTML 标签是由尖括号包围的关键词,比如
- HTML 标签通常是成对出现的,比如 和
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 7、HTML 元素
HTML 标签" 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>这是一个段落。</p>
8、<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的,以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
9、通用声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
10、中文编码
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
二、html元素
HTML 文档由 HTML 元素定义。
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
-
HTML 元素语法
-
HTML 元素以开始标签起始
-
HTML 元素以结束标签终止
-
元素的内容是开始标签与结束标签之间的内容
-
某些 HTML 元素具有空内容(empty content)
-
空元素在开始标签中进行关闭(以开始标签的结束而结束)
-
大多数 HTML 元素可拥有属性
-
嵌套的 HTML 元素
HTML 文档由嵌套的 HTML 元素构成。 -
HTML 空元素
-
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
-
<br>
就是没有关闭标签的空元素(<br>
标签定义换行)。 -
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
-
在开始标签中添加斜杠,比如
<br />
,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。 -
即使
<br>
在所有浏览器中都是有效的,但使用<br />
其实是更长远的保障。 -
HTML 提示:使用小写标签
-
HTML 标签对大小写不敏感:
<P>
等同于<p>
。许多网站都使用大写的 HTML 标签。 -
菜鸟教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
三、HTML 属性
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
- class 属性可以多用 class=" " (引号里面可以填入多个class属性)
- id 属性只能单独设置 id=" "(只能填写一个,多个无效)
- ####HTML 属性常用引用属性值
- 属性值应该始终被包括在引号内。
- 双引号是最常用的,不过使用单引号也没有问题。
tips:在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
- 属性和属性值对大小写不敏感。
- 不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
- 而新版本的 (X)HTML 要求使用小写属性。
面试问答
1、块元素和内联元素的概念以及区别
一丶块元素:
(1)前后有换行符,独占一行,默认情况下,垂直排列
(2)默认情况下高度有内容决定(就比如由里边的图片和文字决定高度),宽度是父级的宽度,父级是多宽,它就有多宽。width height 可以控制宽高。
(3)margin和padding可以控制距离
(4)常见的块元素有:div p ul li hr【 水平线】form等标签
二丶内联元素:
(1)前后没有换行符,不独占一行。默认情况下,水平排列
(2)宽度和高度都有内容决定
(3width 和height不可以控制高度 也就是说 给其宽高是不起作用的
(4)margin padding 只可以控制左右 上下不可控制
(5)常见的内联元素有:span img(属于替换元素 即是 它是内联元素 却可以设置width height来控制宽高)
还有i em 等等
三丶块元素和内联元素的转换:
dislay:none;表示隐藏布局(隐藏之后不再占位)
display:block;表示块状布局
display:inline;表示内联布局
块级标签:
- section:文档节
- nav:导航
- header:页眉
- article:文章
- aside:文章侧栏
- footer:页脚
- details:元素的细节
- summary:details元素可见的标题
- dialog:对话框窗口
- h1,h2,h3,h4,h5,h6:标题
- p:段落
- ul:无序列表
- ol:有序列表
- dir:目录列表
- li:项目
- dl:列表
- dt:列表项目
- dd:项目描述
- menu:命令的菜单,列表
- menuitem:菜单项目
- command:命令按钮
- form:表单
- fieldset:围绕元素的边框(可用于表单内元素分组)
- legend:在边框上的标题
- select:选择列表(内联元素)
- optgroup:组合选择列表选项
- option:选择列表选项(也可做datalist选项)
- datalist:下拉列表(id要与input中list属性值绑定)
- table:表格
- caption:表格标题
- thead:组合表头内容(th)
- tbody:组合主体内容(td)
- tfoot:组合表注内容(tf)
- tr:表格行
- th:表头单元格
- td:表格单元
- col:表格列属性;(空标签)
- colgroup:表格格式化列组;
- iframe:内联框架
- figure:媒介内容分组
- figcaption:figure标题
- map:图像映射
- area:图像区域
- canvas:图形容器(脚本来绘制图形)
- video:视频
- source:媒介源
- track:文本轨道
- audio:声音内容
- br:换行(空标签)
- hr:水平分割线(空标签)
- pre:格式文本
- blockquote:块引用
- address:文档联系信息
- center:居中文本(不赞成使用)
- spacer:在水平和垂直方向插入空间(空元素)
内联标签:
- span:内联容器
- abbr:缩写
- em:强调
- strong:粗体强调
- mark:突出显示的文本
- b:粗体
- i:斜体
- bdi:文本方向
- bdo:文字方向
- big:大字体
- small:小字体
- sup:上标
- sub:下标
- del:被删除的文本
- strike:删除线
- s:删除线
- ins:被插入的文本
- u:下划线
- nobr:禁止换行
- wbr:单词换行时机(空标签)
- tt:打字机文本
- kbd:键盘文本
- time:日期/时间
- cite:引用
- q:短引用(“”)
- font:字体设定(不常用)
- acronym:缩写(html5不支持)
- dfn:字段(不常用)
- a:锚点
- img:图片
- embed:内嵌(空标签)
- label:input标记(点击文本触发控件)
- input:输入框
- button:按钮
- keygen:生成秘钥(空标签)
- textarea:多行文本输入框
- output:输出结果
- ruby:中文注音
- rt:注音
- rp:浏览器不支持ruby元素显示的内容
- progress:进度条
- meter:度量
- var:定义变量
- code:计算机代码文本
- samp:计算机代码样本
- select:下拉列表