HTML-常用标签

demon-lover

已于 2023-09-25 15:10:08 修改

阅读量93

点赞数 2

文章标签： html 前端 javascript

于 2023-05-25 19:23:25 首次发布

本文链接：https://blog.csdn.net/p2533903941/article/details/130872971

版权

本文介绍了HTML的基本结构，包括html、head、body标签，以及标题、段落、换行、图片和超链接等常见标签的使用。还讲解了表单标签，如form、input和select，以及无语义标签div和span。此外，提到了列表、表格和锚点链接的概念。

摘要由CSDN通过智能技术生成

HTML 结构

HTML 文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

标签层次结构

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了⼀个 DOM 树：
在这里插入图片描述

HTML 常见标签

注释标签

< !-- 注释 – >
ctrl + / 快捷键可以快速进⾏注释/取消注释.

标题标签

从 h 1 - h 6 . 数字越大，字体越小

hello

段落标签

这是⼀个段落

html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签

br 是 break 的缩写. 表示换行.

格式化标签

加粗加粗
倾斜倾斜
~~删除线~~ ~~删除线~~
下划线下划线
在这里插入图片描述

图片标签

img 标签必须带有 src 属性. 表示图片的路径.

相对地址：img src="…/…/ 名.png" (当前html路径的地址)
绝对地址：img src=" 路径 \ 名.png（电脑中文件的完整路径）
网络地址：img src=" 网址 "（联网时网络地址）

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

超链接标签

href: 必须具备, 表示点击后会跳转到哪个页面. target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

外部链接:

href 引用其他网站的地址

百度

内部链接

网站内部页面之间的链接. 写相对路径即可.
在一个目录中, 先创建一个 1.html, 再创建一个 2.html

我是 1.html
点我跳转到 2.html

我是 2.html
点我跳转到 1.html

空连接

使用 # 在 href 中占位.

空链接

下载链接

href 对应的路径是一个文件. (可以使用 zip 文件)

下载文件

网页元素链接

可以给图片等任何元素添加链接(把元素放到 a 标签中)

锚点链接

可以快速定位到页面中的某个位置

1.给图片定义 id
在这里插入图片描述
2.href 超链接并且 id 前＋ #

列表标签

无序链表 ul

在这里插入图片描述

有序链表 ol

在这里插入图片描述

表单标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.