HTML基础标签

最新推荐文章于 2023-01-06 23:02:28 发布

guo_laoliu

最新推荐文章于 2023-01-06 23:02:28 发布

阅读量325

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/guo_laoliu/article/details/127395240

版权

一.html常用文本标签

<h1>h1</h1>： h1-h6标题标签，字体依次由大到小，字体有加粗的效果。
： p标签，段落标签，p标签上下自带16px外边距
<hr />: 显示一根横线
 没有任何默认样式，主要是给css样式使用
 ：换行标签，br后面的内容换行显示，没有边距。
 b标签包裹的文本会加粗显示，没有任何的语义。html4的版本标签
 有强调的语义，包裹的文本会加粗显示。html5版本新加的标签
 没有任何语义，单纯的斜体。html4的标签
有强调的语义，包裹的文本显示为斜体。h5增加。
2:上标，包裹文本显示偏上显示
2 下标，包裹文本偏小显示
<blockquote></blockquote> 表示引用的一段话(如名人名言)，有默认的外边距
<cite></cite>引用的内容出自某处或某人
<q></q>表示引用，内容用""包裹
<code></code>表示内容是一段代码，显示为等宽字体样式
标记一段内容，背景显示为黄色。
<pre></pre> 可以保留换行和空格符号，但是不好控制网页显示效果，一般没有特殊需求不用。
  表示一个空格符号。
&ensp; 半角符号，一个英文字母的宽度，半个中文字符的宽度
&emsp; 全角符号，2个字母的宽度，1个中文字符的宽度。
 比标题内容小一号字体，默认效果在h标签里生效。h5新加
<time></time> 表示一个时间，日期的文本用该标签包裹
 datetime属性:可选，可以设置具体的日期方便搜索引擎抓取。
<data value="100">100元</data>用于数据文本
 value，可选，可以设置一个值，方便搜索引擎抓取
<address></address> 用于地址文本，默认斜体
<del>190.00</del>表示删除的内容，文本会有一个横线
<ins>7.9折</ins> 表示插入的内容，文本会有下划线
<abbr title="">HTML</abbr> 用于专业术语文本
 title 属性的内容可以作为对术语的解释
 注释内容是浏览器不会渲染处界面，主要是给编程人员看的。vscode里面的注释快捷键是ctrl+/

二.其他常用标签

a超链接标签：<a href="https://www.baidu.com" target="_self">到百度</a> 该标签可以点击跳转到一个网址
 href是跳转网页的地址
 target是跳转网页打开的方式，默认是_self当前窗口打开，_blank是新开一个窗口打开。
 下载文件:如果href是一个文件地址，可以下载该文件。
 ping：点击a标签，可以像ping指定的地址发送一个post请求，主要用于跟踪用户的行为。
 href="tel:13111111111" tel协议可以创建电话链接，在手机浏览器上，用户点击可以唤起电话进行拨号。
 href="mailto:contact@163.com"：使用mailto协议，点击后，浏览器会打开本机默认的邮件程序，让用户向指定的邮件地址发送邮件
 锚点: 可以给html标签指定一个id属性，然后通过href="#id"跳转到指定位置,#表示id

图片标签:<img src="./imgs/shop_33.jpg" alt="" height="50" loading="lazy" />
 src 属性是图片地址，可以是本地图片地址或者网络图片地址
 alt 属性设定图片的文字说明。当图片不显示的时候会显示alt属性的内容。
 width设置图片的宽度，height设置图片的高度。如果只设置其中一个，另外一个是自动计算。单位是px
 loading 属性设置图片加载行为,有3个值，默认为auto，等于不使用loading属性。lazy，启用懒加载(图片出现在可视区域才加载图片)，eager，立即加载图片，不会管图片是否出现在可视区域。
figure图像区域元素
 <figure>
<img src="F" />
<figcaption>大桥图片</figcaption>
</figure>
 figure 表示一个图像区域，可以将图像和相关的信息包裹起来。
 figcaption对图片的描述,可以做图片的标题。
ul无序列表
 <ul type="square">
<li>一年级1班</li>
</ul>
 无序列表，没有序号，每一列前面有一个符号
type 属性设置列表每一列的符号：disc 实心圆(默认值)，cirlce空心圆,square矩形。可以做网页的布局元素。
ol 有序列表
 <ol type="1" start="5">
<li>一年级1班</li>
</ol>
 有序列表，每一列前面都有一个数字。
 type 属性设置列前面的数字类型:
1 阿拉伯数字(默认值)。
a 小写字母排序
A 大写字母排序
i 小写罗马数字排序
I 大写罗马数字排序
 reversed倒序排列
 start 设置数字起始值
dl 列表
 <dl>
<dt>web前端</dt>
<dd>网页前台</dd>
</dl>
 dl 列表，dl里面可以有多组dt，dd的组合。
 dt表示一个术语
 dd是对术语的解释
iframe 网页容器
 <iframe src="https://player.youku.com/embed/XNTg2MzEyMjY2NA==" frameborder="0" allowfullscreen></iframe>
 iframe 网页容器，可以在一个区域显示其他网页以及网页内容
 1. src属性设置显示网页的地址
 2. width 设置iframe的宽度，height 设置iframe的高度
 3. frameborder 设置边框的尺寸
 4. allowfullscreen 点击全屏按钮，可以全屏显示