web概念和HTML学习

最新推荐文章于 2022-06-04 19:57:36 发布
最新推荐文章于 2022-06-04 19:57:36 发布
阅读量314 收藏 1
点赞数
分类专栏： 前端 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44722917/article/details/108205092
版权

web和HTML

web概念

软件架构：

  1. C/S: Client/Server 客户端/服务器端
  • 在用户本地有一个客户端程序，在远程有一个服务器端程序
    • 优点：用户体验好
    • 缺点：开发、安装，部署，维护 麻烦
  1. B/S: Browser/Server 浏览器/服务器端

  • 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序

    • 优点：开发、安装，部署，维护 简单

    • 缺点：1. 如果应用过大，用户的体验可能会受到影响，2. 对硬件要求过高

B/S架构详解：

资源分类：
  1. 静态资源：
  • 使用静态网页开发技术发布的资源。
  • 特点：
    • 所有用户访问，得到的结果是一样的。
    • 如：文本，图片，音频、视频，HTML，CSS，JavaScript
    • 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  1. 动态资源：
  • 使用动态网页及时发布的资源。
  • 特点：
    • 所有用户访问，得到的结果可能不一样。
    • 如：jsp/servlet,php,asp…
    • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

静态资源：

HTML：用于搭建基础网页，展示页面的内容

CSS：用于美化页面，布局页面

JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

概念：

是最基础的网页开发语言（Hyper Text Markup Language 超文本标记语言）

超文本：

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

超越了文本本身要表达的内容。

标记语言:

由标签构成的语言。<标签名称> 如 html，xml

<a href = "www.baidu.com">百度一下</a>
<开始标签 属性 = "属性值">标签体</结束标签>

标记语言不是编程语言

语法

  1. html文档后缀名 .html 或者 .htm

  2. 标签分为

    1. 围堵标签，成对：有开始标签和结束标签。如

       <html> </html>

    2. 自闭和标签：开始标签和结束标签在一起。如

       <br/>

  3. 标签可以嵌套：
    需要正确嵌套，不能你中有我，我中有你

    错误：<a><b></a></b>
正确：<a><b></b></a>

  4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

  5. html的标签不区分大小写，但是建议使用小写。

标签学习：

文件标签：构成html最基本的标签

html:html文档的根标签

  • head：头标签。用于指定html文档的一些属性。引入外部的资源

  • title：标题标签。

  • body：体标签

  • html5中定义该文档是html文档，告诉浏览器该页面开发用的是html的哪个版本

    <!DOCTYPE html>

文本标签：和文本有关的标签

注释：<!-- 注释内容 -->
<h1> to <h6>：标题标签
	h1~h6:字体大小逐渐递减
	一个页面中，最多只能有一个h1标签  seo优化
    独自占一行，且有一定的行距
<p>：段落标签
    独占一行，且超过一屏自动换行
<br>：换行标签
<hr>：展示一条水平线
	属性：
		* color：颜色
        * width：宽度
		* size：高度
		* align：对其方式
			* center：居中
			* left：左对齐
    		* right：右对齐
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中
    属性：
		* color：颜色
		* size：大小
		* face：字体
属性定义：
    color：
    	1. 英文单词：red,green,blue
        2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
		3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
    width：
		1. 数值：width='20' ,数值的单位，默认是 px(像素)
		2. 数值%：占比相对于父元素的比例

图片标签：

<img>：展示图片
	属性：
		src：指定图片的位置
		align：对其方式
			* left：左对齐
    		* right：右对齐
		width：宽度
		height：高度
		alt：若图片损坏则显示alt属性值
		title：当光标放在图片上时显示的title属性值

列表标签：

有序列表：
	ol:
	li:
无序列表：
	ul:
	li:

链接标签:

a:定义一个超链接
	属性：
		href：指定访问资源的URL(统一资源定位符)
		target：指定打开资源的方式
			_self:默认值，在当前页面打开
			_blank：在空白页面打开

div和span：

div：每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签 内联标签

语义化标签：

html5中为了提高程序的可读性，提供了一些标签。

<header></header>：页眉
<footer></footer>：页脚
<aside></aside>：侧边栏
<article></article>：内容区

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的网页</title>
    <!--<link rel="icon" href="../img/aaa.jpg" sizes="32x32">-->
    <link rel="shortcut icon" href="../img/favicon.ico"type="image/x-icon">
