Web开发基础01-Html与CSS

1.软件架构

CS:client/server 客户端/服务器端

BS:browser/server浏览器/服务器端

1.1.BS架构的详解

1.1.1. 资源分类 分为静态资源和动态资源

静态资源:

  • 使用静态网页开发技术发布的资源(html css javascript)
  • 如新闻,不管是谁,看的一样
  • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,而浏览器内置了静态资源解析引擎,可以展示静态资源。

动态资源:

  • 使用动态网页技术开发发布的资源(jep/servlet,php,asp)
  • 所有用户访问,得到的结果可能不一样
  • 如果用户请求的动态资源,那么服务器会执行动态资源,转换(后面得明白如何转换)为静态资源,然后服务器端往浏览器发送的是静态资源。

2.HTML

用于搭建基础网页,展示页面的内容,超文本标记语言,超文本(用超链接的方法将各种不同的文字信息组织在一起的网状文本),标记语言(就是<标签名称>):如html、xml。标记语言不是编程语言,写上就会执行。

2.1.标签分类

  • 围堵标签:<html></html>   <head></head>  <body></body>
  • 自闭和标签:开始标签和结束标签在一起,也就是一行前后,如<br/>(换行符)
  • 标签可以嵌套 需要正确的嵌套,不能你中有我,我中有你。
  • 如何定义属性:在开始标签中可以定义属性,属性是由键值对构成,值需要用引号(单双引号都行)
  • 大小写区分么? html中不区分大小写,建议小写。

2.2.标签学习:

  • 文件标签
  • 文本标签
  • 图片标签
  • 列表标签
  • 超链接标签 :

<a> 定义一个超链接 ,如<a >点我</a>

属性:1.href:指定访问资源得url(统一资源定位符)

2.target: _self 默认值,本页面打开  _blank 新页面打开

3.除了访问外部链接,也可以访问内部链接,即<a href=”./5_列表标签.html”>列表标签</a>

4.还可以添加一些邮箱等协议,如 <a href=”mailto:[email protected]”>联系我们</a> 点击联系我们,将会自启动本地邮箱客户端

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <a href="https://www.baidu.com">点我</a><br> <!-- 超链接,在本页面显示-->
    <a href="https://www.baidu.com" target="_self">点我</a><br> <!-- 超链接,本页面显示 一般默认就是_self-->
    <a href="https://www.baidu.com" target="_blank">点我</a><br> <!-- 超链接,新增页面显示-->
</body>
</html>
  • 表格标签

3.CSS

用于布局页面,美化工作

4.javascript

用于页面的动态效果,控制元素,而不是动态资源。第三节会学习

原文地址:https://www.cnblogs.com/rango0550/p/12175476.html

时间: 2024-10-05 01:15:23

Web开发基础01-Html与CSS的相关文章

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

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

浏览器---WEB开发基础之三

通过HTTP协议的介绍,打开网页必须建立TCP连接,然后通过HTTP协议进行交互,因此,浏览器访问网址,第一件事就是建立TCP连接,但是TCP连接是基于IP的,而我们输入的却是网址,所以,实际上第一件事,应该是通过DNS去查找网址(也就是域名)对应的主机的IP,然后才是三次握手建立TCP连接(此处知识详见<计算机网络基础>),然后浏览器向服务器发送: GET HTTP://www.baidu.com HTTP/1.1  Accept: application/x-ms-application,

web开发基础--字节序

1.有效位 在谈字节序前需要先了解有效位,有效位分为两种:最低有效位(LSB: Least Significant Bit) 和最高有效位(MSB:Most Significant Bit).在二进制数中,LSB是最低加权位,与十进制数字中最右边的一位类似:MSB是最高加权位,与十进制数字中最左边的一位类似.通常,MSB位于二进制数的最左侧,LSB位于二进制数的最右侧.以一个十进制的数12345678为例,最高有效位就是1,最低有效位就是8. 2.字节序: 字节序,顾名思义字节的顺序,就是大于一

Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题

PHP 系列:PHP Web 开发基础

PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集依赖,我就再也离不开它了,幸亏Java中也有Maven管理jar包,虽然开源中国的镜像太慢但还有ibiblio的镜像可用,PHP现在终于有了Composer(参考1)用来管理资源包. (1)全局安装(参考2) 在指定安装目录中执行命令行: php -r "readfile('https://getc

移动web开发基础知识

首先做开发码子编完了我们得有个工具去看效果,PC端开发我们有firefox,chrome等等,那么我们做手机web用什么做调试?手机设备多种多样,不同品牌,不同的屏幕尺寸.当然我们不可能把所有的手机设备都买齐了,然后在开发的时候,在桌子上从左到右依次摆放,在写了一段代码之后,从左到右依次刷新,呵呵.如果真有人这么去做,我也不说啥了,我只求跪求土豪咱做朋友吧~嘿嘿. 废话说了一推,说回重点:首先,移动web开发咱需要一个调试工具. 1.Google emulation:谷歌的移动端模拟器,简单的理

Java Web开发基础(3)-JSTL

在DRP项目中接触到了JSTL标签库,对我这样的比較懒的人来说,第一感觉就是"惊艳". JSTL标签库的使用.能够消除大量复杂.繁复的工作.工作量降低的不是一点半点.是降低了一大半.不论什么工具的引入,都会使我们的工作变的简单.可是问题是我们工作能够变的简单,可是我们不能让自己的大脑变的简单.所以,我们不是简单的会用就能够.我们还须要了解这个工具是怎样工作的.怎样为我们提供便利的.ok.以下进入正题,我们从问题開始-- JSP脚本带来的问题 不知道看到这几个子,各位有什么想法?反正我认

Web开发基础01-HTML+CSS

1.web概念概述 javaweb 使用java语言开发基于互联网的项目.在做任何软件开发过程中,都得选择一种架构,从事开发工作.而软件架构分为C/S和B/S类型 HTML 原文地址:https://www.cnblogs.com/rango0550/p/12055745.html

Web开发基础-Node.js-01

01-浏览器工作原理 1)人机交互部分(ui) 2)网络请求部分(socket) 3)javascript引擎 4)渲染引擎(解析html,css) 5)数据存储部分(cookie,本地存储等) --渲染引擎介绍 工作原理: 解析html,构建dom树 构建渲染树 对渲染树布局 绘制渲染树,调用操作系统底层API进行绘图操作 02渲染器工作原理-WEB-worker 简介: JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事.前面的任务没做完,