【JavaWeb】Html与Css语法简介(上）-阿里云开发者社区

👉引言💎

学习的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。热爱写作，愿意让自己成为更好的人............

	铭记于心
	🎉✨🎉我唯一知道的，便是我一无所知🎉✨🎉

HTML

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容

超文本

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

标记语言

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

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

<p>HTML is a very popular fore-end technology.</p>

这个例子中使用了一个p标签来定义一个段落，

叫『开始标签』，

叫『结束标签』。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫『文本标签体』，也简称『标签体』。

有的时候标签里还带有属性：

<a href="http://www.xxx.com">show detail</a>

href="www.xxx.com"就是属性,

href是『属性名』，"http://www.xxx.com"是『属性值』。

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

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

一. HTML的结构

文档声明: HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本，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标签内。
注释: HTML注释的写法是：

<!-- 注释内容 -->

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

HTML语法规则

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

HTML的各个标签的使用

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>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>

3. 换行标签

代码

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. <br/>The only real requirement we have is that your CSS validates.

4. 无序列表标签

代码

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

5. 超链接标签(重要)

代码

<body>
    <!--
        超链接标签a的作用: 进行资源跳转
            href: 你要跳转到的资源的路径
            target: 新页面的打开方式
    -->
    <!--
        1. 跳转到本项目的资源: 使用相对路径
            相对路径: 以当前路径作为基准，如果资源跟我说同一个目录下的则直接写资源名就行了
                    如果在不同目录下，要找上一级目录，则使用../
                    . 当前目录
                    .. 上一级目录
        2. 跳转到其它服务器的资源: 此时就要使用完整的url访问路径
    -->
    <a href="../01_html的入门/start.html">跳转到start.html页面</a><br/>
    <!--
        target属性表示新页面的打开方式，我们目前只需要掌握两种取值:
            _self 表示新页面在当前页面打开
            _blank 表示新页面会新打开一个标签页
    -->
    <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
</body>

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

6. 图片标签(重点)

准备图片文件

代码

<!--
img标签是用于显示图片的，它有如下属性
1. src: 用于指定要显示的图片的路径，建议使用相对路径
项目中的图片一般存放在一个img的文件夹中
2. width: 图片的宽度
3. height: 图片的高度
-->
<img src="../img/mm.jpg" width="409" height="292"/>

7. 块标签(重点)

『块』并不是为了显示文章内容的，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。

把下面代码粘贴到HTML文件中查看他们的区别：

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

小结

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

二.路径介绍

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

文件系统

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

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

物理路径举例：
D:\aaa\pro01-HTML\page01-article-tag.html
D:\aaa\pro01-HTML\page02-anchor-target.html

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

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

相对路径
绝对路径（建议使用）

相对路径

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

可以看到使用相对路径有可能会很繁琐，而且在后面我们结合了在服务器上运行的Java程序后，相对路径的基准是有可能发生变化的，所以不建议使用相对路径。

绝对路径

具体例子:

<a href="/aaa/pro01-HTML/animal/cat/miao.html">Cat Page</a>

使用表格标签展示数据(重要)

第一版代码

<!-- 使用table标签定义表格 -->
<table>
    <!-- 使用tr标签定义表格的行 -->
    <tr>
        <!-- 使用th标签定义表头，表头有字体加粗效果 -->
        <th>姓名</th>
        <th>属性</th>
        <th>级别</th>
        <th>忍村</th>
    </tr>
    <tr>
        <!-- 使用td标签定义单元格 -->
        <td>漩涡鸣人</td>
        <td>风</td>
        <td>下忍</td>
        <td>木叶</td>
    </tr>
    <tr>
        <td>宇智波佐助</td>
        <td>雷&火</td>
        <td>下忍</td>
        <td>木叶</td>
    </tr>
    <tr>
        <td>我爱罗</td>
        <td>沙</td>
        <td>影</td>
        <td>砂隐村</td>
    </tr>
</table>

没有表格边框。想要显示好看的表格边框可以把下面的style标签代码复制粘贴到head标签里,CSS还没讲，不必在意语法细节，整体照搬即可。

<style type="text/css">
    table,th,td {
        border-collapse: collapse;
        border: 1px solid black;
        padding: 5px;
    }
</style>

我们发现，相较于目标效果而言，还未实现横纵向合并单元格

合并单元格

横向合并单元格(列合并)

使用colspan属性将两个横向相邻的单元格跨列合并：

<tr>
    <td>宇智波佐助</td>
    <td>雷&火</td>
    <td colspan="2">下忍</td>
</tr>

注意: 『被合并』的单元格要删掉。

纵向合并单元格(行合并)

使用rowspan属性将两个纵向相邻的单元格跨行合并：

<tr>
    <td>宇智波佐助</td>
    <td rowspan="2">雷&火</td>
    <td colspan="2">下忍</td>
</tr>
<tr>
    <td>我爱罗</td>
    <td>影</td>
    <td>砂隐村</td>
</tr>

注意: 『被合并』的单元格要删掉。

表单标签(最重要)

表单标签的作用

在项目开发过程中，凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器

form标签的介绍

在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
</form>

action属性

用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。

method属性

『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

什么是『请求方式』？

浏览器和服务器之间在互相通信时有大量的『数据』需要传输。但是不论是浏览器还是服务器都有很多不同厂商提供的不同产品。

常见的浏览器有：

Chrome
Firefox
Safari
Opera
Edge

常见的Java服务器有：

Tomcat
Weblogic
WebSphere
Glassfish
Jetty

这么多不同厂商各自开发的应用程序怎么能保证它们彼此之间传输的『数据』能够被对方正确理解呢？

很简单，我们给这些数据设定『格式』，发送端按照格式发送数据，接收端按照格式解析数据，这样就能够实现数据的『跨平台传输』了。

【JavaWeb】Html与Css语法简介(上）

👉引言💎

HTML

超文本

标记语言

一. HTML的结构

HTML语法规则

HTML的各个标签的使用

1.标题标签

2。段落标签

3. 换行标签

4. 无序列表标签

5. 超链接标签(重要)

6. 图片标签(重点)

7. 块标签(重点)

小结

二.路径介绍

文件系统

相对路径

绝对路径

使用表格标签展示数据(重要)

第一版代码

合并单元格

横向合并单元格(列合并)

纵向合并单元格(行合并)

表单标签(最重要)

表单标签的作用

form标签的介绍

action属性

method属性

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【JavaWeb】Html与Css语法简介(上）

👉引言💎

HTML

超文本

标记语言

一. HTML的结构

HTML语法规则

HTML的各个标签的使用

1.标题标签

2。 段落标签

3. 换行标签

4. 无序列表标签

5. 超链接标签(重要)

6. 图片标签(重点)

7. 块标签(重点)

小结

二.路径介绍

文件系统

相对路径

绝对路径

使用表格标签展示数据(重要)

第一版代码

合并单元格

横向合并单元格(列合并)

纵向合并单元格(行合并)

表单标签(最重要)

表单标签的作用

form标签的介绍

action属性

method属性

热门文章

最新文章

相关课程

相关电子书

相关实验场景

2。段落标签