html 基础介绍

名词解释

HTML 是一门用于描述网页的语言

  • HTML(Hyper Text Markup Language): 超文本标记语言
  • HTML 不是编程语言, 是一种标记语言
  • 标记语言是一套标记标签( Markup tag), 用于描述网页内容

HTML 标签 / HTML 元素

  • HTML 标签是由接括号(<>)包围的关键字, 且通常成对出现
  • 例如: <p>HTML</p>, <div><img src=”” alt=””></div>,
  • 标签中的第一个标签是开始标签(开放标签), 第二个标签是结束标签(闭合标签),在开始结束标签之间插入内容
  • 例外: <img src=”/static/test.png” alt=”test”>, <input type=”text” value=”feifeiyu”>, <br/>

HTML 标签属性

  • HTML 属性是附加于 HTML 标签中的信息
  • 属性是以 key-value 形式出现的, 例如:<input type=”text”>,
  • value 值是字符串,必须包括在”“, ’‘中, 推荐使用 ”“
  • HTML 文档大小写不敏感,规定 key和value 都使用小写,
  • 如果key 或 value 有多个单词构成,推荐使用 - 进行分割, 例如: <input id=”input-name” type=”text” data-id=”123”>
  • 属性可以根据需要定义,元素名不要与默认属性名冲突
  • 默认属性:
属性 作用
class 为html元素定义一个或多个类名, 主要用于样式附着, 不同元素可以有相同的类名
id 为thml元素定义唯一的id, 同一页面中唯一
style 规定元素的内联样式
title 描述了元素的额外信息 (鼠标悬浮与元素会显示出来)

HTML 文档 / Web 页面

  • HTML 文档 是一个由 HTML 标签及文本内容组成的文本文件(.html 文件), 可以在浏览器中按一定形式展现

HTML 文档组成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html> // 文档声明, 位于HTML文档第一行, 有助与浏览器中正确显示网页
<html> //告诉浏览器这是 html 文档, 限定html文档的开始和结束点
<head> //定义文档头部, 是所有头部元素的容器
<meta charset="UTF-8"> //页面元信息
<title>page title</title> //页面标题
<link rel="stylesheet" href="./index.css"> //引入外部样式文件
</head>
<body> //文档主题部分,可视区域
<h1>---我是标题---</h1> //文档内容
<p>XXX我是一个段落XXX</p>
</body>
<script> //脚本, 必须在 <script> 标签内
(function() {
console.log('hello world')
})()
</script>
</html>

在浏览器中显示结果
html1
整个文档中可见的区域为 <body></body>标签中的内容
页面标题则显示在浏览器的tab标签中

HTML 文档渲染

1、浏览器一边下载HTML文档, 一边开始解析文档,构建 HTML DOM树,渲染页面

(DOM: Document Object Model, 文档对象模型, 可以理解为网页各个元素的API, 他将网页的各个元素(节点)看作一个对象,利用浏览器脚本语言就可以操纵现在元素,改变其表现形式和属性)

2、在解析过程中遇到外部样式引入标签<link> 时, 浏览器渲染引擎会暂停解析, 等待样式文件加载完成, 解析样式文件,将样式规则和DOM树进行结合, 渲染输出

3、如果遇到 <script> 标签,渲染引擎停止渲染,将控制权交给脚本执行引擎。

  • 如果<script>标签引用了外部脚本, 则下载该脚本,下载完成后执行脚本;
  • 直接在<script>标签中书写的脚本则直接执行。
  • 执行完毕后,控制权交还给渲染引擎, 恢复往下解析HTML网页

4、不同浏览器的渲染引擎工作略有不同。资料 Rendering Engine

HTML 常用标签(元素)

一、头部和身体

1、头部标签<head></head>

头部标签,在浏览器窗口中不显示, 其可以包含的元素有

  • <title></title>: 页面标题
  • <meta>: 描述 HTML 文档的一些基本信息, 例如: 网页描述, 关键词设置, 页面配置等
  • <style></stye>: 样式标签(其也可以放在<body>中), 放置样式表
  • <link>: 定义当前文档与外部文档之间的关系,主要用于下载外部样式文件
  • <script>: 用于编写内置脚本,或下载外部脚本
  • <base>: 描述了当前HTML文档中所有的链接标签的默认链接

2、文档主体<body></body>

定义文档主体,包含文档中所有需要展示的内容, 例如: 文本, 图片, 列表, 表格,链接等。

二、按显示特征分

1、块级元素
在视觉上被格式化的块元素, 明显特征: 在浏览器显示时,会以新一行开始,且横向占满
块级元素可以设置 高度 & 宽度 & 上下内边距 & 上下外边距 样式
常见块级元素

