HTML (总结黑马的)

news/2024/9/22 18:06:04/
htmledit_views">

<br>换行
<hr>水平线
div  独占一行
span 不换行
header  网页头部
nav     网页导航
footer  网页底部
aside   网页侧边栏
section 网页区块
article 网页文章
&nbsp;  空格
&lt;    小于号
&gt;    大于号

图片:
<img src="./cat.jpg" alt="替换文本" title="提示文本">            替换文本是图片没有显示的时候显示对应的文字;提示文本是鼠标悬停上面的时候显示的文字


超链接:
<a href="https://www.baidu.com">跳转到百度</a>
href  超链接的跳转地址
      #  开发初期不确定跳转地址,#表示空链接,页面不会跳转,在当前页面刷新一次
target="_blank" 实现在新窗口打开页面


音频:
<audio src="音频的 URL"></audio>  支持这三种格式:MP3、ogg、wav
    controls  显示音频播放面板
    loop      循环播放
    autoplay  自动播放(为提升用户体验,浏览器一般会禁用自动播放功能)


视频:
<video src="视频的 URL"></video>   支持格式:MP4、Ogg、WebM
    controls  显示音频播放面板
    loop      循环播放
    muted       静音播放
    autoplay  自动播放(为提升用户体验,浏览器支持在静音状态下自动播放)


列表:(有三种)
无序列表:                ul 申明是无序列表  li:写列表条目 (最总效果类似于微博热搜的展示)
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li> ……
</ul>
有序列表:                标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。  类似于word的缩进
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li> ……
</ol>
定义列表:                标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情    类似于苹果官网最下面的那个效果
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd> ……
</dl>


表格:            标签:table 嵌套 tr,tr 嵌套 td / th
    table   表格
    tr         行
    th        表头单元格
    td        内容单元格
    提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

    表格结构标签:
    thead  表头内部  表格头部内容
    tbody  表头主体    主要内容区域
    tfood  表格底部  汇总信息区域

    合并单元格:
    rowspan  跨行合并 保留最上面的单元格
    colspan  跨列合并 保留最做的单元格 


表单:
<input type="..." >
<input type="..." placeholder="提示信息">
    placeHoder 占位文本

    text 文本框,用于输入单行文本
    password  密码框
    radio  单选框
        name  控件名称  (控件分组,同组中只能选中一个(单选功能))
        checked  默认选中  属性名和属性值相同时,简写为一个单词
    checkbox  多选框
        checked  默认选中
    file    上传文件
        multiple  上传文件时实现多选
<input type="file" multiple>        默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女


下拉菜单:       标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。   默认显示第一项,selected 属性实现默认选中功能
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>


文本域:
<textarea>默认提示文字</textarea>
• 实际开发中,使用 CSS 设置 文本域的尺寸
• 实际开发中,一般禁用右下角的拖拽功能


lable标签:
写法一:
<input type="radio" id="man">
<label for="man">男</label>
写法二:
<label><input type="radio"> 女</label>


按钮:
<button type="">按钮</button>
    submit  提交按钮,点击之后提交数据到后台
    reset   重置按钮,点击后表单控件恢复默认值
    button  普通按钮,默认没有功能,一般配合JS使用


拓展:属性名和属性值相同时,可以简写为一个单词


http://www.ppmy.cn/news/1467392.html

相关文章

【面试】JDK和JVM是什么关系?

目录 1. JDK2. JVM3. 关系 1. JDK 1.Java Development Kit&#xff0c;java开发工具包。2.提供了java应用程序开发所需的所有工具和API。3.JDK包含了JRE&#xff08;Java Runtime Environment&#xff09;,即Java运行环境&#xff0c;以及编译Java源代码的编译器&#xff08;j…

排序(前篇)

1.排序的概念及其运用 2.插入排序的概念及实现 3.希尔排序的概念及实现 4.选择排序概念及实现 总代码&#xff08;对比各个排序在大量的数据情况排序所化的时间&#xff09;&#xff1a; 1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使…

测试记录3:WLS2运行Linux界面

1.WLS1转到WLS2 &#xff08;1&#xff09;根据自己的平台&#xff0c;下载WLS2安装包 x64: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi arm64: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_arm64.msi &#xff08;2&…

Apache Calcite - 使用内置函数

前言 在上一篇文章中学习了如何适配来源数据&#xff0c;并使用sql查询数据。当我们获取数据后&#xff0c;通常还会进行各种计算、变换工作&#xff0c;这时使用内置函数可以极大提高我们的效率。 函数介绍 Apache Calcite 提供了广泛的 SQL 函数支持&#xff0c;包括但不限…

C++面试题其三

继续解答常见的C面试题 继续上篇博客的解答&#xff0c;我们将进一步探讨C中的一些关键概念和常见面试问题。 29. typedef和define的区别 typedef&#xff1a;用于为现有类型定义一个新的名字。typedef是编译时的操作&#xff0c;它提供了类型别名&#xff0c;可以提高代码可…

Java基础27,28(多线程,ThreadMethod ,线程安全问题,线程状态,线程池)

目录 一、多线程 1. 概述 2. 进程与线程 2.1 程序 2.2 进程 2.3 线程 2.4 进程与线程的区别 3. 线程基本概念 4.并发与并行 5. 线程的创建方式 方式一&#xff1a;继承Thread类 方式二&#xff1a;实现Runable接口 方式三&#xff1a;实现Callable接口 方式四&…

微信小程序-页面导航-导航传参

1.声明式导航传参 navigator组件的url属性用来指定将要跳转到的页面的路径&#xff0c;同时&#xff0c;路径的后面还可以携带参数&#xff1a; &#xff08;1&#xff09;参数与路径之间使用 ? 分割 &#xff08;2&#xff09;参数键与参数值用 相连 &#xff08;3&…

Spring Security 注册过滤器关键点与最佳实践

在 Spring Security 框架中&#xff0c;注册过滤器是实现身份验证和授权的关键组件。正确配置和使用注册过滤器对于确保应用程序的安全性至关重要。以下是一些关于 Spring Security 注册过滤器的注意事项和最佳实践。 过滤器链顺序&#xff1a; 注册过滤器通常位于过滤器链的末…