前端：HTML学习笔记

最新推荐文章于 2024-01-12 13:53:31 发布
最新推荐文章于 2024-01-12 13:53:31 发布
阅读量997 收藏 1
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45658089/article/details/122810021
版权

HTML学习笔记

学习链接：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

HTML的博客笔记链接：https://blog.csdn.net/yalu_123456/article/details/91460792

初识HTML

什么是HTML

超文本标记语言 ( Hyper Text Markup Language )

超文本 : 文字 , 图片 , 音频 , 视频 , 动画 ,…

image-20211229101510440

发展历史：

  • -HTML2.0 --> 文字 , 特别丑的文本框

  • HTML 5 ---- > 动画 , 渲染…

HTML的优势：

  • 所有的浏览器都支持

  • 市场的需求—从C/S—>b/s架构

  • 跨平台

W3C标准：

image-20211229101718079

万维网联盟( World Wide Web Consortium )

三个标准

结构化=标准—>HTML , xml等

表现=标准—>CSS

行为=标准 —> ( ECMA Script )

网页编辑工具：

  • 记事本
  • Notpat++
  • Hbuilder
  • IDEA
  • WebStorm 【前端设计者使用的这个】
  • VScode

关于浏览器的选择： setting 中的 Tools 中的 Web Browsers.

image-20220207154054237

HTML的基本结构

成对出现的开放标签，单个的自闭和标签。

image-20211229102005522

Html注释 :

<!-- 注释 --> 这是注释的符号

Html的基本结构 :

<!-- 注释的符号-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

对应的结构信息是：

<!--DOCTYPE声明 : 告诉浏览器使用什么规范-->
<!DOCTYPE html>

<html lang="en">
    
<!--标签是成对出现-->
<!--head头部标签-->
<head>
    <meta charset="UTF-8">
  <!--网页标题-->
  <title>狂神说Java</title>
</head>

<!--网页主体-->
<body>
Hello,World!
</body>

</html>
  • < title > 标签 : 网页的标题
  • < meta > 标签 : 关键字标签。meta标签是描述性标签， 描述网站的一些基本信息。 一般用来做 SEO 的
<!--网页编码-->
<meta charset="UTF-8">
gb2312 ----> 包含全部的中文字符
utf-8 ---->包含了全世界所有地方的文字和符号

<!--搜索关键字-->
<meta name="keywords" content="狂神,Java,Python,linux,大数据">

<!--网页的描述-->
<meta name="description" content="狂神有点cool!">

网页的基本标签

标题标签: h1

<!--标题标签-->
<!--H1最大 , H6最小-->

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

段落标签: p

<!--段落标签-->
<!--p:表示段落标签-->

<h1>段落标签</h1>
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>

换行标签: br

换行标签是
与段落标签 p 的区别在于， br 的显示效果的间隙比较小。

<!--换行标签-->

<!--br:单标签-->

<h1>换行标签</h1>

两只老虎  两只老虎<br/>

跑得快    跑得快<br/>

一只没有耳朵   一只没有尾巴<br/>

真奇怪   真奇怪<br/>

两只老虎   两只老虎<br/>

跑得快    跑得快<br/>

一只没有耳朵  一只没有尾巴<br/>

真奇怪   真奇怪<br/>

显示的结果：

image-20211229104108311

水平线标签: hr

<!--水平线标签-->
<!--hr表示水平线标签-->

<h1>水平线标签</h1>

<hr/>

两只老虎  两只老虎<br/>
跑得快    跑得快<br/>
一只没有耳朵   一只没有尾巴<br/>
真奇怪   真奇怪<br/>
两只老虎   两只老虎<br/>
跑得快    跑得快<br/>
一只没有耳朵  一只没有尾巴<br/>
真奇怪   真奇怪<br/>

字体标签

<!--字体加粗 , 斜体--><!--strong : 粗体--><!--em : 斜体--><h1>字体字体样式</h1>I love you加粗后 : <strong>I love you</strong>斜体 : <em>I love you</em>

特殊符号: &**;

