H5
前端
1 什么是前端
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript
2 前端开发的技术栈
HTML
-
超文本标记语言 Hyper Text Markup Language
-
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
-
负责完成页面的结构
CSS
-
级联样式表 Cascading Style Sheet
-
负责页面的风格设计，样式、美观
JavaScript
-
浏览器脚本语言，可以编写运行在浏览器上的程序
-
妥妥的编程语言
-
负责编写页面特效、调用浏览器的API(BOM)、操作改变页面内容(DOM)，从后端获取数据(Ajax),渲染页面等
-
jQuery是JavaScript的一个库
-
Vue、Angular、React 等是JavaScript 框架
第一节---HTML
1 HTML 基本语法
html标签
-
单标签
<img />、<img> -
双标签
<html> </html>
属性 属于标签
<img src="图片的地址">
<table width="100" height="200"></table>
语法规范
-
标签嵌套 用缩进
-
标签名 不区分大小写 建议小写
-
属性名 不区分大小写 建议小写
注释
<!-- 多行 -->
<!--
多行
-->
网站的搜索引擎优化(指定网站的源信息)
<meta charset="utf-8">
<meta name="keywords" content="默默交友,交友平台,90相亲">
<meta name="description" content="内容简介">
网站的图标
<link rel="shortcut icon" type="image/x-icon" href="kuaibo.jpg">
常用HTML实体
-
空格 -
<< -
>> -
&；& -
©；版权 -
¥；人民币
2 HTML常用标签
主体结构
-
<html></html> -
<head></head> -
<body></body>
HEAD标签
-
<title></title>网站标题 -
<meta>指定网页的元信息 指定关键字 指定描述 指定字符集 属性： charset、name、content -
<style></style> -
<link>导入css或者指定网页图标 属性 src、 type 、 rel -
<script></script>导入javascript
格式排版标签
-
<hn></hn>1~6 标题 -
<p></p>段落 -
<pre></pre>原样输出 -
<br>换行 -
<hr>分隔 -
<div></div>
文本标签
-
<em></em>强调 表现为斜体 -
<strong></strong>强调 表现为粗体 -
<mark></mark>H5新增 表示被选择 -
<sup></sup>上标 -
<sub></sub>下标 -
<ins></ins>添加的内容 -
<del></del>删除的内容 -
<ruby></ruby>/<rt></rt>加拼音 H5新增<ruby>
默默 <rt>momo</rt>
</ruby>
4 CSS基本语法
使用CSS
-
link 引入外部的CSS文件
-
<style></style>在html中写 -
使用html元素的style属性
格式
选择器 {
CSS属性: 值;
CSS属性: 值;
}
选择器 {属性:值;属性:值}
注释
/* */
CSS长度单位
px 像素
em 默认大小的倍数
百分比 默认大小参照
cm 非常不推荐使用
mm 非常不推荐使用
CSS 颜色单位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)
r占一个字节 8个bit位
16进制 #abcdef #f90 #ccc
# 8位二进制对应2位十六进制
# 000 是最黑 fff是白
小案例:
div {
width: 400px;
height: 400px;
border: 2px dotted red;
background-color: purple;
/*
R 红
G 绿
B 蓝
*/
background-color: rgb(100, 200, 50);
background-color: rgb(100%, 50%, 10%);
/*
十六进制
*/
background-color: #ab1234;
background-color: #abcdef;
background-color: #336699;
background-color: #369;
background-color: #f90;
background-color: #fff;
background-color: #000;
background-color:#c1c1c1;
}
5 CSS选择器
#标签名选择器
tagName {
}
# 类名
.className {
}
#ID选择器
#idName {
}
# 全局选择器
* {
}
# 组合 后代元素
选择器 选择器
# 组合 子元素
选择器>选择器
# 群组
选择器,选择器，选择器
# 多条件
p.item
选择器小案例