文章目录
- 一、HTML5概述
- 二、文档结构
- 三、文本元素
- 四、超链接和路径
- i.超链接属性
- ii.相对路径与绝对路径
一、HTML5概述
一种超文本标记语言。 HTML5其中重要的三项技术分别为:HTML5核心规范、CSS、JavaScript。
二、文档结构
<!DOCTYPE html> //文档类型声明
<html lang=”zh-cn”> //表示文档开始(英文用en)
<head> //包含文档元素据开始(不可见)
<meta charset=”utf-8”> //声明字符编码
<title>基本结构</title> //设置文档标题
</head> //包含文档元素据结束
<body> //表示HTML文档内容(可见)
xxxxxxxxxxxxx
</body>
</html> //表示文档结束
注:
Doctype 文档类型声明 <!DOCTYPE html>
html(标签)双标签,头尾呼应
head 包含元数据内容 (页面不可见)
meta 提供关于文档的信息
title 设置标题
body 包含文档内容的元素 (浏览器可见区域部分)
(双标签 例如head后直接加tab键可以直接出现html格式,前提是文件已保存。)
三、文本元素
元素名称 | 说明 |
---|---|
a | 生成超链接 |
br | 强制换行 |
wbr | 可安全换行 |
b | 标记一段文字但不强调 |
strong | 表示重要 |
i | 表示外文或科学术语 |
em | 表示强调 |
code | 表示计算机代码 |
var | 表示程序输出 |
samp | 表示变量 |
kdb | 表示用户输入 |
abbr | 表示缩写 |
cite | 表示其他作品的标题 |
del | 表示被删除的文字 |
s | 表示文字已不再确认 |
dfn | 表示术语定义 |
mark | 表示与另一段上下文有关的内容 |
q | 表示引自他处的内容 |
rp | 与ruby元素结合使用,标记括号 |
rt | 与ruby元素结合使用,标记括号 |
ruby | 表示位于表意文字上方或右方的注音符号 |
bdo | 控制文字的方向 |
small | 表示小号字体内容 |
sub | 表示下标字体 |
sup | 表示上标字体 |
time | 表示时间或日期 |
u | 标记一段文字但不强调 |
span | 通用元素,没有任何语义。一般配合CSS修饰。 |
注:
ctrl+?=注释
b、strong 加粗
i、var倾斜
s、del 加删除线
u、ins 加下划线
q 加双引号
mark 黄色背景黑色字
四、超链接和路径
i.超链接属性
属性名称 | 说明 |
---|---|
href | 指定元素所指资源的URL |
hreflang | 指向的链接资源所使用的语言 |
media | 说明所链接资源用于哪种设备 |
rel | 说明文档与所链接资源的关系类型 |
target | 指定用以打开所链接资源的浏览环境 |
type | |
target属性 | |
属性名称 | 说明 |
-------- | ------------------------------ |
blank | 在新窗口或标签页中打开文档 |
parent | 在父窗框组(frameset)中打开文档 |
_self | 在当前窗口打开文档(默认) |
_top | 在顶层窗口打开文档 |
例如:
<a href="http:www.baidu.com" target="_blank">
ii.相对路径与绝对路径
1.绝对路径: 当整个目录转移到另外的盘符或其他电脑时,目录结构一旦出现任何变化,链接当即失效。
<a href="file:///磁盘符+目录层次x.html">名称</a>
2.相对路径条件: 必须文件都在一个磁盘或目录下
注: 如果一个主目录有多个子目录层次等其他情况 使用目录语法:
同一个目录: index2.html或./index2.html;
在子目录: xxx/index2.html;
在孙子目录: xxx/xxx/index2.html;
在父目录: ../index2.html;
在爷爷目录: ../ ../index2.html;
3.锚点设置:
//链接
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
//锚点
<a name="1"></a> <a id="3"></a>