当当当当~~~~欢迎大家阅读,今天我们学习JavaWeb中的HTML基础知识
静态网页
一:Web概念概述
JavaWeb:使用Java语言开发基于互联网的项目
二:软件架构
C/S:Client/Server 客户端/服务器端
概念:在用户本地有一个客户端程序,在远程有一个服务器端程序
优点:用户体验好
缺点:开发、安装、部署、维护麻烦
B/S:Browser/Server浏览器/服务器端
概念:只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
优点:开发、安装、部署、维护简单
缺点:如果应用过大,用户的体验可能会受到影响,对硬件要求过高
B/S架构详解:
资源分布:
静态资源:
概念:使用静态网页开发技术发布的资源
特点:所有用户访问,得到的结果是一样的
过程:如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
动态资源:
概念:使用动态网页技术发布的资源
特点:所有用户访问,得到的结果可能不一样
过程:如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
静态资源:
HTML:用于搭建基础网页,展示页面的内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,让页面有一些动态的效果
HTML
一:概念
HTML:全称Hyper Text Markup Language 超文本标记语言,是最基础的网页开发语言
超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言:由标签构成的语言,标记语言不是编程语言
编辑标签需要注意以下几点哦~~~~
二:注意事项
1:html文档后缀名 .html 或者 .htm
2:标签分类
围堵标签:有开始标签和结束标签.如<html></html>
自闭和标签:开始标签和结束标签在一起.如<br/>
3:标签可以嵌套
正确嵌套(<a><b></b></a>)
不能你中有我,我中有你(<a><b></a></b>)
4:在开始标签种可以定义属性.属性是由键值对构成,值需要用引号(单双都可)引起来
例如:<font color="red" size="5" face="楷体">人生若只如初见</font>
5:html的标签不区分大小写,但是建议使用小写
接下来我们正式进入标签学习吧~~~~
三:标签学习
文件标签:构成html最基本的标签
html:html文档的根标签
head:头标签.用于指定html文档的一些属性.引入外部的资源
title:标题标签
body:体标签
<!DOCTYPE html>:html5中定义该文档是html文档
文本标签:和文本有关的标签
注释:<!--注释内容-->
<h1>to<h6>:标题标签,h1~h6字体大小逐渐递减
<p>:段落标签
<br>:换行标签,也可以用<br/>
<hr>:展示一条水平线,也可以用<hr/>
属性:color:颜色
width:宽度
size:高度
align:对齐方式
center:居中对齐
left:左对齐
right:右对齐<b>:字体加粗
<i>:字体斜体
<font>:字体标签
属性:color:颜色
英文单词:red,green,blue
rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
#值1值2值3:值的范围:00~FF之间.如:#FF00FFsize:大小
face:字体
图片标签:和图片有关的标签
img:展示图片
属性:src:指定图片的位置
alt图片未加载出来时的替换文字
相对路径:以.开头的路径
./:代表当前目录 <img src="./image/jiangxuan_1.jpg"/>
../:代表上一级目录<img src="../image/jiangxuan_1.jpg"/>
列表标签:和列表有关的标签
ol:有序列表
属性: type 排序值的展示类型
start 排序值从几开始li: 定义列表项
ul:无序列表
属性:type:disc实心圆点
square方格
circle圆圈
链接标签:和链接有关的标签
a:定义一个超链接
属性:href:指定访问资源的URL(统一资源定位符)
target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页打开
块标签
div:每一个div占满一整行。块级标签
span:文本信息在一行展示,行内标签 内联标签
语义化标签:html5中为了提高代码的可读性,提供了一些标签
<header></header>
<footer></footer>
表格标签:和表格有关的标签
table:定义表格
属性:width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条
bgcolor:背景色
align:对齐方tr:定义行
属性:bgcolor:背景色
align:对齐方式td:定义单元格
属性:bgcolor:背景色
align:对齐方式
th:定义表头单元格
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
<table border="1" width="50%" cellpadding="0" cellspacing="0" align="center" >
<thead>
<caption>学生成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>小龙女</td>
<td>女</td>
<td>100</td>
</tr>
<tr align="center">
<td>2</td>
<td>杨过</td>
<td>男</td>
<td rowspan="2">90</td>
</tr>
<tr align="center">
<td>3</td>
<td>金轮法王</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td>总成绩</td>
<td colspan="3" >190</td>
</tr>
</tfoot>
</table>
以上就是HTML基础知识内容啦,希望我的文章对你有所帮助,如果有错误的地方还望大家批评指正,谢谢大家阅读!