目录
在讲解Html之前,先了解一下Web
Web的 软件架构:
①C/S:Client/Server 客户端/服务器端
在用户本地有一个客户端程序,在远程有一个服务器端程序。
优点:
体验性好
缺点:
开发,安装,部署,维护麻烦。
②B/S: Browser/Server 浏览器/服务器端
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序。
优点:
开发,安装,部署,维护简单。
缺点:
(1) 如果应用过大,用户的体验可能会受到影响
(2)对硬件要求过高。
B/S架构详解:
资源分类:
1. 静态资源:
* 使用静态网页开发技术发布的资源。
* 特点:
* 所有用户访问,得到的结果是一样的。
* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
2. 动态资源:
* 使用动态网页及时发布的资源。
* 特点:
* 所有用户访问,得到的结果可能不一样。
* 如:jsp/servlet,php,asp...
* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
然而静态资源则分为三种:
HTML:用于搭建基础网页,展示页面的内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,让页面有一些动态的效果
本篇博客则是讲解HTML的概念,基本语法以及使用。
HTML(超文本标记语言)
概念:
全称:Hyper Text Markup Language 超文本标记语言。
超文本:
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
标记语言:
由标签构成的语言。<标签名称> 如 html,xml
标记语言不是编程语言。
快速入门:
语法:
1. html文档后缀名 .html 或者 .htm
2. 标签:
围堵标签:有开始标签和结束标签。如 <html> </html>
自闭和标签:开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套:需要正确嵌套,不能你中有我,我中有你(如:<a><b></b></a>)
4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
5. html的标签不区分大小写,但是建议使用小写。
代码:
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
标签分类:
①文件标签(定义:构成html最基本的标签)
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档
②文本标签
③图片标签
img:展示图片
属性: src+指定图片的位置
代码:
<!--展示一张图片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<!--
相对路径
以.开头的路径:
./:代表当前目录 ./image/1.jpg
../:代表上一级目录
-->
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
④列表标签
有序列表(ol(order list)):
属性:
type:规定显示样式,可选择
start:规定从哪里开始
代码:
<!--有序列表-->
早上起床干的事情
<ol type="A" start="s">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
无序列表(ul(无序列表)):
属性:type:
值:disc ,square, circle
⑤链接标签
属性:
代码:
⑥特殊标签(块标签)
div:每一个div占满一整行。块级标签
span:文本信息在一行展示/行内标签/内联标签
语义化标签:html5中为了提高程序的可读性,提供了一些标签。
<header>:页眉
<fooater>:页脚
⑦表格标签
table:定义表格
⑧表单标签
表单:
作用:用于采集用户输入的数据的。用于和服务器进行交互。
form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
属性:
action:指定提交数据的URL
method:指定提交方式(一共7种,2种比较常见):
①get
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
②post
1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。
注意: 表单项中的数据要想被提交:必须指定其name属性