- 前端/全栈工程师技术开发方向：了解
- PC端网站：企业网、电商网、中后台管理系统
- 移动端网站：
- 手机App
- 各种小程序：
- 微信小程序
- 支付宝小程序
- 钉钉小程序
- 百度小程序
- 抖音小程序
- 桌面应用程序
- Internet：国际互联网了解
- Internet上的应用：了解
- 在线听歌
- 在线看短视频
- 远程医疗
- 发电子邮件
- 玩网游
- 网上交友
- 网上购物
- 浏览网页：万维网
- 万维网 world wide web 缩写www 简称web 网站 掌握
万维网服务：浏览网页的服务
www主机名默认：提供万维网服务：浏览网页服务的主机—服务器
mail.163.ccom
mail主机名：邮件收发服务
- HTML (HyperText Markup Language):
超文本 标记 语言 掌握
超文本：超链接文本
标记：用来标记某个位置插入什么内容
- HTML干啥用的：写网页的
- HTML长什么样子呢？<标记>
- HTML页面由<标记>构成
- <标记名>作用：标记某个位置插入什么内容
<a>标记这个位置插入一个超链接
<img>标记这个位置插入一个图片
<p>标记这个位置插入一个段落
说明：如何查看网页 “源代码”
- URL：统一资源定位符 精通
功能：用来在Internet上定位网络资源的地址格式
URL地址格式构成：
协议://ip或域名:端口号/URI
协议:// 通信标准
- Web协议 http:// https://
- 文件传输协议： ftp://
- 邮件协议： mailto://
ip：相当于互联网上Id,不同的网络设备在互联网上必须有唯一IP
ip 域名
106.39.171.134 jd.com
59.82.122.115 tmall.com
103.56.18.188 qhdlink.cn
Ip缺点：不好记忆
解决：域名：给IP起一个好记忆的别名
:端口号 每个软件在操作系统上都必须有唯一的端口
http默认端口: 80
https默认端口：443
mysql 端口：3306
URI：统一资源标识符，代表网站根目录下面的子目录及文件
分析：
协议:// 域名 URI
婚纱照-美好人生 找到的是网站根目录
要想找到对应的文件夹和文件，必须输入URI也就是子目录及文件名才行
【聚焦“十四冬”】“黑科技”护航 让赛事运行更安全、稳定、高效|安保|巡控|凉城|扎兰屯|指挥系统_网易政务
- 网站首页：输入网址默认显示的页面称为网站首页 了解
一般网站首页的名字:index.html default.html，通常是通过网站后台进行设置
- 代码编辑工具：
- Vscode 微软—上班
插件化：你需要啥功能，就安装对应插件即可
中文插件：
在浏览器中，显示网页：
- Hbuilder国产 –上班
Hbuilder绿色版，不用安装，解压即可使用
- 世界上所有的网页，基本结构都是固定的、不变的一样一样的
- HTML网页基本结构：精通
<!DOCTYPE html>告诉浏览器按照HTML5标准对文档进行解析
<html>代表整篇HTML文档开始
<head>代表整篇HTML文档的头部开始
<title></title>代表整篇HTML文档的标题
<meta charset=”utf-8”/>设置整篇HTML文档字符集
</head>代表整篇HTML文档的头部结束
<body>代表浏览器窗口开始
</body>带浏览器窗口结束
</html>代表整篇HTML文档结束
十一、HTML文档分类：掌握
- html4.01 1999年
- xhtml1.0 2000年
- html5 2014年：兼容html4.01和xhtml1.0
十二、HTML文档类型声明功能：告诉浏览器按照哪个HTML文档类型解析当前文档—面试题
HTML文档类型声明分类：这三种都是web标准
- html4.01 严格型 已经淘汰很久了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- xhtml1.0 过渡型 已经淘汰很久了
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- html5 兼容html4.01和xhtml1.0写法
<!DOCTYPE html>
doc document 文档
type 类型
html àhtml5
面试题：如果没写文档类型声明，那么浏览器认为当前文档是怪异模式，会按照最老的浏览器（比如IE6）对网页进行解析，会出现大量的兼容性问题
十三、所有标记要么放到<head></head>之间，要么放到<body></body>之间
- 放到<head></head>之间的标记：设置整篇HTML文档
(1)<title></title>设置整篇HTML文档的标题 掌握
（2）<meta charset=”utf-8/>元信息标记，设置整篇HTML文档的字符集 掌握
(3) <style></style>内嵌CSS样式—了解
（4）<link> 链接外部独立样式表-了解
(5) <script></script>嵌入JavaScript代码-了解
2. 大部分标记都是放到<body></body>之间，在浏览器窗口显示
十四、网站前端开发三层：掌握
.html 结构层： 只写HTML标记，写网页结构
.css 表现层：只有CSS样式，控制网页的样式
.js 动作层： 只有JavaScript代码，用来和用户交互、和后端交互
十五、HTML基本语法：精通
<标记名 属性=”值” 属性=”值”></标记名>
<代表标记开始
标记名：代表标记的功能
属性=“值” 代表标记具体如何显示
<font color=”#ff0000” face=”隶书” size=”7”>
文字
</font>
十六、HTML标记分为两类：掌握
- 单标记：一个标记就生效、
<img /> <hr/> <br/> <input/><iframe/>
- 双标记：一个开始和一个结束
<font></font>
<p></p>
十七、HTML中的注释：
<!-- -->
作用：增加代码的可读性
程序调试
十八、文字相关标记：掌握
- 标题标记:用于一篇文章的标记 掌握
<h1-6 align=”水平对齐方式left默认/center/right”></h1-6>
- HTML中的特殊字符：掌握
（1）空格
说明：浏览器为了排版方便，，忽略所有的空格和回车成为一个空格
（2）< <
(3) > >
(4) 版权符 ©
- 字体标记: 掌握
<font color=”文字颜色” face=”客户端字体” size=”文字大小1-7 默认3”></font>
- 文字修饰 掌握
- 加粗
<b></b> <strong></strong>
语义化标记
（2）倾斜
<i></i>
<em></em>强调标记
（3）下划线
<u></u>
(4) 删除线
<del></del>
(5) 地址
<address></address>
(6) 上标
<sup></sup>
(7) 下标
<sub></sub>
- 段落标记:掌握
<p align=”水平对齐方式left默认/center/right”></p>
- 换行标记<br> 掌握
- 居中标记：<center></center> 了解
- 水平分割线:横线 了解
<hr color=”颜色” size=”粗细” align=”水平对齐方式cener居中/left/right” noshade width=”宽度”>
- 预格式化：不忽略源码中的空格和回车 了解
<pre></pre>
- 忽略HTML标记：把HTML标记当做文本显示 了解
<xmp></xmp>
- 段落缩进:<blockquote></blockquote> 掌握
预备知识：什么是标记嵌套：一个标记包裹另一个标记称为标记嵌套
<A>
<B></B>
</A>
十九、标记嵌套原则：重点
- 当多个标记发生嵌套，属性没有发生冲突，那么属性全部自动生效
- 当多个标记发生嵌套，属性发生冲突，那么采用就近原则
二十、列表在网站中的应用：掌握---无序列表
- 显示行式数据：
- 导航菜单
- 二级菜单
- 焦点轮播图布局：
二十一、列表分类：
- 无序列表 精通
<ul type=”项目符号disc默认值/square/circle”>
<li type=”项目符号disc默认值/square/circle”>列表项</li>
</ul>
- 有序列表 掌握
<ol type=”1/A/a/I/i” start=”从几开始”>
<li>列表项</li>
</ol>
- 定义列表 了解：解释定义
<dl>
<dt>定义</dt>
<dd>定义的解释</dd>
</dl>
- 菜单列表 了解
<menu></menu>
- 目录列表 了解
<dir></dir>
二十二、超链接标记: 精通
<a href=”url#hashname” target=”访问的资源在哪个窗口打开_self本窗口覆盖显示默认/_blank在新窗口打开/框架名称” title=”提示信息”></a>
说明：title、id、class、style 全局属性：所有标记都有的属性
二十三、超链接按照使用href场景分类：掌握
- 内部链接：访问资源是本网站其他页面
<a href=”abc.html”>内部链接</a>
- 外部链接：访问资源是其他网站的页面
<a href=京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！>外部链接</a>
- 图片链接：点击图片，访问资源
<a href=””>
<img src=””/>
</a>
- 文件链接：访问的资源不是网页或图片，而是某些文件
- 邮件链接：点击链接，自动打开本地邮件发送客户端，将收件人地址自动填充，防止用户填写错误—一般用于网站联系我们
说明：邮件发送客户端：foxmail 网易邮箱大师 hotmail等
<a href=mailto:sdfsdfdsf@sdfdsf.com>邮件链接</a>
- 锚链接：书签链接
应用场景：当一个页面内容很多，有很多屏，内容不好定位，这时候使用锚链接在页面中进行定位
定义锚点：
<a name=”锚点名”></a> 书签
访问锚点：
<a href=”#锚点名”></a>
二十四、多媒体：文字、图片、声音、视频等多种媒体表现方式
- 插入图片 掌握
<img src=”图片来源--路径/文件名” width=”宽度” height=“高度” alt=”替换文本” align=”left默认/right图片水平对齐方式” align=”top/middle/bottom图片后面文字对齐方式”>
说明：相对路径：从当前页面起始的路径
绝对路径：从盘符起始的路径—windows
从/起始的路径—linux—mac
- 插入音频: 了解
- html4标记:midi mp3 .ogg
多媒体标记：
<embed src=”” />
- html5标记：
音频标记:
<audio src=”” controls 面板></audio>
- 插入视频： .mp4 .ogv 了解
- Html5标记:
视频标记:
<video src=”” controls 面板></video>
二十五、排版/定位/布局：把内容定位到指定位置
网站开发布局标记：
- 表格 ---html阶段
- CSS+DIV—商业开发
- 框架—已经淘汰
二十六、表格标记:
表格在网站中的应用：
- 显示行列式数据—报表
- 页面布局—仅限于HTML阶段
<table border=”表格边框粗细” bordercolor=”表格边框的颜色” width=”表格的宽度” height=“表格的高度” align=”表格的水平对齐方式left默认/center/right” bgcolor=”表格的背景色” background=”表格的背景图片” cellspacing=”单元格之间的距离” cellpadding=”单元格内容离边框的距离”>
<tr align=”单元格中内容水平对齐方式left默认/center/right” valign=”单元格中内容垂直对齐方式middle默认/top/bottom” bgcolor=”行的背景颜色” background=”行的背景图片”>
<td align=”单元格中内容水平对齐方式left默认/center/right” valign=”单元格中内容垂直对齐方式 bgcolor=”单元格的背景颜色” background=”单元格的背景图片” width=”单元格的宽度” height=”单元格的高度” colspan=”跨列合并单元格” rowspan=”跨行合并单元格”></td>
</tr>
</table>
二十七、表格嵌套：
开发场景：HTML中使用表格进行定位，发现即使9宫格也不能准确定位，那么就采用表格嵌套后，在进行定位
二十八、表格实现企业网或中后台管理系统—广字型布局：
二十九、框架和框架集:了解
将一个浏览器窗口分割成若干个小窗口，每个小窗口可以显示一个独立的.html文件
每个小窗口—一个框架
多个框架构成框架集
<frameset rows=”横着分” cols=”竖着分”>
<frame name=”” src=””/>
</framset>
<a href=”” target=”页面打开的框架的名称name”></a>
三十、浮动框架iframe:将其他页面嵌入当前页面中
<iframe src=”” width=”” height=””></iframe>
三十一、表单是网站或App获得用户信息的主要途径之一
电子表单：
三十二、表单标记form
<form name=”表单名称” action=”表单数据提交到的URL地址” method=”提交数据的方法get默认/post”>
</form>
面试题：
get和post区别：
- get默认方法：数据附加到URL后面，和request headers一起发送给服务器
说明：数据格式: url?变量=值&变量=值&变量=值
百度安全验证帅哥 &rsv_spt=1&rsv_iqid=0xb9d779b300d0f15b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=7&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=shuaige&rsp=5&inputT=661&rsv_sug4=661&rsv_sug=1
特点：发送数据的大小受到request headers大小限制
开发场景：
向服务器发送少量数据
不能发文件
不能发密码
一般用于搜索引擎、站内搜索引擎
- post方法：数据和正文<body></body>之间的内容一起以IP包形式发送给服务器
特点：大小无限制
开发场景：传输较大的数据量
上传文件
三十三、表单项：表单中的项目 掌握
- <input type=”text默认-输入文本框” name=”名称” >
password 密码框
button 按钮
radio 单选按钮：如果同一组互斥name值相同 属性checked默认选中
checkbox 复选框
file 文件域 multiple多选
reset 重置：恢复表单项的默认值
submit 提交：将数据提交到action所指页面并且自动跳转到这个页面
image 图像域：用图片代替submit
- <select></select>
- 单选下拉菜单
<select name=”名称”>
<option value=”值” selected>提示信息</option>
</select>
- 多选列表
<select name=”名称” size=”尺寸” multiple多选>
<option value=”值” selected>提示信息</option>
</select>
- <textarea></textarea>文本域
<textarea cols=”宽” rows=”高”></textarea>
三十四、页面中嵌入百度搜索引擎:
分析：https://www.baidu.com/s?wd=%E5%B8%85%E5%93%A5&rsv_spt=1&rsv_iqid=0x8963e8eb00fb9156&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=12&rsv_sug1=8&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=shuaige&rsp=0&inputT=2228&rsv_sug4=2228&rsv_sug=1
action=” 百度安全验证”
method=”get”
<input type=”text” name=”wd”/>
三十五、HTML项目指导
1.需求分析：产品经理
（1）网站类型:电子商务、企业网、个人网站、交友网站、论坛、博客、管理系统等。
（2）网站功能：有几部分功能，分几个子页面。
（3）网站内容
（4）参考其他网站（多参考）
（5）配色、布局、操作习惯
2.草图设计：布局、logo大小及位置、banner大小及位置、导航大小及位置等；在草图中标出相应尺寸用px标出
3.收集素材
（1）客户提供的相关资料：企业logo、企业相关图片及电子文档；我们需要重点考虑客户的企业文化和文化积淀
（2）参考相关的网站
（3）搜集相关素材：图片等
4.按照草图制作网站效果图（主页），切片，优化。
5.网站代码编写
6.修改-测试
7.上传到远程服务器测试
项目题材：
电子商务、企业网等
需要提交的东西包括：
网页：不能少于5个页面
项目完成时间：3月12日
三十六、img 的3像素渲染bug
解决:
img{vertical-align:top;}
三十七：HTML项目开发中的问题：
问题1：仅学了HTML4，没有学习过CSS JavaScript，如果项目中要使用特效比如焦点图怎么办？
解决：从网上下载特效，然后用到项目中
方法：
- Head之间的代码剪切到head之间
- Body之间的代码剪切到body之间
- 对应位置的代码剪切到对应位置
实验1：网站中嵌入百度地图
实验2：网站中嵌入特效
实验3：标题栏图标
<link rel=”icon” href=”路径/文件名” type=”image/x-icon”>
16*16 32*32 64*64 128*128 256*256
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
