web基础（一）——初识HTML5

HTML5

软件架构

目前市面上流行的两种软件架构

C/S架构： client客户端 server服务端

B/S架构：browser浏览器 server服务端

C\S架构

C\S架构：client\server ，要求用户安装一个客户端程序

特点：交互性强，具有安全的存取模式，网络通信量低，响应速度快，利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。

优点：

用户体验好，效果炫酷

对信息安全的控制较强

应用服务器运行数据负荷较轻，部分计算功能在客户端完成

缺点：

占用硬盘空间

维护麻烦

安装使用依赖其他条件

B\S架构

B\S架构：Browser\Server,通过浏览器与服务器交互，不需要安装其他程序

特点：分布性强，维护方便，开发简单且共享性强，总体拥有成本低。但数据安全性问题，对服务器要求过高，数据传输速度慢，软件的个性化特点明显降低

优点：

维护升级简单，无缝升级

不用必须安装程序，操作系统内置了浏览器，大大减少了使用成本

缺点：

动画效果受浏览器限制

对信息安全控制较差

应用服务器运行数据负荷较重。大部分计算都在服务器端，增加服务器压力，使用Ajax可以改善部分用户体验

资源分类

静态资源和动态资源

静态资源

使用静态网页技术开发的资源（Html,CSS,JavaScript）

特点：所有用户访问，看到的内容都一样

动态资源

从资源的服务器里面的数据库拿出来的

使用动态网页技术发布的资源

html标签

HTML不严格区分大小写，建议小写

1、标题标签 h1-h6

2、段落标签 p

3、加粗 b strong

4、倾斜 i em

5、换行 单边标签 br

6、分割线 hr

设置属性：

<开始标签 属性名="属性值" 属性名="属性值">
    color 颜色	使用英文单词
    wigth 宽度	单位像素：px  和屏幕的分辨率有关
    size  高度	

7、字体标签 font

​ color 颜色

​ size 大小，默认是3，范围1-7

8、居中标签 center

9、上标签和下标签

​ 上 sup

​ 下 sub

图片标签

1、图片标签 单边标签 img

​ 相对路径和绝对路径，建议使用相对路径

<img src="../img/1.jpg"	width="200px"	title="图片标签"	alt="图片不见了">

src 链接图片的路径

width 宽度

height 高度

title 文本提示，鼠标悬浮的提示信息

alt 替代文本，由于某种原因无法显示的时候用文本替换图片内容

多媒体标签

1、video 视频标签

<video src="img/1.mp4" controls loop muted></video>

src 链接路径

controls 显示控件

loop 循环播放

muted 默认静音

width和height 宽和高

2、audio 音频标签

<audio src="img/1.mp4" controls loop muted></audio>

src 链接路径

controls 显示控件

loop 循环播放

muted 默认静音

3、列表标签

<ol type="I">
<!--type中写1，A，a，I，i-->
     <li>第一</li>
     <li>第二</li>
     <li>第三</li>
     <li>第四</li>
</ol>

有序列表 ol>li

无序列表 ul>li

有序和无序列表都有type属性去设置前面符号的样式

*复制一行shift+alt+↓

ul>li*4 按tab键 快速生成

<ul type="circle">
     <li>无序</li>
     <li>无序</li>
     <li>无序</li>
     <li>无序</li>
</ul>

超链接标签 a

<a href="http://www.baidu.com">点我跳转到百度</a><br>
<a href="#">回到顶部</a>
<a href="javaScript:void(0)">禁止跳转</a><br>

<a href="http://www.baidu.com" target="_self">点我跳转到百度</a><br>
<a href="http://www.baidu.com" target="_blank">点我跳转到百度</a><br>

href 跳转的地址

​ 输入#时跳转到页面顶部

​ javaScript:void(0)禁止a标签跳转

target 超链接跳转时是否新建页面

​ target=“_self” 在本页面进行跳转

​ target=“_blank” 新建一个页面跳转

