HTML（1）--标签元素

最新推荐文章于 2024-07-16 20:50:21 发布
最新推荐文章于 2024-07-16 20:50:21 发布
阅读量250 收藏
点赞数 1
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxyccm/article/details/122885866
版权

HTML：

  • Hyper Text Markup Language 超文本标记语言

  • 超文本包括：文字、图片、音频、视频、动画等

  • 现用版本：HTML5+CSS3

  • ,等成对的标签，分别叫开放标签（）和闭合标签()

  • 单独呈现的标签（空元素）称为自闭合标签，如

    ；意为用/来关闭空元素

  • ctrl+/ 注释快捷键

  • 基本网页信息：

<!-- DOCTYPE:告诉浏览器，我们要使用什么规范 -->

<!DOCTYPE html>

<html lang="en">

<!--head标签代表网页头部-->
<head>

    <!--meta描述性，用来描述网页的一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="zxy">
    <meta name="description" content="java">

    <!--title标签代表网页标题-->
    <title>zxy的第一个网页</title>
</head>

<!--body标签代表网页主体-->
<body>

hello,world!

</body>
</html>

网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>

<!--段落标签-->
<p>两只老虎    跑的快</p>
<p>跑得快    一只没有耳朵</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
跑得快 <br/>
跑得快

<!--粗体，斜体-->
<h1>字体样式标签</h1>
<strong>粗体</strong> <br/>
<em>斜体</em> <br/>

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
<br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权符号：&copy;<br/>

</body>
</html>

图像标签

  • 常见图像格式
    • JPG
    • GIF
    • PNG
    • BMP
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!--img学习
src:图片地址 （必填） 相对路径/绝对路径
../  上一级目录
alt:图片名字（必填）
title:鼠标悬停时显示文字
width,height:设置图片宽、高
-->
<img src="../resource/zxy.jpg " alt="zxy" title="悬停文字" width="300" height="400">

</body>
</html>

链接标签

  • 文本超链接
  • 图片超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签：
href（必填）：表示要跳转到哪个页面
target:表示窗口在哪里打开
        _blank:在新标签中打开
        _self:在自己的标签中打开
-->
<a href="1file.html" target="_blank">点击跳转到页面1</a>
<a href="https://www.baidu.com">点击跳转到百度</a>

<a href="1file.html">
    <img src="../resource/zxy.jpg " alt="zxy" title="悬停文字" width="300" height="400">
</a>

<!--锚链接:实现页面间跳转
1.需要一个标记
2.跳转到标记
#
-->
<a href="#top">回到顶部</a>


<!--功能性链接
邮件链接：mailto:
-->

<a href="mailto:2551839606@qq.com">点击联系我</a>

</body>
</html>
  • 块元素:无论内容多少，该元素独占一行
  • 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表标签

  • 列表：
    • 无序列表
    • 有序列表
    • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!--有序列表 ol
1234排序列表
-->

<ol>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>c++</li>
</ol>

<hr/>

<!--无序列表 ul
- 生成的原点列表
-->

<ul>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>c++</li>
</ul>

<hr/>

<!--自定义列表：无标记，含有title
dl:标签
dt:列表名称
dd:列表内容
-->

<dl>
    <dt>语言</dt>

    <dd>java</dd>
    <dd>c++</dd>
    <dd>c</dd>

</dl>

</body>
</html>

表格

  • 基本内容：
    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
tr:行
td:列
-->

<table border="1px">
    <tr>
<!--   colspan 跨列     -->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
<!--    rospan 跨行    -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>


</body>
</html>

媒体元素

  • 视频元素：video
  • 音频元素: audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--视频元素
src:资源路径
controls:显示控制条
autoplay:自动播放
-->
<video src="相对路径" controls autoplay></video>

<!--音频元素
scr:资源路径
-->
<audio src="相对路径" controls></audio>

