JavaWeb ：HTML快速入门

*共清欢*

已于 2022-04-19 20:05:15 修改

阅读量173

点赞数

分类专栏： JavaWeb基础文章标签： html5 前端

于 2022-04-19 20:02:12 首次发布

本文链接：https://blog.csdn.net/Z2658172512/article/details/124279067

版权

JavaWeb基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

当当当当~~~~欢迎大家阅读，今天我们学习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之间.如:#FF00FF

size:大小

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基础知识内容啦，希望我的文章对你有所帮助，如果有错误的地方还望大家批评指正，谢谢大家阅读!

*共清欢*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb ：HTML快速入门

当当当当~~~~欢迎大家阅读，今天我们学习JavaWeb中的HTML基础知识一：概念HTML:全称Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本标记语言：由标签构成的语言，标记语言不是编程语言编辑标签需要注意以下几点哦~~~~二：注意事项1：html文档后缀名 .html 或者 .htm2：标签分类围堵标签：有开始标签和结束标签.如&lt...
复制链接

扫一扫

专栏目录