当前位置: 首页> 汽车> 车展 > 【Web开发手礼】探索Web开发的魅力(二)-html基础标签(2)

【Web开发手礼】探索Web开发的魅力(二)-html基础标签(2)

时间:2025/7/11 7:52:33来源:https://blog.csdn.net/m0_63267251/article/details/140362786 浏览次数: 0次

大致内容主要还是一些常见的基本的html标签及对应的属性,可以当作一个小笔记收藏一下!!!

文章目录

前言

html基础标签

图片

超链接 


前言

大致内容主要还是一些常见的基本的html标签及对应的属性,可以当作一个小笔记收藏一下!!!


提示:以下是本篇文章正文内容,下面案例可供参考

html基础标签

图片

HTML <img> 元素将一份图像嵌入文档。
默认为行内元素,即display: inline。

src属性

该属性是必须的,它包含了你想嵌入的图片的文件路径。

alt属性

该属性包含一条对图像的文本描述,这不是强制性的,但对可访问性而言,它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt 属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时。

height属性

图像的高度,在 HTML5 中的单位是 CSS 像素,在 HTML 4 中既可以是像素,也可以是百分比。可以只指定 width 和 height 中的一个值,浏览器会根据原始图像进行缩放。

width属性

图像的宽度,在 HTML5 中单位是 CSS 像素, 在 HTML 4 中可以是像素也可以是百分比。

<audio>标签

HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源, 这些音频资源可以使用 src 属性或者<source> 元素来进行描述:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

  • 使用src属性播放
<audiocontrolssrc="/audios/bgm.mp3">Your browser does not support the<code>audio</code> element.
</audio>
  • <audio> 与多个 <source> 元素 

 这个例子包含了多个 <source> 元素。如果能够播放的话,浏览器就会试图去加载第一个 source 元素;如果不行,那就退而求其次去加载第二个。

<audio controls><source src="/audios/sound1" type="audio/mp3"/><source src="/audios/sound2" type="audio/mp3"/>
</audio>

<video>标签 

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。

示例:

<video controls width="800"><source src="/videos/video1.mp4"type="video/mp4"><source src="/videos/video2.mp4"type="video/mp4">Sorry, your browser doesn't support embedded videos.
</video>

超链接 

 TML <a> 元素(或称锚元素)可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。如果存在 href 属性,当 <a> 元素聚焦时按下回车键就会激活它。

常用选项

  • 点击链接打开新标签页面时加入属性:target="_blank"

也可以跳转到项目中别的html页面 

<form>标签 

HTML <form> 元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。

<input>标签

通常会通过一个label标签来绑定input标签,通过label标签的for属性和input的id属性进行绑定。

 

HTML <input>用来填写内容,常见类型有:

  • <input type="text">:创建基础的单行文本框。
  • <input type="number">:用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头,让用户可以使用鼠标增加和减少输入的值,或者只需用指尖敲击即可。
  • <input type="email">:带有 “email” (电子邮箱) 类型标记的输入框元素 (<input>) 能够让用户输入或编辑一个电子邮箱地址,此外,如果指定了multiple属性,用户还可以输入多个电子邮箱地址。在表单提交前,输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。
  • <input type="password">:<input> 元素 里有一种叫做 “password” 的值,给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的,其中文本被遮蔽以致于无法读取,通常通过用诸如星号(“*”)或点(“•”)等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。
  • <input type="radio">:<input> 的 radio 类型元素默认渲染为小型圆圈图表,填充即为激活,类似于之前描述额复选框(checkbox)类型。单选按钮允许你选择单一的值来提交表单。

 常用属性有:

  • name: 名称
  • id: 唯一ID
  • maxlength:最大长度
  • minlength:最小长度
  • required:是否必填
  • placeholder:当表单控件为空时,控件中显示的内容

<textarea>标签 

HTML <textarea> 元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

<select>与<option>标签

HTML <select> 元素表示一个提供选项菜单的控件。

<label for="pet-select">Choose a pet:</label><select name="pets" id="pet-select"><option value="">--Please choose an option--</option><option value="dog">Dog</option><option value="cat">Cat</option><option value="hamster">Hamster</option><option value="parrot">Parrot</option><option value="spider">Spider</option><option value="goldfish">Goldfish</option>
</select>

<button>标签 

HTML <button> 元素表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下,HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台(用户操作系统)的按钮, 但你可以使用 CSS 来改变按钮的样貌。

列表

<ul>与<li>标签

HTML <ul> 元素(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表。

示例:

<ul><li>first item</li><li>second item</li><li>third item</li>
</ul>

<ol>与<li>标签 

HTML <ol> 元素表示有序列表,通常渲染为一个带编号的列表。

示例:

<ol><li>Fee</li><li>Fi</li><li>Fo</li><li>Fum</li>
</ol>

<dl>、<dt>与<dd>标签

HTML <dl> 元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键 - 值对列表)。

示例:

<dl><dt>Name</dt><dd>Godzilla</dd><dt>Born</dt><dd>1952</dd><dt>Birthplace</dt><dd>Japan</dd><dt>Color</dt><dd>Green</dd><dd>Orange</dd>
</dl>


总结

大致内容主要还是一些常见的基本的html标签及对应的属性,可以当作一个小笔记收藏一下!!!

关键字:【Web开发手礼】探索Web开发的魅力(二)-html基础标签(2)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: