0
点赞
收藏
分享

微信扫一扫

Java成长之路 —— HTML基础

小北的爹 2022-04-04 阅读 102

在这里插入图片描述

文章目录

1. HTML 概念

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

  • 超文本:超文本就是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本

  • 标记语言

    • 标记语言由标签构成的语言,例如 html,xml等,都是标签语言。
      • 标记语言不是编程语言。

HTML 的优点

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

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

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>

运行结果:
在这里插入图片描述

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>表示表格的脚部分
举报

相关推荐

0 条评论