HTML 实例
<!DOCTYPE html> //:这一行是对声明使用“HTML5”文档
<html> //:元素是HTML文件的根元素
<head> //:包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<meta charset="utf-8"> //:声明编码格式“中文可见”
<title>菜鸟教程(runoob.com)</title> //:描述文档的标题
</head> //:包含文档元数据结束
<body> //:包含文档可见的页面数据
<h1> //:文档定义的大标题
我的第一个标题</h1>
<p>我的第一个段落。</p> //:文档定义的段落
</body>
</html>
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
标签学习
1：HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
2：HTML 段落
HTML 段落是通过标签 <p> 来定义的。
3：HTML 链接
HTML 链接是通过标签 <a> 来定义的。例如：<a href="https//www.baidu.com">这是一个链接<a>
4：HTML 图像
HTML 图像是通过标签 <img> 来定义的. 例如：<img src="/images/logo.png" width="258" height="39"><img>
5: *.html 文件跟 *.jpg 文件(f盘)在不同目录下：<img src="file:///f:/*.jpg" width="300" height="120"/>
6:*.html 文件跟 *.jpg 图片在相同目录下：<img src="*.jpg" width="300" height="120"/>
7、*.html 文件跟 *.jpg 图片在不同目录下：
a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：<img src="image/*.jpg/"width="300" height="120"/>
b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：<img src="../image/*.jpg/"width="300" height="120"/>
8、如果图片来源于网络，那么写绝对路径：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
HTML 中 href、src 区别
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。
src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。
MacOS 是没有硬盘分区的，所以引用文件直接：
<img src="file:///Users/usrn/location" width="x" height="y"/>
假设文件目录有空格，直接将空格换成：%20
如下: <img src="file:///Users/usrn/Desktop/location/space%20space/Images/IMG.png" width="x" height="y"/>
记录一下 html 相对路径的写法：
- ./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的
- ../：代表文件所在的父级目录
- ../../：代表文件所在的父级目录的父级目录
- /：代表文件所在的根目录
扫一扫
2720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