<!--特殊符号--><h1>特殊符号</h1><p>大于号 : &gt; </p><p>小于号 : &lt; </p><p>空格 :   你                好 | 你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好</p><p>引号 : &quot;&quot;</p><p>版权符号 : &copy; 版权所有狂神</p><!--& + 符号字符 + 分号结束-->

图像标签:img

图像标签

image-20211229105432638

常见的图像格式 :jpg/png/bmp /位图/gif

<!--图像标签--><!--src = 图片的路径 (必填)title = 鼠标悬停显示alt = 图片的名字width =宽height 高-->

alt = “text” 图片的替代名字，当图片无法显示的时候(或者不存在) 就会使用这个 alt 中的内容 去 替代表示想要显示的 图片。

<!--相对路径：   上一级路径表示方式  ../绝对路径 ： 不推荐使用-->

代码形式如下所示：

<img src="../resources/images/tx.jpg" title="鼠标悬停说:狂神cool" alt="狂神头像" width="300px" height="300px">

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图像标签学习</title></head><body><!--图像标签--><!--src = 图片的路径 (必填), 推荐使用相对地址title = 鼠标悬停显示alt = 图片的名字[代替图片出现的名字 显示信息]width =宽height 高--><img src="../resource/figure/朴信惠.jpg" alt="朴信惠图片" name="img1"></body></html>

当修改成 下面的代码时，显示结果为：

<img src="../resource/figure/朴信惠1.jpg" alt="朴信惠图片" name="img1">

image-20211229110607094

这个就是 alt=“text" 的作用。

链接标签: a

image-20211229111732289

超链接

<!--a:表示超链接--><!-- href : 表示连接的地址 : 必填--><a href="https://www.baidu.com">点击跳转</a><!--图像链接--><a href="https://www.baidu.com"> <img src="../resources/images/tx.jpg"> </a>

锚链接

<!--锚链接--><!--可以从一个地方跳到锚指定的地方需要的东西: 标记  ..跳转--><!--创建一个标记--><a name="mark">锚链接标记</a><!--跳转到标记--><a href="#mark">点击跳转</a><a href="demo.html#top3">跳转到demo页标记三

使用name进行标记，然后在超链接中使用 #标记 来实现跳转到 name标记的地方。

  1. 需要一个锚标记
  2. 跳转到标记 #
demo01： 直接回到页面顶部的 锚链接
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>链接标签学习</title></head><body><!--使用name作为标记--><a name="top">顶部</a><!--a:表示超链接--><!--href : 表示连接的地址 : 必填target: 表示窗口在哪里打开    _blank 是在新标签中打开    _self 在自己的网页中打开--><a href="https://www.baidu.com" target="_blank">点击跳转到百度</a><a href="1.我的第一个网页.html">点击我跳转到第一个页面</a><a href="2.基本标签.html">点击我跳转到第二个页面</a><a href="3.图像标签.html">点击我跳转到第三个页面</a><br/><!--图像链接--><a href="https://www.baidu.com"> <img src="../resource/figure/朴信惠.jpg"> </a><br><a href="#top">回到顶部</a></body></html>
demo02： 跳转到另一个页面当中的锚链接

4.链接标签.html 的代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>链接标签学习</title></head><body><!--使用name作为标记--><a name="top">顶部</a><!--a:表示超链接--><!--href : 表示连接的地址 : 必填target: 表示窗口在哪里打开    _blank 是在新标签中打开    _self 在自己的网页中打开--><a href="https://www.baidu.com" target="_blank">点击跳转到百度</a><a href="1.我的第一个网页.html">点击我跳转到第一个页面</a><a href="2.基本标签.html">点击我跳转到第二个页面</a><a href="3.图像标签.html">点击我跳转到第三个页面</a><br/><!--图像链接--><a href="https://www.baidu.com"> <img src="../resource/figure/朴信惠.jpg"> </a><br><!--当前页面的跳转--><a href="#top">回到顶部</a><a name="down">底部</a></body></html>

