HTML标签汇总

最新推荐文章于 2021-11-20 22:26:00 发布

这。。这。。

最新推荐文章于 2021-11-20 22:26:00 发布

阅读量132

点赞数

分类专栏： HTML 文章标签： java html

本文链接：https://blog.csdn.net/weixin_43936793/article/details/111823177

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

W3C标准包括：

结构化标准语言（HTML，XML）

表现标准语言（CSS）

行为标准（DOM，　ECMAScript)

1.网页基本标签

<!DOCTYPE html>//告诉浏览器我们要使用什么规范

<meta charset="UTF-8">//描述性标签，它用来描述我们网站的一些信息

粗体：

斜体：

大于号:& gt;

小于号：& lt;

商标:©

2.图像标签

src:图像地址
alt：图像的替代文字
title：鼠标悬停提示文字

推荐使用相对地址 …/:上一级目录

3.链接标签

<a href="path" target="目标窗口位置">连接文本或图像</a>

target: _ self （在自己的网页中打开）或_ blank(在新标签中打开）

4.列表标签

<!--
dl:自定义列表
dt:列表标题
dd:列表内容
-->
<dl>
    <dt>科目</dt>
    <dd>数学</dd>
    <dd>语文</dd>
    <dd>英语</dd>
</dl>

5.表格标签

colspan:跨列（多列合并成一列）
rowspan:跨行；

6.媒体元素

<!--
     音频: audio;
     视频：video;
     src:资源路径；
     controls；控制条；
     autoplay:自动播放；  
 -->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>

7.内联框架

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

8.表单post和get提交

<!--
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get,提交方式
get方式提交：可以在url中看到我们提交的数据，不安全，高效
post提交方式：比较安全，传输大文件
-->
<form action="1.我的第一个HTML.html" method="get">
    <p>姓名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit" value="提交">//value不写也可以，有默认值
        <input type="reset">
    </p>

9.文件域

<!-- name=""file这个不能少   -->
    <p>
        <input type="file" name=""file>
    </p>

10.简单验证和搜索滑块

<!--    邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>
<!--   URL -->
    <p>url:
        <input type="url" name="url">
    </p>
<!--  数字验证-->
    <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="2">
    </p>

<!--    滑块-->
    <p>音量:
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
<!--    搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>

11.表单的应用

只读：readonly;

禁用:disabled;

隐藏：hidden;

<!--增强鼠标的可用性
你点了就会定位到相应的输入框
for后的可以随意填
-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

12.表单初级验证

<!--    placeholder:框框提示信息
        required:非空判断；
        pattern：正则表达式：
-->
    <p>姓名：<input type="text" name="username" placeholder="请输入姓名" required pattern=""></p>

12.表单初级验证

<!--    placeholder:框框提示信息
        required:非空判断；
        pattern：正则表达式：
-->
    <p>姓名：<input type="text" name="username" placeholder="请输入姓名" required pattern=""></p>