3.HTML5标签及介绍

最新推荐文章于 2023-04-22 16:24:42 发布

Teng-YJ

最新推荐文章于 2023-04-22 16:24:42 发布

阅读量488

点赞数

分类专栏： html5 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_46999664/article/details/122681595

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格数据：br、hr、figcaption、figure、p、ol、ul、li、div、pre、blockquote、dl、dt、dd

个人常用：br、hr、p、ol、ul、li、div、dl、dt、dd
不常用：	figcaption：与figure一起使用，经常包裹在figure元素里使用（显示在图片下方表示图片标题意思）
				pre：预格式化的文本，包裹内容输出在浏览器上不进行缩进、换行压缩更改
				blockquote：与cite属性一起用，表示内容来自于那个网址（地方）
**注意点：ol、ul、li 为下拉菜单的一组
					dl、dt、dd 为列表一组

<html>
<head>
	<meta charset="UTF-8">
	<!-- <base href="http://www.baidu.com" target="_blank"> -->
	<link rel="stylesheet" href="./css/01.css">
	<title>02.基础html标签示例--中</title>
	<style type="text/css">
		/* css样式 */
	</style>
	</head>
	<body>
		<!-- 文本元素不换行，此处为了更好展示<br><br><br>
		<span style="color: blue;">span：包裹文字，设置样式</span><br>
		<a href="www.baidu.com">a：我是一个连接，点我可以跳转到百度</a><br>
		<ruby>
			ruby:包裹rp，rt
			rp、rt拼<rp>(</rp><rt>pin</rt><rp>)</rp>
			音<rp>(</rp><rt>yin</rt><rp>)</rp>
		</ruby><br>
		<dfn>dfn：定义一个项目</dfn><br>
		<abbr title="这可以缩写,长句子将会在鼠标停留是浮现">abbr：缩写</abbr><br>
		<em>em：强调文本</em><br>
		<time datetime="2022-02-03">time：为该文字提供时间，使机器阅读方便</time><br>
		<var>var：短语标签</var><br>
		<samp>samp：定义计算机程序的样本文本</samp><br>
		<i>i:我将是斜体</i><br>
		<b>b:我将被加粗</b><br>
		在下方显示<sub>sub:下</sub><br>
		在上方显示<sup>sup:上</sup><br>
		正常文字<smal>smal：小型文字</smal><br>
		<strong>strong:加粗文本</strong><br>
		<mark>mark：我被加亮了</mark><br>
		修正前：<del>del:123.00</del><br>
		修正后：<ins>ins:133</ins><br>
		隔离<bdi>bdi:我被左右隔离</bdi>效果（只支持chorme、firefox）<br>
		<bdo dir="ltr">bdo(ltr):我从左到右显示</bdo><br>
		<bdo dir="rtl">bdo(rtl):我从右到左显示</bdo><br>
		<s>s：我能加删除线</s><br>
		<wbr>wbr：单词换行时机（页面不够显示这行时从这儿换行</wbr><br>
		<code>code:在这里写代码，防止错误编译alert('tt');</code><br> -->
		
		
		br：我被<br/>换行了
		hr：我是横线<hr/>
		figure：包裹figcaption
		<figure>
		  <img src="./1.png" alt="The Pulpit Rock">
		  <figcaption>figcaption：图片地下文字google</figcaption>
		</figure>
		<span>span：在一行</span><span>span：在一行</span>
		<p>p：后面直接换行不会想span一样在一行</p>
		<p>p：后面直接换行不会想span一样在一行</p>		
		ol:嵌套li，前面数字进行排列，
		<ol>
			<li>第一个li</li>
			<li>第二个li</li>
			<li>第三个li</li>
		</ol>
		ul:嵌套li，无数字进行排列
		<ul>
			<li>第一个li</li>
			<li>第二个li</li>
			<li>第三个li</li>
		</ul>
		<div style="width: 100px;height: 60px;border: 1px solid #000;">div：我是个块，里面可以放很多东西</div>
<pre>
	pre：我啥样
	    浏览器上啥样
</pre>
		<blockquote cite="http://www.baidu.com">
			blockquote:来源于百度
		</blockquote>
		dl:包裹dt-分类标题，dd-分类内容
		<dl>
		  <dt>家具</dt>
		    <dd>板凳</dd>
		    <dd>桌子</dd>
		  <dt>电脑</dt>
		    <dd>台式电脑</dd>
		    <dd>手提电脑</dd>
		</dl>
		
</body>
</html>

<script type="text/javascript">
	
</script>
<noscript>
	不支持 script是显示
</noscript>