web基础(一)——初识HTML5

编程入门 行业动态 更新时间:2024-10-25 20:27:28

web<a href=https://www.elefans.com/category/jswz/34/1770030.html style=基础(一)——初识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 设置行

实体字符

空格 &nbsp;

小于号 &lt;

大于号 &gt;

双引号 &quot;

版权符号 &copy;

(都需要带分号)

Div和Span标签

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

div 块级元素,单独占一行

span 行内元素

更多推荐

web基础(一)——初识HTML5

本文发布于:2023-06-30 14:20:18,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/961734.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:基础   web

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!