元素 描述
div HTML文档中最常用的标签, 现在网页一般都是基于 div+css 布局的, 无默认样式
h1,h2,..h6 1~6级别标题标签,有默认样式
form 表单, 定义一个包含表单元素的区域, 请求方法只支持: GET & POST
p 段落, 填写文本内容
ul/li 无序列表组合, 项目默认用园点标记
ol/li 有序列表组合, 项目默认用数字来标记
dl/dt/dd 自定义列表组合, 适用于左右结构的布局
iframe 在同一个浏览器窗口中显示不止一个页面
table/tr/ 表格组合, 但默认宽度并非是父级元素的100%

2、行内(内联)元素
行内元素不形成新内容块,即在其左右可以有其他元素, 明显特征: 在浏览器显示时不会以新行开始
行内元素无法设置 高度 & 宽度 & 内边距 & 外边距 样式 (img, input, textarea, select, button 除外)
常见行内元素

元素 描述
a 超链接标签
i 斜体文本
em 强调文本
label 主要为 input 元素定义标注, for 属性与相关元素 id 属性相同
span 常用内联文本容器, 无默认样式
sub/sup 下标/上标
strong 粗体强调
textarea 多行文本输入框
input 单行输入框,单选框,多选框,按钮
button 按钮, 可以插入文本或图片
img 图片元素
select/option 下拉列表组合

二、按元素本身特点分

1、替换元素
1、替换换素是浏览器根据其标签属性来判断显示其具体内容的,这些元素没有实际的内容

例如:标签<img src=”/static/test.png”>, 在浏览器中显示的是其 src 属性的内容。
常见替换元素, <img>, <input>, <textarea>, <select>, <object> (flash文件标签)
2、替换元素在显示过程中生成了框(box), 一般具有内在尺寸, 因此可以这些元素可以设置 高度 & 宽度 & 内边距 & 外边距
3、不严谨地说,几乎所有替换元素都是行内(内联)元素, 由于他们可以设置宽高,这些元素又可以看成是 行内(内联)块状元素

2、非替换元素

HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)
例如: 段落 <p>feifeiyu</p> 元素内容全在浏览器中显示出来
不严谨地说 除了上面介绍的替换元素,剩下的基本就是非替换元素

三、按功能特点分

1、文本展示

元素名 描述
<span>feifeiyu</span> 基本文本容器,无默认样式 -
<p>feifeiyu</p> 显示段落文本 -
<a>feifeiyu</a> 超链接 feifeiyu
<h1>Title</h2>~<h6> 显示标题文本 -
<sub>2</sub><sup>4</sup> 上标,下标 log24
<del>blue</del> <ins>red</ins> 删除, 添加 blue red
<bdo dir=”rtl”></bdo> 定义文字显示方向 <span><bdo dir=”rtl”>feifeiyu</bdo></span> feifeiyu
<pre></pre> 预格式化文本,通常保留空格和换行符
1
2
3
4
5
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
  • 其他: 不常用
元素名
<mark>高亮文本</mark> 高亮文本
<q>定义短的引用语</q> 定义短的引用语
<cite> 定义引用、引证</cite> 定义引用、引证
<b>这是一个加粗文本</b> 这是一个加粗文本
<em>强调文本</em> 强调文本
<strong>加粗文本</strong> 加粗文本
<dfn>定义项目</dfn> 定义项目
<code>一段电脑代码</code> 一段电脑代码
<samp>计算机样本</samp> 计算机样本
<kbd>键盘输入</kbd> 键盘输入
<var>变量</var> 变量
<blockquote>定义长引用</blockquote>
定义长引用
<address>显示地址</address>
显示地址
…… ….

2、表单&表单元素

表单是一个包含表单元素的区域

1
2
3
<form action="/user/info" method="POST">
... input 元素
</form>

表单元素包括:

元素名 描述
<textarea></textarea> 多行文本输入
<input type=”text”> 单行文本输入
<input type=”password”> 密码输入
<input type=”radio”> 单选框
<input type=”checkbox”> 复选框
<input type=”submit”> 提交按钮
<input type=”button”> 普通按钮
<input type=”file”> 文件提交
<select><option value=1>test</option></select> 下拉列表
<label for=””></label> 为表单元素定义标注
<fieldset></fieldset> 表单内相关元素分组,周围绘制边框
<legend></legend> <fieldset> 元素定义标题 例:
1
2
3
4
5
6
7
8
9
<form>
<fieldset>
<legend>Personalia:<legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth:<input type="text">
</fieldset>
<input type="submit">
</form>

