web 前端 基础HTML知识点

web系统架构体系

  • B/S(Browser/Server):浏览器实现

    • 优点:
      • 规范、使用方便、本身实现成本低
      • 容易升级、便于维护
    • 缺点:
      • 没有网络,无法使用
      • 保存数据量有限,和服务器交互频率高、耗费流量
      • 安全性差一点
  • C/S(Client/Server):客户端实现

    • 优点:
      • 可以在无网络环境下使用
      • 和服务器交互相对频率低、省流量
      • 安全性高一点
    • 缺点:
      • 需要安装客户端
      • 升级麻烦,维护成本高
      • 开发成本高

什么是HTML

html是超文本标记语言(Hyper Text Markup Language),是一种使用标记标签来描述网页的语言。

超文本

用超链接的方法将各种不同空间的文字信息组织在一起的网状文本。可以用来链接图片,音频,视频,动态图片等

W3C标准

结构化标准语言(XHTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

HTML标签

标签一般成对存在,如

结构体标签

说明html5中文档的类型是html文档

html标签



title标签


我的网页

meta标签





body标签


内容

文本标签

注释


标题


标题

字体





HelloWorld

换行



水平分割线



加粗


倾斜


下划线

段落

居中

下标


上标


图片标签

图片说明,当图片加载失败显示

相对路径"../"代表上一层目录,同一层目录可以直接访问

绝对路径:1、网络图片,直接写图片地址;2、本机磁盘地址"盘符:/图片名"

超链接

链接名或图片

target = "_self":当前窗口打开

target = "_blank":新窗口打开

target = "_top":在顶层页面所在位置打开

target = "_parent":在父页面的窗口位置打开

target = "_iframeName":在iframe位置打开

使用锚链接需要给目标标签加属性id,唯一的标记

发送邮件

连接名或图片

下载

连接名或图片

表格标签


编号 名称 价格
001 苹果 12
002 香蕉 18

属性

表格的属性(table)

border = "边框线条粗细"

cellspacing = "单元格间隙的值"

align = "表格水平对齐方式"

width = "表格的宽度"

height = "表格的高度"

bgcolor = "表格的背景色"

background = "背景图片地址"

行的属性(tr)

height = "行高"

align = "水平对齐方式"

valign = "垂直对齐方式"middle、top、bottom

bgcolor = "行的背景色"

background = "行背景图片地址"

单元格的属性(td)

width = "宽度"会影响整个列

align = "水平对齐方式"

valign = "垂直对齐方式"middle、top、bottom

bgcolor = "单元格的背景色"

合并单元格

1、找到要合并单元格的开始位置

2、清除合并的是行还是列

3、合并几行或几列

4、除开始位置的单元格外,被合并的单元格进行删除


除开始的单元格、其余删除

表单标签

账号:
密码:

form标签的属性

method = "getpost提交方式"

  • 默认的提交方式是get,地址栏可以看到的,post方式地址栏不可见
  • get方式相对post不安全
  • get方式提交的数据量有限制的,而post理论上没有限制

action = "表单提交的目标地址"

文本框标签( )属性

name = "提交参数名称"

type = "input标签样式"

  • type="text" 普通文本框

    • maxlength = "最大字符个数"
  • type="password" 密码框
  • type="radio" 单选框

    • value = "值"
    • checked = "checked"默认选择
  • type="date" 日期框
  • type="email" 邮箱文本框(自带针对邮箱的校验)
  • type="file" 文件文本框(可以选择各种文件,比如说图片,文件)
  • type="checkbox" 多选框

    • value = "值"
    • checked = "checked"默认选择
  • type="hidden" 隐藏文本框
  • type="color" 颜色选择框
  • type="number" 数字选择框
  • type="buttonsubmitreset" 按钮
  • type="image" 图形化按钮,功能相当于submit

placeholde = "提示文字"

按钮标签()属性

type = "按钮功能"

  • type="submit" 按钮(自带提交功能)
  • type="button" 按钮(不带提交功能,就是一个最普通的按钮)
  • type="reset"按钮(重置功能)

下拉框标签


文本域标签


列表标签

有序列表

type:序号类型

  • 1:数字(默认)
  • A:大写字母
  • I:大写罗马数字
  • a:小写字母
  • i:小写罗马数字

无序列表

有符号无序列表

type:符号类型

  • circle:空心圆
  • discs:实心圆(默认)
  • quare:实心方形

无符号无序列表

多媒体标签:

视频


音频


iframe框架标签


属性

width:宽度

height:高度

frameborder:边框粗细

scrolling:滚动条 yes、no、auto

新页面

文章来源于互联网:web 前端 基础HTML知识点

THE END
分享
二维码