Web开发分成前端(HTML+CSS+JS)+后台(Java/PHP/.net/JS)
1. 前端基本概念
- 网页 == 页面
- 网站(知乎、豆瓣、简书、淘宝、天猫、京东、百度、hao123)
网站好比一本书，网页就是书当中的一页。
2. 工作基本内容
- 开发：用代码编写网页
- 发布：把网页放到网站(服务器 == 特殊的计算机)
3. 理解概念
- 服务器：提供计算服务的计算机（提供网站访问功能的计算机）。
- 客户端：连接到服务器，代理服务器提供功能的软件(QQ客户端、微信)。
- 浏览器：访问网站的显示网页的客户端。
浏览器软件：
谷歌：Chrome
火狐：FireFox
微软：IE6~IE11、Edge
4. 前端开发语言
编写网页使用的语言
|语言|作用|类比|
|:-|
|HTML|结构|毛坯房|
|CSS |表示|装修 |
|JS |行为|家电器|
5. HTML (Hyper Text Markup Language 超文本标签语言)
5.1 背景
- 标准版本：HTML4.01 HTML5
- 标准制定者：W3C
5.2 简介
- 超文本 --> 普通文本(由文字构成的文件)/超文本(图片、视频、音频、超链接、游戏、软件)
- 标签语言 --> 由标签/标记构成语言
5.3 标签语法
- 标签的基本写法：
以<开始，>结束，中间书写英文关键字。
成对标签(双标签)：开始标签与结束标签构成，结束标签比开始标签多一个/。 - 标签功能：
在页面上是不显示的，指示浏览器如何显示标签里面的内容。 - 举例：
<html></html>
5.2 页面基本套路
<html>
<head>
<title>你好</title>
</head>
<body>
Hello World
</body>
</html>
注意事项：
- 标签可以嵌套，但是只能包含嵌套，不能交叉嵌套。
- 关键字可以全部小写(
<html>)，也可以全部大写(<HTML>)，也可以大小混合(<hTMl>)，但是通常使用全部小写。 -
html/head/body三个标签是可以省略的，通常，这三个标签必须写。
6 HTML标签
标题标签
h1~h6
效果：字体加粗，上下有空白行。从h1到h6字体从大变小。
注意：在HTML如果使用没有定义的标签，标签会被忽略掉。段落标签
p
效果：文字在同一个段落中，上下有空白行。
注意：如果没有p标签，所有的文字默认在同一个段落中。水平分割线
hr
效果：增加一条水平线
注意：hr是单标签无序列表
ul(unorder list)li(list item)
ul效果：单独产生一个段落。
li效果：在每个项目文字前加上了一个项目符号(小黑点)，并且每个项目前增加空白。有序列表
ol(order list)li(list item)
ul效果：单独产生一个段落。
li效果：在每个项目文字前加上了一个项目符号(序号)，并且每个项目前增加空白。
注意：
-
li不要单独使用，需要与ul/ol成套使用。 - 列表项目文本要放在
li标签内部，不要在其他位置放置文本。
- 列表的嵌套：只需要把列表写在对应的li内部即可。
无序列表嵌套时，项目符号会发生改变，从实心圆(disc)变成空心圆(circle)，最后变成实心方块(square)。
在window下默认扩展名是隐藏的，需要把扩展名显示出来。
Win7下：组织->文件夹与搜索选项->查看，在高级设置中，去掉[隐藏已知文件类型的扩展名]勾选，点击确定。win10可参考点击这里
- 字符实体/转移字符：显示页面中特殊符号。
|符号|字符实体|含义|
|:-|
|<|& lt;| less than|
|>|& gt|greater than|
|半角空格|& nbsp;|||
- 在标签中文本多个连续的半角空格只显示一个，全角空格不受影响。
如何在段落中增加多个连续空格？
- 使用全角空格
- 使用字符实体
在标签中文本有多个连续回车换行显示一个半角空格
如何在段落中增加回车？
使用单标签<br/>加粗标签
b(bold)
效果：字体加粗下划线标签
u(underline)
效果：字体下划线斜体标签
i(italic)
效果：字体斜体文本预处理
pre
效果：可以显示标签中文本中的多个连续半角空格和回车换行
小结
结构标签：html、head、body、title
-
head标签主要给浏览器提供信息 -
body标签主要负责在页面中显示内容
文本标签
- 标题
h1~h6 - 段落
p - 文本预处理
pre - 水平线
hr - 回车
br - 无序列表
ulli - 有序列表
olli - 定义列表
dldtdd - 字体标签
font
color字体颜色
size字体大小(1~7)
face字体 - 加粗
b斜体i下划线u
属性
- 语法：
<关键字 属性名="属性值"></关键字>
<关键字 属性名="属性值" />
Sublime Text 快捷键
|快捷键|作用|
|:-|
|Alt+F3| 全选正当中当前选中的字段|
|Ctrl+Shift+g| 给当前选中的字段添加标签|
- 编码
- GBK/GB2312~ANCI -- 国家标准
- UTF-8 -- 国际标准
所有页面统一使用UTF-8编码
指定当前页面的编码方式：<meta charset="UTF-8">
问题：
- 如何使用记事本修改文件的编码方式？
- 如何使用SublimeText修改文件的编码方式？
- 页面出现乱码，如何修改浏览器显示页面的编码方式？
多媒体标签
- 图像/图片标签
img
属性
src="图片路径"
alt="图片说明"
title="图片标题"
- 路径：找到文件
- 绝对路径：从盘符开始直到文件名的路径。
- 相对路径：从当前文件出发找到相应的文件名的路径。
当前路径：./
上一层路径：../
上上一层：../../
上上上一层：../../../
依此类推
路径中的斜线与反斜线
-
/通用的路径分隔符。适用于Windows / Linux / Mac -
\\Windows专用的路径分隔符
注释
- 语法：
<!-- 注释内容 -->
浏览器不作解释与显示处理
- 作用：
- 代码说明
- 使部分代码不被解释或者执行
SublimeText 添加与取消注释快捷键：
Ctrl+/
超链接标签a
- 属性
href="将要跳转到的网页路径"
target="_self/_blank"
说明：
_blank：在新的页面中打开要跳转的网页_self：在当前页面中打开要跳转的页面文本超链接
<a href="网页路径">说明文字</a>
超链接默认效果：说明文字自带下划线，初始颜色为蓝色，点击时颜色为红色，点击之后为紫色。跳转到页面的开始部分。
- 图片超链接
<a href="网页路径">
< img src="图片路径" />
</a>
- 锚效果：跳转到页面指定位置
回到顶部
<a href="#">回到顶部</a>
跳转到页面指定位置
- 指定跳转的位置。
- 添加超链接。
例如：书签
- 邮件超链接
<a href="mailto:zhangsan@qq.com">我的邮箱</a>
表格table
- 表格默认效果：无边框、整体左对齐、文字左对齐
-
table表格标签
属性
border 边框宽度
width 表格宽度
height 表格高度
align="left/center/right" 表格整体水平(横向)对齐
bordercolor 边框颜色(非标准属性)
cellpadding 单元格边框与内容之间的间距
cellspacing 单元格与单元格边框间距
-
tr行标签
align="left/center/right"行内文本水平(横向)对齐 -
td单元格标签
align="left/center/right"单元格内文本水平(横向)对齐 -
th表头单元格标签
默认效果：文本加粗居中
单元格合并
- 跨列合并
colspan - 跨行合并
rowspan
合并单元格的属性写在左上角的
td里面，并删除多余的td
表格区域
-
tbody：表格主区域(如果表格没有指定区域，默认所有的tr/td都属于tbody，并且会自动添加tbody标签) -
thead：表格头部区域 -
tfoot：表格底部区域
tbody、thead、tfoot编码的顺序不会影响表格页面显示的顺序，即，thead永远显示在表格的开头，tfoot永远显示在表格的底部，tbody显示在thead与tfoot中间。
caption表标题标签
注意：除了
caption，表格内部的内容，必须写在td标签内部，否则，显示到表格外部。
表单
- 作用
- 收集数据
- 向服务器提交数据
- 表单标签
form - 表单元素标签
- 输入框(默认为文本框)
input - 按钮
button
如何使文本框变成密码框？给
input标签加上type="password"属性
如何使单选框/单选按钮实现单选功能？给同一组的单选框添加同名的name属性
- 提交按钮的实现方式：
-
button添加属性type="submit" <input type="submit"/>
- 重置按钮的实现方式：
-
button添加按钮type="reset" <input type="reset"/>
- 普通按钮的实现方式：
-
button添加按钮type="button" <input type="button"/>
- 图片按钮的实现方式：
<button>< img src="图片路径" /></button><input type="image" src="图片路径"/>
初始值
- 单选框初始值设置：添加属性
checked="checked" - 复选框初始值设置：添加属性
checked="checked" - 文本框初始值设置：添加属性
value="任意文字" - 下拉列表初始值设置：在对应的
option标签添加属性selected="selected" - 文本域初始值设置：在
textarea标签内添加任意文字
在HTML5中给文本框和文本域提供了占位符属性
placeholder，提示用户需要填写的内容。当用户填入内容时，提示信息消失，如果输入框内容为空的时候，提示信息会显示。
