2021科协前端培训

HTML
- 概念
- 语法
- 标签学习
- 表单
CSS
- 概念
- 作用
- CSS 规则
- 引入CSS样式表
- - 内联样式
  - 内部样式表
  - 外部样式表
- CSS基础选择器
- CSS扩展选择器
- CSS字体样式(font)
- CSS背景(background)
- 页面布局
- 盒子模型
- - 盒子边框(border)
- 浮动
- - 清除浮动
- 常用布局

HTML

概念

全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过标签将网络上的文档格式统一，是分散的Internet资源链接为一个逻辑整体。它可以说明文字、图形、动画、声音、表格、链接等。

1.超文本：
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息相关联。

2.标记语言：
标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。他与文本相关的其他信息结合起来但是使用标记进行标识。

语法

1.html文档的后缀名是.html或.htm。
2.标签特点：

  （1）由尖括号包围的关键词组成，如<html>（2）可分为单标签和双标签双标签：有开始标签和结束标签，如<body></body>单标签：开始标签和结束标签在一起，如<hr>（3）在开始标签内部可以定义属性，（4）标签不分大小写，建议使用小写（5）标签可以嵌套

标签学习

1.文件标签：

 <!--注释内容--><!DOCTYPE html>：表示该文件是html文件，使用h5的标准解析<html>：定义html文件<head>：所有头部文件的容器，是引入外部元素的位置<title>：定义浏览器工具栏中的标题，在所有的html文件中是必须的<body>：定义文档的主体部分，包含文档的所有内容

2.文本标签：

<h1>到<h6>：标题标签，字体大小由大到小
<p>：段落标签，定义段落、】
<hr>：定义水平线，单标签
<br>：换行标签，定义换行
<b>：加粗标签，将内部文字加粗
<i>：倾斜，将内部文字倾斜
<center>：居中标签，将内部文字相对网页居中

3.图片标签：

<img src=””>：图片标签，src用于指定图片文件位置，单标签
相对路径：./：表示当前文件目录，如：./img/图片.jpg。../：表示上一级目录。

4.链接标签：

<a>定义一个超链接
属性：herf：指定访问资源的URLtarget：指定打开资源的方式_self：默认值，在当前页面打开_blank：在空白页打开

5.表格标签：

<table>：定义表格width：宽度border：边框cellpadding：框线与内容的距离cellspacing：单元格之间的距离bgcolor：背景颜色align：内容的对齐方式
<tr>：定义表格的一行height：行的高度bgcolor：背景颜色align：内容的对齐方式
<td>：定义一个单元格colspan：合并列rowspan：合并行width：设置单元格的宽度

6.转义：

&nbsp;：空格
&lt：<
&gt：>

7.列表标签：

<ol>，<li>：有序列表
<ul>，<li>：无序列表
<dl>，<dt>，<dd>：自定义列表

8.div和span

<div>：占一行，定义一个区域，常用于组合块级元素
<span>：用于对文档中的行内元素进行组合

表单

 概念：用于与服务器进行交互。<form>：表单最外层，表示此区域用于与用户进行交互action：指定提交数据的URLmethod：指定交互的方式常用的两种：get：请求参数会显示在地址栏中，内容大小有限制，不安全。post：请求参数不会显示在地址栏中，内容大小没有限制，较安全。<input>：表单最基本的标签，用户输入数据的位置type：input的属性，表示input的类型text：文本输入框placeholder：指定输入框的提示信息passward：密码输入框radio：单选框name：必须设置相同的name才能实现单选效果value：被选中时提交的数据checked：指定默认值checkbox：复选框button：按钮submit：提交按钮reset：重置按钮file：文件选择按钮img：图片提交按钮

CSS

CSS：样式渲染、网页美化、页面布局

概念

CSS(Cascading Style Sheets)
通常称为CSS样式表或层叠样式表(级联样式表)。
层叠就是多个样式可以作用在同一个html的元素上，同时生效。

作用

结构(html)与样式(css)分离。
让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS。
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局，

• 降低耦合度。解耦
• 让分工协作更容易
• 提高开发效率

CSS 规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 html 元素。
每条声明由一个属性和一个值组成。
属性（property）是你希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分开。

CSS 注释

/* 这是注释 */

引入CSS样式表

CSS与html结合方式

内联样式

通过标签的style属性来设置元素的样式

style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<!--例如：改变段落的文字颜色和大小-->
<p style="color: red; font-size: 12px;">这是一个段落</div>

内部样式表

也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css"  在html5中可以省略。

<head><style type="text/CSS">选择器（选择的标签） { 属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}</style>
</head>

外部样式表

也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

<link rel="stylesheet" href="index.css">

CSS基础选择器

CSS选择器作用：找到指定的HTML页面元素，选择标签。

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

CSS扩展选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是`空格` .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是`>` .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	`没有符号` p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是`逗号` .nav, .header
链接伪类选择器	给链接更改状态		较多	`a:link` 未访问的链接 `a:visited` 已访问的链接 `a:hover` 鼠标移动到链接上 `a:active` 选定的链接

CSS字体样式(font)

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

CSS背景(background)

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标，切记如果有精确数值单位，则必须按照先X后Y的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

页面布局

标签显示模式(display)

标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。

标签显示模式转换 display

- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块：display: inline-block;

三种模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

盒子模型

网页布局的本质

首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
最后把网页元素比如文字图片等等，放入盒子里面。

W3c标准盒子模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content
盒子的实际大小：内容的宽度和高度 + 内边距 + 边框