form

3、表格元素

元素名 描述
<table></table> 定义表格
<thead></thead> 表格页眉
<tbody></tbody> 表格主体
<tfoot></tfoot> 表格页脚
<th></th> 表格的表头
<tr></tr> 表格的行
<tr></tr> 表格单元格
<caption></caption> 表格标题
<colgroup></colgroup> 表格列的组
<col></col> 用于表格列的属性

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table border="1">
<colgroup>
<col style="background-color:blue">
<col style="background-color:gray">
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

table

4、列表

  • 无序列表, 最常见列表
    1
    2
    3
    4
    <ul>
    <li>Lilei</li>
    <li>Hangmeimei</li>
    </ul>

效果
li

  • 有序列表
    1
    2
    3
    4
    <ol>
    <li>Lilei</li>
    <li>Hangmeimei</li>
    </ol>

效果
ol

  • 自定义列表, 左右结构布局时常用
    1
    2
    3
    4
    5
    6
    <dl>
    <dt>Lilei</dt>
    <dd>- black hot drink</dd>
    <dt>Hangmeimei</dt>
    <dd>- white cold drink</dd>
    </dl>

效果
dl

4、框架

通过使用框架,可以在同一个页面中切入另一个页面的内容
使用:

1
2
3
4
<iframe src="//baidu.com" width="100" height="100"></iframe>
<iframe src="//baidu.com" name="iframe_a"></iframe>
<p><a href="//google.com" target="iframe_a">google</a></p>

5、图像

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。在浏览器上使用属性 src 来显示图片

6、字符实体

HTML 中使用字符为 HTML 的预留字符必须被替换为字符实体。
某些在键盘上找不到的字符也可以使用字符实体来替换

常用实体字符,

实体名称 描述
&nbsp; 空格, 在编写html文件是空格务必用 &nbsp; 代替
&lt;, &gt; < 小于号, > 大于号
&le;, &ge; ≤ 小于等于, ≥ 大于等于
&asymp; ≈ 约等于
&plusmn; ± 加减
&yen; ¥ 人民币,日圆符号
&pound; £ 英镑符号
&sect; § 小节
&copy; © 版权
&reg; ® 注册商标
&times; × 乘号
&divide; ÷ 除号
&radic; √ 勾
更多实体字符

页面样式

CSS (Cascading Style Sheets), 层叠样式表用于渲染HTML元素标签的样式
CSS 引入 HTML 方式

  • 内联样式, 在HTML元素中使用 style 属性
  • 内部样式表, 在HTML文档中,用 <sytle></sytle> 标签包裹CSS,
  • 外部样式表, 在HTML文档中,使用 <link rel=”stylesheet” href=”/static/test.css”> 标签引入下载的CSS文件

CSS 可以干什么?

  • 修改元素的尺寸, 边框, 背景, 显示方式, 内外边距 …
  • 修改文本颜色, 尺寸, 字体, 对齐方式 …
  • 一句话 CSS 是用来美化页面的

页面脚本

HTML 脚本用于增强页面的动态性和交互性
HTML 文档通过 <script></script> 标签容纳内部脚本

1
2
3
<script>
document.write("Hello World!");
</script>

或者通过 <script src=”/static/test.js”></script> src 属性来下载外部脚本文件。

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容

1
2
3
4
5
6
<script>
document.write("Hello World!");
</script>
<noscript>
抱歉,您浏览器不支持脚本
</noscript>

页面布局

1、基于 <div> 的布局 (常用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div id="container" style="width:300px">
<div id="header" style="background-color:gray;">
<h1 style="margin-bottom:0;">header</h1>
</div>
<div id="menu" style="background-color:#778899;height:100px;width:100px;float:left;">
<ul style="list-style: none;">
<li>name</li>
<li>age</li>
<li>address</li>
</ul>
</div>
<div id="content" style="background-color:#323232;height:100px;width:200px;float:left;">
main content</div>
<div id="footer" style="background-color:gray;text-align:center;">
Copy © feifeiyu</div>
</div>
</body>

2、基于 <table> 的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<table width="300" border="0">
<tr>
<td colspan="2" style="background-color:gray;">
<h1 style="margin: 0">header</h1>
</td>
</tr>
<tr>
<td style="background-color:#778899; width:100px;">
<ul style="list-style: none; padding: 0">
<li>name</li>
<li>age</li>
<li>address</li>
</ul>
</td>
<td style="background-color:#323232;height:100px;width:200px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:gray;text-align:center;">
版权 © feifieyu </td>
</tr>
</table>
</body>

布局效果图

layout

end