Java成长之路 —— HTML基础_html

文章目录

  • ​​1. HTML 概念​​
  • ​​2. HTML 基础​​
  • ​​1. 注意事项：​​
  • ​​2. 标签学习：​​
  • ​​1. 文件标签：构成html最基本的标签​​
  • ​​2. 文本标签：和文本有关的标签​​
  • ​​3. 图片标签：​​
  • ​​4. 列表标签：​​
  • ​​5. 链接标签：​​
  • ​​6. div和span：​​
  • ​​7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。​​
  • ​​8. 表格标签：​​

1. HTML 概念

① HTML，英文全称 Hyper Text Markup Language，翻译过来就是①超文本②标记语言，这是一种用于创建网页的标准标记语言。

  • 超文本：超文本就是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
  • 标记语言：
  • 标记语言由标签构成的语言，例如 html，xml等，都是标签语言。
  • 标记语言不是编程语言。

② HTML 的优点：

  • 简易性：HTML版本升级采用超集方式，从而更加灵活方便。
  • 可扩展性：HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
  • 平台无关性：DOM为HTML文档定义了一个与平台无关的程序接口，使用该接口不可以控制文档的结构。

学会 HTML 对写博客非常有帮助，比如这篇作业就是使用 markdown 编写的，在markdown中可以内嵌HTML标签，来让自己的文章更好看。例如下面我就使用了 ​​<font>​​标签来处理了部分文字。

Java成长之路 —— HTML基础_标记语言_02

③ HTML 是编程语言吗？

不少人初学者可能会认为 HTML 是因为一种编程语言，因为其独特的语法格式。但从本质上来说，HTML 是一种超文本语言，它只是重新定义了文本的格式，并不能进行选择，循环等可以进行逻辑功能的语句。

2. HTML 基础

1. 注意事项：

① HTML 文档后缀名 .html 或者 .htm

② HTML 标签分为：

  1. 围堵标签：有开始标签和结束标签。如 ​​<html>​​​ ​​</html>​​
  2. 自闭和标签：开始标签和结束标签在一起。如 ​​<br/>​​

③ 标签之间可以嵌套，并且需要正确嵌套，不能你中有我，我中有你

错误：​​<a>​​​ ​​<b>​​​ ​​</a>​​​ ​​</b>​​正确：​​<a>​​ ​​<b>​​ ​​</b>​​ ​​</a>​​

④ 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

⑤ html的标签不区分大小写，但是建议使用小写。

<html>
    
  <head>
    <title>title</title>
  </head>
  
  <body>
    <FONT color='red'>Hello World</font><br/> 
    <font color='green'>Hello World</font>
  </body>
  
</html>

运行结果：

Java成长之路 —— HTML基础_HTML_03

2. 标签学习：

1. 文件标签：构成html最基本的标签

标签：

标签

说明

​​<html>​​

html文档的根标签

​​<head>​​

头标签。用于指定html文档的一些属性。引入外部的资源

​​<title>​​

标题标签。

​​<body>​​

体标签

​​<!DOCTYPE html>​​

html5中定义该文档是html文档

2. 文本标签：和文本有关的标签

标签：

标签

属性

属性的属性

说明

​​<!-- 注释内容 -->​​

注释

​​<h1>​​​ … ​​<h6>​​

标题标签，h1~h6:字体大小逐渐递减

​​<p>​​

段落标签

​​<br>​​

换行标签

​​<hr>​​

展示一条水平线

color

颜色

width

宽度

size

高度

align

对其方式

center

居中

left

左对齐

right

右对齐

​​<b>​​

字体加粗

​​<i>​​

字体斜体

​​<font>​​

字体标签

​​<center>​​

文本居中

3. 图片标签：

标签：

标签

属性

说明

img

展示图片

src

指定图片的位置

示例代码：

<!--展示一张图片 img-->

<img src="https://tse1-mm.cn.bing.net/th/id/R-C.4d9cd2e53dddfc238a06e750b73cd023?rik=MsMCKPGumufOyQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fc2accfe637f86fb6f11949cb8651a09b.jpg&ehk=ia2TVXcow6ygWUVZ1yod5xH4aGd8565SYn6CRpxkNoo%3d&risl=&pid=ImgRaw&r=0" />

结果：

Java成长之路 —— HTML基础_html_04

4. 列表标签：

标签：

标签

说明

​​<ol>​​

有序列表

​​<ul>​​

无序列表

​​<li>​​

列表的项目

5. 链接标签：

标签：

标签

属性

属性的属性

说明

​​<a>​​

定义一个超链接

href

指定访问资源的URL(统一资源定位符)

target

指定打开资源的方式

_self

默认值，在当前页面打开

_blank

在空白页面打开

示例代码：

<!--点击蓝字打开百度-->

<a herf="https://www.baidu.com/">百度</a>

效果展示：

百度

6. div和span：

标签

说明

​​<div>​​

每一个div占满一整行。块级标签

​​<span>​​

文本信息在一行展示，行内标签 内联标签

7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。

语义化标签是html5中为了提高程序的可读性，提供了一些标签。

标签：

标签

说明

​​<header>​​

页眉

​​<footer>​​

页脚

8. 表格标签：

标签

属性

说明

​​<table>​​

定义表格

width

宽度

border

边框

cellpadding

定义内容和单元格的距离

cellspacing

定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、

bgcolor

背景色

align

对齐方式

​​<tr>​​

定义行

bgcolor

背景色

align

对齐方式

​​<td>​​

定义单元格

colspan

合并列

rowspan

合并行

​​<th>​​

定义表头单元格

​​<caption>​​

表格标题

​​<thead>​​

表示表格的头部分

​​<tbody>​​

表示表格的体部分

​​<tfoot>​​

表示表格的脚部分