HTML (总结黑马的)

2024-06-22 6190阅读


换行


水平线

div  独占一行

span 不换行

header  网页头部

nav     网页导航

footer  网页底部

aside   网页侧边栏

section 网页区块

article 网页文章

   空格

<    小于号

>    大于号

图片:

            替换文本是图片没有显示的时候显示对应的文字;提示文本是鼠标悬停上面的时候显示的文字

超链接:

跳转到百度

href  超链接的跳转地址

      #  开发初期不确定跳转地址,#表示空链接,页面不会跳转,在当前页面刷新一次

target="_blank" 实现在新窗口打开页面

音频:

 支持这三种格式:MP3、ogg、wav

    controls  显示音频播放面板

    loop      循环播放

    autoplay  自动播放(为提升用户体验,浏览器一般会禁用自动播放功能)

视频:

  支持格式:MP4、Ogg、WebM

    controls  显示音频播放面板

    loop      循环播放

    muted       静音播放

    autoplay  自动播放(为提升用户体验,浏览器支持在静音状态下自动播放)

列表:(有三种)

无序列表:                ul 申明是无序列表  li:写列表条目 (最总效果类似于微博热搜的展示)

  • 第一项
  • 第二项
  • 第三项
  • ……

有序列表:                标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。  类似于word的缩进

  1. 第一项
  2. 第二项
  3. 第三项
  4. ……

定义列表:                标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情    类似于苹果官网最下面的那个效果

列表标题

列表描述 / 详情 ……

表格:            标签:table 嵌套 tr,tr 嵌套 td / th

    table   表格

    tr         行

    th        表头单元格

    td        内容单元格

    提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

    表格结构标签:

    thead  表头内部  表格头部内容

    tbody  表头主体    主要内容区域

    tfood  表格底部  汇总信息区域

    合并单元格:

    rowspan  跨行合并 保留最上面的单元格

    colspan  跨列合并 保留最做的单元格 

表单:

    placeHoder 占位文本

    text 文本框,用于输入单行文本

    password  密码框

    radio  单选框

        name  控件名称  (控件分组,同组中只能选中一个(单选功能))

        checked  默认选中  属性名和属性值相同时,简写为一个单词

    checkbox  多选框

        checked  默认选中

    file    上传文件

        multiple  上传文件时实现多选

       默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。

下拉菜单:       标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。   默认显示第一项,selected 属性实现默认选中功能

北京

上海

广州

深圳

武汉

文本域:

默认提示文字

• 实际开发中,使用 CSS 设置 文本域的尺寸

• 实际开发中,一般禁用右下角的拖拽功能

lable标签:

写法一:

写法二:

按钮:

按钮

    submit  提交按钮,点击之后提交数据到后台

    reset   重置按钮,点击后表单控件恢复默认值

    button  普通按钮,默认没有功能,一般配合JS使用

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


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]