HTML复习（一）

一、基础知识
二、html元素
三、HTML 属性

HTML 属性
HTML 提示：使用小写属性

面试问答

1、块元素和内联元素的概念以及区别

块级标签:
内联标签：

一、基础知识

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 元素被称为空元素。空元素是在开始标签中关闭的。
  就是没有关闭标签的空元素（  标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如  ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使   在所有浏览器中都是有效的，但使用   其实是更长远的保障。
HTML 提示：使用小写标签
HTML 标签对大小写不敏感： 等同于 。许多网站都使用大写的 HTML 标签。
菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

三、HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

####HTML 属性常用引用属性值

属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。

tips:在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。
不过，万维网联盟在其 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:下拉列表

泡椒猪肝

发布了18 篇原创文章 · 获赞 4 · 访问量 563

私信关注

HTML复习（一）

HTML复习（一）

一、基础知识

二、html元素

三、HTML 属性

HTML 属性

HTML 提示：使用小写属性

面试问答

1、块元素和内联元素的概念以及区别

块级标签:

内联标签：

猜你喜欢