HTML的基本标签及属性

news2025/2/25 19:12:22

HTML

  • 1. 标题与段落标签
  • 2. 文本修饰标签
  • 3. 图片标签
  • 4. 链接标签
  • 5. 无序、有序列表与定义列表
  • 6. 表格、表单标签
  • 7. div与span标签

1. 标题与段落标签

 (1) 标题标签是一对双标签：<h1></h1>，<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>。在网页中，h1标签最重要，一个.html文件中只能有一个h1标签，h2、h3、h4、h5、h6可以有多个，最常用的标题标签是h1~h4，h5和h6在网页中不常使用。

 (2) 段落标签是一对双标签：<p></p>。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
	    <h1>一级标题</h1>
	    <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
	    <h2>二级标题</h2>
	    <p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
	    <h3>三级标题</h3>
	    <p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。</p>
	    <h4>四级标题</h4>
	    <p>坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
	</body>
</html>

h1~h4标题标签和p段落标签

2. 文本修饰标签

 (1) 强调标签是一对双标签：<strong></strong>、<em></em>，strong标签会对文本进行加粗，em标签会对文本进行斜体，strong的强调性比em更强。

 (2) 上、下标文本标签都是一对双标签：<sup></sup>、<sub></sub>。

 (3) 插入、删除文本标签都是一对双标签：<ins></ins>、<del></del>。
 (4) 换行标签是单标签：<br>。
 (5) 水平分割线标签是单标签：<hr>。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
	   <strong>strong标签强调的文字</strong>
	    <br>
	    <hr>
	    <em>em标签强调的文字</em>
	    <br>
	    <hr>
	    3<sup>2</sup>+2<sup>2</sup>=13
	    <br>
	    <hr>
	    <ins>100</ins>
	    <br>
	    <hr>
	    <del>200</del>
	</body>
</html>

文本修饰标签

3. 图片标签

 (1) 图片标签是单标签：<img src=“./img/scene_1.jpg” alt=“风景图片1”>

	<img width="30%" height="30%" src="./img/scene_1.jpg" alt="风景图片1" title="风景图片1">

风景图片示例
 (2) 图片标签的属性：
  width、height：图片的宽、高；
  src：在.html文件中引入图片的地址；
  alt：当图片加载出现问题或无法加载时，起提示作用；
  title：提示图片的信息。

 (3) 引入文件的路径：
  相对路径：文件相对于引用文件去定义被引用文件的地址，.表示当前文件目录下，..表示上一级文件目录下。

相对路径
  当图片scene_1.jpg在index.html文件的上一级目录下时，引入这张图片的路径src=“../img/scene_1.jpg”。

  绝对路径：文件相对于磁盘位置定位的地址，例如：C:\Users\19464\Desktop\img\scene_1
，或者文件在网络中的地址，例如：https://img-blog.csdnimg.cn/5c19201f59c9434eae99cc9ced43c0a8.png#pic_center。

4. 链接标签

 (1) 链接标签是一对双标签：<a></a>。

 (2) a标签的属性：
  href：链接的地址；
  target：链接的跳转方式，默认值_self是在当前页面打开，_blank是在新窗口打开链接。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
	    <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩官网</a>
	    <!--给图片加上链接-->
	    <a href="https://www.bilibili.com/">
	        <img src="./img/scene_1.jpg" alt="风景图">
	    </a>
	</body>
</html>

 给文本加上a标签，点击文本内容就会跳转到指定网址。不仅文本可以加上a标签，图片也可以，点击图片也会跳转到指定网址。

 (3) base标签：单标签<base href=“” target=“”>，可以改变链接的默认跳转行为。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
	    <title>Document</title>
	    <!--点击网页中的所有链接都会在新窗口中打开-->
	    <base target="_blank">
	</head>
	<body>
	    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>
	    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>
	    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>
	    <a href="https://www.bilibili.com/">
	        <img src="./img/scene_1.jpg" alt="风景图">
	    </a>
	</body>
