文章目录
HTML开发工具与标签
1开发工具的使用
1.1VSCode使用
需要安装的插件（左侧列表最后一个 extensiions 扩展，快捷键ctrl+shift+X）
- Chinese (Simplified) Language Pack for VS Code 中文(简体)语言包
- Open in Browser 右击选择浏览器打开html文件
- Auto Rename Tag 自动重命名配对的HTML/ XML标签
- CSS Peek 追踪至样式
1.2VSCode工具生成骨架新增代码
<!DOCTYPE html> <!--文档类型声明标签不是HTML标签,作用就是告诉浏览器使用哪种HTML版本来显示网页。-->
<html lang="en"> <!--用来定义当前文档显示的语言,en为英语 zh-CN为中文（浏览器可以识别并提示是否翻译 ）-->
<head>
<meta charset="UTF-8">
<!--通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。一定要有不然会有乱码
charset常用的值有: GB2312、BIG5、GBK和UTF-8 ,其中UTF-8也被称为万国码,基本包含了全世界所
有国家需要用到的字符。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
hello,world!
</body>
</html>
2常用标签
2.1注释与特殊字符
<!–注释语句–> 快捷键ctrl+/
特殊字符：
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | | |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 商标 | ® |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello world <br>
Hello world
</body>
</html>
2.2标题标签
标签语义:作为标题使用,并且依据重要性递减。
一个标题独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</body>
</html>
2.3段落标签和换行标签
<p></p>段落标签
标签语义:可以把HTML文档分割为若干段落。
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。
<br>换行
标签语义:强制换行。
1.是个单标签。
2.标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
</head>
<body>
<p>1. 请你自我介绍一下回答提示：<br>一般人回答这个问题过于平常，只说姓名、年龄、爱好、工作经验 ，这些在简历上都有，其实，企业最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研究的知识领域、个性中最积极的部分、做过的最成功的事，主要的成就等，这些都可以和学习无关，也可以和学习有关，但要突出积极的个性和做事的能力，说得合情合理企业才会相信。企业很重视一个人的礼貌，求职者要尊重考官，在回答每个问题之后都说一句“谢谢”。企业喜欢有礼貌的求职者。</p>
<p>2. 你觉得你个性上最大的优点是什么？回答提示：沉着冷静、条理清楚、立场坚定、顽强向上。乐于助人和关心他人、适应能力和幽默感、乐观和友爱。我在河南厚溥IT学院经过一到两年的培训及项目实战，加上实习工作，使我适合这份工作。我相信我能成功。</p>
</body>
</html>
2.4文本格式化标签
为文字设置粗体、斜体或下划线等效果,
标签语义:突出重要性,比普通文字更重要.
<strong></strong>或者<b></b> 加粗
<em></em>或者<i></i> 倾斜
<del><del>或者<s></s> 删除线
<ins><ins>或者<u></u> 下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
</head>
<body>
<p><strong>加粗</strong><p>
<p><b>加粗</b></p>
<em>倾斜</em>
<i>倾斜</i><br>
<del>删除线</del>
<s>删除线</s><br>
<ins>下划线</ins><u>下划线</u>
<!--可以互相嵌套使用如-->
<strong><em>加粗并倾斜</em></strong>
</body>
</html>
2.5盒子标签
<div>和<span>是没有语义的，它们就是一一个盒子,用来装内容的。
- <div>标签用来布局,但是现在一行只能放一个<div>. 大盒子
- <span>标签用来布局, - -行上可以多个<span>.小盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是一个盒子</div>你不能挨着我
<div>盒子</div>
<!-- div独占一行 -->
<span>我是一个小盒子但我喜欢有人挨着</span>
<span>1</span>
<span>2</span>
</body>
</html>
2.6图像标签和路径
在HTML标签中，<img>标签用于定义HTML页面中的图像。
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="img.jpg"><br>
<img src="0.jpg" alt="请刷新"><br>
<!-- alt是替换文本，当图像不能显示的时候出现的文字 -->
<img src="img.jpg" title="这是一张图片">
<!-- title是提示文本。鼠标放到图像上会显示文字 -->
<img src="img.jpg" alt="请刷新" title="这是一张图片" width="200px">
<!-- width图片宽度，height图片高度
改变任意一个，另一个自动等比例放大或缩小 -->
<img src="img.jpg" alt="请刷新" title="这是一张图片" width="200px" border="15px">
<!-- border边框 -->
<!--注意
图像标签可以拥有多个属性,必须写在标签名的后面。
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即key= "value" 的格式,属性=“属性值”-->
<img src="img.jpg"><br>
<!-- 同一级路径
图片与html文档在同一文件夹内-->
<img src="images/img.jpg"><br>
<!-- 下一级路径
图片在html文档目录的下一级 -->
<img src="../img.jpg"><br>
<!-- 上一级路径
图片在html文档目录的上一级 -->
<!-- 相对路径（/）:以引用文件所在位置为参考基础,而建立出的目录路径。
这里简单来说,图片相对于HTML页面的位置 -->
<img src="D:\web\img\logo.gif"><br>
<img src="http:/.../images/logo.gif"><br>
<!-- 绝对路径（\）:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如，"D:\web\img\logo.gif" 或完整的网络地址（/）"http:/.../images/logo.gif"
-->
</body>
</html>
2.7超链接标签
在HTML标签中, 标签用于定义超链接,作用是从一一个页面链接到另一个页面。
链接分类:
1.外部链接,例如< a href=“http:// www.baidu.com”>百度</a>.
2.内部链接:网站内部页面之间的相互链接 直接链接内部页面名称即可,例如< a href= “index.html”>首页</a>.
3.空链接:如果当时没有确定链接目标时, <a href="#">首页</a>.
4.下载链接: 如果href里面地址是一个文件或者压缩包,会下载这个文件.
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--href 地址链接
target 窗口的弹出方式 打开窗口的方式默认是_self -->
<p>1.外部链接</p>
<a href="http://www.baidu.com" target="_self">baidu</a><br>
<!-- 当前窗口打开 -->
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!-- 启动另外一个窗口 -->
<p>2.内部链接</p>
<a href="demo.html" target="_blank">简介</a>
<!-- 网站内部页面之间的相互链接 直接链接内部页面名称即可 -->
<p>3.空连接</p>
<a href="#" >简介</a>
<!-- 没有确定链接目标 -->
<p>4.下载链接</p>
<a href="img.zip" >下载文件</a>
<!-- href里面地址是一个文件或者压缩包,会下载这个文件 -->
<p>5.网页元素连接</p>
<a href="http://www.baidu.com" ><img src="img.zip" alt=""></a>
<!-- 点击图片进入连接地址 -->
<p>6.锚点链接</p>
<a href="#mao">锚点链接</a><br><br><br><br><br><br><br>
<p id="mao">你好</p>
<!-- 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置. -->
</body>
</html>
2.8水平线标签
<hr>
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
