HTML下元素学习

湫鹤椿水

已于 2023-07-11 10:37:51 修改

阅读量145

点赞数 1

文章标签： html 学习前端

于 2023-07-10 20:55:07 首次发布

本文链接：https://blog.csdn.net/m0_71774042/article/details/131559487

版权

文本元素

<abbr>用于给文本添加备注，当鼠标移到文本上一段时间会显示备注内容
<abbr title="这是一种鸟类">喜鹊</abbr>
<form> 表单标签，用于创建用户输入内容的区域，可以有<menus>(下拉列表，暂时没有浏览器支持）<textarea>(纯文本区域）<legend>(定义分组标题) <fieldset>(定义分组)

主要包括的属性：

accept-charset="UTF-8|ISO-8859-1|gb2312" 指定服务端处理发送数据用的字符集。
action="url" 指定表单数据发送后到达的页面
autocomplete="on|off" 自动完成功能，即如果用户之前提交过数据，之后再次输入数据时就会根据输入前几个自动补全后面内容。
enctype="application/x-www-form-urlencoded|text/plain|multipart/form-data" 确定form表单的编码方式：在发送之前编码完成｜多部分文件，不需要编码｜空格变成加号，特殊字符不进行编码
method="post|get" 规定表单发送数据的请求方式。
name="" form表单的名字
novalidate="novalidate" 开启该属性后表单发送时不会对表单进行验证
target="_blank|_self|_top|_parent|framename" 指定提交表单转入action指定的url的方式：在新标签页中打开｜在自身打开｜在整个窗口中打开｜在父框架集中打开｜在指定框架中打开

<article>多用来展示字自包含内容</article>其中可以包含<p><h1>等文本标签。

<aside>文本标签，常常用于文章的侧边栏这种不属于文章本身又能对文章起补充和解释作用的文本。

<b> 比一般文字加粗一点的文本，常作为最后选项。

<bdi> 文本隔离元素，在其中的文本不受其父元素文本方向的影响，目前只用火狐和谷歌浏览器支持。

<bdo dir="ltr|rtl"> 使文本脱离父元素或默认方向，是<bdi>的替代，所有浏览器都支持。

<blockquote> 块元素引用，浏览器会自动添加换行还会增加外边距（类似于一个块元素）

<canvas> 该元素可以结合javascript来进行绘图

<canvas id="mycanvas" width="400px" height="400px"></canvas>
<script>
//获取画布
var canvas = document.getElementById("mycanvas");
//获取上下文
var pen = canvas.getContext("2d");
//设置画笔颜色
pen.fillStyle="green";
//画出一个以画布左上角为原点，坐标为（20，20）的长是200，宽是50的矩形
pen.fillRect(20,20,200,50);
</script>
<caption> 用来定义表格的名字，通常紧跟在<table>标签之后，在<tr>标签之前，居中表示。

<col>用在<colgroup>中或者<table>标签中，用来方便表格列样式修改，不用对每个列设置同样的属性，可以批量操作

align="left|right|center|justify|char" 对齐方式，左对齐｜右对齐｜居中对齐｜两端对齐｜以某字符为基准对齐。
char和charoffset属性几乎没有浏览器支持
span="2" 列元素跨越两列，即一次改变两列的属性。
valign="top|bottom|middle|baseline 列内容与顶部｜底部｜中间｜基线对齐，基线目前没有浏览器支持。
width="10" 指定列宽

<caption>我的表格</caption>
<colgroup>
<!--前两列的背景色为黄色,最后一列的宽度设为100像素，背景色为绿色-->
<col align="left" span="2" style="background-color:yellow">
<col align="right" width="100" style="background-color:green">
</colgroup>
<tr> 
   <td>姓名</td>
   <td>性别</td>
   <td>年龄</td>
</tr>
<tr> 
   <td>陈佩</td>
   <td>男</td>
   <td>22</td>
</tr>
<tr> 
   <td>林盈</td>
   <td>女</td>
   <td>20</td>
</tr>
</table>

<colgroup> 功能和col类似，其中可以有<col>使结构更加清晰，也可以没有，自己替代<col>的功能，仅有span和width属性
将上面的<col>删掉用<colgroup>代替

<colgroup span="2" width="100"></colgroup>
<colgroup span="1" width="200"></colgroup>

形式如下

<datalist> 一般与<option>和<input>标签一起使用，实现在用户输入时下拉选择内容
，<input>通过list属性和<datalist>的id连接。

实验<input type="text" list="mydatalist">
<datalist id="mydatalist">
  <option value="永远热爱生活">
  <option value="做一个性格稳定的人">
  <option value="善良永远不会在生命中缺席">
</datalist>

<label> 标签用在<input>前，当<input>的类型是单选时。点击文字，即为点击到了input标签，更加合理。在<label>标签的for属性中指向input的id。

<dl>定义列表<dt>被定义内容<dd>定义的具体内容，三者常配合使用

<h4>定义列表与定义条目的使用</h4>
<dl>
  <dt>骆驼</dt>
  <dd>一种及其耐劳的动物</dd>

<del>删除线内容，在其中的内容会被从中间划开

<ins>下划线内容，在其中的内容会被加上下划线
```
<p>我们的梦想<del>不会实现</del><ins>一定会实现</ins>
```
<details>表示文本的具体细节，通常与<summery> <p>标签配合使用,<summery>显示文本，<p>表示具体细节
属性 open="open" 细节默认打开

<details>
<summary>只要我们足够努力</summary>
<p>日行一寸，亦有清欢</p>
</details>

“日行一寸”内容是通过点解三角显示的。

<dfn>用来表示一些专业的词汇和新生的语言，浏览器一般解释为斜体，但尽量少用为妙，因为第一陌生词汇仅仅表示出来很难让人理解，需要单独脱离文本解释，第二陌生文本过一段时间可能就不再陌生，这就要改变网页结构，大动干戈。
<div>块元素，用来协助html页面的排版布局。
<em>标记用于想要强调的文本内容，浏览器多解释为斜体，后面浏览器也可能会变化。如果想仅仅用斜体表示，可以用<i>标签替代。
<fieldset> 用来将form表单中的内容分组，常与<legend>标签内容和用，legend为分组设置标题，<fieldset>（即一组内容，会被用外框线框出，标题在左上角。

<form>
  <fieldset>
       <legend>身份信息</legend>
   姓名 <input type="text"> 年龄 <input type="text" >
  </fieldset>
  <fieldset>
     <legend>身外喜好</legend>
  爱好<input type="text">
  </fieldset>
</form>

<figure> 用来定义文章中的插图，<img>作为子元素出现 <figcaption> 定义图片的标题

<footer>用来定义文档或节的页脚，需要自己使其内容始终在文档下方。
<header> 用来定义文档的页眉
<h1>~<h6>定义页面的标题文字，字体大小从1到6，由大到小。
<head> 文档必备标签
<hr> 定义分割线，用来分割段落。

<iframe> 内联框架，在原来的文档中显示别的文档的内容。

referrerpolicy="" 用来规定当内联文档被处理时，哪些元素会被发送。具体值如下。

no-referrer 不随表单发送内敛元素引荐来源信息。
no-referrer-when-downgrade 规定当安全等级不是https时，不会将refer信息发送。
origin 仅向客户端发送协议，端口和主机
origin-when-cross-origin 跨域请求发送主机，端口号，协议，同域包括路径。
same-origin 对于同源的请求发送引荐来源信息，不同源的请求不发送引荐来源信息
strict-origin 对于同一安全级别的请求发送来源信息，从高安全级别到低安全级别的请求不发送安全信息。
strict-origin-cross-origin 执行同源请求时发送完整路径。当安全级别保持不变（例如 HTTPS 到 HTTPS）时，仅发送源。不向安全性较低的目的地发送标头（HTTPS 到 HTTP）。
unsafe-url 仅发送来源和路径，被认为是不安全的。

sandbox 沙盒，用来对iframe引用的文档权限进行限制，保证安全性，属性见下：

allow-top-nagevation 允许加载包含页面的导航栏。
allow-same-origin 视为同源文件，全部权限。
allow-forms 允许表单提交
allow-scripts 允许执行代码。

scrolling="yes|no|auto" 是否显示滚动条
seamless="seamless" 规定引入内容和原文档缩小区别（没什么用，就两个浏览器支持)
srcdoc="标签语言" 会覆盖src属性，可以在value中使用html语言编写内容，作用不大。

<input> 用在表单中用户用来输入内容，属性如下

multiple="multiple" 当type属性为file时允许一次上传多个文件。
name ="名称" 指定input的名称
min="number|date" 规定输入的数字或日期的最小值，与max配合使用
minlength="number" 规定输入的字符串的最小长度和最大长度（maxlength）
value="" input中的值
list="listdata" 与<listdata>标签配合使用，实现选值填入。
autocomplete="on|off" 之前填过的数据会被记录，下次再次输入会被自动补全
placeholder="text" 给用户的填写提示，会以透明形式显示，获取焦点后消失。
autofoucs="autofocus" 自动获取焦点
type="radio|checkbox|text|image|submit|file|hidden|password|reset" 设置input的类型：单选框｜复选框｜文本｜图像形式的提交按钮｜提交按钮｜文件类型｜密码｜重置按钮。其中image时，必须指定src和alt。
step="number" 规定输入数字时合法的数字间隔，例如为5，第一个又输入1，则只能输入6，11等等。

视频或音频元素

<area> 该标签和<img>标签的usemap属性和<map>标签配合使用，实现图片分块点击进入不同文档的效果

alt="word" 当href失效时候的替代文本
shape="rect|recicle|poly|default" 指定area区域的形状
coords="x1,x2,y1,y2|x1,x2,r|x1,x2,y1,y2" 设置area的坐标，如果是矩形就是左上角和右下角的坐标，如果是圆就是圆心和半径，如果是多边形，就是各点坐标，要自闭和。
href="url" 指定点击<area>后需要跳转的url值
target="_blank" 指定新的url打开位置
rel="alternate|author等" 说明跳转到的文档和本图片的关系。

<img> 引用图像
alt=“图片” 当图片无法加载时显示的内容
src="图片的地址"
ismap 只有当img的父元素中有指定可用的href地址时有效，点击图片，会将鼠标的坐标发送到href的地址，即服务器地址
loading="eager|lazy" 规定图片是在文档加载时加载还是在图片进入视野之后加载（懒加载）
referrerpolicy 用来指定在引入图像时要使用的引荐来源信息，跟iframe的该属性内容一样，可参考。
usemap 通常结合<map>和<area>标签使用，实现点击图片的制定区域，跳转到不同的页面的效果。

<img id="img1" alt="" src="imgs/lingya.jpg" usemap="#imgmap" height="800px">
<map id="imgmap" name="imgmap">
<area href="tione.html" shape="rect" coords="0,0,200,200" target="_blank">
<area href="imgs/2.jpg" shape="circle" coords="0,800,100" target="_blank">
</map>
<audio>音频文件引用标签

属性：

src="文件地址",常常可以用子标签<sorce>替代

loop="loop" 音频文件循环播放

autoplay="autoplay" 音频文件在加载完成后自动播放（safari实验失效）

controls="controls" 显示音频文件的控件

preload="auto|meta|none" 音频文件的预加载时机（在页面之后自动加载｜只加载元数据｜不加载）

muted="muted" 静音音频文件，即是在播放也没声音
<audio controls="controls" autoplay="autoplay" loop="loop" muted="muted">
<source src="music/大鱼.mp3" type="audio/mpeg"/>
</audio>
上面代码作用就是将大鱼这首歌循环自动播放但是哑音。

<cite>一般用于表示文章等中见引用其他文章的部分，在其中的文字默认用斜体表示。

<code>表示代码内容，显示为等宽原始字体。

链接元素

<base> 用在<head>标签中，用来规定整个html页面的基准链接地址前缀（如果不是全路径的话）规定是否在新标签页打开。

在新标签页中打开百度
<head>
  <base href="https://baidu.com" target="_blank">
</head>

可以用样式替代的标签总结

<em>	表示被强调的文本
<strong>	表示语气加重的文本
<dfn>	被定义的文本
<code>	表示代码格式
<var>	var 变量，与<code>配合使用
<cite>	表示文章引用的文献内容
<kbd>	定义从键盘输入的文本，常用在计算机说明手册中
<samp>	定义样本文字