4.1.锚链接标签.html 的代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>锚链接标签学习</title></head><body><!--在4.链接标签.html 中定义锚标记 down，即 <a name="down">底部</a>跳转到标记    #--><a href="4.链接标签.html#down" target="_blank">点击跳转到4.链接标签.html页面的底部</a></body></html>

功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能性链接</title>
</head>
<body>
<!--功能性链接 -->

<a href="mailto:1356207897@qq.com">发送邮件</a>

<!--QQ点击联系
地址 : https://shang.qq.com/v3/widget.html
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1356207897:53" alt="点击加我，免费领取好礼" title="点击加我，免费领取好礼"/>
</a>

<!--
target
target 目标跳转的网页打开方式
_blank : 打开新的网页
_self : 在本网页打开
-->
<p>
    <a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
    <a href="1.我的第一个网页.html" target="_self">点击我跳转到第一个页面</a>
</p>
</body>
</html>

行内元素和块元素

image-20211229162025000

独占一行的标签 : 块标签

  • p
  • h1~h6

只有自己那一部分 , 可以在行内定义多个的标签 : 行内标签

  • a： a表示超链接，

    • <a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>

  • strong：粗体

  • img：图片

  • em

开放标签—>闭合标签

<p>  </p> <p>  </p> <p>  </p> <p>  </p>自闭合标签<br/>

例子：

<h1>字体字体样式</h1>I love you加粗后 : <strong>I love you</strong>斜体 : <em>I love you </em>

image-20211229163239123

可以看到

  • 行内元素/行标签中的元素 就是在同一行

    I love you加粗后 : <strong>I love you</strong>

  • 块级元素 是单独的一行

     <h1>字体字体样式</h1>

列表:ol/ul li

无序列表：导航，侧边栏

有序列表：试卷，问答，…

<!--无序列表--><!--<ul> -> 无序列表<li> -> 选项--><h1>无序列表</h1><ul>  <li>java</li>  <li>C/C++</li>  <li>Linux</li>  <li>Python</li></ul><hr><!--有序列表--><!--<ol> -> 有序列表<li> -> 选项--><h1>有序列表</h1><ol>  <li>java</li>  <li>C/C++</li>  <li>Linux</li>  <li>Python</li></ol><!--自定义列表--><!--<dl> -> 自定义列表<dt> -> 列表标题<dd> -> 列表选项--><h1>自定义列表</h1><dl>  <dt>Java</dt>  <dd>OOP</dd>  <dd>Annotation</dd>  <dd>Reflection</dd>  <dt>Python</dt>  <dd>数据分析</dd  <dd>数据挖掘</dd>  <dd>...</dd></dl>

表格

为什么使用表格 ?

  • 简单通用
  • 结构稳定
  • 表格结构

基本结构：

  1. 单元格
  2. 行
  3. 列

HTML表格的创建：

<!--表格 table--><!--table : 表格tr : 行 table rowstd : 列 --><table border=1px>  <tr>      <!--colspan=跨列-->      <td colspan="3">1-1</td>      <td>1-2</td>      <td>1-3</td>    </tr>  <tr>      <!--colspan=跨行-->      <td rowspan="3">2-1</td>      <td>2-2</td>      <td>2-3</td>      <td>2-4</td>      <td>2-5</td>  </tr>  <tr>      <td>3-1</td>      <td>3-2</td>      <td>3-3</td>      <td>3-4</td>    </tr>  <tr>      <td>4-1</td>      <td>4-2</td>      <td>4-3</td>      <td>4-4</td>  </tr></table>

视频/音频

思考 : 如何在网页上播放视频和音频 ?

结论 : 应该有一个标签控制音频或者视频 .

video , audio

<!--播放视频--><!--前端要考虑问题 : 浏览器兼容性--><!--video标签src -> 视频路径 (必填)controls -> 给视频增加控制播放的按钮autoplay -> 自动播放视频w-h -> 视频窗口大小--><video src="../resource/video/20211124-10-23.mp4" controls width="1280px" height="720px" autoplay></video><!--音频标签--><!--src -> 音频路径controls -> 给音频增加控制播放的按钮autoplay -> 自动播放视频....--><audio src="../resources/video/Human%20Legacy%20-%20Ivan%20Torrent.mp3" controls autoplay></audio>

网页结构分析

页面结构分析：

image-20211229193848199

  • 头部：header
  • 导航
  • 主题内容
  • 底部
<header> 头部 </header><footer> 尾部 </footer><nav> 导航 </nav><article> 放文章 </article><code> 代码 </code><section>独立区域</section>

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>页面结构分析</title></head><body><header> <h2>网页头部</h2></header><section><h2>网页主体</h2></section><footer> <h2>网页底部</h2></footer></body></html>

内联框架

内联框架

iframe 内联框架

image-20211229195037742

  • src:地址
  • w-h: 宽度高度
  • name： 框架标识名
<!--iframe内联框架src:地址w-h: 宽度高度--><!--作用:在一个网页中嵌入另外一个网页--><!--<iframe src="https://www.bilibili.com/video/BV1x4411V75C?p=8" frameborder="0" width="960" height="540"></iframe>--><!--在网页中实现容器的效果,实现页面内容加载--><iframe name="markup" src="" frameborder="0"></iframe><a href="https://www.baidu.com" target="markup">test</a><a href="2.HTML的标签.html" target="markup">test</a><a href="3.图像标签.html" target="markup">test</a><a href="4.超链接.html" target="markup">test</a><iframe src="//player.bilibili.com/player.html?aid=54171171&cid=95552484&page=17"        scrolling="no"        border="0"        frameborder="no"        framespacing="0"        allowfullscreen="true"></iframe>

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>内联框架</title></head><body><!--iframe内联框架src:地址w-h: 宽度高度--><!--作用:在一个网页中嵌入另外一个网页--><!--<iframe src="https://www.bilibili.com/video/BV1x4411V75C?p=8" frameborder="0" width="960" height="540"></iframe>-->    <iframe src="" name="hello" frameborder="0" width="800px" height="600px"></iframe><a href="3.图像标签.html" target="hello">点击跳转</a>    </body></html>

表单元素

表单语法：

image-20211229195757670

什么叫表单 ?

登录 , 注册 …

常见表单元素

  • 文本框 密码框 按钮 单选框 多选框 文本域 下拉框 文件域

form 表单元素：

  • action : 提交地址
  • method : 提交方式 : post/get
    • post : 安全 效率低 能提交无限大的文件
    • get : 不安全 效率高 一次请求的文件量特别小 .
    • 温馨提示 : 网页中一般使用post方式提交

demo01 代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>登录注册</title></head><body><h1>注册</h1><!--form为表单元素--><!--action : 提交地址method : 提交方式 : post/get       post : 安全  效率低 能提交无限大的文件       get : 不安全 效率高 一次请求的文件量特别小 .       温馨提示 : 网页中一般使用post方式提交--><form action="1.我的第一个网页.html" method="get">    <!--文本框 : input type=text-->    <p>用户名 : <input type="text" name="username"> </p>    <!--密码框 : input type=password -->    <p>密码  : <input type="password" name="password"> </p>    <p>        <input type="submit">        <input type="reset">    </p></form></body></html>

表单元素格式：

image-20211229202613950

文本框与单选框

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>登录注册</title></head><body><h1>注册</h1><!--form为表单元素--><!--action : 提交地址method : 提交方式 : post/get       post : 安全  效率低 能提交无限大的文件       get : 不安全 效率高 一次请求的文件量特别小 .       温馨提示 : 网页中一般使用post方式提交--><form action="1.我的第一个网页.html" method="get">    <!--文本框 : input type=text    value="alzn"  默认初始值    size="5"    文本框的长度    maxlength="5"  最长能写几个字符    -->    <p>用户名 : <input type="text" name="username"> </p>    <!--密码框 : input type=password -->    <p>密码  : <input type="password" name="password"> </p>    <!--  单选框标签    input type="radio"    value   单选框的值    name : 表示组    -->    <p>性别：        <input type="radio" value="man" name="sex"> 男        <input type="radio" value="woman" name="sex">女    </p>    <p>        <input type="submit">        <input type="reset">    </p>     </form></body></html>

按钮与多选框

    <!-- checkbox多选框-->
    <p>爱好：
        <!--注意事项:
        1. 若是要提交 , 则必须要有 name 和value属性
        k=v&k=v&k=v&k=v&k=v&k=v
        2. name就是key 提交的键 , vlaue就是提交的信息
        -->
    <input type="checkbox" value="movie" name="hobby"/>看电影
    <input type="checkbox" value="music" name="hobby"/>听歌
    <input type="checkbox" value="road" name="hobby"/>压马路
    <input type="checkbox" value="code" name="hobby"/>敲代码
</p>

    <!-- 按钮
    input type="button"  普通按钮
    input type="image"  图片按钮
    input type="submit"  提交按钮
    input type="reset"  重置
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击边长">
        <input type="image" src="../resource/figure/朴信惠.jpg">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

列表框、文本框、文件域

    <!--下拉框， 列表框-->
    <!--selected 选中-->
    <p>国家:
        <select name="国家">
            <option value="美国">美国</option>
            <option value="中国" selected>中国</option>
            <option value="印度">印度</option>
        </select>
    </p>

    <!--文本域
    多行的文本框 cols="50" rows="10"  50行，10列
-->
    <p> 反馈：
    <textarea name="textarea" cols="50" rows="10">
            文本内容
        </textarea>
    </p>

    <p>
    <!--文件域-->
        <input type="file" name="files">
    </p>

搜索框滑块和简单验证

简单验证和滑块：

    <!-- 邮箱验证-->    <p>邮箱：        <input type="email" name="eamil">    </p>    <!-- URL-->    <p>URL:        <input type="url" name="url">    </p>    <!-- 数字验证-->    <!-- 数字验证：购买商品的数量，最小是0，最大是100，每次可以增加10个，即步长为10-->    <p>商品数量：        <input type="number" name="num" max="100" min="0" step="10">    </p>    <!-- 滑块    input type="range"    -->    <!-- 例如调节音量的滑块，同样可以设置最小值为0，最大100， 步长为2 即每次调节音量加2-->    <p>音量：        <input type="range" name="voice" max="100" min="0" step="2">    </p>    <!-- 搜索-->    <!-- 搜索框输入 数据，获取后，你可以自己去数据库里面寻找。其实名字文本框也是可以的-->    <p>搜索：        <input type="search" name="search">    </p>

邮箱 网址 数字 滑块 搜索框。整体的一个例子：

