HTML标签讲解

已于 2024-06-01 20:22:09 修改
阅读量760 收藏 10
点赞数 11
文章标签： html 前端
于 2024-06-01 20:15:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62731214/article/details/139377312
版权

文章目录

一、地址

在讲解标签前，我们先来了解一下地址

  • 地址有相对地址与绝对地址
  • 相对地址：相对当前页的地址
    在同一级：“./ “+图片名称
    在上一级：”…/”+图片路径
  • 绝对地址：相对根目录的地址
    本机路径，只能在自己电脑上显示，其他的电脑不显示
    网络地址也是绝对路径

二、HTML标签讲解

1、图片标签

<img src="" alt="" title="">
<!-- 
	src：图片的地址 
	alt：图片出错时的提示文字
	title：鼠标移入时的提示文字
-->

2、链接标签

<a href="" target=""></a>
<!-- 
	href：要跳转的地址
	target:链接打开方式
			默认_self 在当前窗口打开
                _blank 新建窗口打开
-->

<!-- 在新窗口打开百度 -->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>

3、列表标签

  • 列表有无序列表（最常用），有序列表 和自定义列表
  • 无序列表：ul > li
  • 有序列表：ol > li
  • 自定义列表：dl > dt,dd
<!-- ul标签里能包含多个li标签且只能包含li标签 -->
	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
	</ul>
<!-- ol标签同上 -->
	<ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
	</ol>
	
<!-- 
	dt：自定义列表的主题
	dd：针对主题的每一项内容
 -->
	<dl>
        <dt>河北省</dt>
        <dd>石家庄</dd>
        <dd>邯郸</dd>
        <dd>沧州</dd>

        <dt>山东省</dt>
        <dd>济南</dd>
        <dd>青岛</dd>
        <dd>德州</dd>
    </dl>

扩展：列表在创建时会自带默认效果，想要清除列表的默认效果，可给ul、ol、dl添加下面的CSS样式

去除列表默认效果：list-style：none；

ul {
	list-style：none；
}

4、语义标签

语义标签：与div用法一致 只是名字变了

    <!-- 头部标签：定义文档的头部区域 -->
    <header>
        <!-- 导航栏标签 -->
        <nav>导航栏</nav>
    </header>
    
    <!-- 文章标签：定义页面独立的内容区域 -->
    <article>文章标签</article>
    
    <!-- 侧导航栏标签：定义页面的侧边栏内容 -->
    <aside>侧导航栏标签</aside>
        
    <!-- 区间标签：定义段落节 -->
    <section>区间标签</section>
    
    <!-- 底部标签：定义文档的底部区域 -->
    <footer>底部标签</footer>

5、表格标签

（1）表格的作用

  统计数据，展示数据

（2）表格标签：table
  • 行标签：tr 里面不能添加其他(除td外)标签
  • 单元格标签 ：td 里面可以添加其他标签
  • 表头标签 ： th 里面的内容居中加粗
（3）表格结构
  • 表头 thead
  • 表体 tbody
  • 表尾 tfoot
（4）标题标签
  • 标题标签 caption： 里面可以添加其他标签
（5）表格的特点
  • 没有边框线
  • 默认单元格和单元格之间有一定的距离
  • table标签里面不能添加其他标签
（6）表格的属性

border:边框线
cellspacing:设置单元格与单元格之间的距离
cellpadding:设置内容与单元格(边框)之间的距离
align:设置表格的对齐方式(在页面中)，也可以给单元格添加
    align: center / left(默认) / right
width：宽度
height:高度

<table border="1" cellspacing="0" cellpadding="10" align="center" width="500px" height="500px">
        <caption><strong>花名册</strong></caption>
        <thead>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
            <th>班级</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>001</td>
            <td>男</td>
            <td>1班</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>002</td>
            <td>女</td>
            <td>1班</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>003</td>
            <td>男</td>
            <td>1班</td>
        </tr>
        <tr>
            <td>陈六</td>
            <td>004</td>
            <td>女</td>
            <td>1班</td>
        </tr>
    </tbody>
    </table>
（7）合并单元格

 合并步骤：

  • 先确定跨行合并还是跨列合并
  • 给要合并的单元格的第一个单元格添加下面的属性：

跨行合并（竖向）：rowspan = “要合并的单元格数”
跨列合并（横向）：colspan = “要合并的单元格数”

  • 将属性写在第一个单元格
  • 将多余的单元格删除
	<tr>
		<td colspan="4">本班共四人</td>
		<!-- <td>本班共四人</td>
		<td>本班共四人</td>
		<td>本班共四人</td> 
		-->
	</tr>

6、表单标签

（1）表单的作用

  发送数据，验证数据

