前端基础
目录
前端基础
- 前端是什么
所有用户能看到的界面:前端
广义上：
网页、pc端的应用exe、移动端应用app、微信小程序、手环的时间界面
狭义上(我们将要学习的):
html5为基础的前端：网页、app、微信小程序
前端要学习的内容
# 前端三剑客(编程语言)
1、html5：页面结构框架
标签 => 学会标签的嵌套结构
2、css2：页面布局与样式，(css3可以做一些特效，立体效果，这里不学)
3、javaScript：页面的交互逻辑
# 工具
jquery：js的工具包
bootstrap：快速搭建页面的框架
HTML5
- HTML5(HTML)：超文本标记语言(HyperText Mark-up Language)，5是版本号，之前的版本还有html4和xhtml
- 超文本：除了能够显示文字之外，当我们以html作为载体的时候，还可以承载图片、音频、视频等。
- 标记语言：没有语法，没有语法逻辑，从上至下进行解释，没有对错，只有认识和不认识，有无效果之分。
- html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面。
- 注：.html文件可以双击直接在浏览器中打开，也就是以浏览器为载体（本身是以文本效果为主的，之所以显示音频视频，是浏览器带有这样的解析功能，才使得超文本的信息可以被解析）
HTML5的组成
- 转义字符(了解)
- 指令
- 标签(重点)
目的
- 完成页面架构的搭建，用什么样的标签，完成什么样的标签嵌套关系(难点)
html三大知识点
指令：<>包裹由!开头
文档类型指令：<!doctype html> 说明他是h5(h4和xhtml更复杂一些，h5对他们兼容)
注释：<!-- 注释 -->
转义字符：由 &与;包裹，可以是10进制数字组合，也可以是特殊单词缩写组合(不用记，面向搜索引擎编程)
> --> '>' greater than
< --> '<' less than
--> ' '
© --> '©' 版权
标签：由<>包裹，字母开头，可以结合数字和合法字符的能被浏览器解析的标记 (字母 数字 '-')
标签有语义：<br> 换行
标签有作用范围(作用域)：<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>
标签可以修改内容样式：<xyz style="color: red">000</xyz>
# 注意：html大小写不敏感
标签
- 单标签：不需要内容，以功能为主，可以省略结束符
/ - 双标签：以内容为主，中间包含着作用域，必须明确结束标签
基础
<!--注释：doctype 必须出现在页面的最上方，规定该文档采用的html版本类型 -->
<!DOCTYPE html>
<!-- html：页面根标签,包含所有页面内容
lang：告诉浏览器页面的语言
"zh",中文
'en'是中文,但并不是不能识别中文了,而是告诉浏览器这个页面是英文的,那么有些浏览器就可以提供翻译功能
'ch'是用来国际化的
默认会和系统同步，所以可以不用自己声明
-->
<html lang="zh">
<!-- head：头标签 - 页面编码、页面标签标题图标、页面样式、页面脚本 -->
<head>
<!--页面编码-->
<meta charset="utf-8">
<!--页面标签标题-->
<title>标签</title>
<!--页面样式-->
<style></style>
<!--页面脚本-->
<script></script>
</head>
<!-- body:体标签 - 页面内容、页面脚本、页面样式 -->
<body>
<!-- 用于内容显示的标签全部书写在body中 -->
<!--还有一个keywords用于检索(索引)-->
-
head和body中页面脚本的区别：
要提前完成的逻辑，就放在head中，依赖页面结构的，放在body中(几乎所有的都在body中)，在body中的脚本也可以写在head中，但是需要声明当所有页面逻辑加载完成后，再加载脚本，所以没必要，直接写在body的最下方就可以了。
文本标签
<!-- 文本标签 -->
<!-- 标题：h1`h6 -->
<!-- 一般一个页面只出现一次，重点是语义：声明这是该页面的主标题 -->
<h1 id="top">一级标题</h1>
<h2>二级标题</h2> <!-- 随便用 -->
<!-- 段落：自带换行，有段落间距 -->
<p>段落</p>
<!-- 文本类型标签：不带有换行功能，一般会被p标签所嵌套-->
<!-- span一般用来嵌套其它文本类标签，然后再嵌套在p标签中，用来划分作用域 -->
<span>span标签</span>
<b>加粗标签</b> <!-- 已弃用，但是还是可以使用的 -->
<strong>以加粗方式强调的标签</strong>
<i>斜体标签</i>
<em>以斜体方式强调的标签</em>
<sup>上角标</sup>
<sub>下角标</sub>
功能标签
<!-- 换行标签 浏览器只会把空格或者换行识别成一个四个像素的空白-->
<br>abc
<!-- 分割线标签 -->
<hr>
<!-- 超链接标签：target参数：_self当前页面打开 _blank新开空白页打开 _top是覆盖掉最早的历史记录 _parent 是覆盖掉上一个历史记录 -->
<!-- 网页转跳 -->
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<!-- 如果不声明协议，则从站内跳转，如果站内没有这个就会报错404 -->
<a href="第一个页面.html" target="_self">第一个页面</a>
<!-- 本页转跳 -->
<a href="#top">go top</a> <!-- 需要在需要跳转到的地方也设定一个记号top,比如在顶端 -->
<!-- 全局的a标签跳转新页面，在head中加入这个 -->
<base target='_blank'>
图片标签
<!-- 图片标签 -->
<!--src: 图片源-->
<!--alt: 图标加载失败时的文本提示-->
<!--title: 鼠标悬停时的文本提示,可以在所有标签中添加-->
<img title= "哈哈哈" src="https://graph.baidu.com/thumb/466383834,495932018.jpg" alt="美女">
列表标签
<!-- 列表: 无序ul>li 有序ol>li -->
<!--ul>li{选择项}*3-->
<ul>
<li>选择项</li>
<li>选择项</li>
<li>选择项</li>
</ul>
<!--ol>li{第$项}*3-->
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
表格标签
<!-- 表格标签 -->
<!--border:边框-->
<!--cellpadding：单元格的内边距（文本与标签的间距）-->
<!--cellspacing:单元格的间距，最小为0，
但是单元格之间是两条线，可以用rules="all" 处理成一条线 -->
<!-- tr: 行 td: 内容单元格 th: 标题单元格 -->
<!-- 在这里设置的是整个表格的数据，单位都是px，也就是像素点，最小是12-->
<table border="1" width="500" height="200" rules="all" cellpadding="10" cellspacing="0">
<caption>表格标题</caption>
<thead>
<!-- 如果想要抢占高度，可以在tr中添加样式，head没有抢高度的能力 -->
<tr style="height: 80px">
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<!-- body抢占高度的优先级最高，想要每一行都平分长度，可以把所有的内容都写到body下面-->
<tbody>
<!--(tr>td{单元格}*3)*2-->
<!--rowspan:合并行-->
<!--colspan:合并列-->
<tr>
<td rowspan="2">单元格</td>
<td colspan="2">单元格</td>
<!--<td>单元格</td>-->
</tr>
<tr>
<!--<td>单元格</td>-->
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾表尾</td>
<td>表尾表尾</td>
<td>表尾表尾</td>
</tr>
</tfoot>
</table>
<!-- 注：head，body，foot可以不写，会自动加上body然后把内容放到body中 -->
表单标签
<!-- 表单标签: 完成前后台交互的 - 将前台用户输入的内容或文件提交给后台 -->
<!-- from action: 提交后台的接口地址 method: 提交方式（get:不安全(udp) post:安全(tcp）-->
<form action="">
<p>
<!-- name明确才会往后台提交 -->
<!-- name是键，value是值，当需要用户手动输入值时，就不用自己设定value -->
<!--type是决定标签的类型本质(input|button)-->
<!-- placeholder是用户没有输入时的一个提示信息 -->
<!-- label作为input的文本结束标签，for绑定id -->
<label for="username">帐号：</label>
<input id="username" type="text" name="user" placeholder="请输入帐号">
</p>
<p>
<label for="password">密码：</label>
<input id="passwprd" type="password">
</p>
<p>
<!-- hidden：隐藏按钮，但会上传值给后台 -->
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<!--multiple:多选 是布尔类型，赋不赋值都一样，写了就是True -->
<input type="file" multiple>
</p>
<p>
<!--单选框 name建立联系，checked设定默认值，布尔类型-->
男<input type="radio" name="gender" checked>
女<input type="radio" name="gender">
</p>
<p>
<!-- 复选框 可以多选 也可以多个默认值 不需要用户输入的时候，就给一个value交给后台-->
男<input type="checkbox" name="like" value="male" >
女<input type="checkbox" name="like" value="female" checked>
</p>
<p>
<!--选择列表 可以多项选择-->
<!-- selected：默认值 -->
<!-- select只能通过value提交数据，name是键 -->
<select name="subject" multiple>
<option value="python">python</option>
<option value="html5" selected>html5</option>
<option value="go">go</option>
</select>
</p>
<p>
<!--文本域 可以通过CSS来控制尺寸大小-->
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<!--三个按钮 用input的类型来写也是效果一样的-->
<button type="button">按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
</p>
<p>
<!--提交-->
<input type="submit" value="登录">
</p>
</form>
<!--页面脚本-->
<script></script>
</body>
</html>
标签功能分类
1、是否自带换行
带换行：h1 p div table form tr ul li
不带换行：span i b a img input button label textarea
2、单双标签
单标签（主功能）：br hr input img link
双标签（主内容）：html head body h1 p span div a label button
/ 代表标签的结尾，但是单标签可以省略
3、简单和组合标签
<!--组合：ul>li table>tr>td|th form>input
常用：
h1~h6
p
b
i
a
img
ul>li
table>tr>th|td
form>input|button|textarea|select>option
span：无语义，高度自定义，不带换行
div：无语义，高度自定义，自带换行
标签的嵌套规则(重点)
- 当你书写不规范时，比如把内容写在了/body和html中，使用时依然会自动帮你调整到body的最后面，应用场景为你有一些内容必须放在最下面执行，那么这样就很保险
- 使用div来搭建框架，把代码进行结偶，每一个div就是一块功能，可大可小，看需求
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面架构</title>
</head>
<body>
<!--
html学习目的：
1、什么时候用什么标签
最内层：h1~h6、p、a、img、input
外层：ul>li、form、table
架构：div
-->
<!--页面头-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form action="">
<input type="text">
<button></button>
</form>
</div>
<!--导航栏-->
<ul class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</ul>
<!--页面主体-->
<div class="main">
<!--.main-left+.main-center+.main-right-->
<div class="main-left"></div>
<div class="main-center">
<div class="main-box box1">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>从左侧的菜单选择你需要的教程！</b>
</p>
</div>
<div class="main-box box2">
<img src="" alt="">
<div>
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="main-right"></div>
</div>
<!--页面尾部-->
<div class="footer"></div>
</body>
</html>
css
css导读
- css是什么：级联样式表（Cascading Style Sheet）
- css属于标记语言，没有逻辑
- css是完成页面 样式(长什么样) 与 布局(标签位置)
- 学习的内容：
- css如何控制html标签 - 建立联系 - css选择器
- css可以控制哪些样式(样式与布局)
- css如何导入到html中
- 学习的目的：
- 完成页面的样式（画出这个标签）
- 完成页面的布局（并且放到它该出现的位置上）
css的三种引入方式
.代表class#代表id- 行间式的优先级最高，内联式和外联式如果名字的重复度一样，那么解释型语言的特性，下面的定义覆盖上面，如果重复度不一样，谁的重复度高谁起作用
- js控制的样式都是行间式，所以优先级需要多加注意
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<!--2、内联式-->
<!--书写位置：head->style标签-->
<!--优缺点：可读性强，复用性(文件内部复用)，但样式被html页面绑定了，不能提供给其他html页面使用-->
<style>
div {
width: 50px;
height: 50px;
}
.d1 {
background-color: purple;
}
.dd.d2 {
background-color: pink;
}
.d2 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<!--3、外联式 -->
<!--书写位置：样式在外部css文件中，在html文件中通过link标签引入css文件-->
<!--css语法：css选择器{样式1:"内容"; 样式2:"内容"...}-->
<!--html中使用：head->link->外部css文件-->
<!--优缺点：可读性强,文件级别复用，适合团队开发-->
<link rel="stylesheet" href="css/样式.css">
</head>
<body>
<!-- 标签的宽度会适应父级，高度由内容撑开 -->
<!--1、行间式-->
<!--书写位置：在标签的style属性中书写样式-->
<!--优缺点：可读性差，没有复用性，书写直接-->
<div style="width: 150px; height: 200px; background-color: deeppink;">123</div>
<div class="dd d1"></div>
<div class="dd d2"></div>
</body>
</html>
外部css文件
/* css/样式引入.css */
.d1{
width: 250px;
height: 250px;
background-color: blue;
}
css基础选择器
- 选择器：css与html标签建立起关系的桥梁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*优先级：按作用域大小区分，作用域越小优先级越高*/
/* !important > 行间式 > id > class > 标签 > *
/*最重要的是class，因为可以多重命名，还可以相同*/
/*1.通配选择器*/
* {
font-size: 30px;
color: brown;
}
/*2.标签选择器*/
div{
color: orange;
}
span{
color: hotpink;
}
/*3.类选择器：.类名*/
.aa{
color: blue;
}
/*4.id选择器: #id名 不可重复，但css和html中没有逻辑，写了也没关系，js中则不一样*/
#bb{
color: red;
}
/*组合使用: 找一个id为bb，class为aa的div*/
div#bb.aa {
color: gray;
}
/*如果非要超过行间式，可以使用important*/
/*不建议使用，因为js也改不了，js默认是行间式，除非js也加个important*/
.aa{
color: blue!important;
}
</style>
</head>
<body>
<div class="aa" id="bb" style="color: purple">d1</div>
<div class="aa">d2</div>
<div>d3</div>
<span>s1</span>
<span class="aa">s2</span>
<span>s3</span>
</body>
</html>
补充1：编辑器的作用
在编写前端代码时，可以巧用编辑器，浏览器的一些功能，让页面写起来更加轻松。如在设置字体大小，样式时，可以使用编辑器的Elements中的styles，预览字体的大小以及样式，再进行修改。
