java培训机构HTML知识点整理

美国上市公司，专注Java培训21年

校区地址

java培训机构HTML知识点整理

发布：Java培训
来源：java学习笔记
时间：2017-03-16 16:09

HTML
㈠HTML入门
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 编辑器
Sublime Text 3

WebStorm

Dreamweaver

㈡ HTML文档结构
HTML文档基本结构
DTD(Document Type Definition) -------------- 文档定义类型
<html> -------------- 文本描述网页
<head> -------------- 文档头部标记：含脚本，样式表等等。
<meta /> -------------- 定义文档字符集、使用语言、作者等基本信息
<title>标题</title> -------------- 定义文档的标题
</head>
<body> -------------- 网页主体,是可见的页面内容
<h1>Hello world</h1> -----------标题
</body>
</html>
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<head>与</head>头部元素的容器：
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一个网页</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
HTML 文档类型
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
作用：指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。
//HTML 5
<!DOCTYPE html>
//HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

//HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

//HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

//XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 标记标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签分为单标记和双标记：
单标记：<标记名称属性名称="属性值" ... />，比如 <br/>
双标记：<标记名称属性名称="属性值" ... ></标记名称>，比如和；第一个标签是开始标签，第二个标签是结束标签。

HTML 属性
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

属性值&描述
class 规定元素的类名（classname）
id 规定元素的唯一 id
name 名称，一般也是唯一的
style 规定元素的行内样式（inline style）
title 规定元素的额外信息（可在工具提示中显示）
...
注意：实际中很少用到，都通过css和js来设置！

注释
//注释:
<a href="www.baidu.com">百度一下你不知道</a> 

//注释一行代码


//条件注释


㈢元素(标签+属性+文本)
HTML 元素：
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容;某些 HTML 元素具有空内容（empty content）
大多数 HTML 元素可以嵌套。
1. 文字
<b>字体加粗</b>
<i>斜体字体</i>
<u>下划线</u>
<s>删除线</s>
上标：X<sup>2</sup>
下标：Y<sub>3</sub>
//字体相关属性：
<font size="5" color="red" face="黑体">字体，添加属性值</font>
<font size="3" color="#333333" face="黑体">size的值是1~7；color的表达方式：英语单词 RGB 十六进制</font>
2. 标题段落换行水平线
//标题:
<h1 align="center">1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
//段落：<p></p>
<p>第一段</p>
<p align="left">第二段</p>
<p align="center">第三段</p>

//换行：<br />

<br /> //换行

//水平线:<hr />
<hr />
<hr size="10" width="800"/>
<hr size="10" width="800" noshade="noshade"/>
<hr size="30%" width="80%" /> //随屏幕百分比变化

3. 图片超链接锚点链接
/* 相对路径和绝对路径
绝对路径：协议+主机+路径+文档
相对路径：./ 当前目录 ../ 父级目录 / 根目录 ../../父目录的父目录

URL：scheme://host.domain:port/path/filename
*/

//图像:<img src="" />

[站外图片上传中……(4)]

属性：
scr //source 图像的URL地址
title //鼠标悬停显示的图片描述
alt //在浏览器无法载入图像时展示给读者提示的信息
width
height
broder //边框

//超链接：<a href=""></a>
<a href="http://www.baidu.com" target="_blank"></a>
href: 链接地址
target: 定义被链接的文档在何处显示 _blank(新标签打开)
_self (当前标签打开)
_parent
_top
//锚点链接:定义一个唯一的'id' 赋给href 实现跳转
<a href="#p1">点击前往第七段</a>
<p id="p1">第七段</p>
4. HTML的实体
在 HTML 中，某些字符是预留的：小于号（<）和大于号（>），会误认为是标签。
因此，在 HTML 源代码中使用字符实体（character entities）来显示预留字符。
  //空格
&quto; //引号
¥ //￥
×

&divede;

【HTL中有用的字符实体】