</body>
</html>
zxy7857
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第五篇 HTML页面基本组成之 标签元素大杂烩
m0_66451927的博客
01-28 1106
这篇文章将根据页面的基本组成，补充一些标签元素，由于这些标签元素都比较容易理解，有些地方就不多做解释。提前说明：下面给出的代码都是放在<body></body>标签里的。 二、<header> 标签 概念：<header>标签定义文档或者文档的一部分区域的页眉。<header> 元素作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 <header> 元素。 注意：<header> 标签不能被...
uni-app与HTML的标签变化
weixin_44770377的博客
09-24 1万+
组件/标签的变化 以前是html标签，现在是小程序标签 div 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在，但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video 这些还在。 select 改成 picker ifram...
HTML - 元素/标签和属性基础
皮皮blog
12-29 3725
HTML元素简介HTML 文档由 HTML 元素定义。HTML 文档由嵌套的 HTML 元素构成。"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容。Note:即使您忘记了使
v-html 解析并插入 html 标签
热门推荐
weixin_41796631的博客
09-21 7万+
1. 双大括号会将数据解释为普通文本，而非 HTML 代码。 &lt;div id="app"&gt; &lt;p id="a"&gt;Using mustaches: {{ rawHtml }}&lt;/p&gt; &lt;p &gt;Using v-html directive: &lt;/p&gt; &lt;/div&gt; &lt;body&a
详解三种方式解决vue中v-html元素中标签样式
shengyin714959的博客
05-30 2315
Vue为v-html中标签添加CSS样式 1 2 3 4 5 6 7 8 9 10 11 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time"&...
HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
LYFlied的博客
03-28 6524
闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素 元素之间的转化 - display:block；(将元素变为块级元素) - display:inline； (将元素变为行级元素) - display：inline-block；（将元素变为行级块元素）
三种方式解决vue中v-html元素中标签样式
dt1991524的博客
11-20 1万+
当我们引入第三方组件或加载html元素时，想修改下样式，就可以用以下三种方式： 一.去掉&lt;style scoped&gt;中的scoped 这个方法不建议使用，会改变布局 二.定义两个style标签，一个含有scoped属性，一个不含有scoped属性 使用方法为 &lt;style scoped&gt;  .introduction{     width: 100%;     ...
vue中改变v-html元素样式
JiAyInNnNnN123的博客
02-09 7316
<div class="brand-article" v-html="content.article"></div> 实现样式： 设计图： 当前article是一篇文章，有标题有段落，想给v-html中元素添加样式，同原来组件中访问元素给加样式不同，会不好使。 前提：css中使用了scoped，导致样式只在本组件生效，并且使用了sass 解决方式： 1.在brand-article下 使用 >>> 注意：>>> 只作用于css 2.需要用 /de
vue v-html字体大小修改,详解三种方式解决vue中v-html元素中标签样式
weixin_39716510的博客
06-03 3673
Vue为v-html中标签添加CSS样式{{news.title}}{{news.datetime}}返回列表当我们使用v-html渲染页面，使用下面这种方式去修改样式并没有效果，.con{p {font-size: 14px;line-height: 28px;text-align: left;color: rgb(238, 238, 238);color: #585858;text-inden...
Vue指令之v-html
俊而不逊的博客
12-01 5万+
Vue指令之v-html v-html指令是设置innerHTML 1.v-html该怎么使用呢？？？ 我们先在被vue实例挂载的标签div中，放入一个p标签，在p标签内部写入v-html指令，<p v-html="name"></p> ，那么name的值哪里来呢？ 这就需要在data中去定义了，对于普通的文本和v-text没有什么差异，但是对于html结构就不一样了，它就会被解析出来，如下代码： 2.普通文本： ...
(完整word版)HTML标签-按功能分类.doc
11-15
本篇文档按照功能将HTML标签进行了分类，便于理解和学习。 1. **基础标签**： - `<!DOCTYPE>`：声明文档类型，如`<!DOCTYPE html>`声明为HTML5文档。 - `<html>`：定义整个HTML文档的根元素。 - `<title>`：设置...
tema--html-1
03-28
总结，"tema--html-1"是一个专注于HTML学习的项目，通过探索这个项目，你可以掌握HTML的基本结构、元素、属性和HTML5的新特性，同时了解如何将HTML与CSS、JavaScript结合，创建出富有吸引力且功能丰富的网页。...
first-html-project1
03-22
2. **HTML元素与标签**：HTML由各种元素组成，每个元素都有开始标签（如`<p>`)和结束标签（如`</p>`）。一些常见元素包括段落（`<p>`）、标题（`<h1>`至`<h6>`）、链接（`<a>`）、图像（`<img>`）、列表（`<ul>`和`...
使用ant+jmeter如何生成html报告
2301_78276982的博客
07-16 1101
下载apache-ant，放到对应路径下，然后进行环境变量配置。系统变量的CLASSPATH添加E:\Installation Pack\eclipse\apache-ant-1.9.6\lib;用户变量的PATH添加：E:\Installation Pack\eclipse\apache-ant-1.9.6\bin。打开cmd，执行 ant，提示"Buildfile:build.xml does not exist!Build failed"则配置成功，ant命令可用。如下图所示。
Html_Css问答集(12)
白话魔法师
07-16 827
html与css学习中的一些疑问，问答中轻松获取知识。
Html_Css问答集(11)
白话魔法师
07-16 834
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
最新发布
u014614478的博客
07-16 884
PhantomJS 生成图片，pdf，爬虫等功能
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-16 899
本文主要介绍如何用DHTMLX Gantt将上下文菜单集成到JavaScript Gantt图中，欢迎下载最新版组件体验！
python -超链接多个标签html
06-18
在HTML中，创建一个包含多个链接的超链接标签通常使用`<a>`元素，每个链接由`href`属性指定URL，而链接内容则放在`<a>`标签的`<span>`、`<p>`、`<img>`等其他标签内。例如，如果你想创建一个包含两个链接的段落，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值