HTML标签

最新推荐文章于 2024-09-02 00:06:04 发布
最新推荐文章于 2024-09-02 00:06:04 发布
阅读量250 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z000802/article/details/123834360
版权

一.排版标签

1.标题标签

代码：h系列标签
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
1~6级标题,重要程度一次递减
<!-- 独占一行 文字加粗 -->

2.段落标签

<p>我是一段文字</p>
<!-- 段落之间存在间隙  独占一行 -->

3.换行标签

<br>  换行
特点：单标签
让文字强制换行

4.水平线标签

<hr> 中间加一条线

 

二.文本格式化标签

需要让文字加粗、下划线、倾斜、删除线等效果

标签说明
b加粗
u下划线
i倾斜
s删除线
标签
strong加粗
ins下划线
em倾斜
del

语义：突出重要性的强调语境  两个效果一样 下面那个更突出重要性

同时实现多个效果,嵌套使用即可<b><u>加粗下划线 </b></u>即可

三.媒体标签

1.图片标签

<img src=""  alt=""> //单标签
//img标签需要展示对应的效果, 需要借助标签的属性进行设置！

 

 

属性注意点：

  1. 标签的属性写在开始标签内部

  2. 标签上可以同时存在多个属性

  3. 属性之间空格隔开

  4. 标签与属性之间必须以空格隔开

  5. 属性之间没有顺序之分

1.1图片标签的alt属性

属性名：alt

属性值：替换文本

  • 当图片加载失败时,才显示alt的文本

  • 当图片加载成功时，不会显示alt的文本

<body>
    <img src="baidu.gif" alt="我是替换文本">
</body>

1.3图片标签的title属性

属性名：title

属性值：提示文本

  • 当鼠标悬停时，才显示的文本

  • title属性不仅仅可以用于图片标签,还可以用于其他标签

  • <body>
    <img src="baidu.gif" alt="我是替换文本" title="我是title效果">
</body>

    3.图片标签的width和height属性

    属性名：width和height

    属性值：宽度和高度(数字)

    注意点：

  •      如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)

  •      如果同时设置了width和height两个，若设置不当此时图片可能会变形

    <body>
    <img src="baidu.gif" alt="我是替换文本" title="我是title效果" width="200">
</body>

    2.路径

    路径可分为：绝对路径(了解) 和 相对路径(常用)

    2.1绝对路径

  • 绝对路径：指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径

  • 例如

2.2相对路径

从当前文件开始出发找目标文件的过程

相对路径分类：

  • 同级目录

  • 下级目录

  • 上级目录

同一级路径：<img src="baidu.gif">
下一级路径: <img src="images.baidu.gif">
上一级路径：<img src=>"../baidu.gif"

 

3.音频标签

在页面中插入音频

<audio src="./music.mp3" controls></audio>
属性名功能
src音频的路径
controls显示播放的空间
autoplay自动播放(部分浏览器不支持)
loop循环播放

注意点：

  • 音频标签目前支持三种格式:MP3、Wav、Ogg

4.视频标签

<video src="./video.mp4" controls></video>

双标签

常见属性：

属性名功能
src视频的路径
controls显示播放的控件
autoplay自动播放(谷歌浏览器中需配合muted实现静音播放)
loop循环播放

注意点：

  • autoplay自动播放需要加一个muted插件实现静音播放

  • 视频标签目前支持三种格式：MP4、 WebM、Ogg

  • 尽可能使用Mp4

四.链接标签

 1.链接标签

a标签、超链接、锚链接

<a href="./目标网页.html">超链接 </a>

特点：

  • 双标签，内部可以包裹内容

  • 如果需要a标签点击之后去指定页面,需要设置a标签的href属性

  • 当开发网站的初期，我们还不知道跳转网站的地址的时候,href的值写成#即可 #

  • 自带颜色的标签

1.1链接标签中的target属性

属性名：target

取值效果
_self默认值，在当前窗口跳转(覆盖原网页)
_blank在新窗口跳转(保留原网页)
<a href = "https://www.baidu.com/" target="_blank">百度一下</a>

 