</html>

 (4) 跳转锚点：
  在网页内部进行跳转，网页内部的一个点跳转到另一个点。
  第一种方式：href属性值为#id名，跳转到带id属性的标签元素处；
  第二种方式：href属性值为#name属性的属性值，跳转到带name属性的a标签处。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#p_1">段落1</a>
    <a href="#p_2">段落2</a>
    <p>文字段落</p>
    <p>文字段落</p>
    <p>文字段落</p>
    <p id="p_1">文字段落1文字段落1文字段落1文字段落1文字段落1文字段落1</p>
    <p>文字段落</p>
    <p>文字段落</p>
    <p>文字段落</p>
    <a name="p_2"></a>
    <p>文字段落</p>
</body>
</html>

5. 无序、有序列表与定义列表

 ul、ol标签和li标签必须组合存在，而且li的父级标签必须是ul或者ol，不能是其它标签。有序列表用得比较少，无序列表经常可以代替有序列表实现列表功能。

 (1) 无序列表：<ul></ul>
  列表项：<li></li>
 (2) 有序列表：<ol></ol>
  列表项：<li></li>
 (3) 定义列表：<dl></dl>、<dt></dt>、<dd></dd>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--正确语法-->
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
        <li>无序列表项3</li>
    </ul>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
        <li>有序列表项3</li>
    </ol>
    <dl>
        <dt>HTML</dt>
        <dd>
            HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        </dd>
        <dt>CSS</dt>
        <dd>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        </dd>
    </dl>
    <!--错误语法-->
    <ul>
        <p>
            <li></li>
        </p>
    </ul>
    <ol>
        <span>
            <li></li>
        </span>
    </ol>
</body>
</html>

无序列表与有序列表
 (4) 列表之间也可以相互嵌套，从而形成多层级的列表，二级导航就是使用多层级列表来实现的。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
                <li>列表项3</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>列表项4</li>
                <li>列表项5</li>
                <li>列表项6</li>   
            </ul>
        </li>
    </ul>
</body>
</html>

6. 表格、表单标签

 (1) 表格外层容器：<table></table>，表格标题：<caption></caption>，表头：<th></th>，表格行：<tr></tr>，表格单元：<td></td>。
 (2) 表格语义化标签：<tHead>、<tBody>、<tFood>，tBody和tFood在一个表中可以定义多个，但是tHead只能定义一次。
 (3) 表格的属性：
  border：表格边框；
  cellpadding：单元格内空间；
  cellspacing：单元格之间空间；
  rowspan：合并一行的单元格；
  colspan：合并一列的单元格；
  align：水平对齐方式；
  valign：竖直对齐方式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>员工工资表</caption>
        <tr>
            <th>编号</th><th>姓名</th><th>工资</th>
        </tr>
        <tr>
            <td>1</td><td>张三</td><td>8000</td>
        </tr>
        <tr>
            <td>2</td><td>李四</td><td>10000</td>
        </tr>
    </table>
</body>
</html>

表格

 (4) 表单外层容器：<form></form>，表单input标签：<input></input>；
  input标签的type属性值：

type属性值含义
text文本框
password密码输入框
checkbox复选框
radio单选框
submit提交按钮
reset重置按钮
file上传文件

 多行文本框：<textarea></textarea>；
 下拉菜单：<select></select>，选项：<option></option>；
 辅助表单：<label></label>。
 表单的常用属性：
 placeholder：给出输入框的提示信息；
 checked：被选中；
 name：表单名称；
 disabled：用于复选框禁用某个选项；
 action：表单提交数据的目的地；
 method：表单发送数据的方式，get和post方式；
 for：规定 label 与哪个表单元素绑定。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="https://www.bilibili.com/" method="post">
        <label for="user">账号</label>
        <input type="text" id="_user" placeholder="请输入账号"><br>
        <label for="_password">密码</label>
        <input type="password" id="_password" placeholder="请输入密码"><br>
        <select>
            <option>运动</option>
            <option>音乐</option>
            <option>电影</option>
        </select>
    </form>
</body>
</html>

表单

