web开发
world wide web 全球广域网
基于http协议
pc端 京东淘宝
移动端 app 淘宝app 京东app 微信
web全栈工程师 前端 工作 后台工作 全部胜任
web版本
- 1.0 静态页面为主 纯展示
- 2.0 开始转为动态 从数据库里取数据 跟用户交互 youtube
- 3.0 igoogle 分析用户的需求 精准投放
http协议
基于 tcp /ip 协议 tcp 传输控制协议/网间协议 transmission control protocol / Internet protocol
端口号 80
三次握手
四次挥手
IP地址分类 :
ipv4 4段
ipv6 6段
a类 IP地址: 1.0.0.0 -126.255.255.254 给政府用
b类 中小企业 128.0.0.1 - 191.255.255.254
c类 个人 192.0.0.1 -223.255.255.254
局域网 网段 :
172.16.0.1
192.168.0.1
10.0.
127.0.0.1 本机的IP地址
一个网站 、app 怎么从无到有 以后 网站 app 称之为 产品
- 注册域名 www.baidu.com
- 买服务器 阿里云 腾讯云 百度云 滴滴云 美团云 京东云 会给你一个IP地址 （公网的ip 地址 ）
- 解析域名 将 域名解析到 IP地址上面
- 网站建设 设计 前端 后台 测试
- 网络推广
- 网站运营
HTML
- 网页的一种语言 超文本标记语言
<html> 正确
<HTML>错误
<Html>错
< H T M L> 错
< html >
<> 有标签
有些标签 成对出现 <html></html>
有些标签 单独存在 <br /> <img />html 结构
<!doctype html> #声明文档类型
<html> 声明我们写的是html 语言
<head> 文件的头部
<meta charset="utf-8"> #文件的编码
<title>python1806</title> 文件的标题 显示再状态栏上面
</head>
<body> 文件的主体
</body>
</html>开发工具
- sublime text 3
- notepad ++
- atom
- hbuilder
- 记事本
创建html文件
- 新建记事本 改成.html后缀
- 用开发工具 新建 后缀名 .html
html 标签分类
- 单标签
<meta charset="utf-8" /> /可写可不写 - 双标签
<html>
<head>
</head>
<body>
</body>
</html>html 元素的分类
区块元素
| 元素 | 说明 |
|---|---|
| div | 文档节 |
| ul | 无序列表 |
| ol | 有序列表 |
| dl | 自定义列表 |
| p | 段落 |
| h1~h6 | 标题 |
| table | 表格 |
| form | 表单 |
| address | 地址 |
空格
<br /> 换行 单标签
<hr /> 加横线 单标签
<b></b> 双标签 加粗
<strong></strong> 加粗
<em> </em>
<i></i> 倾斜
<!-- --> html注释
sublime 中
tab 自动补全
ctrl+shift+d 复制
ctrl+shift+? 注释 列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--
ul 无序列表
ol 有序列表
默认数字开头 1 2 3 4
type=""
a 小写字母
A 大写
i 罗马小写
I 罗马大写
start="5" 表示从第几个开始排序 从 e E 开始
dl 自定以列表
-->
<ul>
<li type="square">1</li>
<li type="circle">2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>爱的色放</li>
<li>爱的色放</li>
<li>爱的色放</li>
<li>爱的色放</li>
</ol>
<!-- a 累加 从c开始 -->
<ol type="a" start="3">
<li>你长得有点怪</li>
<li>怎么了</li>
<li>怪好看的</li>
<li>爱的色放</li>
</ol>
<!-- A 累加 从D开始 -->
<ol type="A" start="4">
<li>你长得有点怪</li>
<li>怎么了</li>
<li>怪好看的</li>
<li>爱的色放</li>
</ol>
<!--罗马数字i累加 -->
<ol type="i">
<li>你长得有点怪</li>
<li>怎么了</li>
<li>怪好看的</li>
<li>爱的色放</li>
</ol>
<!--罗马数字I累加 -->
<ol type="I">
<li>你长得有点怪</li>
<li>怎么了</li>
<li>怪好看的</li>
<li>爱的色放</li>
</ol>
<!-- 自定义列表 一般结合css 来使用 自己制定样式 -->
<dl>
<dt>爱情公寓</dt>
<dd>第一季</dd>
<dd>第二季</dd>
<dd>第三季</dd>
<br>
<dt>生活大爆炸</dt>
<dd>第一季</dd>
<dd>第二季</dd>
<dd>第三季</dd>
</dl>
</body>
</html>基本标签总结
块状元素
div ul ol table form
内联 （在块状元素内使用的 ）
br 换行 单个
hr 横线 单个
i em 斜体 成对
b strong 加粗 成对
span 定义文本区块 成对出现
textarea 多行 标签 成对出现
浏览器分类
- 谷歌
- 火狐
- ie
- edge
- QQ 、360、搜狗、世界之窗、好123、2345 用IE浏览器内核
- opera 欧朋
- Safari
ie浏览器 ie8、9、10、11 QQ 、360、搜狗、世界之窗、好123、2345 用IE浏览器内核
非ie浏览器 谷歌 火狐 、opera、Safari w3c 浏览器
以后开发 首选 谷歌 火狐
head 标签 双标签
<head></head> 用来给网站添加配置信息
<meta charset="UTF-8">
<title>千锋教育-做有情怀、有良心、有品质的IT职业教育机构</title>
<meta name="keywords" content="java培训,UI培训,PHP培训,HTML5培训,H5培训,前端培训,java开发学习,PHP开发培训,LINUX培训,大数据培训,VR培训,软件测试培训,PYTHON培训,PYTHON开发培训,网络营销培训,SEO培训,SEM培训,整合营销培训,新媒体整合营销培训,千锋,嵌入式物联网培训" /> 哪些关键词 可以找到你的网站
<meta name="description" content="千锋教育是中国IT职业教育领先品牌,专注IT职业教育培训,千锋教育长期秉持用“良心做教育”的理念,全力打造IT教育全产业链人才服务平台,成为一个有情怀、有良心、有品质的中国一流IT职业教育培训机构！" /> 你的网站的描述
我们网站做seo用的相关信息 在head 里边进行设置
<link rel="stylesheet" href="http://img.mobiletrain.org/templates/mobiletrain/css/index2017-base.css"> 引入一些文件
<link rel="stylesheet" href="http://img.mobiletrain.org/templates/mobiletrain/css/index2017.css">
body标签 双标签
网站的主体内容在body里边写 文字 图片 视频 音频 都可以
注意问题:
一个页面只有一对body 和 一堆 html
基础标签
h标签 h1~h6 标题语义
从大到小 h1~h6
被h包裹的内容 独占一行
h2标签 尽量不要超过5个
br 标签 换行 单标签
强制换行
内容1
内容2
p标签 双标签 告诉浏览器 哪些文字是一个段落
单独占一行 自动换行
<p>美女你长的好像一个人，谁啊，我妈妈的二媳妇</p> p标签 br 区别?
- 都有换行的效果
- p双标签 br 单标签
- br 小换行 p 大换行 分段落
ａ标签
作用：从一个页面链接到另外一个页面
格式：
<a href="http://www.qfedu.com">大吉大利，今晚吃鸡</a>标签之间一定要写内容 要不然找不到
a标签 也叫做超链接
属性：
* href 指定跳转的目标地址
* target
* _blank 在新窗口中打开 目标文档
* __self 在当前窗口打开 默认就是在当前窗口打开 不写target 属性 和 target=”_self” 效果一样
* _parent 在父框架中打开被连接的文档
* _top 在整个窗口中打开被连接的文档
* title 鼠标放上去提示消息
锚点
<a href="#location">我们处对象把，看看鹿晗关晓彤先分手还是咱们先分手</a>
<a href="#haha">88年的情侣有毒</a>
<p id="location">
这就是目标 跳转到这里
</p>
<p id="haha">
杨紫阚清子都分手了,咱们的缘分很强
</p>不跳转 href=“#”
<a href="#">我是不跳转的</a> img 标签 单标签
作用: 在页面上插入一张图片
格式:
<img src="图片路径" />- src 图片路径
- 网络图片 开发最好使用网络地址 不管怎么移动项目代码 图片始终显示
- 本地图片 绝对路径 相对路径
- width 设置图片宽度
- height 设置图片高度
- alt 一旦图片路径有错误 就会显示这里的内容
- title 当鼠标放到图片上 显示的图片信息
span 双标签
没有实际意义 但是可以用来 区分内容 给指定的内容添加样式 k
格式: 内容
颜色
- 使用颜色关键词 red blue black white orange
- 16进制颜色（#795548 #aaa123 #abcdef ）
- rgb颜色 red green blue rgb(255,255,255)
- rgba (255,100,150,透明度) 0~1 0表示完全透明，1表示完全不透明 0.5
表格
table
tr 行
td 单元格 列
caption 双标签 表格标题
<caption>Python1806人员表</caption>
<table border="1" width="400" height="400" bordercolor="red" bgcolor="blue">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>666</td>
<td>小哥哥</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>table 属性
width：表格宽度
height:表格高度
border:边框
bgcolor:表格背景颜色
bordercolor：边框颜色
cellspacing:单元格之间的间距
cellpadding:单元格和内容之间的距离
颜色 :
red blue
#abcdef #123456
rgb()
rgba()
对齐方式:
align: center/left/right 居中 居左 居右
可以给table 设置属性
也可以给 tr td 设置
合并单元格 :
colspan: 3 合并3列
rowspan: 4 合并行 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气预报</title>
</head>
<body>
<table width="1000" align="center" bgcolor="#abcdef" border="1" cellspacing="0" cellpadding="10">
<tr>
<th colspan="3">日期</th>
<th colspan="2">天气</th>
<th>风向</th>
<th>风力</th>
<th>气温</th>
</tr>
<tr>
<td rowspan="2" colspan="2">13号 星期一</td>
<td>白天</td>
<td><img src="http://p5.so.qhimgs1.com/bdr/_240_/t01ee02559a1e02f54b.png" width="20" height="20"></td>
<td>晴</td>
<td>无持续风向</td>
<td>狂风</td>
<td>30℃</td>
</tr>
<tr>
<td>夜间</td>
<td><img src="http://p5.so.qhimgs1.com/bdr/_240_/t01ee02559a1e02f54b.png" width="20" height="20"></td>
<td>晴</td>
<td>无持续风向</td>
<td>狂风</td>
<td>30℃</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度登录</title>
</head>
<body>
<h2>用户登录</h2>
<table align="center" cellpadding="5" cellspacing="1">
<tr>
<td align="right">手机/邮箱</td>
<td>
<input type="text" placeholder="请输入您的手机或者邮箱" style="width:200px;height:30px;">
</td>
</tr>
<tr>
<td align="right">密码</td>
<td>
<input type="password" placeholder="请输入您的密码" style="width:200px;height:30px;">
</td>
</tr>
<tr>
<td align="right">验证码</td>
<td>
<input type="text" placeholder="验证码" style="width:100px;height:30px;">
<a href="#">发送短信</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">阅读并接受<a>《百度用户协议》及</a><a>《百度隐私权保护声明》</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册" style="background:#3f89ec;width: 200px;height: 30px;color: white">
</td>
</tr>
</table>
</body>
</html>