【JAVAWEB】HTML的常见标签


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>

细节解释：

称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.

-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.

-width, initial-scale=1.0">

name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

2.HTML常见标签

行级标签：内容都在一行中显示的标签称为行级标签

块级标签：每一个标签的内容都会分段称为块级标签

注释标签

注释不会显示在界面上，目的是提高代码可读性。

语法：

补充：ctrl+/快捷键可以快速进行注释/取消注释

标题标签：h1-h6

有六个，从h1到h6，数字越大，字体越小

语法：
一级标题

示例代码：


    
    <h1>这是第一个标题h1>
    <h2>这是第二个标题h2>
    <h3>这是第三个标题h3>
    <h4>这是第四个标题h4>
    <h5>这是第五个标题h5>
    <h6>这是第六个标题h6>

段落标签:p

语法：
这是一个段落

示例代码：


    <h1>这是一个标题h1>
    
    <p>这是一个段落p>
    <p>这是一个段落p>
    <p>这是一个段落p>
    <p>这是一个段落p>
    <p>这是一个段落p>
    <p>这是一个段落p>

换行标签：br

br是break的缩写，表示换行。

br是一个单标签（不需要结束标签）

规范写法：

示例：

只有段落标签时


    
    <p>十七八岁的时候不能理解久别重逢的人为什么总是说些不痛不痒的话，这一刻盛望才明白，不是无话可说，而是不敢问。
        就像要趟一片密集的雷区，不知哪步走错就会被炸得支离破碎...不如寒暄。人间骄阳正好，风过林梢，彼时他们正当年少。
        我怎么能够把你来比作夏天？你不独比它可爱也比它温婉,但是你的长夏永远不会凋落,或死神夸口你在他影里漂泊，当你在
        不朽的诗里与时同长。只要一天有人类，或人有眼睛，神明将长存，并且赐给你生命。p>

加入换行标签：


    
    <p>十七八岁的时候不能理解久别重逢的人为什么总是说些不痛不痒的话，这一刻盛望才明白，不是无话可说，而是不敢问。
        就像要趟一片密集的雷区，不知哪步走错就会被炸得支离破碎...不如寒暄。<br/>人间骄阳正好，风过林梢，彼时他们正当年少。
        <br/>我怎么能够把你来比作夏天？你不独比它可爱也比它温婉,但是你的长夏永远不会凋落,或死神夸口你在他影里漂泊，当你在
        不朽的诗里与时同长。只要一天有人类，或人有眼睛，神明将长存，并且赐给你生命。p>

格式化标签

加粗 : strong 标签和 b 标签

倾斜 : em 标签和 i 标签

删除线 : del 标签和 s 标签

下划线 : ins 标签和 u 标签

示例代码：


        <strong>strong 加粗strong>
        <b>b 加粗b>
        <em>倾斜em>
        <i>倾斜i>
        <del>删除线del>
        <s>删除线s>
        <ins>下划线ins>
        <u>下划线u>

图片标签

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

src = "rose.jpg" >

此时要把rose.jpg这个图片文件放到和html同级目录中。

img 标签的其他属性

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

src = "rose.jpg" alt = " 鲜花 " title = " 这是一朵鲜花 " width = "500px" height = "800px"

border = "5px" >

注意 :

1. 属性可以有多个 , 不能写到标签之前

2. 属性之间用空格分割 , 可以是多个空格 , 也可以是换行 .

3. 属性之间不分先后顺序

4. 属性使用 " 键值对 " 的格式来表示 .

关于目录结构 :

对于一个复杂的网站 , 页面资源很多 , 这种情况可以使用目录把这些文件整理好 .

1) 相对路径 : 以 html 所在位置为基准 , 找到图片的位置 .

同级路径 : 直接写文件名即可 ( 或者 ./)

下一级路径 : image/1.jpg

上一级路径 : ../image/1.jpg

2) 绝对路径 : 一个完整的磁盘路径 , 或者网络路径 . 例如

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

超链接标签：a

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

href = "http://www.baidu.com" > 百度

链接的几种形式：

外部链接: href 引用其他网站的地址

href = "http://www.baidu.com" > 百度

内部链接: 网站内部页面之间的链接. 写相对路径即可.

在一个目录中 , 先创建一个 1.html, 再创建一个 2.html

我是 1.html

href = "2.html" > 点我跳转到 2.html

