当前位置: 首页 > news >正文

HTML (总结黑马的)

<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使用


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

相关文章:

  • JVM学习笔记(持续更新)
  • React(四)memo、useCallback、useMemo Hook
  • 机器学习各个算法的优缺点!(上篇) 建议收藏。
  • VUE阻止浏览器记住密码若依CLOUD(INPUT框密码替换圆点)
  • 一个可以自动生成随机区组试验的excel VBA小程序
  • uniapp使用数据持久化存储
  • 【JavaEE进阶】——Mybatis操作数据库(使用注解和XML方式)
  • docker部署Minio对象存储及使用
  • mongodb 编码格式 Detected BSON
  • Golang中的 defer 关键字和Python中的上下文管理with关键字
  • 数据治理-数据标准演示
  • 5岁幼儿编程:开启未来的神秘之门
  • 数据库(15)——DQL分页查询
  • npm install 出错,按照版本不匹配解决
  • springboot针对返回的response拦截处理越权问题
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • [译] 理解数组在 PHP 内部的实现(给PHP开发者的PHP源码-第四部分)
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • java2019面试题北京
  • java概述
  • js操作时间(持续更新)
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • PhantomJS 安装
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • Vue--数据传输
  • Webpack 4x 之路 ( 四 )
  • 高度不固定时垂直居中
  • 将 Measurements 和 Units 应用到物理学
  • 近期前端发展计划
  • 浅谈Golang中select的用法
  • 区块链共识机制优缺点对比都是什么
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 通过git安装npm私有模块
  • 译米田引理
  • 这几个编码小技巧将令你 PHP 代码更加简洁
  • 走向全栈之MongoDB的使用
  • 数据库巡检项
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • # 手柄编程_北通阿修罗3动手评:一款兼具功能、操控性的电竞手柄
  • #mysql 8.0 踩坑日记
  • #stm32整理(一)flash读写
  • (2)关于RabbitMq 的 Topic Exchange 主题交换机
  • (Matalb分类预测)GA-BP遗传算法优化BP神经网络的多维分类预测
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (南京观海微电子)——I3C协议介绍
  • (三十五)大数据实战——Superset可视化平台搭建
  • (十五)使用Nexus创建Maven私服
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • ./configure、make、make install 命令
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .NET Core 中插件式开发实现
  • .NET core 自定义过滤器 Filter 实现webapi RestFul 统一接口数据返回格式
  • .net/c# memcached 获取所有缓存键(keys)
  • .net操作Excel出错解决
  • .NET成年了,然后呢?