html基础及基本标签详解
html基础
前端构成：HTML+CSS+JS
HTML：页面结构（不区分大小写）
CSS：审美角度，美化页面
JS：从交互的角度，提升用户体验
注：一下涉及到的所有快捷键均是在应用Visual Studio Code的前提下。
HTML文件格式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
lang属性表示搜索引擎，en英文，zh中文。
"meta"表示元数据，charset属性：字符集编码方式。
字符集与编码
字符指文字或符号，如123、!、abc…
字符集：字符的集合。
编码：将字符和二进制码对应起来。
| ASCII | 对数字、英文字母、符号进行了编码 |
|---|---|
| GB2312 | 简体中文 |
| Unicode | 所有语言 |
| UTF-8 | 所有语言、占用空间更小 |
一般常用’UTF-8’的编码方式，注意源文件保存时的编码要和源文件声明保持一致，否则就会出现编码问题。
HTML基本标签
标题h1~h6
一个文件中最好只有一个h1，其中每一级标题的字体也是可以修改的（这部分主要在后面的CSS里介绍）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
效果图如下
段落p
注意段落内部的文字是忽略连续空格的，也不会显示换行（手动输入多个空格和换行只会显示成一个空格）
<!-- 快捷键p{这是一个段落} -->
<p>这是一个段落</p>
<!-- 快捷键p{这个段落忽略 空格} -->
<p>这个段落忽略 空格</p>
<!-- 快捷键p{这个段落忽略
空行} -->
<p>这个段落忽略
空行</p>
效果图如下：
段内换行br
运用段内换行标签’br’可以解决段落标签无法换行问题。
注意br标签是单独出现的，以" /"直接结束
<p>这是一个段落<br />这是另一个分段</p>
效果图如下
空格字符  ;
注意，此字符是一个特殊字符应采用全小写的形式。
<p>这是一个段落有 三个空格</p>
效果图如下
预留格式pre
在此标签内编辑的文本，文本内的空格和换行符会被保留。
<!-- 快捷键pre>p -->
<pre>
<p>这是一个段落有 三个空格一个
换行</p>
</pre>
效果图
行内组合span
可以将一段中的任意一行或一行中的任何几个词组放在"span"标签内另外修改它的文本格式（这一部分会在CSS中介绍）
<p>这是一个<span>这是其中一行</span>段落</p>
CSS部分的代码
<style type="text/css">
span{
color: blue;
font-weight: bold;
}
</style>
效果图：
水平线hr
可用于在其中两个段落之间加入一条水平线，注意hr标签同样也是单独出现的，以" /"结束即可（不要忘记“/”之前的空格！！）
<p>正文段落</p>
<hr />
<p>正文段落</p>
效果图
超链接a
格式
<a href="网址">文字或图片</a>
示例
<!-- 快捷键a[href="news.html"]{新闻1} -->
<a href="news.html">新闻1</a>
<br />
<!-- 快捷键a[href="http://www.baidu.com"]{新闻2} -->
<a href="http://www.baidu.com">新闻2</a>
<br />
<!-- 快捷键a[href="#"]{新闻3} -->
<a href="#">新闻3</a>
其中“新闻1”为链接到本站点的其他网页的形式，“新闻2”为链接到其他站点网页的形式，“新闻3”为虚拟超链接，简单来说就是“新闻3”字体仍为可点击的链接形式，但点击不会跳转网页，需要后期添加。
效果图
图像标签img
插入图片时首先要先了解常见的图像格式，以及什么情况下要用什么样的图像格式，常见的有jpg，gif，png等形式。三者之间的区别省略，可自行百度。
图片插入格式
<img src="logo.jpg" alt="如果图片不显示你将看到这句话" />
src属性：路径+文件名
alt属性：主要用于图片显示不出来的情况下显示文件的信息。
例如
<img src="d:/img/images.jpg" alt="图片" />
由于图片格式过大，就不加效果图了，图片的格式调整依旧在CSS中。
相对路径和绝对路径
绝对路径：以根目录为基准的路径
相对路径：以该文档所在位置为基准
例如
<!-- 相对路径 -->
<img src="d:/img/images.jpg" alt="图片" />
<!-- 绝对路径 -->
<img src="../img/images.jpg" alt="图片" />
几种路径情况
情况1：在同一个文件夹下。
此种情况采用相对路径方式，代码如下：
<img src="images.jpg" alt="图片" />
情况2：
图片所在的文件夹与网页同级
此种情况同样采用相对路径，代码如下：
<img src="images/images.jpg" alt="图片" />
情况3：
页面所在的文件夹与图片处于同一级
此时同样采用相对路径
代码示例如下
<img src="../images.jpg" alt="图片" />
“…/”表示返回页面的上一级
情况4：
图片所在的文件夹与页面所在的文件夹处于同一级
此时同样采用相对路径方式，代码如下：
<img src="../images/images.jpg" alt="图片" />
区域div
用于将页面分割成不同大小的代码块，方便操作。其中的“align”属性可用来表示对齐方式。
代码示例如下：
<!-- 快捷键：div>h1{这是一个标题}+p{这是一个段落}*3 -->
<div align="center">
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</div>
效果图如下
无序列表 ul li
无序列表表示的是没有顺序的列表，常用于超链接的组合
代码示例：
<!--快捷键 ul{前端开发}>li*3 -->
<ul>
前端开发
<li>html</li>
<li>css</li>
<li>JS</li>
</ul>
效果图：
有序列表 ol li
常用于有顺序结构的超链接等的排列（默认序列为1.2.3.在CSS中这些是可以更改的）
代码示例：
<!--快捷键 ol{前端开发}>li*3 -->
<ol>
前端开发
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
效果图：
表格table tr td
"table"标签定义整张表格，"tr"标签定义行数，"td"标签定义每一行的单元格数（一般默认情况下表格是没有边框的，可在CSS中添加标签或者在border属性中添加）
代码示例：
<!--快捷键 table>tr*3>td*3 -->
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td><3/td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
效果图：
表头单元格th
将普通单元格的定义标签"td"换为"th"可用来表示表头单元格。
代码示例：
<!--快捷键 table[border="1"]>tr*3>th+td*2 -->
<table border="1">
<tr>
<th>班级</th>
<td>1801</td>
<td>1802</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
<td>女</td>
</tr>
<tr>
<th>年龄</th>
<td>18</td>
<td>20</td>
</tr>
</table>
效果图：
form表单
表单是一个区域，用于采集用户的信息，表单元素主要包括文本框、按钮、单选、复选、下拉列表、文本域等
默认格式
<form action="数据处理网页">
表单元素
</form>
"action"属性表示将表单内的数据提交并处理的网页地址。
文本框密码框
文本框 type=“text”
密码框 type=“password”
代码示例：
<form action="#">
账户：<input type="text" name="UserName">
<br />
密码：<input type="password" name="UserPsd">
</form>
效果图：
提交、重置按钮
提交按钮 type=“submit”
重置按钮 type=“reset”
代码示例：
<form action="#">
姓名：<input type="text" name="UserName">
<input type="submit" value="确定">
<input type="reset" value="重置">
</form>
效果图：
单选框复选框
单选框 type=“radio”
复选框 type=“checkbox”
代码示例如下：
<form action="#">
男<input type="radio" value="boy" name="gender" checked="checked">
女<input type="radio" value="girl" name="gender">
<br />
爱好：音乐<input type="checkbox" value="1" name="音乐" checked="checked">
体育<input type="checkbox" value="2" name="sport" >
篮球<input type="checkbox" value="3" name="basketball">
</form>
其中“checked”属性表示默认已选中，由于前两个为单选框，所以单选框的name属性的值是相同的，而复选框的则是不同的，关于name属性后面会有详细的介绍。
效果图
下拉列表框
其中"select"标签表示下拉列表框的整体，"option"标签表示其中的选项。
代码示例
<form action="#">
<select >
<option value="1" checked="checked">html</option>
<option value="2">CSS</option>
<option value="3">JS</option>
</select>
</form>
效果图：
文本域Textarea
"rows"属性表示文本域中可以输入的行数，"cols"表示文本域中可以输入的列数
代码如下：
<form action="#">
<textarea id="" cols="30" rows="10">
在这里输入内容...
</textarea>
<br />
<input type="submit" value="确定">
<input type="reset" value="重置">
</form>
效果图：
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