（2）表单标签：form
<form action="http://www.baidu.com" method="" name="myForm"></form>
<!--
action：表单提交的地址
method：提交的方式  get/post(根据后端)
name：表单的名字
-->
（3）input控件
  • 普通文本框
 <input type="text">
  • label标签
 <!-- 绑定表单元素
      标签里的for属性的属性值要与输入框的id属性值一致，才能点击获取焦点 
 -->
 <label for=""></label>
  • type属性

text：单行文本输入框
password：密码输入框
radio：单选按钮（input标签必须添加name属性才能实现单选功能）
checkbox：多选框
button：普通按钮
submit：提交按钮
reset：重置按钮
file：文件域

<!-- 单行文本输入框 -->
<input type="text">
<!-- 密码输入框 -->
<input type="password">
<!-- 单选按钮 -->
<input type="radio" name="">
<!-- 多选框 -->
<input type="checkbox">
<!-- 普通按钮 -->
<input type="button">
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 文件域 -->
<input type="file">
  • 其他属性

size：输入框的宽度
type：输入框的类型
value：输入框的值
name：输入框的名字
checked：单选框和多选框默认选中
placeholder：文本框的提示内容
autofocus：自动获取焦点
maxlength：输入框最大的输入长度 ，输入时校验
minlength：输入框最小的输入长度 ，提交时校验
required：必须在文本框内输入内容 ，提交时校验
disabled：禁用
CSS样式：outline：none ：去除输入框选中焦点时的边框

<!-- 去除输入框选中焦点时的边框 -->
<input type="text" style="outline：none">
  • H5新增属性

邮箱：email ：必须是邮箱地址 @
网址：url ：必须是http://····
数字：number ：只能输入数字
搜索框：search ：默认多一个×，清除输入的内容
范围：range
   属性：min：最小值   max：最大值   value：默认值  step：每一次拖动的值
选取颜色：color
时间：time
日期：date：年/月/日
月份：month： 年/月
星期：week ： 年/周

（4）其他标签
  • 文本域标签：textarea
	<textarea name="" id="" cols="30" rows="10"></textarea>
	<!-- 
		cols:设置文本域的宽度
		rows:设置文本域的高度
	-->
  • 下拉框标签：select
	<select name="" id="">
		<option value="">石家庄</option>
		<option value="" selected>沧州</option>
		<option value="">保定</option>
		<option value="">邯郸</option>
    </select>
    <!-- 
		必须搭配option标签使用 
        selected：下拉框的默认值
	-->
  • 分组标签：fieldset
	<fieldset>
		<legend>第一个文本框</legend>
		<input type="text">
	 	<input type="password">
    </fieldset>
    
    <fieldset>
		<legend>第二个文本框</legend>
		<input type="text">
	 	<input type="password">
    </fieldset>
    <!--
    	<fieldset> 标签可以将表单内的相关元素分组。
		<fieldset> 标签会在相关表单元素周围绘制边框。
		<legend>标签中文本会在边框的左上角显示。
	-->

7.多媒体标签

  • 音频标签：audio
	<audio src="" controls loop muted autoplay></audio>
	<!--  
		src：音频地址
        controls:控制台    必须加
        loop:循环播放
        muted：静音播放
        autoplay：自动播放  必须添加muted属性（静音播放）才能自动播放
	-->
  • 视频标签：video
	<video src="" controls muted autoplay width="" height=""></video>
	<!--  
		src：视频地址
        controls:控制台    必须加
        loop:循环播放
        muted：静音播放
        autoplay：自动播放  必须添加muted属性（静音播放）才能自动播放
        width：宽度
        height：高度
	-->
