你应该知道的 HTML
2016-12-05 本文已影响0人
芝麻香油
众所周知，前端三大支柱 HTML、CSS、JavaScript。所以，今天就来聊聊，你应该知道的 HTML。
什么是HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言（Hyper Text Markup Language）
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 是什么样的
简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。
下面是一个最简单的HTML文档：
<html >
<head>
<title>first test</title>
</head>
<body>
<h1>My First HTML</h1>
<p>hello shiyanlou</p>
</body>
</html>
浏览器显示如下图：
浏览器显示.png
所有的 HTML 文档都应该有一个 <html> 标签，<html> 标签可以包含两个部分：<head> 和 <body>。
<head>标签用于包含整个文档的一般信息，比如文档的标题（<title> 标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在 <body>标签里了。
HTML 标签
关于 HTML 标签参见此处（Ps：网上介绍的比较多，我就不多说了）
标签语法
- 双标记：<开始标记>内容</结束标记>。
- 例 ：
<font>新华网</font>、<title>…</title>
- 单标记：<标记>。
- 例：
<hr>–加横线、<br>–换行、<b>–加宽等。
- 标记的属性：<标记 属性1=参数 属性2=参数…>内容</标记>。
- 例：
<font size=”5″ color=”red”><b>新华新闻</b></font>。
特殊标签(3个)：<!DOCTYPE>、<!– –>、<hr>
分类：
- 块元素 ( block element )
-
div– 常用块级主要标签 -
dl– 定义列表 -
form– 交互表单 -
h1-h6– 标题 -
hr– 水平分隔线 -
ol , ul- 排序表单 ，非排序列表 -
p– 段落 -
pre– 格式化文本 -
table– 表格 -
blockquote– 块引用
- 行元素 ( inline element )
-
a– 锚点 -
br– 换行 -
em– 强调 -
i– 斜体 -
img– 图片 -
input– 输入框 -
label– 表格标签 -
q– 短引用 -
select– 项目选择 -
span– 常用内联容器，定义文本内区块 -
textarea– 多行文本输入框
Tips（BBS 中的两个问题）
-
ul与ol
Q1：ul与ol之间的区别？
A：ul表示无序，ol表示有序序列。
Q2：什么时候用哪个？
A： 不明思议表示有序序列用ol，无序序列则使用ul。
<!-- ol -->
<ol>
<li></li>
<li></li>
</ol>
ol - 有序列表.png
<!-- ul -->
<ul>
<li></li>
<li></li>
</ul>
ul - 无序列表.png
-
div与span
Q1.div与span之间的区别？
A：div是块级元素，不论大小默认占一行，而且可以可以设置宽高以及外边距。span是行内元素，占它自身大小的位置，而且不能设置宽高以及外边距。同时，div也可变为span（display: inline），这样div将变为行内元素。span也可以变为div（display: block），这样span将变为块级元素，默认占一行，而且可以设置宽高，同时，两者要想实现既可以设置宽高、边距，又可以不占一行，则display: inline-block。
Q2：什么时候用哪个？
A：在学习的过程中发现，div指定渲染 HTML 的容器。span指定内嵌文本容器。因此，我认为，div用于排版，span用于文字样式
对于以上问题，仅是我的一家之谈，如果你有更好的答案快来告诉我吧！
