web前端介绍
2018-12-18 本文已影响0人
阿朝狠酷
前端架构分析
开发流程
设计页面样板-->前端工程师将样板做成静态网页-->后端工程师将静态网页修改为动态网页
C/S架构
B/S架构
B/S架构顾名思义就是 B代表浏览器，则S代表服务器的意思
2.B/S架构就是说以网址的形式使用，将运算 操作等储存到远程服务器
W3C标准
**W3C标准是由万维网联盟所制定及修改
1.结构（HTML）
用于描述页面结构
2.表现（CSS)
用于控制页面中元素的样式
在前端中起美化页面的作用
3.行为（JavaScript）
用于响应用户的操作
在前端中起网页布局修改的作用
网站协议
协议就是一种加密方式 别名（超文本传输协议） 目前世界通用HTTP协议相对安全，如果网站涉及密码安全与支付安全的同时，在此诞生了HTTPS协议
HTML语言（超文本标记语言）
HTMl语言有多种版本而我就不一一列举了，今天我主要介绍HTML5 第五代超文本标记语言，（编写过程中是不分行的当然为了代码好区分还是缩进为好）
超文本
顾名思义就是超链接的意思，可以实现页面间的对接
标记
又名标签用来识别网页中的不同组成部分
HTML页面基本代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
- HTML中的标记指的就是标签用来描述网页
<title>网页标题</title>
<标签名/>
常用标签
<html>
- 作用：<html>标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
- 用法：所有的网页内容都需要编写到html标签中，一个网页中html标签只能有一个
html标签中有两个子标签head和body
<head>
- 作用：<html>标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息
- 用法：head标签作为html标签的子元素出现，一个网页中只要有一个head
<title>
- 作用：<title>标签表示网页的标题，显示在标题栏上，是搜索引擎最先看到的醒目内容
<body>
- 作用：<body>标签用来设置网页的主体，所有可视页面都编写在body标签中
- 用法：body标签作为html的子标签使用
<p>
- 作用：<p>标签表示网页中的一个段落，一般浏览器会在段落的前后各加上一个换行，段落会在页面中自成一行
- 作用：
标签表示一个换行标签，使用br标签可以使标签后的内容另起一行
- 作用：
标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分
<img/>
- 作用：<img/>标签是图片标签，可以用来向页面中引入一些外部的图片
- 属性：src指向一个外部的图片路径
alt图片的描述
<a/>
- 作用：<a/>标签是超链接标签，通过a标签，可以快速跳转到其他页面
- 属性：href指向一个链接地址
target设置打开目标页面的位置，可选值：_blank新窗口，_self当前窗口
元素
- 一个完整的标签称为元素
<h1>网页正文</h1>
h1和/h1是一个完整的元素
- 子元素和父元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素
- 祖先元素和后代元素
<body>
<p><em>段落</em></p>
</body>
body也是一个元素
body是p和em的祖先元素
p和em是body的后代元素
标题
- 标题分为一到六级分别写法为
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
属性
- 可以为标签设置属性
- 通过属性为元素添加附加信息
- 属性总是以名称/值对的形式出现 比如：name="value"
-有些属性可以是任意值
<img src=""alt="" />
- 有些属性是指定值
<h1 title="我是一个标题">标题</h1>
常见属性
- id
id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值
- class
class属性用来为标签分组，拥有相同属性的标签视为一组，就像python中的类，可以出现相同的class属性，可以为一个元素指定多个class
- title
title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会显示提示文字
注释
注释就是解释的意思 为了方便记忆可以使用注释
<!-- 注释内容 -->
解决显示乱码问题
在头标题中添加
<meat charset="utf-8" />
实体（转义字符）
在编写过程中我遇到必须使用的大于或小于符号这时浏览器会将它解析为标签，这时候就用到转义字符
语法
&实体名；
字符实体*
| 符号 | 写法 |
|---|---|
| < | < |
| > | > |
| © | © |
| " | " |
| 空格 | |
| ® | ® |
| & | & |
| ™ | ™ |
