前端：HTML学习笔记

最新推荐文章于 2024-01-12 13:53:31 发布
最新推荐文章于 2024-01-12 13:53:31 发布
阅读量995 收藏 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 142
HTML简介 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面 HTML实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt
前端HTML笔记
qq_45577911的博客
02-05 113
WEB前端HTML笔记
weixin_39972720的博客
06-04 232
黑马前端36期笔记HTML篇作者：黑马程序员：www.itheima.com老师：刘晓强开发工具浏览器浏览器内核渲染引擎JS 引擎浏览器内核WEB标准WEB标准的好处Web 标准构成结构标准表现标准行为标准HTML初识HTML骨架HTML标签:根标签head标签: 文档的头部title标签： 文档的标题body标签：文档的主体标签分类双标签单标签HTML标签关系嵌套关系并列关系sublime（书写）文档类型字符集HTML标签的语义化为什么要有语义化标签HTML常用标签排版标签标题标签段落标签水平线标签换行标
前端1——html笔记
JCL的博客
06-17 1228
HTML笔记（基于黑马前端）
前端入门 HTML笔记（一）
一只蒻蒻的博客
03-05 170
一、HTML简介 目标： Q1:什么是网页？ 网站是网页的集合，网页是网站中的一“页“，网页是构成网站的基本元素，通常由图片、链接、文件等元素组成。网页俗称HTML文件。 Q2:什么是HTML？ HTML为超文本标记语言(主要是各种各样的标签)，不是一种编程语言。 专门用来制作网页的。 超文本： 可以放图片、声音、动画、多媒体等。（超越文本限制） 可从一个文件跳转到另一个文件。（超级链接文本） ...
javaweb 前端 html学习笔记
04-26
javaweb 前端 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+css.zip
01-05
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
《Html》前端学习笔记
04-12
HTML 是什么 超文本标记语言，一个网页在不同的地方使用不同的标签去标记 一个网页的组成：HTML+CSS+JavaScript（JS、JQuery） HTML：结构；网页显示什么内容由 HTML 来决定 CSS ：层叠样式；决定这个网页好不好看...
前端html学习笔记
a_big_panda的博客
01-12 1377
dl：表示自定义列表的整体，用于包裹dt/dd标签dt：表示自定义列表的主题dd：表示自定义列表的针对主题的每一项内容例如：dd前会默认显示缩进效果dl标签中只允许包含dt/dd标签dt/dd标签可以包含任意内容。
前端笔记大全——HTML
qq_34820605的博客
12-01 427
HTML笔记大全 HTML基础知识 HTML常用标签
前端学习笔记(HTML)
Orangeric
03-10 167
&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的简介、结构、语句；超链接、图片、有序/无序列表/定义列表、表格、内联框架、 表单
前端基础知识点笔记（HTML）
m0_46493177的博客
10-23 175
HTML(Hypertext Markup Language) 即超文本标记语言； HTML特点： 1、HTML不需要编译，直接由浏览器执行； 2、HTML文本是一个文本文件； 3、HTML文件必须使用html或htm为文件名后缀； 4、HTML大小写不敏感，HTML与html一样。 HTML基本结构 HTML文件：… 头部信息：… 网页内容：… HTML标签：<标签名> </标签名> 例如：… 规范： 1、<和>括起来； 2、一般成对出现，分开始标签和结束标签结束标签比
前端技术（HTML）学习笔记（一）HTML详解
dl0246的博客
09-03 435
前端技术（HTML）学习笔记（一）HTML入门 一、web前端技术 与客户端进行交互的一些技术 比如页面的开发（html，css，javascript） 1、前置的知识 ①、http:http协议 面向无连接、无状态、基于请求和应答模式的应用层协议 ②、URL&amp;UR...
【学习笔记】前端学习笔记 HTML+CSS+JavaScript+JQuery
秋叶红于二月花
11-15 1098
啊啊啊我一定要成为算法工程师！ CSS 简介 CSS是指Cascading Style Sheets（层叠样式表），有三种方式指定样式：外部样式表，内部样式表，内联样式，越往内的层越有优先权。 css语法：selector1,selector2 {property1: value; property2: value...}，如果value是多个单词，要加双引号。通配符选择器以*定义，会选中所有的...
html 自动计算,使用JavaScript实现Input输入数据后自动计算并实时显示
weixin_35504293的博客
05-30 774
代码实现：无标题function sum(obj) {var z = document.getElementById("z");var a = document.getElementById("a");var b = document.getElementById("b");var c = document.getElementById("c");all.value=parseInt(z.valu...
html 显示搜索结果,搜索结果高亮显示(不改变html标签)
weixin_31702225的博客
06-04 777
一、问题的产生 搜索结果高亮显示，在新闻标题，来源之类的地方好做，只需要用str.Replace(keyword,"font style=/"color:red;/"" + keyword +"/font");这样的方法就可实现。 例如：新闻内容里的图片img alt="" src="Upload/1.jpg" /，搜索时使用的关键字为oa一、问题的产生搜索结果高亮显示，在新闻标题，来源之类的地方...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值