</head>
<body>
<!--这里是注释-->
<!--    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>-->
    <h3>出塞</h3>
    <p>[唐] 王昌龄</p>
    <p><hr color="#ff0000"width="90%"size="5px"align="left"/><center>秦时<b>明月</b>汉时关，<i>万里</i>长征人未还。<br/>但使<font color="aqua">龙城</font>飞将在，不教胡马度阴山。</center><hr color="#ff0000"width="90%"size="5px"align="left"/></p>

    <!--<img src="../img/aaa.jpg"title="美女" align="left"width="500"height="500"alt="刘亦菲">-->

    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <ol>
        <li>苹果</li>
        <li>西瓜</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>

    <a href="https://www.baidu.com/"target="_blank">百度一下(在空白页面打开)</a>
    <a href="https://www.baidu.com/"target="_self">百度一下(当前页面打开)</a>
    <a href="mailto:874603913@qq.com">联系我们</a>
    <a href="http://www.baidu.com"><img src="../img/favicon.ico"></a>

    <div>adasdasdas</div>
    <div>adasdasdas</div>
    <div>adasdasdas</div>
    <span>asdadasdas</span>
    <span>asdadasdas</span>
    <span>asdadasdas</span>
</body>
</html>

表格标签：

table：定义表格
	width：宽度
	border：边框
	cellpadding：定义内容和单元格的距离
	cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
	bgcolor：背景色
	align：对齐方式
tr：定义行
	bgcolor：背景色
	align：对齐方式
td：定义单元格
	colspan：合并列
	rowspan：合并行
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

围堵标签：
自闭和标签：<br/>、<hr/>、<img/>

块级标签：<div></div>、<hr></h>、<p></p>、<h></h>、<br>、<li></li>
行内标签：<a></a>、<span></span>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<table width="50%" border="1px" cellpadding="10px" cellspacing="10" bgcolor="#a52a2a" align="center">
    <caption>表格</caption>
    <tr>
        <td bgcolor="aqua" align="center">01</td>

        <td colspan="2" align="center">03</td>
    </tr>
    <tr>
        <td rowspan="2">11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

