Java成长之路 —— HTML基础
1. HTML 概念
① HTML，英文全称 Hyper Text Markup Language，翻译过来就是①超文本②标记语言，这是一种用于创建网页的标准标记语言。
- 超文本：超文本就是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
- 标记语言：
- 标记语言由标签构成的语言，例如 html，xml等，都是标签语言。
- 标记语言不是编程语言。
- 标记语言由标签构成的语言，例如 html，xml等，都是标签语言。
② HTML 的优点：
- 简易性：HTML版本升级采用超集方式，从而更加灵活方便。
- 可扩展性：HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
- 平台无关性：DOM为HTML文档定义了一个与平台无关的程序接口，使用该接口不可以控制文档的结构。
学会 HTML 对写博客非常有帮助，比如这篇作业就是使用 markdown 编写的，在markdown中可以内嵌HTML标签，来让自己的文章更好看。例如下面我就使用了 <font>标签来处理了部分文字。
③ HTML 是编程语言吗？
不少人初学者可能会认为 HTML 是因为一种编程语言，因为其独特的语法格式。但从本质上来说，HTML 是一种超文本语言，它只是重新定义了文本的格式，并不能进行选择，循环等可以进行逻辑功能的语句。
2. HTML 基础
1. 注意事项：
① HTML 文档后缀名 .html 或者 .htm
② HTML 标签分为：
- 围堵标签：有开始标签和结束标签。如
<html></html> - 自闭和标签：开始标签和结束标签在一起。如
<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>运行结果：
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" />结果：
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> | 表示表格的脚部分 |
腾讯云开发者