我是 2.html

href = "1.html" > 点我跳转到 1.html

空链接: 使用 # 在 href 中占位.

href = "#" > 空链接

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

href = "test.zip" > 下载文件

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

href = "http://www.sogou.com" >

src = "rose.jpg" alt = "" >

表格标签

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: 设置尺寸 .

注意 , 这几个属性 , vscode 都提示不出来 .

align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height = "500" >

姓名性别年龄

张三男 10

李四女 11

列表标签

主要使用来布局，整齐好看。

无序列表 ul li , .
有序列表 ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

注意

元素之间是并列关系

ul/ol 中只能放 li 不能放其他标签 , dl 中只能放 dt 和 dd

li 中可以放其他标签 .

列表带有自己的样式 , 可以使用 CSS 来修改 . ( 例如前面的小圆点都会去掉 )


<h3>无序列表h3>
<ul>
    <li>咬人猫li>
    <li>兔总裁li>
    <li>阿叶君li>
ul>
<h3>有序列表h3>
<ol>
    <li>咬人猫li>
    <li>兔总裁li>
    <li>阿叶君li>
ol>
<h3>自定义列表h3>
<dl>
    <dt>我的老婆们dt>
    <dd>咬人猫dd>
    <dd>兔总裁dd>
    <dd>阿叶君dd>
dl>

表单标签

表单是让用户输入信息的重要途径。

分成两个部分：

表单域：包含表单元素区域。重点是form标签
表单控件：输入框，提交按钮等，重点是Input标签

form标签

action = "test.html" >

... [form 的内容 ]

描述了要把数据按照什么方式 , 提交到哪个页面中 .

input标签

各种输入控件 , 单行文本框 , 按钮 , 单选框 , 复选框 .

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

文本框

type = "text" >

密码框

type = "password" >

单选框

性别 :

type = "radio" name = "sex" > 男

type = "radio" name = "sex" checked = "checked">女

注意 : 单选框之间必须具备相同的 name 属性 , 才能是西安多选一效果。

复选框

爱好 :

type = "checkbox" > 吃饭 type = "checkbox" > 睡觉 type = "checkbox" >

打游戏

普通按钮

type = "button" value= "我只是个按钮"

提交按钮

action = "test.html" >

type = "text" name = "username" >

type = "submit" value = " 提交 " >

提交按钮必须放到 form 标签内 . 点击后就会尝试给服务器发送

清空按钮

action = "test.html" >

type = "text" name = "username" >

type = "submit" value = " 提交 " >

type = "reset" value = " 清空 " >

清空按钮必须放在 form 中 . 点击后会将 form 内所有的用户输入内容重置 .

选择文件

type="file">

点击选择文件 , 会弹出对话框 , 选择文件 .

lable标签

搭配 input 使用 . 点击 label 也能选中对应的单选 / 复选框 , 能够提升用户体验 .

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

for="male">男 id="male" type="radio" name="sex">

select标签

下拉菜单。

option 中定义 selected="selected" 表示默认选中

注意：可以给第一个选项，作为默认选项

textarea

rows = "3" cols = "50" > </div> <div> </div> <div>

文本域中的内容 , 就是默认内容 , 注意 , 空格也会有影响 .


        
        <textarea name="" id="" cols="30" rows="10">
            木木木木木苏苏苏苏苏苏苏里里里里里里
        textarea>

无语义标签：div & span

div 标签 , division 的缩写 , 含义是分割

span 标签 , 含义是跨度

就是两个盒子 . 用于 网页布局

div 是独占一行的, 是一个大盒子. 块级标签
span 不独占一行, 是一个小盒子. 行级标签


    <span>这是一个spanspan>
 
    <div>
        这是一个层
    div>

相关阅读:
cesium雷达扫描（模糊圆效果）
Porteus全桥整流电路仿真遇到的问题
input修改checkbox复选框默认选中样式
STM32F4X UCOSIII 消息队列
VSCode-更改系统默认路径
linux定时任务(crontab)启动sh脚本
贪心算法的思路和典型例题
目标跟踪实战deepsort+yolov5（上）
【探索C++】C++对C语言的一些类的增强
【学习笔记45】JavaScript的分页效果

原文地址：https://blog.csdn.net/m0_57248752/article/details/130901642

姓名	性别	年龄
张三	男	10
李四	女	11