注意：width和height设置的都是content的内容

盒子边框(border)

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

内边距(padding)
padding属性用于设置内边距。是指边框与内容之间的距离。

外边距（margin）

margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离

块级盒子水平居中盒子指定宽度（width）
然后给左右的外边距都设置为auto常见的写法，以下下三种都可以
margin-left: auto;  margin-right: auto;
margin: auto;
margin: 0 auto;

文字居中和盒子居中区别1. 盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐
2. 块级盒子水平居中  左右margin 改为 auto

浮动

优点：1. 实现层叠布局,简单实现精美布局2. 实现文字环绕3.解决行内元素不能设置宽高属性问题......缺点：父元素塌陷问题

清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

1.添加额外标签清除浮动。

    <div class="parent"><div class="f"></div><div style="clear:both"></div></div>

优点：通俗易懂，容易掌握。
缺点：添加了无意义的空标签，后期不好维护。

2.添加<br>标签，使用<br>标签本身的的clear属性

    <div class="parent"><div class="f"></div><br clear="all"></div>

优点：通俗易懂，容易掌握。
缺点：添加了无意义的空标签，后期不好维护。

3.父元素设置overflow:hidden

    <div class="parent" style="overflow:hidden"><div class="f"></div></div>

优点：代码量少。
缺点：内容较多时不换行的文件会被隐藏，无法显示溢出元素。

4.使用伪元素:after（推荐使用）

    .parent:after{content:"";visibility:hidden;display:block;width:100%;height:0;clear:both;}<div class="parent"><div class="f"></div></div>

优点：结构和语义正确，没有多余的标签，一般不会产生新的问题。
缺点：复用方式不当会造成代码量增多。

常用布局

float（浮动）
static（默认）

Position：static；
默认值。也就是按照文档的流式（flow）定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。
Static定位不能通过z-index进行层次分级。
relative（相对定位）

Position：relative；
在static基础上，让元素在它本来的位置上有一定的偏移。
通过设置left/right、top/bottom值来实现。
相对定位的元素没有脱离文档流，仍处于文档流中，依然占据原来的位置，虽然它已偏移。
相对定位相对的元素是它自身在文档流中的位置。
absolute（绝对定位）

Position：absolute；
使用绝对定位将一个元素放到文档（Document）中的指定位置。
也是通过设置left/right、top/bottom值来实现。
绝对定位的元素参照的是离它最近的父元素（非static定位）。通常采用“子绝父相”的定位方式。
fixed（固定定位）
Position：fixed；
固定定位的元素的参照物始终是整个文档（viewport）。
通过设置left/right、top/bottom值来让某一个元素定位在浏览器文档的某一个位置。
它与绝对定位的不同之处是：绝对定位的参照是离它最近的非static定位的父元素，而固定定位的参照始终是viewport。
sticky（粘性定位）
Position：sticky；
不论页面如何移动，当页面将元素移出可视区域时，固定于页面上。

2021年信息学部物联网工程学院学生科协前端大培训相关推荐

2021年信息学部物联网工程学院学生科协第二次软件大培训
2021年信息学部物联网工程学院学生科协第二次软件大培训一.指针是什么 1.地址 2.指针二.指针的简单使用 1.两个运算符&和* 2.实战演练 3.指针的特殊赋值方式 4.悬摆指针的危害 ...
2021年信息学部物联网工程学院学生科协算法科普
2021年信息学部物联网工程学院学生科协算法科普一.什么是算法二.算法重要吗三.算法有好坏吗四.常用算法介绍 1.查找算法概述顺序查找二分查找 2.排序算法概述冒泡排序选择排序快 ...
2021年信息学部物联网工程学院学生科协第二次硬件大培训
2021年下半学年第二次硬件培训 1.Multisim部分准备阶段 multisim简介 Multism 界面介绍三极管简介 H桥简介运算放大器实战阶段绘制电路仿真图不需要重新发明轮子基 ...
2021年信息学部物联网工程学院学生科协第三次软件大培训（python）
Python入门 Python介绍 Python基本语法标准数据类型 Python 的print Number(数字) Python 的变量赋值可以写在一行上变量的定义.类型.与运算 String ...
2021年信息学部物联网工程学院学生科协后端科普
后端科普后端科普一.什么是后端二.为什么要学后端 1. 后端发展历史 2. 后端技术优势 3. 后端发展前景 4. 后端行业资讯后端科普一.什么是后端什么是前端? 简单来说前端就是我们能看 ...
2021年信息学部物联网工程学院学生科协机器学习科普
机器学习科普机器学习科普一.什么是机器学习? 二.机器学习的定义三.机器学习在一些领域中的应用 1.机器视觉 2.语音识别 3.自然语言处理 4.小结四.机器学习的方法回归算法决策树神经 ...
2022年信息学部物联网工程学院学生科协第一次软件大培训
2022年信息学部物联网工程学院学生科协第一次软件大培训运行第一个程序 Hello World 代码代码分析什么是函数这是我们在数学学习中学习到的函数,一个x值有与之对应的唯一的y值,对于程序 ...
2022年信息学部物联网工程学院学生科协机器学习科普
什么是机器学习机器学习是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之 ...
2022年信息学部物联网工程学院学生科协第二次软件大培训
指针地址是什么指针与指针变量有关指针的运算符定义指针变量用代码来理解指针避免访问悬摆指针!!! 指针的运算含义指针的关系运算指针访问数组元素通过指针实现一维数组的遍历分步骤图解代 ...

2021年信息学部物联网工程学院学生科协前端大培训