前端骨架HTML
前端骨架HTML
HTML5
如果将网页比作机器人，那么HTML就是骨架，CSS就是是表现与展示效果，JavaScript就是功能与行为
简单介绍
超文本标记语言HTML(HyperText Markup Language)
一、配置HTML编译器
1. 安装vscode
下面是官网：
vscode官网
2. 安装vscode插件
第一个插件的功能是实时预览页面效果
只需要右键
第二个插件的功能是自动补全关闭标签，第三个插件的功能是当你修改一个开始标签的时候，结束标签也会跟着被修改，反之，同理
3. 写第一个页面
<!DOCTYPE html> <!--html5文档声明-->
<!-- 声明本网站使用中文简体 -->
<html lang="zh-CN">
<head>
<!-- 网站使用utf-8编码 -->
<meta charset="utf-8">
<!-- 网站的标题 -->
<title>HTML 学习</title>
</head>
<body> <!--body标签是网页的可见部分-->
<!-- 一级标题 -->
<h1>这是一个标题</h1>
<!-- 块级元素，段落，块级元素会空出一个空行 -->
<p>这是一个段落。</p>
正文: Hello World 世界！
</body>
</html>
二、HTML组成
1. HTML元素
HTML元素以开始标签起始HTML元素以结束标签终止- 元素的内容是开始标签和结束标签之间的内容
- 某些
HTML元素具有空内容 - 空元素在开始标签中进行关闭
- 大多数
HTML元素可以拥有属性
举例：
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<br> <!-- <br>标签是空元素 -->
表格中完整的一行就是一个元素
| 开始标签 | 元素内容 | 结束标曲 |
|---|---|---|
| <h1> | 这是一个标题 | </h1> |
| <p> | 这是一个段落 | </p> |
| <br> | None | None |
2. HTML属性
HTML元素可以设置属性- HTML 元素可以设置 属性
- 属性可以在元素中添加 附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现，比如：
name="value" - 属性值建议可以使用
''或""括起来，建议使用双引号
<a>标签的href属性
href 是英文 hypertext reference（超文本引用）的简写
<a> 标签用于定义HTML 链接。 链接的地址在 href 属性中指定：
案例
<a href="https://www.zhangshuhao.work">ITGuoKe的个人博客</a>
<img>标签的属性
<img> 标签用于在HTML页面中嵌入图像。
案例
<img src="https://xxx.com/img/xxx.jpg" alt="xxx" title="xx" width="304" height="228">
实例
src属性
src指定需要显示的图片的路径：
- 绝对路径：链接到另一个网站的一个图像。
- 相对路径：链接到网站中托管的图像。在这里，
URL不包括域名。如果URL开头没有斜杠，它将相对于当前页面。 比如:src="lol.jpg". 如果URL以斜杠开头，它将是相对于当前域名的。 比如:src="/lol.jpg".
注意：
如果你的图片地址不经常变更，建议使用绝对路径，因为你可以在多个网站中使用同一个图片，如果图片地址经常变更则建议使用相对路径，因为图片任然可以加载
alt属性
- 建议值为描述图片的文字
- 当图片无法加载时，则显示该文字
title属性
- 当鼠标悬停在图片上时则显示该值
width和height属性
- 控制图片大小的属性
3. HTML标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
4. HTML段落
<p>这是一个段落</p>
5. HTML水平线
<hr>
6. HTML换行符
<br>
7. pre标签
<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
登鹳雀楼
王之涣 〔唐代〕
白日依山尽，黄河入海流。
欲穷千里目，更上一层楼。
</pre>
8. HTML样式
style属性用于改变HTML元素的样式
语法：
<tagname style="property:value;">
property是CSS属性，value是CSS属性值。
案例一：设置字体颜色
预览：
我是绿色
<p style="color:#458574;">我是绿色</p>
案例二：设计页面背景颜色
预览：
<body style="background-color:powderblue;">
<h1>这是一个一级标题</h1>
<p>这是一个段落。</p>
<pre>
登鹳雀楼
王之涣 〔唐代〕
白日依山尽，黄河入海流。
欲穷千里目，更上一层楼。
</pre>
</body>
案例三：设置文本对其方式
居中
<h1 style="text-align: center;">标题一</h1>
9. HTML文本格式化
<b>标签
- 普通加粗
预览
加粗
<b>加粗</b>
<strong>标签
- 强调性的文本
- 所有要加粗
预览
重要文本
<strong>重要文本</strong>
<i>标签
i是italic首字母（斜体）<i>标签通常用来表示一个技术术语、另一种语言的短语、思想、船名等。
预览
斜体
<i>斜体</i>
em标签
- emphasize单词的缩写
<em>标签定义强调的文本。里面的内容通常以斜体显示。
提示： 屏幕阅读器会用重音发音
<em>中的单词，使用动词重音。
预览
强调
5. small标签
案例
小字体正常字体
<small>小字体</small>正常字体
mark标签
案例
标记
<mark style="background-color: #00ff00;">标记</mark>
del标签
案例
删除文本
<del>删除文本</del>
ins标签
insert缩写ins标签定义已插入文档的文本。浏览器通常为插入的文本加下划线。
案例
我喜欢JavaPython语言。
我喜欢<del>Java</del><ins>Python</ins>语言。
9 sub下标标签
案例
\(H_2O\)
H<sub>2</sub>O
10 sup上标标签
案例
\(20^2\)
20<sup>2</sup>
