HTML (总结黑马的)

ops/2024/11/12 9:30:02/
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/ops/47676.html

相关文章

深度学习 --- stanford cs231 编程作业(assignment1,Q2: SVM分类器)

stanford cs231 编程作业之SVM分类器 写在最前面&#xff1a; 深度学习&#xff0c;或者是广义上的任何学习&#xff0c;都是“行千里路”胜过“读万卷书”的学识。这两天光是学了斯坦福cs231n的一些基础理论&#xff0c;越往后学越觉得没什么。但听的云里雾里的地方也越来越多…

su和sudu、三剑客中的sed、awk命令

一、用户授权 如果普通用户需要执行特殊操作&#xff0c;有两种方法&#xff1a; su -root 切换到root账户进行特殊操作&#xff0c;然后再回到普通用户 sudo 命令 su命令&#xff1a; 优点&#xff1a;使用简单 缺点&#xff1a;root密码容易泄露 普通用户执行操作不可控 su…

排序(前篇)

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

C++ static_cast、dynamic_cast、const_cast 和 reinterpret_cast 用处和区别

在 C 中&#xff0c;static_cast、dynamic_cast、const_cast 和 reinterpret_cast 是四种类型转换运算符&#xff0c;它们各自有不同的用途和行为&#xff1a; static_cast 用于编译时已知类型的转换&#xff0c;如基本数据类型转换、派生类到基类的转换、指针和引用的转换等…

测试测试测试

一分钟速览新闻点&#xff01; 京东前副总裁蔡磊回应被指装病&#xff1a;没有时间、精力和能力应对 百度沈抖&#xff1a;主力模型免费的原因很朴素&#xff0c;希望大家别再天天拉表格比价格 蚂蚁集团CTO何征宇&#xff1a;蚂蚁一直在努力优化和提高AI的可靠性、经济性和易…

Python中Web开发-Django框架

大家好&#xff0c;本文将带领大家进入 Django 的世界&#xff0c;探索其强大的功能和灵活的开发模式。我们将从基础概念开始&#xff0c;逐步深入&#xff0c;了解 Django 如何帮助开发人员快速构建现代化的 Web 应用&#xff0c;并探讨一些最佳实践和高级技术。无论是初学者还…

【2024】LeetCode HOT 100——技巧

目录 1. 只出现一次的数字1.1 C++实现1.2 Python实现1.3 时空分析2. 多数元素2.1 C++实现2.2 Python实现2.3 时空分析3. 颜色分类3.1 C++实现3.2 Python实现3.3 时空分析4. 下一个排列4.1 C++实现4.2 Pyth

zdppy_amauth 实现给角色批量绑定权限

新增接口 api.resp.post("/auth/role_auth", amauth.role.add_auths)如何测试 如何测试能不能给指定的角色批量的添加权限呢&#xff1f; 1、需要新建一个角色2、需要拿到这个角色的ID3、需要新增三个权限4、需要拿到新增的三个权限的ID5、拿着角色ID和权限ID列表…