HTML基础
前言
了解HTML
学习工具
学习目录
一、结构
1.1、html文件基本结构
二、HTML常用标签
2.1、标题标签
2.2、图片标签
2.3、注释标签
2.4、段落标签
2.5、换行标签
2.6、超链接标签
2.7、文本标签
2.8、列表标签
2.9、表格标签
三、表单的构成
3.1、表单的构成
3.2、表单的控件
3.3、select下拉列表
3.4、使用textarea创建一个文本域
一、结构
1.1、html文件基本结构
- 以下为vscode自动生成的HTML基础代码
<!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>
</body>
</html>1、html根标签，一个页面中有且只有一个根标签，网页中的内容都应该写在html标签中
2、head头部标签，该标签中的内容，不会在网页中直接显示，而是用于帮助浏览器解析页
3、title是网页中的标题标签，默认显示在浏览器标题栏中
4、body标签用来设置网页主体内容，网页中所有可见的内容，都编写在body标签中
5、在这个结构中，可以编写html的注释，注释的内容不会再页面中展示，但是我们可以在源码中查看，习惯性编写注释，可以有效的帮助开发人员工作，但是注释一定要简洁明了
6.属性：可以通过属性来设置标签，如果处理标签中的内容可以在开始标签中添加属性
属性名="属性值"，一个标签中可以同时设置多个属性，属性之间需要使用空格隔开
<h1>这是我的<font color="yellow" size="4">第二个</font>网页</h1>7、meta标签用来设置网页的一些数据，比如网页的字符集、关键字、简介，它是一个自结束标签
二、HTML常用标签
2.1标题标签
在HTML中，一共有六级标题标签 h1~h6
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>在显示效果中h1最大，h6最小
2.2图片标签
1、img标签也是一个自结束标签
<img src="./images/img1.jpg" alt="太平古城" width="200px" height="200px">2、属性：
src：设置一个外部图片的路径
相对路径：相对路径指相对于当前资源所在目录的位置
- 放在同级目录中
<img src="./images/img1.jpg" alt="太平古城">- 放在上级目录中 可以使用../来返回一级目录,返回几级目录就写几个../
<img src="../../images/im1.jpg" alt="太平古城"/>alt：可以用来设置在图片不能显示时，对图片的描述
width：可以用来修改图片的宽度,一般使用px作为单位
height ：可以用来修改图片的高度，一般使用px作为单位
3、图片格式
2.3注释标签
- HTML中注释不能嵌套
<!-- 这里是注释 -->2.4段落标签
<p>是一个段落标签，在其直接输入一段文字
<p>我是p标签</p>2.5换行标签
br表示换行，br也是一个自结束标签
<p>我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
<br/>
我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
<br/>
我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签我是p标签
</p>
2.6超链接标签
使用超链接可以让我们从一个页面跳转到另一个页面 使用a标签来创建一个超链接
属性：
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
<a href="http://www.baidu.com">我是一个超链接</a>2.7文本标签
- em标签em主要表示语气上的强调,em在浏览器中默认使用斜体显示
<p>今天天气真是是<em>好热</em>啊！</p>
- strong标签表示强调的内容，比em更强烈，默认使用粗体显示
<p><strong>如果你不好好读书，就只能去打螺丝</strong></p>
- i标签中的内容会以斜体显示
- b标签中的内容会以加粗显示
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p> 
- small标签中的内容会比他的父元素中的文字要小一些
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p> 
- 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容
<p>
<cite>《人性的弱点》</cite>是最喜欢的一般的书
</p>
- q标签表示一个短的引用（行内引用）
- q标签引用的内容，浏览器会默认加上引号
- blockquote标签表示一个长引用（块级引用）
<p>
子曰:<q>学而时习之不亦说乎！</q>
</p>
<div>
子曰:
<blockquote>
有朋自远方来，不亦君子乎！
</blockquote>
</div>
- 使用del标签来表示一个删除的内容
<p>
<del>我滴个姥姥</del>
</p> 
- ins标签表示一个插入的内容
<p>
我真的<ins>很c的</ins>！
</p>
2.8 列表标签
在HTML中一共有三种列表：
1、无序列表
2、有序列表
3、定义列表
<h3>无序列表</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dd>Vue</dd>
</dl>
2.9表格标签
在HTML中，使用table标签来创建一个表格
tr：表示一行
td：表示单元格
th：表示表头中的内容，用法跟td一样，不同的是它会有一些默认效果
rowspan：用来设置纵向的合并单元格
colspan：横向的合并单元格
border-spacing：设置table和td边框之间默认距离
border：表示边框
border-collapse：可以用来设置表格的边框合并
<table border="1" width="40%" align="center">
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
thead：表头
tbody：表格主题
tfoot：表格底部
三、表单的构成
3.1表单的构成
- from标签创建一个表单，且在标签中必须指定一个action属性，该属性指向一个服务器的地址
<form action="form_action.asp"></form>- method属性用于设置表单数据的提交方式，取值为get或post
<form action="form_action.asp" method="get"></form>- name属性用于指定表单的名称，将用户填写的内容提交服务器
- autocomplete属性：用于指定表单是否有自动完成功能
<form id="formBox" autocomplete="on"></form>3.2表单的控件
基本语法：
文本框：
<input type="text">密码框：
<input type="password">单选按钮
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女<label for="um">用户名</label>
<input id="um" type="text" name="username"/> 多选框
爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球 
普通按钮
<input type="button" value="按钮">提交按钮
<input type="submit" value="提交">重置按钮
<input type="reset" /><button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>3.3select下拉列表
<select name="star">
<optgroup label="女明星">
<option value="fbb">金星</option>
<option value="lxr">刘亦菲</option>
<option value="zw">黄蓉</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">胡歌</option>
<option value="ldh">彭于晏</option>
<option value="pcj">刘德华</option>
</optgroup>
</select> 
3.4使用textarea创建一个文本域
自我介绍 <textarea name="info"></textarea>
