一、编辑器
pycharm | sublime | Hbuild | webstrom | atom
二、前端
# 前端概念
# 广义: 用户能看见并且交互的展示界面
# 狭义: 运行在浏览器上的页面
# 学习的语言
# html5 => (h5架构 + css3布局 + javascript逻辑)
# 网页编写 | 移动端应用编写 | (客户端编写)
# 前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万,前端就是h5
三、HTML: 超文本标记语言
# 学习html的目的: 完成页面结构的搭建 (什么时候用什么标签)
# html属于标记语言: 标记语言为非编程语言，不具备编程语言具备的程序逻辑
# html三大组成:
'''
标签：被尖括号<>包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签;
指令：被尖括号<>包裹，由!开头的标记。eg：<!doctype html>（声明文件类型） <!-- -->（注释）
<!-- 指令: 由<>包裹, !开头的标记(两个):文档类型 | 注释 -->
<!--注: 文档类型必须出现在最上方-->
<!--注: html语法不区分大小写 -->
转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:< 小于 < | > 大于 > | 空格
'''
1、标签
# what
# 标签的概念: 被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号
# why
# 标签具有特定的功能: 换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频
# 注意
# 标签都有头有尾, 用/来标识标签的结束(用来标识尾) eg：<h1></h1>结尾标识
2、页面
# HTML页面模板
<!-- html的注释: 一个html页面有且只有一个页面模板 -->
<html>
<head>
<!-- 字符编码 -->
<meta charset="utf-8">
<!-- 页面标签的标题 -->
<title>页面</title>
<!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
</head>
<body>
<!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
<!-- js脚本 -->
</body>
</html>
3、常用标签
![]()
![]()
# 学习的目的: 使用标签的语义与功能 | 完成页面架构的搭建(div)
# 1.div: "三无", 无语义,无功能,无样式, 完成页面架构的搭建
# <div></div> 常用于整合结构 将一段独立的代码放入其中
# 2.h1: 页面总标题, 代表页面'整体含义', 出现一次即可
# 3.列表: ul>li*5 （简化后的书写方式） 无序列表
得到的结果为：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
# 注： 有序列表为ol
# 4.p: 段落标签 段落自带换行
# 5.img: 图片标签, src(数据源), alt(资源加载失败的文本提示)
# <!--src: 数据源 -->
# <!--alt: 资源加载失败的文字提示 -->
# <!--width|height: 设置一个,另一个会等比缩放(同时设置很可能导致图片失真)-->
# 6.a: 超链接标签, href(超链接地址), target(转跳方式_self|_blank), 锚点
# <!--href: 链接的地址-->
# <!--target: _self|_blank -->
# <!--title: 鼠标悬浮提示, 可以给任意标签添加-->
# eg ：<a href="https://www.baidu.com" target="_blank" title="鼠标悬浮提示">前往百度</a>
#b：<!--锚点: 快速定位到页面指定位置--> eg:<a href="#top">返回Top</a> 返回顶部
# 7.常用的文本类标签: span i b
# <span>文本标签</span>
# <i>斜体</i><em>斜体方式强调</em>
# <b>加粗</b><strong>加粗方式强调</strong>
# <sup>上角标</sup><sub>下角标</sub>
# 8.表格标签:table
<!--table>(
caption{标题}+
(thead>tr>th{标题}*3)+
(tbody>(tr>td{单元格}*3)*2)+
(tfoot>tr>td{单元格}*3)
)--> # 创建表格的简写方式
<!--table
border: 表格边框宽度
cellspacing: 单元格之间的距离
rules: all(全部) | groups(组线) | rows(行线) | cols(列线)
cellpadding: 内容距上距左的距离
--> # 为表格设置参数
案列：
<table border="10" width="500" height="300" cellspacing="0" rules="all" cellpadding="20">
<caption>表格标题</caption>
<thead>
<tr>
<!--th{标题}*3-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<!--(tr>td{单元格}*3)*2-->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<!--tr>td{单元格}*3-->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
View Code
四、CSS: 样式层级表
# 学习CSS的目的: 完成页面布局(还原设计稿)
# 三大组成部分
'''
选择器：由标签、类、id单独或组合出现
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式
'''
1、选择器
# what: 用来将css与html建立关联的桥梁, 称之为css选择器
# why: 将原来出现在标签内部的样式分离开来, 可以用一个个选择器加以管理, 达到页面与样式的解耦合目的, 从而提高代码的复用性与开发效率
# 本质: 就是页面标签的某种名字
2、css三种引入方式
# 1.行间式
'''
i)写在标签的style属性中
ii)属性 与 属性值 间用:赋值
iii)属性 与 属性 之间用;隔开
'''
# 2.内联式
'''
i)写在style标签中(style标签一般出现在head标签中)
ii)用选择器与html建立连接
iii)样式块书写在作用域内
'''
# 3.外联式
'''
i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中
ii)用选择器与html建立连接
iii)样式块书写在作用域内
iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径">
'''
# 注: 选择器的应用场景在 内联式 和 外联式
'''
总结:
开发: 最常用的是外联式, 内联与行间辅助样式布局
测试: 内联式, 可读性最强, 且解耦有复用性
行间的应用场景: 最简单粗暴, js操作的样式都是行间式
'''
案例：
![]()
![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式导入</title>
<style>
/*css注释: 书写在style标签内部的要采用css语法*/
/*
p: 选择器
{}: 作用域
宽高背景颜色: 样式块
*/
p {
width: 150px;
height: 150px;
background-color: yellow;
}
h2 {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--1.行间式-->
<!--
i)写在标签的style属性中
ii)属性 与 属性值 间用:赋值
iii)属性 与 属性 之间用;隔开
-->
<div style="width: 100px;height: 100px; color: rgb(17, 119, 0);">></div>
<div style="width: 100px;height: 100px; color: rgb(17, 119, 0);">></div>
<!--2.内联式-->
<!--
i)写在style标签中(style标签一般出现在head标签中)
ii)用选择器与html建立连接
iii)样式块书写在作用域内
-->
<p></p>
<p></p>
<h2></h2>
<h2></h2>
<!--3.外联式-->
<!--
i)css样式完全与html文件脱离, 形成单独的.css文件, 样式书写在.css文件中
ii)用选择器与html建立连接
iii)样式块书写在作用域内
iv)要将.css文件与.html文件建立关联
-->
<h3></h3>
<h3></h3>
<!--注: 用link标签将css文件与html文件建立连接
<link rel="stylesheet" href="css文件的相对路径">
-->
<!--总结:
开发: 最常用的是外联式, 内联与行间辅助样式布局
测试: 内联式, 可读性最强, 且解耦有复用性
行间的应用场景: 最简单粗暴, js操作的样式都是行间式
-->
</body>
</html>
View Code
浙公网安备 33010602011771号