7. div与span标签

 (1) div（块）标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联，div标签是一个块级元素，每个div标签独占一行，换行是div标签固有的唯一格式表现。
 (2) span（内联）标签被用来组合文档中的行内元素。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> 
    <div style="background-color: red;">
        这是一个块级元素
    </div>
    <span style="background-color: blue;">这是一个内联元素</span>
</body>
</html>

块级元素与内联元素

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405497.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Layui表格可编辑 可动态新增一行 删除当前行

Layui表格可编辑 可动态新增一行 删除当前行

Layui 表格 可编辑&#xff1a;点击表格实现可编辑 cols: [[ //表头 {type: numbers, title: ID, width: 80, align: "center", sort: true} , {field: project, title: 项目, minWidth: 80, align: "center", edit: text} ]] 在表头的对象中增加 edit: …
阅读更多...
前端必学的CSS3波浪效果演示

前端必学的CSS3波浪效果演示

目录 文章目录 前言 CSS3波浪效果 1.Html构建 2.CSS编写 3.完整代码 index.html文件 style.css文件 总结 前言 随着前端技术的不断发展与进步&#xff0c;界面交互的样式要求和美感也越来越高&#xff0c;很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开…
阅读更多...
vue路由配置

vue路由配置

1、路由的使用 一、安装路由 npm i vue-router 二、配置路由 在根目录下创建文件夹router&#xff0c;在router文件夹下创建index.js文件&#xff0c;如下图所示 在index.js文件中写入如下代码&#xff0c;实现创建一个路由器 import VueRouter from "vue-router&qu…
阅读更多...
Object.defineproperty方法(详解)

Object.defineproperty方法(详解)

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性&#xff0c;或者修改一个已经存在的属性 Object.defineproperty可以接收三个参数 Object.defineproperty(obj, prop, desc) obj : 第一个参数就是要在哪个对象身上添加或者修改属性 prop : 第二个参数就是…
阅读更多...
HTML网站导航栏的制作

HTML网站导航栏的制作

一、导航条的制作 &#xff08;1&#xff09;代码图 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport…
阅读更多...
photo-sphere-viewer中文文档

photo-sphere-viewer中文文档

photo-sphere-viewer中文文档安装插件Configuration 配置项Standard options 常规配置container (required)adapter 适配器panorama (required)plugins 插件caption 标题size 全景图宽度高度markers 标注navbar 导航栏minFovmaxFovdefaultZoomLvlfisheyedefaultLongdefaultLatl…
阅读更多...
vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）

vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）

vueelement-ui前端使用print-js实现打印下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数设置默认打印横纵向&#xff08;IE不生效&#xff09;设置默认打印缩放比调整打印字体大小自定义字体大小生效自定义背景颜色生效参数print-js官网链接: https:/…
阅读更多...
vue 3 项目实战一（绘制登录界面）

vue 3 项目实战一（绘制登录界面）

目录 一、概述 二、创建vue项目 三、需求分析 四、构建组件 五、vue组件之间的通信 一、概述 本文记录了项目实现的详细步骤以及原理&#xff0c;十分适合初学vue的萌新练手&#xff0c;也是阶段性学习的一个总结&#xff0c;可能会有些啰嗦&#xff0c;勿怪~。 先从登录…
阅读更多...
PostMan——安装使用教程（图文详解）

PostMan——安装使用教程（图文详解）

为了验证接口能否被正常访问&#xff0c;我们常常需要使用测试工具&#xff0c;来对数据接口进行检测。 好处&#xff1a;接口测试工具能让我们在不写任何代码的情况下&#xff0c;对接口进行调用和调试。 下载并安装PostMan 首先&#xff0c;下载并安装PostMan&#xff0c;请…
阅读更多...
若依管理系统RuoYi-Vue（前后端分离版）项目启动教程

若依管理系统RuoYi-Vue（前后端分离版）项目启动教程

RuoYi-Vue 是一个 Java EE 企业级快速开发平台&#xff0c;基于经典技术组合&#xff08;Spring Boot、Spring Security、MyBatis、Jwt、Vue&#xff09;&#xff0c;内置模块如&#xff1a;部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在…
阅读更多...
【Vue】Axios详解

