1、什么是前端：
任何直接能够和用户直接打交道的交互界面都可以成为前端
软件开发架构
c/s架构
b/s架构
本质上行b/s也是一个c/s架构
浏览器输入网址发生什么
-
输入网址
-
服务器发送请求
-
服务器接收请求，并查询浏览器想要数据返回
-
浏览器拿到数据展示页面
http协议
超文本传输协议（浏览器访问）
客户端和服务端在数据交互的时候都必须遵循的协议
Html
超文本标记语言，不是变成语言
Html文件打开方式：
方式1：找到该文件选择浏览器打开
方拾2：双击直接打开
Head：内常用标签
Title：页面标题，在网页栏上显示内容
Lang：选择语言
Style：定义样式，写css代码
Link：通过href引入外部css文件
Script：内部可以直接写js代码，也可以通过src属性引入外部js代码文件
设置网页的标题：
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
打开网页测试：
对于设置中文出现乱码，不识别的问题，在head中设置可以解决中文乱码问题
<meta charset="UTF-8">设置页面自动跳转通过meta标签实现
<meta http-equiv="refresh" content="1;URL=https://www.baidu.com">参数：
http-reuiv="refresh" #刷新
content="xxx 3设置刷新间隔
url=https://www.baidu.com #跳转地址
body标签内设置
设置主题： 主题可以设置六种h1到h6，区别就是字体大小不一样
<h1>主题一</h1>设置一个自定义跳转，点击百度链接就会跳转到百度首页
<a href="https://www.baidu.com">百度链接</a>
前面我们定义了主题，但是我们想针对主题这几个字设置下颜色那该怎么设置呢？
两种方案：
1,h1变迁中添加标签style 设置颜色，设置颜色为蓝色
<h1 style="color: #172bdc">主题一</h1>查看效果：
方法二：
在head内设置style标签，h1指定主题的名字来进行渲染
<style>h1{color: green}</style>
第三种：加载css文件
在同级目录中添加一个css后缀的文件，编辑文件
h1{color: crimson} #设置为红色
从这里看和之前在head中style中设置的没有什么不同，设置css文件的优点就是可以方便管理
加载这个css文件
在head中添加link标签
<link rel="stylesheet" href="color.css">查看效果：
P标签：
表示段落：
<h2>咏鹅</h2>
<p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波</p>
常设置字体标签：
打折：s标签
换行：br
下换线：u
斜体：i
加粗：b
创建一条水平线：hr
特殊符号：
大于：<
小于: >
人民币：¥
©：©
®：®
空格： 
常用标签：
div标签
span标签
a标签
关于网页跳转分为两类：
-
本网页跳转到执行网址
<a href="https://www.baidu.com" target="_self">点击下试试</a>
-
打开新的网页跳转到指定地址
<a href="https://www.baidu.com" target="_blank">再次点击下试试</a>本页面跳转：
-
先定定义一个位置：通过id来查找到指定位置的
<a href=""id="a1">头部</a>2、点击这个按钮跳转到之前设置的的那个位置上
<a href="#a1">跳转到顶部</a>div标签
设置背景背景色：
<div style="height: 22px;background: #172bdc">测试背景颜色</div>Style:高度22像素
Background：颜色
效果展示：
关于图片img标签运用：
<img src="http://img3.100bt.com/upload/ttq/20140523/1400836956582_middle.jpg" alt="这是猫吗？" title="这个是人猫。喵喵喵" height="100px">参数介绍：
src:图片链接地址
alt：这个是当图片加载不穿来的时候通过提前设置好的字体可以知道这个图片是什么意思
title：当鼠标悬停在图片上会显示内容
height:设置高度，说是设置高度，是同比缩放
列表标签：
Ui以圆圈标记的列表
Li定义每行值得标签
<ul type="disc">
<li>yzn</li>
<li>egon</li>
<li>kven</li>
</ul>显示效果：
<ol type="dics">
<li>yzn</li>
<li>egon</li>
<li>kven</li>
</ol>
这里默认显示数字类型的列表，通过修改type类型的值来显示不同类型的列表，A显示：A、B、C、D类型
自定义定义标题和内容
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签table：
<table border="1">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>大黑</td>
<td>18</td>
</tr>
<tr>
<td>大白</td>
<td>19</td>
</tr>
</tbody>
</table>参数介绍:border设置边框
thead设置表格字段名
th设置值
tbody定义表格内容
td每个对应表格内容
最重要的：from表单
<body>
<form> #表单开始标签
<h1>用户注册</h1> # 设置主题
<p>username:<input type="text"></p>
<p>password:<input type="password"></p> #类型设置为password输入密码不会看到密码
<p>出生年月:<input type="date"></p>
<p>性别：
男<input type="radio" name="rgon"> #通过设置相同的name来限制不能多选
女<input type="radio" name="rgon"> #类型radio表示勾选框类型
</p>
<p>爱好：
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">羽毛球
<input type="checkbox">乒乓球
</p>
<p>地区选择:
<select name="" id="">
<optgroup label="北京"> # 设置一个组
<option value="">朝阳区</option> #组下的选项
<option value="">海淀区</option>
<option value="">昌平区</option>
</optgroup>
<optgroup label="上海">
<option value="">静安区</option>
<option value="">黄浦区</option>
<option value="">徐汇区</option>
</optgroup>
</select>
</p>
<p>info #textarea标签，输入信息框
<textarea name="信息" cols="30" rows="10"></textarea>
</p>
<p>file: #类型定义成file文件就可以选择本地文件进行上传
<input type="file">
</p>
<input type="submit"> #注册
<input type="button"> #自定义按钮
<input type="reset"> #重置按钮
<button>测试按钮</button> #定义button按钮上显示内容
</form>
</body>