<!DOCTYPE>标签
<!DOCTYPE>是一个文档类型声明标签,告诉浏览器使用哪个HTML版本来显示网页
<!DOCTYPE html>
上面代码意思为,使用HTML5来显示网页
此标签声明位于文档最前面,<HTML>标签之前
lang语言
lang为html标签中的一个属性,用来定义当前文档的语言
<html lang="en">
<html lang="zh-CN">
en定义语言为英语
zh-CN定义语言为中文
对于文档显示来说定义语言都能显示中英文
charest字符集
在head标签内,可以通过<meta>标签中的charset属性来规定HTML文档使用的字符编码
<meta charset="UTF-8">
常用的有GB2312,BIG5,GBK,UTF-8,其中UTF-8称为万国码,基本包含了所有字符
标题标签
<h1>-<h6> 双标签,一级标签最大,六级标题最小,每个标题独占一行,自动加粗
<body>
<h1>我是一个标题</h1>
<h2>我是一个标题</h2>
<h3>我是一个标题</h3>
<h4>我是一个标题</h4>
<h5>我是一个标题</h5>
<h6>我是一个标题</h6>
</body>
段落标签
<p></p>,段落标签,单词paragraph(段落)
将HTML文档分割为若干段落,段落和段落之间有空行
<p>社会秩序混乱失控,特别是城里发生严重骚乱时,在大街上行走可能成为被攻击的目标,
交通也可能随时被阻,仓促外出可能遭遇不可控风险。最好待在家里,且远离窗户和玻璃,
以免发生意外伤害。如出现危险情况,一定要保持冷静,一切以确保人身安全为首要并第一
时间联系当地强力部门。</p>
<p>与当地华侨华人协会、留学生会、中国商会及熟人朋友保持联系,互通信息,互相帮助。
如遇断网、断电、断手机信号,不要慌张,待通讯方式恢复后第一时间关注使馆通过各种方式
,特别是微信公众号和官网发布的信息。</p>
换行标签
<br />,换行标签,单词break
<p>社会秩序混乱失控,特别是城里发生严重骚乱时,<br />在大街上行走可能成
为被攻击的目标,交通也可能随时被阻,仓促外出可能遭遇不可控风险。最好待在
家里,且远离窗户和玻璃,以免发生意外伤害。如出现危险情况,一定要保持冷静
,一切以确保人身安全为首要并第一时间联系当地强力部门。</p>
练习案例(新闻)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CF新闻</title>
</head>
<body>
<h1>CF国际联赛AG 2:0取胜</h1>
<h4>青菜1血五杀残局</h4>
<p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
<p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
<h4>白鲨惨败错失亚军</h4>
<p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
<p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
<p>作者:SHY<br>2022年2月24日</p>
</body>
</html>
文本格式化标签
我是<strong>加粗</strong>的文字<br>
我是<b>加粗</b>的文字<br>
我是<em>倾斜</em>的文字<br>
我是<i>倾斜</i>的文字<br>
我是<del>删除线</del>文字<br>
我是<s>删除线</s>文字<br>
我是<ins>下滑线</ins>文字<br>
我是<u>下滑线</u>文字<br>
我是<strong><em><del><ins>加粗倾斜删除线下划线</ins></del></em></strong>文字<br>
div与span标签
<div></div>与<span></span>没有语义,他们是一个盒子,用来装内容
div是division缩写,表示分割分区,span表示跨度跨距
div标签用来布局,一行只能放一个,大盒子
span标签用来布局,一行能放很多个,小盒子
<div>我是一个大盒子,独占一行</div>
<span>我是一个小盒子,可以放很多</span>
<span>我是一个小盒子,可以放很多</span>
<span>我是一个小盒子,可以放很多</span>
<div>
<span>我们可以嵌套</span>
<span>我们可以嵌套</span>
</div>
图像标签
<img src"图像url" />,用于定义页面中的图像,img是image的缩写,意为图像
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
<h4>大家好,嘿嘿嘿</h4>
<img src="图片.png" />
图像标签的其他属性
<img src="图片.png" width="500" height="500" border="15" alt="这是一条鱼" title="真可爱"/>
一般只修改宽度和高度其中一个,另一个会自动等比例缩放
路径
根目录:打开目录文件夹的第一层就是根目录
相对路径:以引用文件所在的位置做参考,而建立的目录路径
绝对路径:目录下的绝对路径,直接到达目标位置,通常是从盘符开始的路径
超链接标签
<a href="跳转目标" target="目标窗口弹出的方式">文本或图像</a>
单词anchor,意为锚
<a href="http://www.qq.com" target="_blank">腾讯</a>
链接分类:
外部链接:
<a href="http://www.qq.com" target="_blank">腾讯</a>
内部链接:本地的相互链接,可以直接用内部网页名称
<a href="hello.html" target="_blank">本地</a>
空连接:如果没有确定目标链接可以使用空链接
<a href="#" target="_blank">空连接</a>
下载链接:如果href地址是一个文件.exe或者压缩包等,那么会下载这个地址
<a href="1.zip" target="_blank">下载</a>
网页元素链接:在网页上的元素,文本图片视频音频表格都可以添加超链接
<a href="http://www.qq.com" target="_blank">
<img src="../第三天2022.2.24/图片.png" /></a>
锚点链接:点击链接可以快速定位到页面中某个位置
在href属性中,设置属性值为#name的形式,如<a href="#two">第二季</a>
找到对应的目录标签,添加一个id属性=刚才的name,如<h3 id="two">第二季介绍</h3>
name只能为英文
<a href="#end">页面底部</a>
<h3 id="end">这是页面的最底部</h3>
还能整花活!
<a href="#end" id="top">页面底部</a>
<a href="#top"><h3 id="end">这是页面的最底部</h3></a>