HTML 语法规范
标签是由尖括号包围的关键词
HTML 标签
页面中最大的标签 根标签
head 文档头部
必须包含title title 文档的标题 让页面拥有属于自己的网页标题
body 文档的主题
元素包含文档的所有内容，页面内容 基本都是 放到body里面
用VScode创建的第一个页面
<!DOCTYPE html>
<html lang="zh-CN">
<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>vscode创建的第一个页面</title>
</head>
<body>
前端大佬即将诞生
</body>
</html>
<!DOCTYPE>
文档类型声明 使用哪种版本HTML来显示网页 必须写在第一行
1.en定义语言为英语
2.zh-ch定义语言为中文
对于定义语言为xx 同样可以显示另外的语言
字符集
通过<meta>标签的charset属性来规定HTML文档用哪种字符编码
<meta charset="UTF-8"/> 万国码
没有定义 页面就会出现乱码情况!
标签语义
标签语义意思就是标签的含义
根据标签的语义，再合适的地方给一个最为合理的标签可以让页面结构更清晰
标题标签
<h1>-<h6>
<我是一级标题>
作为标题使用，根据重要性递减
标题标签 (重点)
<!DOCTYPE html>
<html lang="zh-CN">
<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>标题标签</title>
</head>
<body>
<h1>标题标签</h1>
<h2>标题一共六级选</h2>
<h3>文字加粗一行选</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
---来源于b站pink老师
</body>
</html>
段落和换行标签
<p>我是段落标签</p>
<br/>换行标签 强制换行 单标签
体育新闻案例
<!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>体育新闻</title>
</head>
<body>
<h1>巅峰登回归！ 哈登轰下38分率队逆转雄鹿</h1>
<h4>哈登全场最终得到38分9篮板10助攻1抢断，其中38分为哈登个人赛季得分新高。</h4>
<P>此役，哈登首发出战39分，投篮26中11，三分球9中5，罚球11罚全中。哈登首节便表现出很强的攻击欲望，他首节便砍下8分，次节砍下7分，末节独得19分，最后时刻先是命中一记超远三分，随后助攻恩比德命中反超三分，帮助76人逆转雄鹿</P>
<h4>哈登28+10杰伦-格林29分 76人大胜火箭</h4>
<p>北京时间2月14日，NBA常规赛继续进行，休斯敦火箭客场挑战费城76人，76人自第二节中段逐渐确立领先优势，末节打出18-3的攻势一举带走比赛，最终以123-104大胜火箭，喜迎三连胜的同时送给对手六连败。</p>
<p>此役，哈登28分10助攻2抢断2封盖，恩比德23分6篮板，马克西26分5篮板6助攻，哈里斯11分6篮板。</p>
<P>火箭方面，杰伦-格林29分，小马丁15分7篮板，小史密斯10分12篮板，申京12分8篮板。</P>
<a href="https://china.nba.cn/sixers/"><img src="../素材/harden2.jpg" title="点击图片可跳转至哈登官网了解更多比赛咨询"height="1080" width="1280"/></a>
<h4>最新的NBA咨询请点击下方链接</h4>
<a href ="https://china.nba.cn/" target="_blank">NBA</a>
<h4>本网站提供图片下载</h4>
<a href="../素材/harden3.zip">哈登TOP1</a>
<a href ="#">更多咨询敬请期待</a>
<P>作者: 阿夏同学<br/>
2023-3-7 </P>
</body>
</html>
HTML 2.常用标签 (重点)
有时候需要为文字设置粗体 斜体和下划线等效果
我是<b>加粗</b>的文字
我是<strong>加粗</strong>的文字 推荐使用 语义更强烈
我是<em>倾斜</em>的文字 推荐使用
我是<i>倾斜</i>的文字
我是<del>删除线</del> 推荐使用
我是<s>删除线</s>
我是<ins>下划线</ins> 推荐使用
2.1盒子标签
<div> 和 <span>
没有语义 就是一个盒子用来装内容
1. <div> 标签用来布局，但现在一行只能放一个<div> 也就是大盒子
2. <span>标签也是用来布局 一行可以放多个<span> 也就是小盒子
2.2图像标签和路径（重点）
<img>标签用于定义HTML页面中的图像
<img src ="图像URL"/>
src 是img标签的必须属性，用于指定图像文件的路径和文件名
一个图像可以有多个属性
<!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>Document</title>
</head>
<body>
<h4>图像标签的使用</h4>
<img src="哆啦A梦.jpg"/>
<h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
<img src="哆啦C梦.jpg" alt="图片用不了的时候我就出现了"/>
<h4>title 提示文本 鼠标放在图像上会出现文字提示：</h4>
<img src="哆啦A梦.jpg" alt="图片用不了的时候我就出现了" title="好喜欢我的宝啊"/>
<h4>width 给图像设定宽度：</h4>
<img src="哆啦A梦.jpg" alt="图片用不了的时候我就出现了" title="好喜欢我的宝啊" width="500"/>
<h4>height 给图像设定高度：</h4>
<img src="哆啦A梦.jpg" alt="图片用不了的时候我就出现了" title="好喜欢我的宝啊" width="500" height ="400"/>
<h4>border 给图像设定边框：</h4>
<img src="哆啦A梦.jpg" alt="图片用不了的时候我就出现了" title="好喜欢我的宝啊" width="500" height ="400" border="15"/>
<h4>用两个.加/引用上级目录的图片：</h4>
<img src="../粉墨.jpg"/>
</body>
</html>
总结1.图像标签可以拥有多个属性，必须写在标签名的后面 2.属性之间不分先后顺序，标签名与属性 属性与属性均以空格分开 3.属性采用取键值对的格式 即 key = "value"的格式，
2.2.1 路径
2.2.2绝对路径
指目录下的绝对位置，直接达到目标位置，也可以是完整的网络地址
2.3 超链接标签(重点)
<a>标签用于定义超链接，作用是从一个页面链接到另一个
1.外部链接 "http://www.jxufe.edu.cn/"
2.内部链接 网站内部页面之间的相互链接<a href = "体育新闻案例.html" target = "_blank">体育新闻</a>
3.空链接 当时没有确定链接目标时 <a href ="#">首页</a>
4.下载链接 如果href里面地址是一个文件或者压缩包，会下载这个文件 <a href ="../素材/粉墨.zip">下载链接</a>
5.网页元素的链接 在网页中各种网页元素 都可以添加超链接
6.锚点链接 点我们点击链接，可以快速定位给到页面中的某个位置
在链接文本的href属性中 设置属性值为#名字的形式如 <a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字 <h3 id="two">第二集介绍</h3>
<!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>超链接标签</title>
</head>
<body>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target = "_blank">腾讯</a><br/>
<strong>target</strong> 打开窗口的方式 默认的值是<strong>_self </strong>
当前窗口打开页面 <strong>_blank </strong>新窗口打开页面<br/>
<a href="http://www.jxufe.edu.cn/" traget = "_self">江西财经大学</a>
<h4>内部链接：网页内部页面之间的相互链接</h4>
<h4>体育新闻</h4>
<a href = "体育新闻案例.html" target = "_blank">体育新闻</a>
<h4>空链接</h4>
<a href ="#">首页</a>
<h4>下载链接 地址链接的是文件 .exe 或者是zip 等压缩包形式</h4>
如果href里面地址是一个文件或者压缩包，会下载这个文件
<a href ="../素材/粉墨.zip">下载链接</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.jxufe.edu.cn/"><img src="../素材/粉墨.jpg"></a>
<a href="http://www.jxufe.edu.cn/"><img src="http://www.jxufe.edu.cn/uploadfile/69/202210/71efa79a55.jpg"></a>
</body>
</html>
2.3注释
<!--这是一个注释--> 快捷键ctrl + /
