HTML常用标签

文章目录

HTML常用标签
- 1. HTML指的是超文本的标记语言www万维网的描述性语言。
- 2.HTML的基本结构
- 3.段落标签
- 4.文本标签
- 5.文本倾斜标签
- 6.加粗标签
- 7.删除线条
- 8.下划线
- 9.列表
- 10.特殊字符
- 11.水平线
- 12.换行标签
- 13.图像标签和路径
- 14.超链接标签
- 15. div标签和span标签
- 16.表格
- 17.表单

HTML常用标签

编辑器是Visual Studio Code

1. HTML指的是超文本的标记语言www万维网的描述性语言。 2.HTML的基本结构

3.段落标签

双标签
标签语义：把文字内容分割为若干段落，有条理地显示
特点：文本在一个段落中会根据浏览器窗口大小自动换行、段落与段落之间保有空隙

4.文本标签

 
    
    大标题，一篇文章的标题
    2标题,大模块的标题
    3标题,小模块的标题
    4标题
    5标题
    6标题

双标签
标签语义：作为标题使用，并且重要性递减
特点：加了标题标签的文字字体变粗、字号变大、独占一行

5.文本倾斜标签

 
    文本倾斜
    也表示倾斜

双标签
标签语义：使文本倾斜

6.加粗标签


    加粗效果
    也是加粗

双标签
标签语义：使文本加粗

7.删除线条


    删除线条
    删除线条

双标签
标签语义：使文本加删除线条

8.下划线


    下划线

双标签
标签语义：给文本添加下划线

9.列表

无序列表

有序列表

自定义列表


    
        书写想要描述的对象
        是对dt内容的描述，也就是dd和dt是关联

10.特殊字符

11.水平线

单标签

12.换行标签

单标签
标签语义：强制换行
特点：换行标签只是开始新的一行，跟段落不一样，段落之间会插入一些垂直距离

13.图像标签和路径

图像标签：

单标签，一行可放多个
用于定义HTML页面中的图像
src是标签的必须属性（属于该标签的特性），用于指定图像文件的路径和文件名

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时的替代文字
title	文本	提示文本，鼠标放到图片上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

其中，width和height一般只设置一个，避免压缩图像，另一个会等比例缩放，border一般在css中设置。

路径：

目录文件夹：里面存放页面所需的相关素材的文件夹，如html文件、图片、css文件等
根目录：打开目录文件夹的第一层就是根目录
通常建立一个文件夹（images）来存放图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置

1).相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于html页面的位置。

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级，如
下一级路径 / 图像文件位于HTML文件下一级，如
上一级路径 …/ 图像文件位于HTML文件上一级，如
2).绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或完整的网络路径

例如，“D:webimglogo.gif"或者"http://www.itcast.cn/images/logo.gif”

相对路径中反斜杠用"/“，绝对路径中反斜杠用”"

img标签默认会向下撑大3px，原因是因为img作为一个行内块元素默认垂直相对于文本的基线对齐
解决方法1：给img所在的盒子font-size:0; 仅作了解不建议用
解决方法2：给img转换成块元素：display:block; 重点
解决方法3：给img的默认垂直对齐方式改成靠上对齐 vertical-align:top;

14.超链接标签

双标签，a为anchor缩写，意为锚
用于定义超链接，作用是从一个页面跳转到另一个页面
文本或图像

属性	属性值
href	指定链接目标的url地址（必须属性）
target	指定链接页面的打开方式；_self为默认值，在当前页面打开，_blank为在新窗口中打开
title	鼠标悬停上去之后的提示信息

链接分类
1).外部链接：如百度，链接URL以http://开始

2).内部链接：网站内部页面之间的相互连接，直接连接内部页面名称即可，如首页（⚠️内部页面的路径）

3).空链接：如果当时没有确定链接目标时，首页

4).下载链接：如果href里面地址是一个.exe文件或者zip压缩包，会下载这个文件（⚠️内部文件的路径）

5).网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

6).锚点链接：点击链接可以快速定位到页面中的某一位置

在链接文本的href属性中，设置属性值为#名字的形式，如第二集

找到目标位置标签，里面添加一个id属性 = 刚才的名字，如

第二季介绍

15. div标签和span标签

1).div标签，没有具体含义，用来划分页面的区域，类似生活中看到的警戒线

块元素

2).span标签，没有具体的含义，当与CSS一同使用时，元素可用于为部分文本设置样式属性

行内元素

16.表格

数据表格的创建

表格的相关属性：

宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
文字水平对齐 align=“left或right或center”
文字垂直对齐 valign=“top或middle或bottom”
cellspacing="单元格与单元格之间的间距"必须给table
cellpadding="单元格与内容之间的空隙"必须给table
合并单元格属性

colspan="所要合并的单元格的列数"合并列：必须给td

rowspan="所要合并单元格的行数"合并行：必须给td

合并之后需要把多余的单元格删除

==注：==vscd快捷键：> 子集 * 乘号 { } 里面书写的内容 $ 从1开始的数列

表格分组

表格标题：标题内容
表格列分组

如果用rules添加组分割线的话，列分组必须用colgroup

colgroup和col元素会根据从左到右的顺序依次对数据表格进行分组

span属性显示指定相邻几列组成一组，span属性值默认为1
表格行分组

表头

表体

表尾
添加组分隔线

rules="groups（组分割线）/rows（行线）/cols（列线）/all（所有线）/none（没有线）"

必须给table标签添加属性

17.表单

表单：在网页中负责数据采集功能
表单的创建

form 当中method的 post 和get的区别：

get是从服务器上获取数据，post是向服务器传送数据
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程，
对应get方法，服务器端用Request QueryString获取变量的值，对于post方式，服务器端用Request Form获取提交的数据
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB
get安全性非常低，post安全性较高，但是执行效率却比post方法好。

表单相关属性：

fieldset 表单字段集，相对于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象
字段级标题
label提示信息标签 for=“绑定控件id名”
上传文件框 multiple = “multiple” multiple属性可实现多选
隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改
type="radio"单选按钮单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样
type=“checkbox” 单选按钮 name 可加可不加 checked=“checked”(选中) disabled="disabled"禁用
selected属性：设置为默认选项下拉菜单
文本域

文本域 cols=“字符宽度” rows=“行数”

HTML常用标签

大标题，一篇文章的标题

4标题

5标题

6标题

Java相关栏目本月热门文章