文章目录
Day01.网页基础
学习目标:
- 了解网页和常见的浏览器
- 了解W3C组织及WEB标准
- 安装Vs Code、Chrome
- 掌握HTML基本结构
- 掌握常见标签的使用
- 掌握Git版本控制工具的基本使用
一、安装Vs Code
1.所需插件:
-
ESLint
-
Prettier
-
Vetur
-
YAML
-
open in browser
-
One Dark Pro
二、HTML基础
1.网页、网页文件和网站
2.网页传输
-
使用HTTP协议传输
HTTP协议(短连接)是基于TCP/IP协议
TCP:数据传输协议,稳定的长连接
UDP:数据报协议,能够传输大量的数据
-
HTTP协议会话包括4个步骤:
1.建立连接:客户端的浏览器与服务器发出建立连接请求,服务器给出响应就可以建立连接
2.发送请求:客户端按照协议的要求通过连接向服务器发送自己的请求
3.给出应答:服务端按照客户端的要求给出应答,把结果(HTML文件)返回给客户端
4.关闭连接:客户端接收应答后关闭连接
-
常见标签
-
meta标签
<meta name="keywords" content=""/> 搜索关键字 <meta name="description" content=""/> 网站描述 <meta charset="UTF-8"/> 编码格式 <meta http-equiv="Refresh" content="5;url=""/> 过几秒自动刷新
-
标题
<h1>标题</h1>
h标签:代码语义化
块级元素和内联元素
- 块级元素:独占一行,可以改变宽高
- 内联元素:不是独占一行,不可以改变宽高
-
段落、换行
-
段落:
…
-
换行(单标签):
-
-
水平分割线
-
-
字体样式
- 加粗:…
- 斜体:…
-
图像
-
常见的图像格式
JPG GIF PNG BMP
1、图片的宽和高不要进行修改
2、后退一步:…/
-
-
超链接
链接的文本或图像
-
特殊符号
- 空格:
- 大于号:>
- 小于号:<
- 引号:""
- 版权符号:©
-
注释
-
-
Git 版本控制工具
-
兼容错误性高
三、WEB前端开发
1.列表
1.有序列表
reversed(属性名跟值相同)HTML5的特性
2.无序列表
3.定义列表
-
列表中的项目
- 描述列表中的项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwpDHHYw-1584779840915)(网页基础_img/image-20200318102807947.png)]
2.表格
表格标头11 | 第一个单元格的内容 一行一列 | 表格标头12 | 第二个单元格的内容 一行二列 |
---|---|---|---|
表格标头21 | 第一个单元格的内容 二行一列 | 表格标头22 | 第二个单元格的内容 二行二列 |
-
table标签属性:
-
border=“1px”:设置边框宽度
-
cellpadding=“0”:规定单元边沿与其内容之间的空白
-
cellspacing=“0”:规定单元格之间的空白
-
width:规定表格的宽度
-
align=“left/center/right”:居中
-
bgcolor:背景色
-
td:colspan="":表格的跨列
-
td:rowspan="":表格的跨行
流量调查表
总页面流量 共计来访 会员 游客 9756488 97656 236546 9756488 9756488 97656 236546 9756488 9756488 97656 236546 9756488 平均每人浏览 1.58
-
3.多媒体
1.视频
你的浏览器不支持video元素[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDrf8hSd-1584779840925)(网页基础_img/image-20200318143222862.png)]
2.音频
4.H5新增标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dpZtgA63-1584779840932)(网页基础_img/image-20200318144256664.png)]
-
内联框架
框架
规定无法调整框架的大小
5.表单
<form action="" method="get">
<!--
action:规定当提交表单时向何处发送数据
autocomplete:规定表单是否启用自动完成的功能
get:明文提交 不安全 传输速度快 传输量小
name:表单的名称
target:规定在何处打开action URL
值:_blan;_self;_parent;_top;;framename
novalidata:提交表单时不进行验证
-->
<input type="text" name=""/>
<!--
autofocus:获得焦点
checked:默认值
type=button;checkbox;file;.....
radio:单选按钮框
checkbox:多选框
-->
<input type="radio" name="sex" value="man" checked/>
<input type="image" src=""/>
</form>
1.列表框
2.多行文本域
文本内容3.邮箱
邮箱:
4.网址
网址:
5.数字
请输入数字:
6.滑块
滑块:
7.搜索框
搜索框:
8.表单的高级应用
-
表单验证
placeholder
pattern:正则表达式
required