语法规范
基本结构标签
开发工具
1） ！+enter : 快速生称html代码框架
2） shift+alt+向下的方向键： 向下复制当前行
3） shift+alt+向上的方向键： 向上复制当前行
4） ctrl+S： 保存
5）shift+alt+F: 格式化代码
6） ctrl+F: 查找和替换
vscode插件使用
DOCTYPE和lang的作用
HTML常用标签
标题标签
换行标签和段落标签
课堂案例
<!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>
<h1>林书豪20+6+6吉布森28分 北京轻取山西夺3连胜</h1>
<h4>2022月1月16日，2021-2022赛季第二阶段第23轮继续较量，北京以115-90击败山西。北京夺3连胜，山西两连败。</h4>
<p>山西4人得分上双，费尔德14分6助，葛昭宝10分5板，闫鹏飞17分12板，西蒙斯24分9板5助。北京4人得分上双，李慕豪15分3板，范子铭16分11板4助，林书豪20分6板6助3断，吉布森28分3板。</p>
<h4>首节一开场，双方就战成6平，9平。</h4>
<p>易边再战。北京一开场内线连续得分，将优势扩大到20分以上。林书豪连续飙中两记外线3分，刘晓宇再添3分，北京将领先优势一度扩大到30分。第三节战罢，北京92-64领先28分。末节，北京开场就打出11-4小高潮，得分率先过百，并扩大优势到35分。最终，北京以115-90击败山西。</p>
<p>作者<br />2022/1/16</p>
</body>
</html>
文本格式化标签
<!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>
我是加粗的文字
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>加删除线</del>的文字
我是<s>加删除线</s>的文字
我是<ins>加下划线</ins>的文字
我是<u>加下划线</u>的文字
</body>
</html>div和span标签
<body>
<div>我是一个div盒子</div>
<div>我是一个div盒子</div>
<span>我是span1</span>
<span>我是span2 </span>
</body>
图像标签
<body>
<h4>图像标签的使用</h4>
<img src="123.jpg" />
</body>
<body>
<h4>图像标签的使用</h4>
<img src="123.jpg" />
<h4>我是替换文本的使用：</h4>
<img src="1231.jpg" alt="这是twy的照片"/>
</body>
<body>
<h4>图像标签的使用</h4>
<img src="123.jpg" />
<h4>我是替换文本的使用：</h4>
<img src="1231.jpg" alt="这是twy的照片"/>
<h4>提示文本 鼠标放到图像上会有文字提示</h4>
<img src="123.jpg" title="这是twy的照片"/>
<h4>width 给宽度修改</h4>
<img src="123.jpg" alt="这是twy的照片" width="500"/>
<h4>heigth 修改高度</h4>
<img src="123.jpg" alt="这是twy的照片" height="500"/>
<h4>border 加边框</h4>
<img src="123.jpg" alt="这是twy的照片" height="500" border="15"/>
</body>src是必须的
路径
<body>
<img src="D:\桌面\HTML第一天\案例/123.jpg" />
<img src="https://mp-blog.csdn.net/mp_blog/img/quanjian.e904bca6.png" />
</body>超链接标签
<body>
<h4>外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
target 链接打开方式 默认是 _self在当前页面打开 _blank在新的窗口打开
<h4>内部链接 打开网站内部页面之间的相互链接</h4>
<a href="06-课堂案例.html" target="_blank">内部链接</a>
<h4>空链接：#</h4>
<a href="#">空链接</a>
<h4>下载链接</h4>
<a href="123.zip">下载链接</a>
<h4>网页元素的链接</h4>
<a href="http://www.baidu.com" target="_blank"><img src="123.jpg" /></a>
</body>锚点链接
html的注释和特殊字符
注释
综合案例
圣诞树