一只小书宇
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 输入框标签讲解,input标签详解
weixin_29736879的博客
06-08 4849
一，标签定义及使用说明1. 标签规定了用户可以在其中输入数据的输入字段。2. 元素在 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。二，HTML与XHTML的区别1.在 HTML 中， 标签没有结束标签。2.在 XHTML 中， 标签必须被正确地关闭。三，注示1.注意: 元素是空的,它只包含标签属性。2.提示: 你可以使用 元素...
html div标签属性教程,前端基础之DIV标签讲解！
weixin_35952000的博客
06-05 2562
摘要：DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。DIV元素，是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个...
HTML图像标签详解
weixin_47556601的博客
01-23 1955
大家好，今天分享一下HTML 的图像标签 常见的图像格式 1.JPG 2.GIF 3.PNG 4.BMP 图像标签语法格式 <img src="url" alt="some_text"> 有关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像</title> </head> <body&g
html模板标签
ch206265的博客
03-08 5795
在VS code中写html文档时，一般会先用快捷方式生成html的基本框架，即html模版。这些自动生成的标签，比较多地出现在`head`内，好多老师讲解的时候都会让我们先不用管这些代码，但是自己又很好奇，所以搜集了一些资料，毕竟知识之间都是有联系的，一个很细微的点深究下去可能都是无底洞，所以现做如下整理，当然若以后有了更多了解还会再做补充：
HTML常用标签详解
淘小欣的博客
03-04 8898
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
HTML表格标签详解
实泽有之，无泽虚之
03-26 8932
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
Html标签大全
热门推荐
sang_12345的博客
07-31 2万+
HTML标签不区分大小写，&lt;h1&gt;和&lt;H1&gt;是一样的，但建议小写，因为大部分程序员都以小写为准。所用编辑器是Visual Studio Code. 1.HTML基本结构 &lt;html&gt; &lt;head&gt;...&lt;/head&gt; &lt;body&gt;...&lt;/body&gt; &lt;/html&gt;......
javascript 去掉html标签,js怎么去掉html标签
weixin_26886855的博客
06-15 7522
js去掉html标签的方法：首先新建一个html文件；然后使用p标签创建多段文字；接着使用button标签创建一个“删除html”的按钮；最后创建delhtml()函数，并在函数内实现对指定的p标签进行删除即可。本文操作环境：Windows7系统、javascript1.8.5&&html5版，DELL G3电脑新建一个html文件，命名为test.html，用于讲解如何使用js删...
HTML基础讲解
乞力马扎罗的雪CYF的博客
09-26 1556
1.声明： HTML有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确的显示出HTML页面，这就是的用处。 2.HTML标题 ...等标签进行定义。 3.HTML段落 标签定义段落 4.HTML链接 标签定义链接 5.HTML图像 标签定义图像 代码实现上述标签的例子： HTML基础 chenyufe
＜div＞标签讲解
qq_55278081的博客
08-15 2444
使用div布局网站的时候，可以减少网站的代码，现在都喜欢用css+div去布局网站，因为修改比较方便。,div是一个块级元素，以便于对元素进行格式化，把文档分割成独立的板块，并且不和其他元素进行关联，一般情况下，div都是使用id和class来进行标记。div全称是DIVision，也是对层叠样式表进行定位，很多时候，我们都称为图层，div为html中的内容提供图层结构等其他元素。DIV主要的作用就是起分割的作用，一般常用的标签都是使用div进行分割，并且把样式进行分割，...
HTML的简介及标签的使用
09-12
#### 二、HTML标签的基本结构 HTML文档由一系列标签组成，这些标签通常包含以下几种类型： - **单标签**：只有一行标签，没有闭合标签，如` `。 - **双标签**：由开启标签和闭合标签组成，如`<p></p>`。 - **...
HTML语言剖析 HTML标签讲解以及其应用示例
10-15
在这个"HTML语言剖析 HTML标签讲解以及其应用示例"的课程或资源中，我们将深入学习这些关键知识点。 首先，我们从基础开始，HTML的基本结构由<!DOCTYPE>声明、<html>元素、元素和元素组成。<!DOCTYPE>定义了文档...
ios webView获取html标签
10-15
总的来说，通过`UIWebView`的代理方法和JavaScript交互，我们可以轻松地获取HTML标签并对其进行操作。在实际应用中，一定要注意安全性和性能优化，避免过度使用`evaluateJavaScript`，因为这可能导致性能问题。同时...
易语言清除HTML标签
07-22
在处理HTML数据时，有时我们需要清除HTML标签，以获取纯文本内容。这篇介绍将深入讲解如何使用易语言来实现这个功能。 首先，我们需要理解HTML标签的结构。HTML（HyperText Markup Language）是一种标记语言，用于...
HTML1.02 HTML标签属性
09-13
HTML标签属性详解 HTML标签属性是HTML语言中最基本也是最重要的一部分。...以上是HTML标签属性的详细讲解，包括通用属性、自定义属性、table表格标签、form表单标签等。了解这些HTML标签属性是开发Web应用程序的基础。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1672
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
HtmlUnit：探索Web自动化的强大工具
Aaron_945的博客
08-12 632
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
html实现funnel图
最新发布
Debug yourself!
08-12 673
这些方法中，使用JavaScript库（如ECharts）是最强大且灵活的，可以处理复杂的数据和交互。如果只是简单的静态漏斗图，CSS方法也可以满足需求。这是最简单和推荐的方式，因为这些库提供了内置的漏斗图功能，并且可以高度自定义。如果你不想依赖外部库，可以使用纯HTML和CSS来实现一个简单的漏斗图。你还可以使用SVG（矢量图形）直接绘制漏斗图。// 使用刚指定的配置项和数据显示图表。// 初始化echarts实例。// 指定图表的配置项和数据。
HTML&CSS
ckx0703的博客
08-06 1090
html：超文本标记语言——负责网页的结构css：层叠样式表——页面显示的样式、排版js：JavaScript——界面交互（动态交互、逻辑）
HTML基础入门：构建网页骨架与常用标签讲解
常见的HTML标签包括用于标题层次结构的到标签，表示段落的标签，以及用于强调文本的（斜体）>和（粗体）>标签。此外， 标签用于在HTML文档中添加换行，使文本布局更加清晰。 这个预习课程为初学者提供了HTML基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值