第六十六篇 前端基础一
目录javascript
1、前端导言
1.现阶段前端学习的内容：HTML、CSS、JavaScript、jQuery、bootstrapcss
2.这些内容分别指的是：html
1.html：页面架构 2.css：页面布局 3.javascript：页面交互 4.jquery：js的工具包 5.bootstrap：快速实现页面搭建的框架 前端：写网页、用户能看到的一切交互页面、app、小程序
2、HTML
1.HTML导读
1.内容概况：前端
1.什么是HTML：超文本标记语言 1.1 超文本：文本、图片、音频、视频、超连接 1.2 标记：符号、标签，用于解释，没有逻辑 2.语言的组成：转义字符、指令、标签 3.学习HTML的目的：完成页面架构的搭建（用什么标签完成什么样的标签嵌套关系）
2.熟悉HTML语法：java
<!--文档指令，建议出如今HTML文件的最上方，一个HTML文件只出现一次，HTML表示该文件采用HTML5语法进行编写-->
<!--每搭建一个页面就必需要写一个版本类型的语句，若是多写了，它会被放到body中-->
<!doctype html>
<!--html语言不区分大小写，能够在语句的任何位置使用大小写字母，推荐用小写，更容易理解-->
<!-- <html></html>是页面标签的意思，一个HTML文件只出现一次，包含全部页面内容，且只有头标签head与体标签body两个子标签，这两个子标签在一个HTML文件中都是只出现一次-->
<html>
<!-- <head></head>头标签：它包含页面样式、脚本、后勤操做（页面编码、标题和图标）-->
<head>
<!--页面标题标签，用来显示页面标签标题，如登陆百度页面，页面标签标题显示: 百度一下，你就知道-->
<title>第一个页面</title>
<meta charset="utf-8"> <!-- 规定文件编码的元标签，由于元标签只须要标注具体功能，不须要包裹内容，因此表明标签结束的斜杠写在标签的最后便可（能够省略）-->
<style></style> <!--页面样式标签，用来存放出如今head中的css3样式代码的标签-->
<script></script> <!--脚本标签，用来存放出如今head中的js脚本代码的标签-->
</head>
<!-- <body></body>体标签：页面显示内容的存放区域、样式、脚本-->
<body>
helloworld
<!--页面中全部显示给用户查看的内容：普通文本、图片、音频等等，通常都放在这里-->
<!--不显示给用户查看的内容：简单与复杂的系统标签、脚本标签以及隐藏的内容等，通常也会出如今这里-->
<style></style> <!--页面样式-->
<script></script> <!--脚本-->
<!--页面体标签的结束标识，与页面体标签的开始一同包裹页面主体部分全部显示给用户查看的内容（还包含其余不显示的内容）-->
</body>
<!--页面根标签的结束标识，页面的全部内容都应该出如今html标签内部（被HTML标签开始与结束包裹）-->
</html>
<!--若是在一个页面中写了多个文档指令或页面标签，则除了第一个的会保留原样外，其余重复的都会放在第一个页面的体标签中-->
3.补充：jquery
<!-- 关键词元标签，让该页面更容易被百度这样的搜索引擎，经过关键词搜索到--> <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> <!-- 网页描述元标签，也是辅助于让页面更容易被搜索引擎搜索到--> <meta name="description" content="80字之内的介绍网站的文字"> <!-- 屏幕适配元标签，让该页面适配移动端屏幕尺寸--> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> <!-- 设置页面标签 图片连接标签 --> <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
2.HTML相关内容
1.指令：css3
1.被尖括号包裹，以感叹号开头的书写格式就是指令 2.好比注释：<!-- -->，能够在里面用一个减号，可是推荐两个减号的写法 3.又好比指定文档类型的文档指令：<!doctype html>
2.转义字符(http://tool.oschina.net/commons?type=2)：bootstrap
1.被and和分号包裹，包裹内容能够是井号与数字的组合，也能够是多个字母 2.比较经常使用的有： 2.1 < —— 小于(<) 2.2 > —— 大于(>) 2.3 —— 空格 2.4 © —— 版权
3.标签：小程序
1.被尖括号包裹，以字母开头，后面能够接数字或减号 2.系统标签：h1~h六、P、span、div、i、b、a、img、hr、br、table、form、input 3.自定义标签：知足合法命名规范的全部标签 4.注意：HTML语言中，系统建议只使用系统标签，不建议使用自定义标签
3.HTML经常使用标签
1.自定义标签：架构
提倡规范命名的合法自定义标签 <num></num> <my-tag></my-tag> <student1></student1>
2.系统标签：
页面结构相关的系统标签 1.页面根标签：<html></html> 2.页面头标签：<head></head> 3.页面体标签：<body></body> 4.页面标题标签：<title></title> 5.元标签：<meta /> (熟练以后单标签中斜杠可写可不写) 6.连接标签：<link /> 7.样式标签：<style></style> 8.脚本标签：<script></script> 简单的系统标签 1.标题标签：<h1></h1> ... <h6></h6> 2.段落标签：<p></p> 3.换行标签：<br /> 4.分割线标签：<hr /> 5.行文本标签：<span></span>（通常用于嵌套其余文本标签） 6.斜体标签：<i></i> (推荐) 或 <em></em> (以斜体做为强调的强调标签) 7.加粗标签：<b></b> (经常使用) 或 <strong></strong> (以加粗做为强调的强调标签) 8.图片标签：<img /> 9.超连接标签：<a></a> 10.“架构”标签：<div></div> 11.角标标签：<sup></sup> (上角标) <sub></sub> (下角标) 复杂的系统标签（组合标签） 1.无需列表标签：<ul><li></li></ul> 2.表格标签：<table><tr><td></td></tr></table>或<table><tr><th></th></tr></table> <table><!-- 包含大量的表格子标签 --></table> 3.表单标签：<form><input></input></form> <form><!-- 包含大量的表单子标签 --></form>
3.实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<!-- 重点：<h1></h1>的语义：该页面的主标题 -->
<h1 title="样式，悬浮在此行文字的字体上">
一级标题
</h1>
<h2>
二级标题
</h2>
<h6>
六级标题
</h6>
正文文本 正文文本 <!--若是不加空格转义字符 或<br>换行标签，则不管空多少格或换行，都只会空出固定的一点点空隙-->
<!-- <p></p>段落标签：自带换行，有段落间距（不是行间距）-->
<p>
段落之间的间距不是行间距
</p>
<p>
通常段落间距比行间距要大
</p>
<!-- <br>换行标签，给文字换行-->
正文文本 <br>
正文文本 <br>
<!-- <span></span>行文本标签 -->
<span>通常用来嵌套其余文本类标签，好比：这是<sup>上角标</sup>，这是<sub>下角标</sub></span>
<!--<i></i>加粗标签-->
<i>加粗</i>
<!-- <a></a>:超连接标签-->
<!-- 全局属性href中写超连接的目标地址；全局属性target值为"_blank"时，会新开一个标签页面跳转到目标页面，默认值是_self，是在当前页面跳转 -->
<a href="https://www.baidu.com" target="_blank">百度</a><br>
<!-- 图片标签；属性title中的值能够在鼠标悬停时提示文本内容；当img标签资源加载失败时，会显示属性alt的值 -->
<img title="幽灵公主" alt="幽灵公主" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1564404410&di=d9fbb4c06e3fc427341ecd9dbc98488c&src=http://b-ssl.duitang.com/uploads/item/201609/30/20160930174809_BAyu3.thumb.700_0.jpeg" >
<!-- 列表标签：无序<ul><li></li></ul> 有序<ol><li></li></ol>
<!-- 能够用快捷方法：ul>li{第$列}*5，最后按Tab键-->
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
<!-- 表格标签：table>tr>th 或者 table>tr>td -->
<!-- tr:行 th:标题单元格 td:普通单元格 -->
<!-- border:边框；cellspacing:单元格的间距，最小为0,可是单元格之间是两条线，能够用rules="all"处理成一条线；cellpadding：单元格的内边距（文本于内边框的间距）-->
<table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<!--th{标题}*3,Tab键-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<!--表体-->
<tbody>
<!--(tr>td{$}*3)*2，tab键，两行三列-->
<!--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>
</body>
</html>
4.表单：
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>表单</title>
</head>
<body>
<!--form的做用：完成先后台数据的交互，将用户录入的信息提交给后台，或者上传文件-->
<form action="">
<p>
<!--label做为input的文本解释标签，for绑定input中的id -->
<!--value属性是表单标签的内容，用于提交给后台的数据；name是提交给后台的key，后台经过name取到输入的值；value是输入的值-->
<!--type决定标签的类型本质，能够是文本、密码、文件、按钮等等-->
<!--placeholder是文本占位符，用于显示给用户看须要输入什么内容；multiple：多选；checked默认激活；multiple和checked属于布尔类型属性，不须要赋值-->
<lable for="username">帐号：</lable>
<input id="username" type="text" value="king" name="user">
</p>
<p>
<label for="password">密码：</label>
<input id="password" type="password" placeholder="请输入密码" name="psw">
</p>
<p>
<input type="hidden" value="jfksdj" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
<!--type属性中的radio只能单选，checked是默认按了一次-->
男<input type="radio" value="male" name="gender" checked>
女<input type="radio" value="female" name="gender">
</p>
<p>
<!-- checkbox能够多选-->
男<input type="checkbox" value="male" name="gender" checked>
女<input type="checkbox" value="female" name="gender" checked>
其余<input type="checkbox" value="other" name="gender">
</p>
<p>
<!--button标签能够生成按钮-->
<!--button：普通按钮；reset：重置按钮；submit：提交按钮-->
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<!--input标签中用type属性能够生成按钮-->
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登陆" />
</p>
<p>
<!--文本区域标签能够生成一个可供输入文本的框-->
<textarea cols="30" rows="20">文本区域</textarea>
</p>
</form>
</body>
</html>
5.标签的分类：
按是否自带换行分类： 1.带换行：h一、p、div、table、form、tr、ul、li 2.不带换行：span、i、b、a、img、input、button、label、textarea 按单双标签分类（也便是有的标签既是开始也是结束，斜杠能够省略）： 1.单标签（主功能）：br、hr、input、img、link 2.双标签（主内容）：html、head、body、h一、p、span、div、a、label、button 注意：斜杠/ 表明标签的结尾，可是单标签能够省略，好比<br/>能够直接写成<br> 按简单标签或组合标签（复杂标签）分类： 1.组合：ul>li table>tr>td|th form>input 2.简单标签：其余
4.w3c页面架构分析
重点是将整个页面分红若干个版块，这些版块之间有明显的分区差异，而后再将各个版块细分红更小的结构，直至可以细化到具体的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面架构</title>
</head>
<body>
<!--
html学习目的：(何时用什么标签)
最内层：h1~h六、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>
3、CSS
1.css导读
一、css是什么：级联样式表 （Cascading Style Sheet）。属于标记语言，没有逻辑 二、css做用：设置页面样式(长什么样)与页面布局(标签位置) 三、学习的内容： 3.1 css如何控制html标签 - 经过给HTML的标签添加属性，来创建联系 - css选择器 3.2css能够控制的样式(样式与布局) 3.3css如何导入到html文件中 四、学习目的：完成页面的样式
2.css三种引入方式
1.css是来控制页面标签的样式，可是能够根据实际状况书写在不一样的位置，放在不一样位置有不一样的专业叫法，能够分为行间式、内联式和外联式三种
2.行间式：css样式书写在标签的style全局属性中，一条样式格式为 style="样式名: 样式值 单位; 样式名: 样式值 单位;"，能够同时出现多条样式
3.内联式：css样式书写在head标签内的style标签中，样式格式为：
<style>
css选择器 {
样式块
}
</style>
样式块由一条条样式组成
4.外联式：css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
1.行间式：在标签的style属性中书写样式；优势是能够直接书写；缺点是可读性较差、没有复用性
2.内联式：在head标签中的style标签内书写样式；优势是可读性强，有复用性；缺点是样式被HTML绑定，不能提供给其余HTML页面使用
3.外联式：在外部css文件中（CSS Stylesheet文件）书写样式，在HTML文件中经过link标签引入css文件；优势是可读性强，有复用性，适合团队开发（文件级的复用性）
# html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
<!--二、内联式-->
<!--书写位置:在head标签中的style标签内-->
<!--css语法：css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用-->
<style>
h2 {
color: red;
font-size: 100px;
text-align: center;
}
</style>
<!--三、外联式-->
<!--书写位置:在外部css文件中，在html文件中经过link标签引入css文件-->
<!--css语法：css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)-->
<link rel="stylesheet" href="css/样式引入.css">
</head>
<body>
<!--一、行间式-->
<!--书写位置:在标签的style属性中书写样式-->
<!--优缺点: 可读性差，没有复用性，书写直接-->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
# 外部css文件中
/* css/样式引入.css */
h3 {
color: green;
}
h4 {
font-size: 50px;
text-align: center;
}
3.三种css引入方法的优先级
1.内联与外联之间没有优先级区别，因为HTML属于解释型语言，书写一行执行一行，所以书写在下方的会覆盖掉上方的样式
2.行间式的优先级高于一切
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>\
<!--优先级：
一、内联与外联之间没有优先级区别，因为html属于解释性语言，书写在下方的会覆盖上方的样式
二、行间式的优先级要高于一切
-->
</head>
<body>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4 style="font-size: 100px">h4标签</h4>
</body>
<style>
h4 {
color: #ff7800;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>
4.css基础选择器
1.css选择器的本质就是css与HTML两种语法创建关联的特定标识符
2.就是在CSS语法中，经过HTML中标签的某种名字，与HTML具体的标签创建关联，从而使写在对应CSS选择器后的CSS样式能控制HTML中关联的标签或标签们
3.而表示标签名字的方式有多种，每一种名字在CSS语法中都对应着一种特定标识符
4.基础选择器有：通配选择器、标签选择器、class选择器（推荐）、id选择器
5.优先级：!important > 行间式 > id选择器> 类选择器 > 标签选择器 > 通配选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器</title>
<style>
/*优先级：能够从做用范围来判断 - 做用范围越精确，优先级越高 */
/*一、统配选择器*/
* {
color: pink;
font-size: 12px;
}
/*二、标签选择器*/
h1 {
font-size: 20px;
}
/*三、类选择器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*四、id选择器*/
#hhh {
font-size: 100px;
}
/*优先级：!important > 行间式 > id > class > 标签 > 统配 */
</style>
</head>
<body>
<h1 class="h">1标题</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>
<!-- #id值，而后Tab键，能够直接打印id--> <!-- .类名，而后Tab键，能够直接打印类-->
相关文章
- 1. Python之路【第十六篇】Django基础
- 2. Python之路【第十六篇】：Django【基础篇】 Python之路【第十六篇】：Django【基础篇】
- 3. Web前端基础(19):jQuery基础(六)
- 4. 前端——第六天
- 5. 前端：第六天
- 6. 前端第六波
- 7. python基础篇（六）
- 8. Flask第十六篇 Flask-SQLAlchemy
- 9. web前端学习-第十六天
- 10. 第六十四篇 索引
- 更多相关文章...
- • R 语言基础 - R 语言教程
- • Scala 基础语法 - Scala教程
- • RxJava操作符（六）Utility
- • Kotlin学习（一）基本语法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章