- HTML：网页的基本结构
- CSS：网页的显示效果
- JavaScript：用户交互效果，动态效果
- JQuery：JavaScript库，简化js操作
- Ajax：异步数据交互，在页面不刷新的情况下进行数据交互
- BootStrap：前端UI框架，快速搭建静态页面并支持不同设备
HTML概述
一、什么是HTML
HTML是用来描述网页的一种语言
超文本标记语言（Hyper Text Markup Language），是一种用于创建网页的标准标记语言
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签（markup tag）
HTML文档包含了HTML标签及文本内容
HTML文档也叫做web页面
二、HTML用来干什么
HTML建立Web站点，HTML运行在浏览器上，由浏览器解析
三、建立HTML文件
- .html
- .htm
四、HTML注释
<!- -注释内容 - ->
五、HTML基本结构
- 第一行是声明文档，告诉浏览器以什么html版本解析代码，
<!DOCTYPE HTML>声明为 HTML5 文档 - <html>，元素是HTML页面的根元素
- <head>，元素包含了文档的元（meta）数据，进行页面的相关设置
- <body>，元素包含了可见的页面内容
<!DOCTYPE HTML>
<html>
<!--head头 不直接显示在页面中的内容，一般是做网页的一些设置-->
<head>
<!-- 设置网页编码格式 -->
<meta charset="UTF-8">
<!-- 设置网页的标题 -->
<title>我的第一个网页</title>
</head>
<!-- body体 主要来写显示在页面中的内容-->
<body>
hahahahahaha
</body>
</html>
六、HTML标签结构
- HTML标记标签通常被称为HTML标签（HTML tag）
- HTML标签是由尖括号包围的关键词
- HTML通常是成对出现的
- 第一个标签是开始标签，第二个是结束标签
<开始标签>内容</结束标签>
七、HTML属性
- HTML元素可以设置属性
- 属性一般添加在开始标签
- 属性一般以名称/值对的形式出现，比如：name="value"
注意：
- 属性值必须用双引号引起来
- 标签都用小写字母
- 双标签必须要写闭合标签
HTML常用标签
一、HTML常用的块级标签（块级元素）
独占一行
有语义的块级元素
- 标题：通过<h1>~<h6>标签来定义
- 段落：通过<p>标签定义
- 列表：
- 无序列表、有序列表(type：设置有序列表的标记类型、start：设置列表项从第几个标记开始）、自定义列表
<!--无序列表-->
<ul>
<li>第一</li>
<li>第二</li>
</ul>
<!--有序列表-->
<ol>
<li>第一</li>
<li>第二</li>
</ol>
- 表格
<!--表格标签 table声明一个标签 th表头 tr行 td列-->
<tabel>
<tr>
<!--th标签 表头，默认垂直居中，有加粗效果-->
<th>我是表头</th>
<td>第一行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tabel>
table常用属性：
border-----------------------边框
width------------------------设置表格总体宽度
height----------------------设置表格总体高度
cellpadding----------------表格内容与边框的距离
cellspacing----------------单元格间距
rowspan-------------------垂直合并，跨行显示
colspan--------------------水平合并，跨列显示
align-------------------------内容水平对齐方式，默认靠左，center，right，left
valign------------------------内容垂直对齐方式，默认垂直居中，bottom，top
无语义的块级元素
- 区块元素，div，没有特定的含义，独占一行，一般用来划定一块区域，配合css在布局当中使用，取代了使用表格定义布局的老式方法
二、HTML常用的行级标签（行内元素）
不独占一行
有语义的行内元素
- 链接：<a herf="链接地址">链接文本</a>，target属性：定义被链接的文档在何处显示，_blank在新窗口打开
- 图片：<img src="图片地址" alt=' ' title=' '>，单标签(不需要闭合)
- src属性：图片的地址
- alt属性：用于图片加载失败的替代文字tiele
- title属性：鼠标悬停在图片上的提示信息
- width、height属性：设置图片大小
- 文本：<b>加粗、<i>倾斜、<strong>强调、<em>倾斜
无语义的行内元素
- span：配合css使用
三、常用的实体字符
-
>大于号<小于号 空格
四、表单标签
表单是一个包含表单元素的区域。通过form定义表单区域
通过type属性定义不同类型的表单控件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
form标签来划定一个表单区域
action:提交地址
method:提交方式 get post
表单提交默认是以get方式进行数据的传输
get:通过url地址传输数据，数据会显示在url中，传输数据有大小限制，相对不安全
post:不通过url地址传参，较安全，一般表单使用post提交数据
enctype:如果表单当中有文件上传必须添加这个属性，用于文件转码
-->
<form action="" method="post" enctype="multipart/from-data">
<!--
表单控件
type:指定表单类型,普通文本、密码框、单选框、多选框、下拉框、文件上传选框、文本域、按钮、隐藏域
name:作为数据的键,必填
-->
<!-- 普通文本输入框 -->
用户名:<input type="text" name="username" placeholder="请输入用户名"> <br>
<!-- 密码框 -->
密码:<input type="password" name="password" readonly> <br>
<!-- 单选框 必须有name属性和value属性,并且一组单选框的name属性必须相同 -->
性别:<input type="radio" name="sex" value="1" checked>男 <br>
<input type="radio" name="sex" value="0">女 <br>
<!-- 多选框 必须有name属性和value属性,并且name属性值要相同 -->
爱好:<br>
<input type="checkbox" name="like[]" value="l">篮球 <br>
<input type="checkbox" name="like[]" value="z">足球 <br>
<input type="checkbox" name="like[]" value="y">羽毛球 <br>
<!-- 下拉框 配合option使用-->
学历:<br>
<select name="xl">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
</select>
<br>
<!-- 文件上传选框 -->
请选择上传文件:<input type="file" name="file">
<br>
<!-- 文本域 -->
请输入个人说明:<br>
<textarea name="text" id="">请输入个人信息</textarea>
<br>
<!-- 按钮 -->
<input type="submit" value="这是个提交按钮"> <br>
<button>这是个按钮</button>
<!-- 重置按钮 -->
<input type="reset">
<!-- 隐藏域 不需要用户查看和填写的信息 -->
<input type="hidden" name="id" value="0">
</form>
</body>
</html>