黑马程序员小张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
php 处理html标签,如何解决php html标签转换问题
weixin_33958381的博客
03-10 2751
php html标签转换问题的解决办法：1、使用“htmlentities()”函数将html标签转换成特殊字符；2、使用“html_entity_decode()”函数将htmlentities函数转义过的字符串转成html标签。很多朋友在写php的时候，难免会遇到需要将html标签进行转义存储。比如存入数据库、xml文件等。而存储进去后，读取出来则需要转换成html输出。网上有许多人编写的转换...
【HTML 标签详解】
热门推荐
书生-w的博客
04-28 2万+
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
常用html标签及其属性
weixin_53988377的博客
07-16 1万+
网页的基本结构文档类型声明标签文档标记标签文档的头部标签文档的主体标签。
常用的HTML标签及属性
weixin_59246157的博客
04-02 3648
属性：action、method、name、value、placeholder、required、readonly、disabled、size、maxlength、id、class、style。5. 表格标签：table、tr、th、td；属性：border、cellpadding、cellspacing、width、height、align、valign、id、class、style。属性：src、autoplay、controls、loop、muted、preload、id、class、style。
javascript 去掉html标签,js怎么去掉html标签
weixin_26886855的博客
06-15 7548
js去掉html标签的方法：首先新建一个html文件；然后使用p标签创建多段文字；接着使用button标签创建一个“删除html”的按钮；最后创建delhtml()函数，并在函数内实现对指定的p标签进行删除即可。本文操作环境：Windows7系统、javascript1.8.5&&html5版，DELL G3电脑新建一个html文件，命名为test.html，用于讲解如何使用js删...
html 学习 常用的html标签及使用
weixin_46673625的博客
04-30 6654
html 常用的标签及使用 表格标签 from input select label textarea 标签
HTML标签大全
STILLxjy
04-05 8393
HTML标签列表标签：有序列表和无序列表：表格标签：图片标签：超链接标签： 画中画标签： 框架标签： 表单标签： 其他标签： 超链接顶部位置 列表标签： <!--HTML注释：列表标签，可用于做目录等 列表标签：<dl> (define list) 上层项目：<dt> (define title) 下层项目：<dd> (define d...
HTML标签常用标签
iOSbird的博客
02-23 1万+
1、 注释标签  注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 2、  声明标签 声明必须是 HTML 文档的第一行，位于 标签之前。 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中有三种 声明 ：1）HTML 4.01 Strict 该 DTD 包含所有
HTML标签及属性大全-经典
zzjlhlcd的博客
11-03 4398
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.--...-->,注释标记,在"表示表格背景色为黑色.---,包含文件的标题,标题出现在浏览器标题栏中。,定义表格的行,用在中。
HTML输入框标签
Mr_Jin的博客
11-09 1万+
1.<input type="reset"> <!--重置--> 2.<input type="submit"> <!--提交--> 3.<input type="text"><!--文本--> 4.&lt...
HTML 标签
qq_67413159的博客
03-06 3984
文本是网页的基本元素，在<body> 标签中直接插入文本，即可显示在网页页面中。 例如： 标题段落标签 在网页制作规范中，网页的内容需要用标题来呈现文档结构，标题类似于文章的大纲。标题 是通过 <h1>~</h6> 标签进行定义的， <h1> 用于定义最大级别的标题。<h6> 用于定义最小级别的标题。 HTML 规则中对6级标题段落标签设置了默认样式，，包含加粗、字号、上下间距，每一级的字号和上下间距值如下表所示。运行...
java输出中写html标签,java 输出html标签
weixin_42374582的博客
05-31 2043
java 输出html标签[2021-02-01 07:37:44]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教jquery输出html代码的方法：1、直接输出标签元素，代码为【...
html标签各属性之间用空格隔开对吗,03-HTML标签（二）
weixin_39899691的博客
06-04 4024
一、HTML常用标签1、排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。1.1、标题标签 h1 ~ h6单词缩写： head 头部. 标题为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题。语义：作为标题使用，并且依据重要性递减语法： 标题文本 标题文本 标题文本 标题文本 标题文...
freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号
weixin_39970689的博客
06-21 1970
原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的...
rn html标签,React Native展示富文本（HTML标签）最佳解决方案
weixin_32308101的博客
06-25 2381
需求背景我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。第三方组件react-native-htmlview要实现这个需求，我第一想到的...
蓝色炫酷碎粒子HTML5导航源码
爱酷码的博客
09-02 383
蓝色炫酷碎粒子HTML5导航源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面。
HTML5 全屏API讲解
Jinuss的博客
09-01 432
全网最详细的HTML5 全屏API介绍
电脑升级改造纪实，增加路由器刷机固件
最新发布
09-04
路由器固件
私域人员配置表.xlsx
09-04
私域人员配置表
HTML标签属性完全指南
"HTML标签属性大全" HTML（HyperText Markup Language）是用于创建网页的标准标记语言。这个摘要提供了HTML标签的一些基本知识，包括文档结构、文本样式、链接创建、格式排版以及图形元素的使用。 首先，HTML文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值