</body>
</html>
小孩与狗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web框架之Hibernate
a1192900925的博客
12-09 1021
skrskr WO WOWO~ 咸鱼了好几天，又开始挤点时间学习JAVAEE的内容了，Filter继承完复写方法啊，配置web.xml啊配置拦截路径。监听器啊，监听各种动作，能监听session，上下文啊，配置xml。真的是无穷无尽的配置xml，还学习了Ajax这种异步刷新的思想，是非常酷的。new XMLHttpRequest，然后搞个那个onreadystatechange 发生变化可以调用那个函数，还可以用xmlhttp.responseText来直接获取到返回的数据。前辈们的这个思想很好，据说这样做
Winform和ASP.NET、Web API详解
江南、寻你的博客
10-28 2588
学完C#之后，就是进行Winform和ASP.NET、Web API的学习，这里会讲到winform框架的简单使用，ASP.NET项目的创建及架构的设计，Web API项目的创建与实战的学习（包含jwt认证等）
web前端批量下载文件和图片探索
weixin_42471170的博客
05-26 2915
1.图片，文件批量下载（不跨域的情况下） import JSZip from 'jszip'; import {saveAs} from 'file-saver'; import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { let obj = { method: ‘get’, url, // responseType: ‘blob’ responseType: ‘ar
Web_HTML
weixin_42132959的博客
04-16 522
1.什么是HTML？(Hyper Text Markup Language:超文本标记语言) 超文本：功能比普通文本更加强大 标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言) 2.语法和规范？ HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。 HTML文件分为头部分(<head></head>)和体部分(<body>&...
web兼容性面试题及答案
cen的博客
01-23 8068
1. HTML 对象获取问题 FireFox：document.getElementById(“idName”); ie:document.idname 或者 document.getElementById(“idName”). 解决办法：统一使用 document.getElementById(“idName”); 参与互动 2. const 问题 Firefox 下,可以使用 const 关键字或 var 关键字来定义常量; IE 下,只能使用 var 关键字来定义常量. 解决方法：统一使用 var
web-231:学习JavaScript语言的基本概念
05-06
WEB 231企业JavaScript I 贡献者 讲师姓名：Krasso教授 学生姓名：Soliman Abdelmalak
30-Days-Of-HTML:逐步指南，旨在在30天内学习HTML，DOM树和Web开发的概念
05-22
阻塞和非阻塞元素 练习题 第五天 HTML5格式元素 练习题 第六天 HTML5语义元素 锻炼 第七天 HTML文档元数据 练习题 第八天HTML表格 第九天HTML表格 第十天 清单 订购清单 无序列表 说明清单 11天 文件路径 元标记 第...
学习web前端开发html必备的开发文档
03-25
网页设计文档，包括html5等前端编程的基本操作包括html设计的思维导图，以及一些基本概念，作为前端开发者的必备学习文档，解决你的困惑
前端网页Web开发基础Html入门CSS样式JS学习14小时视频教程含资料第一部分，共2部分
04-18
前端网页Web开发基础Html入门CSS样式JS学习14小时视频教程含资料 包含代码+书籍+课件 本部分1-23集+课件+代码+书籍 1-42集课程，css+html+js ...所有的教程资料都包含在内，方便你随时随地进行学习和复习。
前端网页Web开发基础Html入门CSS样式JS学习14小时视频教程含资料第二部分，共2部分
最新发布
04-18
前端网页Web开发基础Html入门CSS样式JS学习14小时视频教程含资料 包含代码+书籍+课件 本部分24-42集 1-42集课程，css+html+js 这个14小时的视频教程...所有的教程资料都包含在内，方便你随时随地进行学习和复习。
初识—Html VS Web窗体
信息技术提高班第九期
06-01 4295
一、Html和web窗体的区别：       1、   HTML页是静态的，也就是不用和后台交互的，上面的内容全部都是你写好的，但是有一个最大的优点就是因为网页全是静态的，所以HTML页的加载速度是最快的。         .HTML是静态页面，不与服务器进行交互的.aspx也可以说成是静态的。.html在运用到Ajax的时候也可以实现动态的功能，并且比.aspx更加的灵活，只是开发起来相对要
HTML5和Web前端是什么关系？
weixin_43703144的博客
07-09 681
HTML5和Web前端是什么关系?下面和千锋广州小编一起来看看吧！ 什么是HTML5? HTML5其实是一种技术的集合，它包括了HTML5，CSS3，JS等技术。而Web前端则是一种职业，国内从2005年开始发展的，是由网页设计师演变过来的。如果从技术上说，Web前端涉及到的技术有很多，包括HTML5，除此之外还有JSON，AJAX，DOM等。不过这也看具体的公司吧，不同的公司对Web前端开发人员的技术要求也不一样。 什么是Web前端? 再传统规的意义上来讲，网站是分为前端和后端的，前端就是我们俗称的页面以
web和html初识
qq_45507751的博客
12-11 573
一、认识WEB「网页」主要是由 文字 、 图 像 和 超 链 接 等元素构成，当然除了这些元素，网页中还可以 包括音频、视频以及F l a sh等。「浏览器」是网页显示、运行的平台。「浏览器内核」(排版引擎、解释引擎、渲染引擎) 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。 浏览器 内核 备注 IE Trident I E、猎豹安全、360极速浏览器、百度浏览器 firefox Geko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样...
python Web -HTML
错位的梦寐的博客
07-05 335
1，web 什么是web web就是网页，是一种基于B/S的应用程序 B：Browser 浏览器 S ：Server 服务器 C：Client 客户端 web 组成 浏览器：代替用户向服务器发送请求 服务器：接收用户请求并响应 通信协议：规范数据在网络中是如何打包即传递的 http:HyperText transfer protocal 超文本传输协议 web服务器 1 .作用： 接收用户请求并...
Web-HTML入门（保姆教程）
乌鸦喜欢写字台
11-11 724
1、简单介绍Web 这里说一下Web的标准（Web的标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C称为万维网联盟）。 只需记住Web标准的构成：主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三个方面。 标准 说明 结构 结构用于对网页元素进行整理和分类、现阶段主要学习HTML 表现 表现用于设置网页元素的板式、颜色、大小等外
web常用标签
热门推荐
Solar_angel的博客
06-04 1万+
web入门标签
Android native和h5混合开发几种常见的hybrid通信方式
Felix的专栏
05-03 3151
三种解决方法本质都是通过重载webview的一些策略来和native api通讯。 前言 在看这篇文章之前你要确保你有那么一点点的js知识，没错只需要一点点，能看懂最简单的代码就可以。如果你之前没接触过js的话。。也没关系，我会把其中对应的逻辑用语言表达出来。 为什么需要用到js呢，因为前端体系中，像我们说的点击按钮这样的逻辑都是放在js脚本中执行的，有点像我们Android
二、web网站与html
come_bn的博客
11-09 946
一、web相关名词介绍 www就是world wide web的简称，我们称为全球广域网，也称为万维网； web是一种基于http协议的、全球性的、动态的跨平台分布式图形信息系统，我们最常见的就是网站服务 网站就是由多个网页组合而成的集合； 网页就是通过浏览器展示，包含图片、文字、链接、声音…..等内容的一种html文件； 网页在浏览器上进行解析和展示； 二、HTML基本介绍 1、基本定义：超文本标记语言，超是超链接； 2、目前最流行的版本就是HTML5.0，W3C组织负责制定html语言的标
[NPUCTF2020]web狗
SopRomeo的博客
10-27 1215
新东西 审计源码发现采用AES加密 这是拿php写的AES加密页面,emmm，这个是密码学的东西 不愧是web???? 由源码可知 AES密钥长度为128位，加密$iv和明问$data可控。 AES CBC的两种攻击手法：Padding Oracle和字节反转 这道题刚好考到这两点 Padding Oracle适合在我们可以知道iv，不清楚加密Key，能够区分解密成功与否的情况下，直接获得明文 而这题刚好可以判断解密是否成功 Padding Oracle 根据上述文章 在Padding Oracle At
java web 课程概述和学习目的
06-08
Java Web 课程是一门针对 Web 开发的 Java 课程，学习目的主要是让学生掌握 Java Web 开发的相关技术和知识，能够独立完成 Web 应用程序的开发。具体而言，Java Web 课程涵盖了以下内容： 1. Java Web 开发的基础...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值