<!--form为表单元素--><!--action : 提交地址method : 提交方式 : post/get--><h1>注册</h1><!--input属性:type=类型name: 名字 , 可以重复id: 不能重复,保证全代码唯一disabled: 禁用文本框--><!-- post : 安全  效率低 能提交无限大的文件get : 不安全 效率高 一次请求的文件量特别小 .温馨提示 : 网页中一般使用post方式提交--><form action="1.第一网页.html" method="get">    <!--文本框 : input type=text-->    <p>用户名 : <input type="text" name="username"> </p>        <!--密码框 : input type=password -->    <p>密码 : <input type="password" name="password"> </p>    <p>确认密码 : <input type="password" name="password"> </p>        <p>        <!--文件域-->        <input type="file">    </p>    <p>        <!--radio单选框-->        <!--name:绑定同一个组-->        <!--checked 默认选中-->        <!--注意事项:1. 若是要提交 , 则必须要有 name 和value属性 k=v&k=v&k=v&k=v&k=v&k=v2. name就是key 提交的键 , vlaue就是提交的信息 -->        性别        <input type="radio" value="boy" name="group1">男        <input type="radio" value="girl" name="group1">女        <input type="radio" value="!boygirl" name="group1">人妖    </p>    <p>        <!--注意事项:1. 若是要提交 , 则必须要有 name 和value属性k=v&k=v&k=v&k=v&k=v&k=v2. name就是key 提交的键 , vlaue就是提交的信息-->        爱好        <!-- checkbox多选框-->        <input type="checkbox" value="movie" name="hobby"/>看电影        <input type="checkbox" value="music" name="hobby"/>听歌        <input type="checkbox" value="road" name="hobby"/>压马路        <input type="checkbox" value="code" name="hobby"/>敲代码  </p>  <hr/>  <!--下拉框-->  <!--selected 选中-->    <select name="列表名称">        <option value="选择的值1">一</option>        <option value="选择的值2">二</option>        <option value="选择的值3" selected>三</option>    </select>        <select name="国家">        <option value="美国">美国</option>        <option value="中国" selected>中国</option>        <option value="印度">印度</option>    </select>        <select name="中国">        <option value="西安">西安</option>        <option value="重庆">重庆</option>        <option value="新疆" selected>新疆</option>    </select>        <p>        <!--按钮-->        <input type="button" value="我的第一个button按钮">        <!--图片按钮-->        <!--<input type="image" src="../resources/images/tx.jpg">-->    </p>    <p>        <!--文本域多行的文本框-->        <textarea name="textarea" cols="20" rows="10">            文本内容        </textarea>    </p>        <hr/>    <!--邮箱表单简单验证-->    邮箱 : <input type="email" name="email"/> <br/>    <!--url简单验证-->    url : <input type="url" name="url"> <br/>    <!--数字的简单验证-->    数字 : <input type="number"> <br/>    <!--滑块,值得范围0~100-->    滑块 : <input type="range" name="range" value="30">        <!--搜索框-->    搜索框 : <input type="search" name="search">  <!--提交按钮 : input type=submit-->  <!--重填按钮 : type="reset"-->  <!--  提交会产生事件 , 会将表单的内容提交到action请求的地址 ,方法为method指定的方法  submit默认文字是提交 , 手动给按钮赋值使用 value  -->        <p>        <input type="submit">        <input type="reset">  </p></form>

表单其他应用

隐藏域 , 只读 , 禁用

  • hidden : 隐藏域
  • readonly : 只读
  • disabled : 禁用

demo：

  • 只读： raedonly

    <p>用户名 : <input type="text" name="username" value="alzn" readonly> </p>

    对于这个只读 readonly ，value值是alzn，即默认的就是这个值，且只读，不能被修改。

    image-20220103160835895

  • 禁用：disabled

        <p>性别：
<!--        <input type="radio" value="man" name="sex"> 男-->
        <!-- disabled  禁用的作用-->
        <input type="radio" value="man" name="sex" disabled> 男
        <input type="radio" value="woman" name="sex">女
    </p>

    在这个情况下，性别只能选 女， 男的被禁用 无法选择

    image-20220103161238441

  • 隐藏域：hidden

        <!--  hidden 隐藏域作用，不会显示。 也可以再设置 value=123456，设置默认的密码-->
    <p>密码  : <input type="password" name="password" hidden value="123456"> </p>

    这个时候，密码框看不见，但是提交的时候会有默认值，且为 123456

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBaASkyv-1644220189427)(F:%5C%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%5CHTML%5CHTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%5Cimage-20220103161638159.png)]

    image-20220103161628261

增强鼠标可用性

在前面的 ”用户名“ 文字被点击时，没有任何的意义。可以使用 label标签和 id 去增强鼠标可用性，在点击文字的时候可以锁定对应的 表单框。

demo-01：在点击”点击我一下试试啊“ 这个文本的时候，会直接锁定后面的这个表单框

    <!-- label 增强鼠标可用性-->
    <!-- 前面的点击用户名文字是没有反应的， 可以采用 label 标签和 id 去锁定指定的表单-->
    <p>
        <label for="mark">点击我一下试试啊</label>
        <input type="text" id="mark">
    </p>

结果如下所示：

image-20220103162510335

而在没有添加这个label 标签之前的结果是：

image-20220103162613751

点击这个文本，没有反应。

demo-02：也可以把这个id的位置放到 搜索框，其它的想要对应的位置。

    <!-- 搜索-->
    <!-- 搜索框输入 数据，获取后，你可以自己去数据库里面寻找。其实名字文本框也是可以的-->
    <p>搜索：
        <input type="search" name="search" id="mark">
    </p>

    <!-- label 增强鼠标可用性-->
    <!-- 前面的点击用户名文字是没有反应的， 可以采用 label 标签和 id 去锁定指定的表单-->
    <p>
        <label for="mark">点击我一下试试啊</label>
        <input type="text" >
    </p>

