赞
踩
HTML最上方的一段文本我们称之为文档类型声明,用于声明文档类型
<!DOCTYPE html>
HTML文档声明 告诉浏览器当前页面是HTML5页面
让浏览器用HTML5的标准去解析识别内容
必须放在HTML文档的最前面 不能省略 省略了会出现兼容性问题
表示一个HTML文档的根 也被称为根元素
其他所有元素必须是此元素的后代
<!DOCTYPE html>
<html lang="en">
</html>
W3C标准建议为html元素增加一个lang属性 作用是
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
比如常用的规则
- lang="en”表示这个HTML文档的语言是英文
- lang= "zh-CN”表示这个HTML文档的语言是中文
规定文档相关的配置信息(也称之为元数据) 包括文档的标题 引用的文档样式和脚本等
常见的设置
- 网页的标题: title元素
<title>网页的标题</title>
- 网页的编码: meta元素
- 可以用于设置网页的字符编码 让浏览器更精准地显示每一个文字 不设置或者设置错误会导致乱码
- 一般都使用utf-8编码 涵盖了世界上几乎所有的文字
<meta charset="utf-8">
body元素里面的内容将是你在浏览器窗口中看到的东西,也就是网页的具体内容和结构。
大部分HTML元素都是在body中编写呈现的;
<body>
<input type="text">
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
<h1>-<h6> 标题元素 呈现了六个不同级别的标题
- <h1>级别最高 <h6>级别最低
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>
<p>元素表示文本的一个段落
- p元素多个段落之间会有一定的间距
<img>元素是将一份图像嵌入文档
- 实际上img是一个可替换元素
img有两个常见的属性
- src属性 是必须的
- 包含了你先嵌入的图片的文件路径
- alt属性 不是强制性的 有两个作用
- 作用一:当图片加载不成功 那么会显示这段文本
- 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听 让他们知道图像的含义
设置img的src时 需要给图片设置路径
网络图片:一个URL地址
网络图片的设置非常简单 给一个地址即可
本地图片:本地电脑上的图片
本地图片的路径有两种方式
方式一:绝对路径(几乎不用)
从电脑的根目录开始一直找到资源的路径
方式二:相对路径(常用)
相当于当前文件的一个路径
.代表当前文件夹(1个.) 可以省略
…代表上级文件夹(2个.)
对于网页来说,管什么操作系统(Windows、Mac、Linux),路径分隔符都是/,而不是\
<a>元素 定义超链接 用于打开新的URL
- a元素有两个常见的属性
- href
- 指定要打开的URL地址
- 也可以是一个本地地址
- target 指定在何处显示链接的资源
- _self 默认值,在当前窗口打开URL
- _blank 在新的窗口打开URL
- _parent 在父窗口中打开URL
- _top 在顶级窗口中代开URL
a元素 锚点链接 可以实现跳转到网页的具体位置
- 锚点链接有两个步骤
- 在要跳转的元素上定义一个id属性
- 定义a元素 并且a元素的href指向对应的id
img元素跟a元素一起使用 可以实现图片链接
- a元素中不存放文字 而是存放一个img元素
- 也就是img元素是a元素的内容
a元素也可跳转到其他URL地址
如 下载zip 发送邮件
利用iframe元素可以实现 在一个HTML文档中嵌入其他HTML文档
某些网页禁止嵌套
- frameborder属性 用于规定是否显示边框
- 1:显示
- 0:不显示
可与a元素配合使用
div元素 多个div元素包裹的内容会在不同的行显示
一般作为其他元素的父容器,把其他元素包住,代表一个整体
用于把网页分割为多个独立的部分
span元素 多个span元素包裹的内容会在同一行显示
- 默认情况下,跟普通文本几乎没差别
- 用于区分特殊文本和普通文本,比如用来显示一些关键字
strong元素 内容加粗、强调
通常加粗会使用css样式来完成
开发中很偶尔会使用一下
i元素 内容倾斜
通常斜体会使用css样式来完成
开发中偶尔会用它来做字体图标
code元素 用于显示代码
- 偶尔会使用用来显示等宽字体
br元素 换行元素
- 开发中已经不使用
常见的全局属性
id 定义唯一标识符(ID) 该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素。
class 一个以空格分隔的元素的类名(classes)列表 它允许CSS和JavaScript通过类选择器或者DOM方法来选择和访问特定的元素
style 给元素添加内联样式
title 包含表示与其所属元素相关信息的文本 这些信息通常可以作为提示呈现给用户 但不是必须的
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。