​ target=“name” 在对应name名称的页面上进行跳转

表格标签

table 父标签，相当于表格的容器

tr 定义行

td 定义列

th 也是定义列，表格的列标题：会自动加粗，居中

caption 表格的标题

属性

border 边框的宽度

bordercolor 边框的颜色

width和height 宽和高

bgcolor 背景颜色

cellspacing 设置单元格之间的距离

cellpadding 设置内容和边框的间隙

align=“center” “left” “right”

​ 设置在table上，代表表格在浏览器的位置

​ 设置在tr上，代表该行字体的位置

​ 设置在td上，代表该单元格字体的位置

table>tr*3>td*4		三行四列表格

合并行和合并列

1、合并行rowspan

<tr>
<td rospan="2"></td>
</tr>

2、合并列colspan

<tr>
<td colspan="3"></td>
</tr>

框架标签

1、frameset 子标签frame

2、注意框架标签和body标签冲突，删除body标签

3、分割的思想：先上下分割，再左右分割

<frameset rows="20%,*">
    <frame src="top.html"></frame>
<!--src里填的是新的html页-->
	
	<frameset cols="20%，*">
        <frame src="left.html"></frame>
在左侧超链接的页面在右边显示，需要在超链接标签中的target上设置成右边的name值
 		<frame src="right.html" name="right"></frame>
		</frameset>
</frameset>

将整个页面分为上下两部分，上部分占20%，下部分占剩下所有，用星号表示

滚动标签，双边标签，marquee

<marquee>

</marquee>

noresize=“none” 禁止框架拖动

表单标签

表单的作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与web服务器的交互

表单是控件的容器，一个表单由form元素，表单控件和表单按钮三部分组成

<form action="" method="get">
	<input type="text" name="uesrname" value=""> <br>
    <!--文本框-->
    <input type="submit" value="点我">
    <!--提交按钮-->
</form>

form属性：

action 提交地址

method 请求方式 get/post，不写默认是get

enctype 规定在发送到服务器之前如何对表单数据进行编码取值的三种方式

输入域标签(input)

<form action="" method="get">
	账号：<input type="text" name="username" value="" placeholder="请输入账号"><br>
    密码：<input type="password" name="password" value=""><br>
    性别：<input type="radio" name="sex" value="男">男
    	<input type="radio" name="sex" value="女">女<br>
    
</form>

属性：

id=“” 页面的唯一标识，用来服务css和js。

type=“” input框的类型。

name=“” 标签的名字，可以重复。

value=“” 标签的默认值

placeholder=“” 输入框提示消息

readonly 只读

disabled 禁用

maxlength=“” 设置最大长度

checked 单选和复选框的默认选中

type类型：

​ text 文本框；

​ password 密码框；

​ radio 单选框（多个单选框只需要选中一个，那就要相同的name值）

​ checkbox 复选框

​ email 邮箱框

​ button 普通按钮

​ file 文件框

​ date 日期框

​ reset 重置按钮

​ submit 提交按钮，提交form表单

​ hidden 隐藏框

​

下拉列表框

1、下拉列表框 select 子标签option

<select name="school" id="school">
    <optgroup label="分组1">
            <option value="小学">小学</option>
    <option value="中学">中学</option>
    </optgroup>
	<optgroup label="分组2">
     	<option value="大学">大学</option>
    	<option value="院士">院士</option>
    </optgroup>

</select>

​ 2、属性

multiple 将下拉列表展开显示，可以选中多个

selected 默认选中

disabled 禁止选中

optgroup 分组

​ label=“” 组名

文本域

textarea 文本域，多行输入框

<textarea cols="30" rows="10"></textarea>

​ cols 设置列

​ rows 设置行

实体字符

空格 &nbsp；

小于号 &lt；

大于号 &gt；

双引号 &quot；

版权符号 &copy；

(都需要带分号)

Div和Span标签

<div>这是div</div>
<span>这是span</span>

div 块级元素，单独占一行

span 行内元素