前端基础（HTML5）

红的花绿的叶

已于 2024-07-16 10:14:57 修改

阅读量109

点赞数 1

分类专栏：前端基础文章标签： html5 前端

于 2022-07-16 13:12:48 首次发布

本文链接：https://blog.csdn.net/qq_64227183/article/details/125818426

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

解释

中文名：

超文本标记语言 ------ Hyper Text Markup Language

文本 ------- Text 文本文件

技术的作用 ------- 用于在电脑上的浏览器页面展示

标准

标签的写法：

第一种：单标签

第二种：双标签

所有的标记都要满足 单标签和双标签 两个条件

属性节点

lang = "zh-cn" 标签中的属性节点

注意：属性节点需要用双引号括起来

例如：

id = "ABC"

文字内容 ------- 文本节点

HTML中：

标签节点 <html>

属性节点 lang = "zh-cn"

文本节点文本内容

HTML结构：

<!DOCTYPE html> 文档的类型是 HTML

<html> </html> HTML 文档的开头和结束

<head> </head> 头部的开始和结束

<body> </body> 正文的开头和结束

<title> </title> 页面的标题

<br/> 换行

<hn> (n = 1~6) 标题（默认加粗，变大）从大到小

<p> </p> 段落

<a> </a> 链接

<hr> 标尺线

绝对路径 和 相对路径的比较

绝对路径：从盘符找到某个文件的具体位置 url

相对路径：针对于文件的一个相对位置

表示举例：

code first.html

image 1.jpg

相对路径 -------- ./image/1.jpg

绝对路径 -------- D:\image\1.jpg

../ ../ 表示的是上一级的目录

练习：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>这是标题</title>
</head>
<body>
	<h1>这是标题</h1>

	<hr>
     <a href="https://www.baidu.com/">这是百度的链接</a>
     <a href="https://v.qq.com/">这是腾讯链接</a>
     <a href="https://www.taobao.com/">这是淘宝链接</a>
	<p>这是第一段的内容</p>

	<p>这是第二段的内容</p>

	<p>这是第三段的内容</p>

	<img src="./image/1.jpg" width="500px" height="500px">#这是图片的位置
</body>
</html>

内容居中：

align = ”center“ 居中默认为left 还可以写成 right

<div> 是用于划分区域

背景颜色：

bgcolor

颜色的表示方式：

1、直接使用颜色的英文单词 ------ red,yellow,black,pink,blue 等等

2、使用十六进制来表示颜色 ------- #rrggbb (r --- red,g --- green,b --- blue)

3、使用取值范围来表示 ------ red(x,x,x) x = 0~255

背景图片：

background

文本颜色：