结果如下所示：

image-20220103162731014

AL ZN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html 前端 学习笔记整合
华夏天骄
04-26 143
HTML简介 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面 HTML实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
前端HTML笔记
qq_45577911的博客
02-05 114
WEB前端HTML笔记
weixin_39972720的博客
06-04 235
黑马前端36期笔记HTML篇作者：黑马程序员：www.itheima.com老师：刘晓强开发工具浏览器浏览器内核渲染引擎JS 引擎浏览器内核WEB标准WEB标准的好处Web 标准构成结构标准表现标准行为标准HTML初识HTML骨架HTML标签:根标签head标签: 文档的头部title标签： 文档的标题body标签：文档的主体标签分类双标签单标签HTML标签关系嵌套关系并列关系sublime（书写）文档类型字符集HTML标签的语义化为什么要有语义化标签HTML常用标签排版标签标题标签段落标签水平线标签换行标
前端1——html笔记
JCL的博客
06-17 1234
HTML笔记（基于黑马前端）
前端入门 HTML笔记（一）
一只蒻蒻的博客
03-05 172
一、HTML简介 目标： Q1:什么是网页？ 网站是网页的集合，网页是网站中的一“页“，网页是构成网站的基本元素，通常由图片、链接、文件等元素组成。网页俗称HTML文件。 Q2:什么是HTML？ HTML为超文本标记语言(主要是各种各样的标签)，不是一种编程语言。 专门用来制作网页的。 超文本： 可以放图片、声音、动画、多媒体等。（超越文本限制） 可从一个文件跳转到另一个文件。（超级链接文本） ...
前端三件套html学习笔记
最新发布
02-24
本人html学习笔记，方便遗忘后查找
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
《Html》前端学习笔记
04-12
HTML，全称HyperText Markup Language，即超文本标记语言，是构建网页内容的基础。它是一种标记语言，通过一系列预定义的标签来描述网页的结构和内容。...不断学习和实践，才能成为一名熟练的前端开发者。
前端的学习笔记HTML+css.zip
01-05
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
尚硅谷前端HTML+CSS学习笔记
07-15
尚硅谷前端HTML+CSS学习笔记 1. 计算机基础知识：计算机俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算、逻辑计算，还具有存储记忆功能。计算机由硬件和软件组成，硬件是看得见摸得着的物理...
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 ...
notes:前端开发学习笔记
03-31
这个“前端开发学习笔记”很可能是对HTML的学习记录，包含了深入理解和实践HTML的各种要点。让我们一起探索HTML的重要概念、语法以及在实际应用中的技巧。 HTML的基本结构由元素（Element）组成，每个元素通过标签...
web前端HTML5学习笔记
09-07
前端笔记HTML5部分
前端html学习笔记
a_big_panda的博客
01-12 1392
dl：表示自定义列表的整体，用于包裹dt/dd标签dt：表示自定义列表的主题dd：表示自定义列表的针对主题的每一项内容例如：dd前会默认显示缩进效果dl标签中只允许包含dt/dd标签dt/dd标签可以包含任意内容。
前端笔记大全——HTML
qq_34820605的博客
12-01 432
HTML笔记大全 HTML基础知识 HTML常用标签
前端学习笔记(HTML)
Orangeric
03-10 168
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;!-- HTML中的文件由标签构成 这是声明标签，用于声明文件的类型 --&amp;gt; &amp;lt;!-- 1、HTML的基本结构 一个HTML文件由一系列标签元素构成，标签可以分为两种： 单标签：&amp;lt;标签名 属性1=&quot;值1&quot; 属性2=&quot;值2&quot; 。。。 /&amp;gt;
前端开发——HTML的知识（笔记）
qq_64552181的博客
03-27 316
HTML的简介、结构、语句；超链接、图片、有序/无序列表/定义列表、表格、内联框架、 表单
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值