基础(一)——初识HTML5"/>
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="">点我跳转到百度</a><br>
<a href="#">回到顶部</a>
<a href="javaScript:void(0)">禁止跳转</a><br><a href="" target="_self">点我跳转到百度</a><br>
<a href="" 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 设置行
实体字符
空格  ;
小于号 <;
大于号 >;
双引号 ";
版权符号 ©;
(都需要带分号)
Div和Span标签
<div>这是div</div>
<span>这是span</span>
div 块级元素,单独占一行
span 行内元素
更多推荐
web基础(一)——初识HTML5
发布评论