前言：
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页和界面
前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时：
- HTML:页面结构:可以把他看成一个文档,定义展示页面的内容结构
- CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
- JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能
一、HTML基本结构
HTML: 超文本标记语言,是网页制作必备的编程语言“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
- HTML页面结构
超文本标记语言的结构包括“头"部分（Head）、和“主体”部分（Body）,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 头部信息:通常用来进行相关声明和加载一些外部信息,不会再页面显示 -->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 页面主体内容-->
</body>
</html>1、文档声明 : DOCTYPE声明该html文件使用的HTML版本 ------> 为HTML 5
2、页面头部:
1.标签中的 lang="“en” 定义网页的语言为英文,定义成中文是 'lang=“zh-CN”
2.标签中的 <title 显示在浏览器头部的内容，:标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏。
3、页面内容:
<body:元素定义文档的主体,也就是页面显示的内容,body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等)
二、常见的HTML标签使用
1、注释:
定义和用法：注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
例如: 这是注释,快捷键:ctrl+/
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>2、标题标签: h1-h6标签
定义和用法: 标签可定义标题的大小,分为 h1-h6
注意: 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小
例如:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>3、段落标签:p标签
定义和用法：标签定义段落,一个P标签标示一个段落,元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定
例如:
<p>7日晚上10点,中国机队进行排查</p>
<p>新闻实践史不是对新闻历史的碎片化、浅表性阐释</p>4、分割线:hr标签
定义和用法:标签在 HTML 页面中创建一条水平线。水平分隔线以在视觉上将文档分隔成各个部分,在 HTML中
例如:
<p>7日晚上10点,中国机队进行排查</p>
<hr>
<p>新闻实践史不是对新闻历史的碎片化、浅表性阐释</p>
<hr>5、换行标签: br标签
定义和用法: 插入一个换行符，标签是空标签,意味着它没有结束标签
例如:
<p>7日晚上10点,中国国际航空在其官方微博<br>确认了这一情况</p>6、字体斜体标签: i标签
定义和用法: 字体进行倾斜
例如:
<i>中国</i>国际航空7、字体加粗标签: b标签
- 定义和用法:字体进行加粗
例如:
<b>新闻</b>实践史不是对新闻历史的碎片化8、图片标签: img标签
定义和用法: 向网页中嵌入一幅图像
标签的属性：
- src:为图片链接
- alt:为图片名称
- height:定义图像的高度
- width:定义图像的宽度
注意: 本地图片地址链接格式为:./600.jpg
例如:
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是网络图片">
<img src="./600.jpg" alt="这是本地图片">9、链接标签: a标签
定义和用法: 标签定义超链接,用于从一个页面链接到另一个页面
例如:
<a href="https://www.baidu.com">百度一下</a>10、列表标签:
- 无序列表: ul 标签
定义和用法: 在网页上定义一个无编号的内容列表可以用
例如:
<ul>
<li>无序列表文字1</li>
<li>无序列表文字2</li>
<li>无序列表文字3</li>
</ul>- 有序序列表:ol标签
定义和用法: 在网页上定义一个有编号的内容列表可以用
例如:
<ol>
<li>有序列表文字1</li>
<li>有序列表文字2</li>
<li>有序列表文字3</li>
</ol>11、表格标签: table标签
定义: 向网页中嵌入一幅图像，tabel标签定义 HTML 表格
table标签的使用：
- 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
- tr元素:定义表格行
- th元素:定义表头
- td元素:定义表格单元
- 表格默认没有边框,需要边框在table里加: border=“2px”
例如:
<table border="2px">
<!-- 第一个通常定义表头 -->
<tr>
<th>名字</th>
<th>年龄</th>
<th>手机号码</th>
</tr>
<tr>
<td>小米</td>
<td>23</td>
<td>15112552344</td>
</tr>
</table>三、HTML块元素和行内元素的使用
1、块元素:div标签
定义和用法：
- 标签块元素,表示一块内容,div标签可以把文档分割为独立的、不同的部分
- 可以使用css设置宽高
- 默认是占用一整快
例如:
<div style="height:100px;background: red;">哈哈哈哈</div>
<div style="height:200px;background: yellow;">这是第二块</div>2、行内元素:span标签,i标签,b标签
定义和用法：
- 不能设置宽高
- 设置多个行内元素,一般用于文字显示
例如:
<span style="height:200px;background: green;width: 500px;">python8888</span>
<span style="height:200px;background: mediumvioletred;">java7888</span>3、行内块元素
定义和用法：
- 将一行内容分为多个快
- 所有的元素都可以通过css设置为行内块元素
- 可以看成是一行内分成多个列进显示
- 通过css设置: display: inline-block
四、HTML表单的使用
1、 form标签
定义和用法：
- form: 标签用于为用户输入创建 HTML 表单,表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等
- 参数：
- action: 定义表单数据提交地址（不写默认本地地址)
- method: 表单提交的方式(常见的有get和post)
- 例如:
<h1>用户登录</h1>
<form action="" method="get"></form>
<div>
账号:<input type="text">
</div>- form表单中包含的元素：
- input标签
input的参数:
- value属性: 定义表单元素的值
- name属性: 定义表单元素的名称,此名称是提交数据时的键名
- input标签的type的属性：
- text ------> 定义单行文本输入框
<div>
<!-- 文本输入框 -->
<label for="u">账号:</label>
<input type="text" name="username" value="henry001" id="u">
</div>
- password ------> 定义密码输入框
<div>
<!-- 密码输入框 -->
密码:<input type="password" name="pwd">
</div>
- radio ------> 定义单选框
<div>
<!-- 单选框 -->
<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nu">女
<input type="radio" name="sex" value="weizhi">未知
</div>
- checkbox ------> 定义复选框
<div>
记住密码:<input type="checkbox" name="status" value="1">
</div>
- file ------> 定义上传文件
<div>
上传头像:<input type="file" name="pic">
</div>
- date ------> 日期选择器
<div>
日期:<input type="date" name="date1">
</div>
- submit ------> 定义提交按钮
<div>
<input type="submit">
</div>
- button ------> 定义一个普通按钮
<div>
<input type="button" value="普通按钮">
</div>
- reset ------> 定义重置按钮
<div>
<input type="reset">
</div>
- image ------> 定义图片作为提交按钮,用src属性定义图片地址
<div>
<input type="image" src="./600.jpg">
</div>
- hidden ------> 定义一个隐藏的表单域,用来存储值
- label标签
定义和用法:
- label 标签为 input 元素定义标注（标记）
- label 标签的 for 属性应当与相关元素的 id 属性相同
<div>
<!-- 文本输入框 -->
<label for="u">账号:</label>
<input type="text" name="username" value="henry001" id="u">
</div>- textarea标签
定义和用法:
- textarea标签定义多行的文本输入控件
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸
<div>
个人介绍:
<textarea cols="30" rows="10"></textarea>
</div>- select标签
定义和用法:
- select 元素可创建单选或多选菜单,也可以用于选择数据提交表单
<div>
选择城市:
<select name="city">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</div>- option标签
定义和用法:
- option 元素定义下拉列表中的一个选项。option 元素位于 select 元素内部
<div>
选择城市:
<select name="city">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="sz">深圳</option>
</select>
</div>五、iframe的使用
定义和用法:
- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
将登陆的页面链接到其他页面
<div>
<!-- iframe嵌套 -->
<iframe src="https://www.baidu.com/" height="1000" width="2000"></iframe>
</div>
