Web开发基础之HTML
1，前端语言介绍
HTML 提供页面上的内容（结构和内容）
CSS 对网页进行美化（样式）
JavaScript对网页上的内容进行控制（控制）
2，开发工具准备
常用开发工具：
轻量文本型：VSCode、Sublime
重量IDE型：WebStrom
下载VSCode 地址：https://code.visualstudio.com/Download
可以下载绿色版
汉化，安装中文控件
3，初始HTML
什么是HTML
HTML（英文 Hyper Text Markup Language 的缩写）中文译为超文本标记语言
通过HTML标签对网页中的文本、图片、声音等内容进行描述
打开网络上的一个页面，通过浏览器调试工具查看源代码
HTML的格式
基本格式
<HTML>
<head>
<title>标题显示</title>
</head>
<body>
</body>
</HTML>
html标签：所有html标签的根节点
head标签：描述网页的一些信息，里面的内容不会被显示呈现
title标签：网页的标题
body标签：页面的主题部分，主要编写开发的内容
Tip:通过编辑器快速创建html的页面结构
在vscode中新建一个html文件后，输入！按tab键，可以快速生成一个HTML5标准的一个页面结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
4，HTML标签分类
双标签
语法格式
<标签名>内容</标签名>
<标签名> 在整个标签的最前面，称为“开始标签(start tag)”
</标签名> 在整个标签的最后面，称为“结束标签(end tag)”
结束标签只是比开始标签，在前面多了一个关闭符“/”。
单标签
语法格式
<标签名/>
例如
<br /> 换行标签 <hr /> 水平线 横线标签
5，字符集
<meta charset=“UTF-8”>
UTF-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312
GB2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK 包含全部中文字符 是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312
UTF-8 则包含全世界所有国家需要用到的字符
Tip：以后我们统一使用UTF-8字符集就可以了，避免出现字符集不统一而引起乱码的情况。
6，常用HTML基础标签
标题标签
语法
<h1>这是h1标签</h1> <h2>这是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6>
标题标签按1-6大小从大到小,如下图 默认提供1-6个标题标签,如果写h7则是普通文字
段落标签
单词缩写： paragraph 段落
使用段落标签，可以使网页中的文本文字，呈现出一个一个段落的格式。
语法：
<p>段落</p>
水平线标签
</hr> #单标签
换行标签
单词缩写： break 打断 ,换行在HTML中，默认换行是需要在浏览器窗口的最右端才会自动换行，这样在每个设备中呈现的效果不一致。如果需要进行某段文本的强制换行，就需要使用到换行标签。
语法：
<br/> # 单标签
练习：实现一个简单新闻页面
div span标签
div division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。 块级元素
span 跨度，跨距；范围，行内元素
语法
<div>这是头部<div/>
标签属性
在使用HTML制作网页的时候，如果想让标签提供更多的信息，可以使用标签的一些属性进行设置。
语法
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
例
<hr width="200" align="left" />
width 属性，值 200 控制宽度
align 属性，值 left 控制横向对其方式
默认hr标签占据了整行,设置以上属性以后宽度就只有设置的200
默认hr是居中对齐,设置左对齐
图片标签
单词缩写：image 图像(单标签)
语法
<img src="图像URL" />
通过src属性，进行设置图像文件的路径和文件名。是img标签的必须属性。
图片标签属性
src可以是网络路径,可以的本地绝对路径或者相对路径,前提是路径存在图片有效,否则使用设置的文本代替
链接标签
单词缩写:anchor 锚
语法
<a href="跳转目标">文本或图像</a>
示例
<a href="http://www.baidu.com" target="_blank">去百度</a>
跳转 默认直接覆盖当前页面跳转,加target="_blank"新打开一个页面跳转
跳转需要加协议例如http否则会在当前目录绝对路径加跳转链接
特殊字符标签
html中一些标签,具有特殊含义,会被浏览器直接解析 ,如果需要输出这些标签，需要使用到转义、替代语法。
例如需要在页面显示: <p>标签经常用于段落 直接写在html文本里面会把<p>当成标签解析,页面并不会显示
需要写成如下格式
<p>标签经常用于段落
注释标签
注释标签，可以给HTML文档中添加一些便于阅读和理解的文字，并且此标签中的内容，不会直接展示出来，只有通过源代码的方式才可以看到。
语法
<!-- 注释语句 -->
也可以直接选中需要注释的语句 ctrl+/注释
列表标签
语法
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>
①在<ul></ul>标签中，只能嵌套<li></li>标签，其他标签的直接嵌套是语法是不被允许的。
②<li></li>标签中作为一个容器，可以容纳其他的标签元素。
③无序列表具有默认样式，可以CSS进行修饰。
<ul>
<li>Linux</li>
<li>CentOS</li>
</ul>
页面显示
ol有序标签
<ol>
<li>Linux</li>
<li>CentOS</li>
</ol>
在前面加序号
页面显示
表格标签
语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
表格属性
①可以使用th标签设置表头 即把td改成th可以把表头设置成标题模式加粗
②之后可以使用CSS修饰表格的样式
示例:
一个主机列表表格
<table>
<tr >
<td >hostname</td>
<td>ip</td>
<td >type</td>
<td >status</td>
</tr>
<tr>
<td >server1</td>
<td>192.168.1.1</td>
<td >web</td>
<td >online</td>
</tr>
</table>
页面显示
修改设置
<!-- 设置边框 居中对齐 单元格之间空白间隙为0 -->
<table border="1" align="center" cellspacing="0">
<tr >
<td >hostname</td>
<td>ip</td>
<td >type</td>
<td >status</td>
</tr>
<tr>
<td >server1</td>
<td>192.168.1.1</td>
<td >web</td>
<td >online</td>
</tr>
</table>
显示效果
表单
在HTML中，form标签用来定义一个表单。用来实现用户的相关信息的收集和传递，和后端进行交互。form中的所有内容都会被提交给服务器。
语法：
<form action="url地址" method="提交方式"> 各种表单控件 </form>
常用属性:
action 值为提交到后端接收的URL地址
method 设置表单的提交方式 值为get或者post
表单控件组成
表单中的提供了多种表单空间，单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
input控件
input控件为表单中,最常使用的,也是需要重点掌握的.基本标签属性为type属性
用来定义不同的控件类型.
其他常见属性
textarea控件（文本域）
当需要输入大量信息的时候，就可以使用textarea标签。实现多行文本的输入框。
语法
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>
示例
<form action="url地址" method="提交方式">
用户名:<input type="text" name="username" size="100" maxlength="5"/> <br/>
<!-- 和文本是一致的不过是输入时隐藏 -->
密码:<input type="password" name="password"/> <br/>
性别:<input type="radio" name="sex" value="2" checked/> 保密 <input type="radio" name="sex" value="0"/> 男 <input type="radio" name="sex" value="1" /> 女 <br/>
爱好:<input type="checkbox" name="body" checked/> 吃饭 <input type="checkbox" name="body" checked/> 睡觉 <input type="checkbox" name="body"/> 打豆豆 <br/>
自我介绍:<br/>
<textarea name="" id="" cols="30" rows="10"></textarea><br/>
<input type="submit" value="注册" /> <input type="reset" value="重置">
</form>
在表单标签内
页面显示
select控件(下拉菜单)
select控件,可以给用户提供一些常见选项
语法
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
Tip:
select标签中，必须包含至少一个option标签。
在option标签中，可以定义selected=“selected”,设置当前值为默认选项。如果不定义此项则默认选项为选项1
示例
写在from标签内
学历：<select name="" id="">
<option value="0">==请选择==</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">专科</option>
<option value="4">本科</option>
<option value="5">硕士</option>
</select>
页面显示
lebel标签
label标签为input元素的定义标注（标签）
可以用来绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。
语法：
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male">
label标签通过id的来匹配对应的区域
示例
<form action="" method="">
用户名:<input type="text" name="username" size="100" maxlength="5"/> <br/>
<!-- 和文本是一致的不过是输入时隐藏 -->
密码:<input type="password" name="password"/> <br/>
性别:<input type="radio" name="sex" value="2" checked/> 保密 <input type="radio" name="sex" value="0" id="male"/> <label for="male">男</label> <input type="radio" name="sex" value="1" /> 女 <br/>
爱好:<input type="checkbox" name="hobby" checked/> 吃饭 <input type="checkbox" name="hobby" checked/> 睡觉 <input type="checkbox" name="hobby"/> 打豆豆 <br/>
学历：<select name="" id="">
<option value="0">==请选择==</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">专科</option>
<option value="4">本科</option>
<option value="5">硕士</option>
</select> <br/>
自我介绍:<br/>
<textarea name="" id="" cols="30" rows="10"></textarea><br/>
<input type="submit" value="注册" /> <input type="reset" value="重置">
</form>
