HTML简介

介绍

超文本标记语言，用来创建网页的框架，相当于人体的骨架。

如果使用的是 vscode，按下！可以快速生成 html 的结构。

快捷方式

之后生成下图所示：

生成后的结构

一些插件

如果使用 vscode 的话一些插件必不可少。

如 live server，能够实时预览编写的代码。

组成拆分

!DOCTYPE 从英语来看就知道是声明类的，doc 就是文档，type 不就是类型，也就是文档类型，后面跟着个 html，说明是声明了个 html 文档。

html 包裹起来的就是整个 html 文件，html 元素也就 html 页面的根元素。

head 包裹的是文档的 meta 数据，也就是元数据，Facebook all in 元宇宙后不是改名为 meta 么，这个 meta 就是元的意思。里面的内容就是一些配置内容，编码格式一类的。

​ title 包裹的就是标签名，就是浏览器页面最上面的内容。

​

body 包裹的就是咱们真正费心要编写的，主体部分。也就是可见的页面内容。

元素与标签

html 中元素和标签是一个意思，值得就是尖括号包围的关键词。

基础元素

这里我只介绍一些十分基础的标签以及我觉得挺有意思的标签。

写标签的时候都用小写。

标题

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

标题的显示

段落

<p>这是一个段落</p>

分行

<br>

进行分行的时候用的，能把一段话分成根据 br 的插入分成许多行。

链接

<a href="https://www.destinyguide.top">这是一个链接</a>

图片

<img src="https://tree-1327913400.cos.apnanjing.myqcloud.com/imgs/202407132155733.webp?imageSlim" alt="这是一个图片">

src 放的是图片的来源，我这里用的是网络资源，也可以使用本地资源，推荐使用相对路径也就是./的形式。

alt 的话就是 src 中没内容，或者是没加载出来资源的时候，就使用 alt 里面的文字对用户进行解释这是什么。

无序列表

<ul>
	<li>这是一个无序列表</li>
	<li>这是一个无序列表</li>
	<li>这是一个无序列表</li>
</ul>

最前面有小圆点。

有序列表

<ol>
	<li>这是一个有序列表</li>
	<li>这是一个有序列表</li>
	<li>这是一个有序列表</li>
</ol>

前面有 1，2，3。会根据代码的前后顺序添加数字进行排列。

自定义列表

<dl>
    <dt>这是一个自定义列表</dt>
    <dd>这是一个自定义列表</dd>
    <dd>这是一个自定义列表</dd>
</dl>

可以没有 dt，dt 比 dd 要靠左一些。

自定义就是前面啥也没有了。

表格

<table>
	<tr>
		<th>表头</th>
		<th>表头</th>
	</tr>
	<tr>
		<td>表格数据</td>
		<td>表格数据</td>
	</tr>
	<tr>
		<td>表格数据</td>
		<td>表格数据</td>
	</tr>
</table>

tr 是 table row，表示一行

td 是 table data，表示一格

th 是 table header，表示表头的单元格，相比 td 字体有所加粗

表单

<form action="">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="提交">
</form>

action 属性定义了表单数据提交的目标 url。

lable 元素为表单添加了标签，提高了可访问性。

input 可以根据 type 的内容创建文本输入框，密码框等输入框的类型。

按钮

<button>这是一个按钮</button>

仅仅是一个按钮。

一些文字格式

<b>这是一个粗体</b>
<hr>
<strong>这是一个加粗</strong>
<hr>    
<i>这是一个斜体</i>
<hr>  
<em>这是一个强调</em>
<hr>  
<mark>这是一个标记</mark>
<hr>
<small>这是一个小字体</small>
<hr>  
<del>这是一个删除线</del>
<hr>  
<ins>这是一个下划线</ins>
<hr>  
1<sub>这是一个下标</sub>
<hr>  
1<sup>这是一个上标</sup>
<hr>

效果如上所示，与上面的代码一一对应

缩写

<abbr title="123">WHO</abbr>

说是缩写，其实就是展示标签内的内容，WHO，当悬停在内容上时，显示的是 title 里面的内容, 123。

音频

<audio src="" controls></audio> 

controls 如果有这个属性，浏览器会给你提供一个控制器，让你控制你的音频的播放之类的功能。

视频

<video src="" controls></video>

controls 如果有这个属性，浏览器会给你提供一个控制器，让你控制你的视频的播放之类的功能。

内联框架

<iframe src="https://www.destinyguide.top"></iframe>

显示 src 内部网页的内容。

网页中显示网页

元素的分类

块级元素

div 就是块级元素。独占一行，或者说一整块。

可以设置宽度，高度以及边距等样式属性。

行内元素（内联元素）

span 就是内联元素。可以很多个内联元素并存。

宽度默认由其内容决定。

div 和 span 是最常用的元素。

笔者的话

html 暂时就写到这里了，其实没啥内容，当然也是我自己学的比较少，认知面较狭窄，所以只能写这么多。以后如果有更全面的认知，我会加以增改与补充。