Web前端1

B/S架构：浏览器/服务器架构

c/s：安装、更新，不跨平台（windows、mac、linux）   大型专业应用、安全性要求高的

英雄联盟、航天相关、军事相关

b/s：不安装、无需更新、跨平台----写网页。

微信小程序、react客户端开发、echarts数据可视化……

前端代码通过什么转换成网页：：：浏览器（渲染和解析）

浏览器：网页显示、运行的平台

常见浏览器：ie浏览器、  火狐浏览器、谷歌浏览器、safari浏览器、opera浏览器（欧朋浏览器）

什么是html？

超文本标记语言，描述网页的语言

不仅有文字，还有图片、音频、视频等等

从一个页面跳转到另外一个网页（超级链接文本）

标记：文本要变成超文本，就需要各种标记符号

语言：每一个标记的写法、读音、使用规则，构成标记语言

字符集不止一种：

ASCII=====》大小写字母、数字、符号（128个表）     美

ISO 8859-1=====>扩充一些希腊字符（256)--------欧洲人

GB2312======>扩充6763个汉字，682个字符

GBK======》继续追加收录汉字和字符20000+，支持繁体中文国家太多

 UTF-8：万国码，包含世界上所有文字与符号（推荐）

 注意：

存储时，选对字符编码，否则数据会无法存储并丢失

存储与读取方式必须采用一致的，否则乱码

HTML基本语法：

<开始标签>标签体</结束标签>

Html的骨架

1.标题标签： 

2.段落标签：

3.换行和水平标签：

 4.文本格式化标签：

<del>厉害从不</del>——删除线

 <strong>真正成功</strong> <b> 顺应本心</b>——加粗

<em>生活中一些人</em> <i>早睡和熬夜</i>——倾斜

 <!-- 原价：<ins>999</ins>  下划线 -->

 x₂——下标

 x²——上标

5.图片标签：

<img src="图片地址" alt="图片地址发生错误时,用来提示的字" title="指针经过时,显示的文字" height="高度" width="宽度"align:设置图片与文字的对齐方式的>

例如：<img src="../灰太狼.jpg" alt="我是灰太狼" title="我要去抓羊了" width="500px" border="20px" align="center">

6.路径标签：

相对路径：

../返回上一级  

./  当前级

 /  下一级

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。

7.视频标签：

 8.音频标签：

 9.超链接：

10.锚链接：

 

   <!-- id   身份证号   一个元素只能有一个id   同一网页内，id不能相同 -->

11.特殊字符：

例如：<p>姓名： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;张三</p>

           <!-- <p>&lt;</p>    < -->

           <p>&gt;</p>

            <!-- <p>&nbsp;</p> -->

            <p>&yen;</p>

            <p>&copy;</p>

12.有序列表：

13.无序列表：

14.自定义列表：

 

 15.框架：

16.表单：

网页交互区，收集用户信息

action:将数据交给谁处理

1、所有表单必须有name属性

2、所有表单包含在form

3、单选、多选必须有value值 -->

文本框：

用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名：">    

密码：

  单选框：

多选框：

<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>

checked默认选中

 按钮：

确认按钮：

重置按钮：

普通按钮：

文本域：

下拉菜单：

17.label标签：

 附加练习：

运行：