JavaWeb『HTML&&CSS』

前言:参考于尚硅谷的javaweb的笔记,复习专用

在这里插入图片描述

第一节 HTML简介

1、名词解释

HTML是Hyper Text Markup Language的缩写。意思是 『超文本标记语言』

html语言是解释型语言,不是编译型。浏览器是容错的

2、超文本

HTML文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式,这就是超文本的含义——本身是文本,但是呈现出来的最终效果超越了文本。

3、标记语言

说HTML是一种『标记语言』是因为它不是向Java这样的『编程语言』,因为它是由一系列『标签』组成的,没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单,每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号+标签名的方式来定义的:

<title>Title</title>

这个例子中使用了一个p标签来定义一个段落,< title >叫 『开始标签』 ,< /title >叫 『结束标签』 。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫 『文本标签体』,也简称 『标签体』

有的时候标签里还带有 『属性』

<a href="http://www.baidu.com">百度</a>

href="http://www.baidu.com"就是属性,href是 『属性名』,"http://www.baidu.com"是 『属性值』

还有一种标签是 『单标签』

<input type="text" name="username" />

5、HTML文件结构

①文档类型声明

HTML4版本的文档类型声明是:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5版本的文档类型声明是:

<!DOCTYPE html>

但现在主流的技术选型都是使用HTML5,之前的版本基本不用了。

②根标签

html标签是整个文档的根标签,所有其他标签都必须放在html标签里面。上面的文档类型不能当做普通标签看待。

③头部

head标签用于定义文档的头部,其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

④主体

body标签定义网页的主体内容,在浏览器窗口内显示的内容都定义到body标签内。

⑤注释

<!-- 注释内容 -->

注释的内容不会显示到浏览器窗口内,是开发人员用来对代码内容进行解释说明。

6、HTML语法规则

  • 根标签有且只能有一个
  • 无论是双标签还是单标签都必须正确关闭
  • 标签可以嵌套但不能交叉嵌套
  • 注释不能嵌套
  • 属性必须有值,值必须加引号,单引号或双引号均可
  • 标签名不区分大小写但建议使用小写

第二节 HTML展示文章

标签名称 功能
h1~h6 1级标题~6级标题
p 段落
a 超链接
ol/li 有序列表
ul/li 无序列表
img 图片
div 定义一个前后有换行的块
span 定义一个前后无换行的块

1、标题标签

①代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

②页面显示效果

在这里插入图片描述

:标题标签前后有换行。

2、段落标签

①代码

<p>这是段落</p>

②页面显示效果

在这里插入图片描述

:段落标签前后有换行。

3、超链接

①代码

<a href="https://www.baidu.com">点击跳转</a>

②页面显示效果

在这里插入图片描述

点击后跳转到href属性指定的页面

target:
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开

4、路径

在我们整个Web开发技术体系中,『路径』是一个贯穿始终的重要概念。凡是需要获取另外一个资源的时候都需要用到路径。要想理解路径这个概念,我们首先要认识一个概念:『文件系统』。

①文件系统

我们写代码的时候通常都是在Windows系统来操作,而一个项目开发完成后想要让所有人都能够访问到就必须『部署』到服务器上,也叫『发布』。而服务器通常是Linux系统。

Windows系统和Linux系统的文件系统有很大差别,但为了让我们编写的代码不会因为从Windows系统部署到了Linux系统而出现故障,实际开发时不允许使用物理路径

例:D:\BaiduNetdiskDownload\druid-1.1.10

但不管是Windows系统还是Linux系统环境下,目录结构都是树形结构,编写路径的规则是一样的。

所以我们以项目的树形目录结构为依据来编写路径就不用担心操作系统平台发生变化之后路径错误的问题了。有了这个大前提,我们具体编写路径时有两种具体写法:

  • 相对路径
  • 绝对路径(建议使用)

②相对路径

相对路径都是以『当前位置』为基准来编写的。假设我们现在正在浏览a页面,想在a页面内通过超链接跳转到z页面。

在这里插入图片描述

所以整个路径的写法是:


                
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会敲代码的z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值