HTML:
HTML简介:
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
什么是HTML?
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言,而是一种标记语言
HTML 标签
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML网页结构
<!DOCTYPE>声明
用来告知 Web 浏览器页面使用了哪种 HTML 版本。
*目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8
HTML基础:
HTML标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
注释: 浏览器会自动地在标题的前后添加空行。
HTML水平线标签<hr>
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
HTML段落
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
**注意:**浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)
HMTL链接
HTML 链接是通过标签 <a> 来定义的。
<a href="https://www.baidu.com/">这是一个链接</a>
<a>超链接标签语法
格式:
<a herf="" target=""></a>
1、空链接 herf可以用空链接 用#代替
2、下载链接 如果herf里是一个zip或文件则默认下载
3、各种元素都可以做为超链接
4、锚点链接 跳到本页中的某处的链接
-
herf属性里为’#名字’的形式<a herf="#two">
-
然后在目标标签里<h3 id=“two”>
5、targrt 链接页面的打开方式 :_self为默认值在当前页打开 _blank为在新窗口打开
绝对路径和相对路径
相对路径:相对于html文件的路径
绝对路径:从盘符开始的路径
相对路径的写法
- ./:代表文件所在的目录(可以省略不写)如果写成image/background就相当于是在html文件下找image文件夹,当然是找不到的
- …/:代表文件所在的父级目录
- …/…/:代表文件所在的父级目录的父级目录
- /:代表文件所在的根目录
绝对路径
- 如果找不到的话需要file协议(file:文件路径)
注:相对路径使用的是/ 绝对路径使用的是\
html链接中的target属性
<a href="http://news.baidu.com/" target="_blank">新闻</a>
将 target 属性设置为 "_blank"时, 链接将在新窗口打开。
若无target="_blank",则在当前页面打开。
html链接中的id属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。
实例:
<a id="tips">有用的提示部分</a> 在HTML文档中插入ID
<a href="#tips">访问有用的提示部分</a> 在HTML文档中创建一个链接到"有用的提示部分(id="tips")"
<a href="http://www.baidu.com/">访问有用的提示部分</a> 从另一个页面创建一个链接到"有用的提示部分(id="tips")"
注意事项
HTML图像
HTML 图像是通过标签 <img> 来定义的。
<img src=“图像url”> 同一目录下可以直接用图片名作为url
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
- 图像的名称和尺寸是以属性的形式提供的。
图像标签的参数 (参数之间**用空格分开**):
1、alt:如果图片不能显示用来替换的文字
2、height/width:图片高度/宽度
3、title:鼠标放到图片上显示的文字
4、border:边框宽度 【css设定的情况较多】
文本格式化标签
1、加粗:<strong>加粗标签<\strong>
2、斜体:<em>倾斜标签<\em>
3、删除线:<del>删除标签<\del>
4、下划线:<ins>下划标签<\ins>
HTML元素:
HTML元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
- <p> 元素定义了 HTML 文档中的一个段落。
- <body> 元素定义了 HTML 文档的主体。
- <html> 元素定义了整个 HTML 文档。
HTML空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
一些注意事项:
1、切记所有标签都需要闭合,不管是单体标签还是成对标签。
2、标签写法要用小写字母(有些版本对大小写可认为相同,而xhtml中强制使用小写)。
HTML属性
1、HTML 元素可以设置属性。
2、属性可以在元素中添加附加信息。
3、属性一般描述于开始标签。
4、属性总是以名称/值对的形式出现,比如:name=“value”。
HTML头部
HTML <base>元素
<base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
实例:
<head>
<base href="http://www.baidu.com/" target="_blank">
</head>
HTML <link>元素
<link>标签定义了文档与外部资源之间的关系,通常用于链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML<style>元素
<style>标签定义 HTML 文档的样式信息。