1.文档结构
2.常用标签1
3.常用标签2
4.常用标签联系
5.图片与超链接
6.VSCode常用快捷键
1.文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a1文档结构</title>
</head>
<body>
1.文件的命名：尽量避免中文空格
<br>
2.<!DOCTYPE html>代表h5文档声明
<br>
3.html叫做根元素
<br>
4.head代表头部，可以放置页面关键字、描述、作者信息等
<br>
<meta charset="UTF-8">页面编码方式，utf8万国码
<br>
5.body代表主体
<br>
6.标签嵌套关系：
<br>
html是head的父元素
<br>
head与body是兄弟元素
<br>
7.标签形式：
<br>
封闭类型的标签，成对出现，例如<head></head>
<br>
非封闭类标签（空标签），<meta>
<br>
8.元素的属性：
提供html标签更多的信息
<div class="" id="" index="">
多个属性空格隔开，排名不分先后
</div>
<img src="" alt="" title="" >
</body>
</html>
2.常用标签1
<!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>常用标签1</title>
</head>
<body>
<!-- 块级元素：
标题、段落、容器、列表、水平分割线hr -->
<!--标题-->
<h1>一级标题，只能在页面出现一次</h1>
<h3>三级标题</h3>
<h6>六级标题</h6>
<hr>
<!--段落-->
<p>
杨洁篪指出，中美能否处理好彼此关系，事关两国和两国人民根本利益，
攸关世界前途命运。中美合作，两国和世界都会受益。
</p><p>
中美对抗，两国和世界都会遭受严重损害。
美方应深刻认识两国关系互利共赢的本质，正确认识中方内外政策和战略意图。
</p>
<hr>
<!--容器-->
<div>这是一个板块</div>
<div>这是一个板块</div>
<div>这是一个板块</div>
<hr>
<!--列表：有序列表，无序列表，自定义列表-->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ul type="square">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<dl>
<dt>名词</dt>
<dd>相关解释</dd>
</dl>
</body>
</html>
3.常用标签2
<!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>常用标签2</title>
</head>
<body>
<!--行内元素、内联元素：
加粗 strong或者b 倾斜 em或者i 下划线 u或者ins
删除线 del或者strike或者s 上标 sup 下标 sub
span （经常用到）一般用于一段文本中更改一小部分文本样式
换行 br
文本框 <input type="text">
按钮
-->
<p>
dsonviue skdovnbd osidnvd voisjdnboweinsjd vindiondv <strong>jdsijd bjvbd</strong> ,sjdinreoiwundeivowe sndiovn b idvo.
asdgsefe <em>world</em> to djnvosiba sidnon.
<u>sjdioubvbe</u> fviosbnsjsi jsdonv inosdin <del>serious</del> sjfdiv.
</p>
<p>
勾股定理 a <sup>2</sup>
<br>
H <sub>2</sub> SO<sub>4</sub>
</p>
<p>
杨洁篪指出，中美能否处理好彼此关系，
事关两国和
<span style="color: red; font-size: 40px; font-weight: bold">
两国人民根本利益</span> ，
攸关世界前途命运。
中美合作，两国和 <em>世界</em> 都会受益。
<u>中美</u> 对抗，两国和世界都会遭受 <del>严重</del> 损害。
</p>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<input type="text">
<button>上传</button>
<!--转义字符
< <
> >
空格
版权 ©
注册 ®；
-->
< div >©®
</body>
</html>
4.常用标签联系
<!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>
<!--导航-->
<div>
<ul>
<li>首页</li>
<li>服务</li>
<li>托管</li>
<li>作品</li>
<li>实力</li>
<li>动态</li>
<li>关于</li>
<li>联络</li>
</ul>
</div>
图片
<h3>高端网络建设</h3>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
</div>
</body>
</html>
5.图片与超链接
<!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>
<!--img
src 路径
alt 图像没有正常显示时，浏览器将显示替代文本
title 鼠标移到图片时会显示文本
-->
<img src="F:\coursepg\SSGC7201_civic_data\m1.jpg" alt="" title="小菜儿">
<img src="https://pics7.baidu.com/feed/b7fd5266d01609248c5edc10e6a60ff3e7cd34ef.png?token=aa2b886b0cab423b403e519d2647d0ac" alt="">
<img src="./m1.JPG" alt="">
<img src="./images/m1.JPG" alt="">
<img src="./m2.jpg" alt="无法显示">
<!--../表示返回上一级-->
<!--超链接
href 引入html文件路径
target 当前打开(default)还是新的打开_blank -->
<a href="https://www.bilibili.com" target="_blank">点我跳转到bilibili</a>
</body>
</html>
6.VSCode常用快捷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
复制 ctrl+c
粘贴 ctrl+v
剪切 ctrl+x
保存 ctrl+s
回退 ctrl+z
网页刷新ctrl+r
输入三个p标签 p*3+tab或回车
<p></p>
<p></p>
<p></p>
<div></div>
<div></div>
<div></div>
<div></div>
ul>li*4+tab
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
h$*6+回车
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
alt加左键 多个光标
<h3>多个光标左键</h3>
<h4>多个光标左键</h4>
<h5>多个光标左键</h5>
<h6>多个光标左键</h6>
替换ctrl+h
自动整理 shift+alt+f
</body>
</html>