【Vue】Axios详解

文章目录1 Axios简介1.1 什么是Axios?1.2 Axios的特性2 Axios的使用2.1 Axios的安装2.2 Axios的创建2.2.1 Proxy配置代理2.2.1.1 核心代码2.2.1.2 代码解释2.2.1.3 多个跨域2.2.2 Axios的二次封装2.2.2.1 为什么要二次封装2.2.2.2 Axios实例化2.2.2.2.1 引入2.2.2.2.2 创建axi…
阅读更多...
前端面试题八股文汇总（最新）

前端面试题八股文汇总（最新）

文章目录一 、第一回合1.开发中遇到的困难&#xff1f;2. Css的盒子模型3. Pull和fetch的区别4. SPA单页面项目5.SEO优化6.BOM浏览器对象模型7.数组、对象、字符串中的一些方法8.解构赋值9...args剩余参数(扩展运算符)10.arguments 对象11. Promise以及底层封装12.浅拷贝深拷贝…
阅读更多...
【node进阶】一文带你快速入门koa框架

【node进阶】一文带你快速入门koa框架

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…
阅读更多...
Vue基础知识总结 11：前端路由vue-router

Vue基础知识总结 11：前端路由vue-router

&#x1f345; 作者简介&#xff1a;哪吒&#xff0c;CSDN2021博客之星亚军&#x1f3c6;、新星计划导师✌、博客专家&#x1f4aa; &#x1f345; 哪吒多年工作总结&#xff1a;Java学习路线总结&#xff0c;搬砖工逆袭Java架构师 &#x1f345; 关注公众号【哪吒编程】&#…
阅读更多...
vue自适应布局（各种浏览器，分辨率）

vue自适应布局（各种浏览器，分辨率）

1.前言 spa页面的layout布局对于前端项目的影响至关重要&#xff0c;在我们进行web端开发的时候&#xff0c;前端的各种大小屏幕&#xff0c;各种内核的浏览器不同&#xff0c;会导致我们的页面呈现出不一样的效果&#xff0c;如何进行更好的取舍&#xff0c;怎么能够达到产品…
阅读更多...
使用Nginx部署Vue+SpringBoot前后端分离项目(超详细！)

使用Nginx部署Vue+SpringBoot前后端分离项目(超详细！)

目录 一、前后端环境准备 1、前端环境准备 2、后端环境准备 二、前后端打包 1、前端打包 2、后端打包 三、服务器前后端配置及部署 1、前端配置 安装nginx 创建项目目录 前端项目部署 2、后端配置 安装宝塔 安装mysql 使用本地Navicat连接远程数据库 安装jdk环境…
阅读更多...
echarts文档解读

echarts文档解读

前言&#xff1a;今天给大家分享一个前端的开源可视化图标库echarts。 &#x1f495;点击下方名片&#xff0c;即可领取学长个人微信&#x1f495; echarts 全局 echarts 对象&#xff0c;在 script 标签引入 echarts.js 文件后获得&#xff0c;或者在 AMD 环境中通过 require…
阅读更多...
Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）

Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）

目录 前言 正文 插槽是什么&#xff1f; 怎么使用插槽&#xff1f; 基本用法 后备&#xff08;默认&#xff09;内容 具名插槽 作用域插槽 插槽版本变化 总结 前言 Vue中的插槽&#xff08;slot&#xff09;在项目中用的也是比较多的&#xff0c;今天就来介绍一下插…
阅读更多...
npm install 提示Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

npm install 提示Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

场景&#xff1a; 执行npm install时提示Unable to authenticate Password: Email: (this IS public) xxqq.com Logged in as uploader on http://192.168.xx.xxx:8074/repository/npm-internal/. PS D:\GitworkspaceUi\gisquest-cloud-ui-workcenter> npm install npm ERR…
阅读更多...
【登录界面】vue、element-ui登录界面模板

【登录界面】vue、element-ui登录界面模板

vue、element-ui登录界面模板这里总结一个用vue、element-ui写的登录界面&#xff0c;为以后复制粘贴备用。 截图 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录</title><!--…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023