web系统架构体系

  • B/S（Browser/Server）：浏览器实现

    • 优点：

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

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

什么是HTML

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

超文本

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

W3C标准

结构化标准语言（XHTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

HTML标签

标签一般成对存在，如<html></html>

结构体标签

<!DOCTYPE html>

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

html标签

<!--html的根标签-->

<html></html>

title标签

<!--设置网页标题-->

<title>我的网页</title>

meta标签

<!-- meta标签，charset 设置网页字符集编码-->

<meta charset="utf-8">

<meta name="keywords" content="关键字">

<meta name="description" content="描述">

body标签

<!--体标签，网页呈现的内容-->

<body>内容</body>

文本标签

注释

<!-- 注释的内容 -->

标题

<!-- 数字范围：1 ~ 6，数字越大，字体越小-->

<h数字>标题<h数字>

字体

<!-- font标签 -->

<!-- 属性color：文字颜色（英文单词、#+6位16进制的颜色值、rgb(,,)）-->

<!-- 大小seize：选值1-7，默认是3 -->

<!-- 字体face：选择字体名称 -->

<font color=red>HelloWorld</font>

换行

<!-- 单标签，换行 -->

<br/>

水平分割线

<!-- hr标签，分割线，单标签

    属性

    color：颜色

    width：可以使用像素（px）或者百分比

    align：水平对齐方式，默认居中

-->

<hr color="blue" width="80%" aligin=left>

加粗

<b></b>

倾斜

<i></i>

下划线

段落

<p></p>

居中

<center></center>

下标

<sub></sub>

上标

<sup></sup>

图片标签

<img src="地址"

width="宽度"

height="高度"

align="图文混排时，对齐方式，居中：middle"

alt="图片说明，当图片加载失败显示"

title="鼠标悬停说明"/>

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

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

超链接

<a href="地址或#+锚链接名" target="打开新窗口的位置">链接名或图片</a>

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

target = "_blank"：新窗口打开

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

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

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

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

发送邮件

<a herf="mailto:邮箱地址">连接名或图片</a>

下载

<a herf="只可以是zip文件">连接名或图片</a>

表格标签

<!--table代表表格标签，tr代表行，td代表列-->

<table>

    <tr>

        <td>编号</td>

        <td>名称</td>

        <td>价格</td>

    </tr>

    <tr>

        <td>001</td>

        <td>苹果</td>

        <td>12</td>

    </tr>

    <tr>

        <td>002</td>

        <td>香蕉</td>

        <td>18</td>

    </tr>

</table>

属性

表格的属性（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、除开始位置的单元格外，被合并的单元格进行删除

<!-- 合并开始的单元格 -->

<td colspan\rowspan="合并的列（横向）、行数">除开始的单元格、其余删除</td>

表单标签

<form method="get\post" action="表单提交的目标地址">

    账号:<input name="lname"/><br />

    密码:<input type="password" name="psw"/><br />

    <button type="submit">登录</button>

</form>

form标签的属性

method = "get\post提交方式"

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

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

文本框标签（<input> </input>）属性

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="button\submit\reset" 按钮
  • type="image" 图形化按钮，功能相当于submit

placeholde = "提示文字"

按钮标签（<button></button>）属性

type = "按钮功能"

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

下拉框标签

<select>

    <option>下拉框列表标签</option>

    <option selected="selected">默认选中</option>

</select>

文本域标签

<textarea></textarea>

列表标签

有序列表

<ol type="1">

  <li></li>

  <li></li>

  <li></li>

</ol>

type：序号类型

  • 1：数字（默认）
  • A：大写字母
  • I：大写罗马数字
  • a：小写字母
  • i：小写罗马数字

无序列表

有符号无序列表

<ul type="circle">

  <li></li>

  <li></li>

  <li></li>

</ul>

type：符号类型

  • circle：空心圆
  • discs：实心圆（默认）
  • quare：实心方形

无符号无序列表

<dl>

  <dt></dt> <!-- 列表标题 -->

  <dd></dd>

  <dd></dd>

  <dd></dd>

</dl>

多媒体标签：

视频

<video width="320" height="240" controls> <!--controls为视频播放控制键-->

    <source src="视频地址" type="video/文件格式">

    您的浏览器不支持 HTML5 video 标签。

</video>

音频

<audio controls>

    <source src="音频地址" type="audio/文件格式">

    Your browser does not support this audio format.

</audio>

iframe框架标签

<iframe src="引用页面地址"></iframe>

属性

width：宽度

height：高度

frameborder：边框粗细

scrolling：滚动条 yes、no、auto

新页面

web 前端 基础HTML知识点的更多相关文章

  1. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  5. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  6. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  7. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  8. 1+x 证书 Web 前端开发 MySQL 知识点梳理

    官方QQ群 1+x 证书 Web 前端开发 MySQL 知识点梳理 http://blog.zh66.club/index.php/archives/199/

  9. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

随机推荐

  1. IIS项目部署和发布

    VS2019如何把项目部署和发布 这里演示:通过IIS文件publish的方式部署到Windows本地服务器上 第一步(安装IIS) 1.在自己电脑上搜索Windows功能里的[启用或关闭Window ...

  2. 容器内的Linux诊断工具0x.tools

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 Linux上有大量的问题诊断工具,如perf.bcc等,但这些诊断工具,虽然功能强大,但却需要很高的权限才可以使用 ...

  3. css实现弹框

    CSS遮罩层实现思路:遮罩层的影藏方式一般有display:none.visibility:none.opacity: 0.遮罩层从无到有的出现效果一般是opacity值从0~1,结合transiti ...

  4. C#/VB.NET 创建图片超链接

    超链接(Hyperlink)可以看做是一个"热点",它可以从当前Web页定义的位置跳转到其他位置,包括当前页的某个位置.Internet.本地硬盘或局域网上的其他文件,甚至跳转到声 ...

  5. Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat

    基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...

  6. Kubernetes API 基础

    APIServer 在kubernetes架构概念层面上,Kubernetes由一些具有不同角色的服务节点组成.而master的控制平面由 Apiserver Controller-manager 和 ...

  7. 04C++核心编程(二-泛型编程)

    Day08 笔记 1 函数模板 1.1 泛型编程 – 模板技术 特点:类型参数化 1.2 template< typename T > 告诉编译器后面紧跟着的函数或者类中出现T,不要报错, ...

  8. 网易数帆 Envoy Gateway 实践之旅：坚守 6 年，峥嵘渐显

    服务网格成熟度不断提升,云原生环境下流量处理愈发重要, Envoy Gateway 项目于近日宣布开源,"旨在大幅降低将 Envoy 作为 API 网关的使用门槛",引发了业界关注 ...

  9. 深度学习与CV教程(6) | 神经网络训练技巧 (上)

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/37 本文地址:http://www.showmeai.tech/article-det ...

  10. Flink中如何实现一个自定义MetricReporter

    什么是 Metrics 在 flink 任务运行的过程中,用户通常想知道任务运行的一些基本指标,比如吞吐量.内存和 cpu 使用情况.checkpoint 稳定性等等.而通过 flink metric ...