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 行内元素

web基础（一）——初识HTML5相关推荐

好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
Java Web基础
目录 Java Web基础 HTML基础 HTML补充 CSS基础 CSS补充 JavaScript基础 JavaScript补充(例题) Java Web补充 Java Web基础 HTML基础标 ...
Web基础技术开发设计规范
Web基础技术开发设计规范概述前端脚本语言十分灵活,每个人都有自己开发风格,并且javascript是单线程编程语言,程序的运行效率在前端开发是比较重要的,所以对前端开发人员应有更高的编程要求.而 ...
C1认证之web基础知识及习题——我的学习笔记
文章目录目录文章目录前言 Web基础十四.语义化标签知识点习题十五.表单标签知识点习题十六.转义字符知识点习题十七.Head头知识点习题十八.CSS引入方 ...
html5代码好学吗,0基础能学习Html5吗?Html5好学吗？
原标题:0基础能学习Html5吗?Html5好学吗? 0基础可以学习Html5吗?这两年一直是被挂在嘴边的话题,随着人们对用户体验的要求越来越高,前端开发技术难度越来越大,所以对于IT从业者来讲,前端 ...
HTML day_01(5.31)Web基础知识、HTML快速入门、文本、图像和链接
一.课程安排 1.HTML5天所有的网页结构,数据都是由h5搭建的 2.AJAX 5天异步的数据交互,帮我们进行异步的连接服务器,发送请求,接收响应 3.CSS3 8天美化页面,让页面做的更好看 ...
Web基础总结（HTML、CSS等）
Web基础总结前言 HTML 元素和属性内容元素 head meta title base link body 表单元素功能元素其他元素分组元素页面交互元素语义元素全局属性 style ...
Go语言编程笔记12：web基础
Go语言编程笔记12:web基础图源:wallpapercave.com 开一个新坑,用Go来做web开发.虽然已经从事多年基于LAMP的web开发,但最近学习了Go编程,所以打算借着学习<G ...
全栈 - 20 Web 基础网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
web 向java_Java web基础
Java web基础一.C\S架构 1.概念 C是英文单词"Client"的首字母,即客户端的意思,C/S就是"Client/Server"的缩写,即&quo ...

web基础（一）——初识HTML5