首页 > 其他分享 >HTML5+CSS3笔记(Xmind格式):第一天

HTML5+CSS3笔记(Xmind格式):第一天

时间:2024-08-02 13:25:45浏览次数:22  
标签:CSS3 定义 Xmind 元素 文档 HTML5 格式 input 页面

Xmind鸟瞰图:

文字总结:

1.新增语义化标签:

- header:定义文档的页眉,用来表示页面的头部。

- nav:定义导航链接的部分nav 元素代表页面中的导航,其中的导航元素链接到其他页面或当前页面的其他部分。

- main:主体信息

- aside : 侧边栏

- article:article元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。

- section:定义文档中的节(section、区段)

- footer:定义文档或节的页脚

- datalist:标签定义选项列表。请与 input 元素配合使用该元素,其中input的list属性值必须和datalist的id值一致。(修改后要刷新页面)

- figure元素:该元素用于表示一块独立的图片区域,元素内部可以包含一个或多个<img>元素。另外,该元素还可以包含一个<figcaption>元素,用于定义该图盘区域的标题。

- figcaption元素:该元素通常放在<figure>内部,用于定义图片区域的标题。

- fieldset:可将表单内相关元素分组,与legend 配合使用

- meter: 使用 meter 元素来度量给定范围(gauge)内的数据

2.常用属性:

 placeholder   占位符提供可描述输入字段预期值的提示信息                    

 autofocus    规定当页面加载时 input 元素应该自动获得焦点                  

 multiple     多文件上传                                                  

 autocomplete  规定表单是否应该启用自动完成功能,on默认,启用自动完成(name必须,提交按钮必须)

 required      必填项                                                      

 tabindex      指定获取焦点的顺序                                          

 data-        自定义标签属性    

3.新增的input的type属性值(重点)

 email     输入邮箱格式        

 tel       输入手机号码格式    

 url       输入url格式          

 number    输入数字格式        

 search    搜索框(体现语义化)

 range     自由拖动滑块        

获取时间,日期,星期:time     date      month      week    

4.多媒体标签:

audio:播放音频

video:播放视频

详细Xmind原文档,在文章顶部自取下载!

标签:CSS3,定义,Xmind,元素,文档,HTML5,格式,input,页面
From: https://blog.csdn.net/m0_71805303/article/details/140869891

相关文章

  • html5十大特性
       HTML5总体比HTML4多了十个新特性,但其不支持IE8及IE8以下版本的浏览器。语义化标签表单功能视频和音频Canvas绘图SVG绘图地理定位拖放APIWebWorkerWebStorageWebSocket1、语义化标签结构化元素 HTML5提供的新元素可以更好的描述网页文档结构,比如: 其他......
  • CSS笔记总结(Xmind格式):第一天
    Xmind鸟瞰图:简单笔记总结:css知识总结:1.css使用方式:行内样式:直接在html标签中添加style属性内部样式表:在文件内部添加的样式外部样式:单独的css样式文件,通过link标签引入使用@import导入的外部样式:会在html加载完成之后才开始使用,且必须在style最上方使用2.字体样式:字......
  • XMind v2024 解锁版下载及安装教程 (全球领先的商业思维导图软件)
    简述XMind是一款专业的全球领先的商业思维导图软件,在国内使用广泛,拥有强大的功能、包括思维管理、商务演示、与办公软件协同工作等功能。它采用全球先进的EclipseRCP软件架构,是集思维导图与头脑风暴于一体的可视化思考工具,能用来捕捉想法、理清思路、管理复杂信息并促进......
  • HTML5 表单验证
    0x01概述表单验证的两种方式:form表单提交到后台无刷新页面的ajax提交以下内容主要为form表单验证HTML5表单基本特性与新特性:placeholder:输入框中的灰色文字提示<inputplaceholder="Enterusername"/>type:HTML5新增类型color、date、email、number、......
  • 基于 HTML5 和 Canvas 开发的在线图片编辑器
    预览https://zaixianps.net技术栈HTML5:构建用户界面,提供语义化标签。CSS3:美化界面,增强用户体验。JavaScript:处理用户交互,管理Canvas操作。CanvasAPI:主要绘图工具,用于图像处理。项目结构image-editor/│├──index.html//主页面├──style.css//......
  • HTML笔记总结(Xmind格式):第一天
    Xmind鸟瞰图:简单文字总结:笔记总结:1.常用开发工具:VScode,Hbuilder,IDEA2.常见浏览器:IE,火狐(Firefox),谷歌(chrome),Safari3.Web标准:结构标准,表现标准,行为标准4.HTML的全称为超文本标记语言5.排版标签有:标题标签,段落标签,水平线标签,换行标签,div标签,span标签6.标题标签的特点: ......
  • JavaScript笔记总结(Xmind格式):第一天
    Xmind鸟瞰图:简单文字总结:js使用方法:        1.行内样式(需要特定条件才可以使用)        2.内部样式(script尽量写在body最下面)        3.外部样式(在script标签中通过src引入外部的js文件)window对象的方法(window可以省略):        1.alert......
  • JavaScript笔记总结(Xmind格式):第二天
    Xmind鸟瞰图:简单文字总结:数据类型检测:可以使用typeof检测数据类型数据类型转换:  1.其它类型转换为Boolearn    ①数字类型转换Boolean:只有0会被转换为false,其它的非0数字都会转换为true    ②字符串类型转换为Boolean:只有空字符串会被转换为false,......
  • JavaScript笔记总结(Xmind格式):第三天
    Xmind鸟瞰图:简单文字总结:数组的创建:  1.数组的特性:    ①数组中,可以添加任意的数据类型    ②数组是一个对象,属于复杂数据类型    ③直接创建的数组可以在中间添加空值    ④构造函数创建的数据不可以添加空值,会直接报错  2.......
  • HTML5+CSS3学习笔记第二天
    二、HTML第二天(列表、表格、表单)1.列表无序列表:每行前面多一个小点<ul><li>列表条目1</li><li>列表条目2</li><li>列表条目3</li></ul>有序列表:每行前面自动加1.2.3.的序号<ol><li>有序列表条目1</li><li>有序列表条......