一.html常用文本标签
<h1>h1</h1>: h1-h6标题标签,字体依次由大到小,字体有加粗的效果。
<p></p>: p标签,段落标签,p标签上下自带16px外边距
<hr />: 显示一根横线
<span></span> 没有任何默认样式,主要是给css样式使用
<br />: 换行标签,br后面的内容换行显示,没有边距。
<b></b> b标签包裹的文本会加粗显示,没有任何的语义。html4的版本标签
<strong></strong> 有强调的语义,包裹的文本会加粗显示。html5版本新加的标签
<i></i> 没有任何语义,单纯的斜体。html4的标签
<em></em>有强调的语义,包裹的文本显示为斜体。h5增加。
<sup>2</sup>:上标,包裹文本显示偏上显示
<sub>2</sub> 下标,包裹文本偏小显示
<blockquote></blockquote> 表示引用的一段话(如名人名言),有默认的外边距
<cite></cite>引用的内容出自某处或某人
<q></q>表示引用,内容用""包裹
<code></code>表示内容是一段代码,显示为等宽字体样式
<mark></mark>标记一段内容,背景显示为黄色。
<pre></pre> 可以保留换行和空格符号,但是不好控制网页显示效果,一般没有特殊需求不用。
表示一个空格符号。
  半角符号,一个英文字母的宽度,半个中文字符的宽度
  全角符号,2个字母的宽度,1个中文字符的宽度。
<small></small> 比标题内容小一号字体,默认效果在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 点击全屏按钮,可以全屏显示