freeCodeCamp 练习3 -- Learn accessbility by building a quiz
css letter-spacing 调节字符间距
css 分割线可以用 div 块,设置背景颜色为分割线颜色,自由调节宽度
<div class="divider"></div>.divider {border-bottom: 1px solid #888989;margin: 2px 0;clear: right;}```
html meta 常用举例
为搜索引擎定义关键字: <meta name="keywords" content="HTML, CSS, JavaScript">定义您的网页的描述: <meta name="description" content="Free Web tutorials for HTML and CSS">定义页面的作者: <meta name="author" content="John Doe">每 30 秒刷新一次文档: <meta http-equiv="refresh" content="30">设置视口以使您的网站在所有设备上看起来都不错(响应式网页设计): <meta name="viewport" content="width=device-width, initial-scale=1.0">
html title 定义和用法
title 标签在 HTML 文档中是必需的,页面标题的内容对于搜索引擎优化 (SEO) 非常重要.css display定义和用法
css justify-content
justify-content当项目未使用主轴(水平)上的所有可用空间时,该属性对齐灵活容器的项目。html 表单 form 部分要完全熟悉
html 能实现“标签”功能的有
- label 标签
- (若不能使用 label 标签)aria-label (aria-labelledby)属性
- legend 标签
标签只是一个辅助功能,不会再页面上展示任何的信息
html 安全的字体设置:第一个值写期望呈现的字体,第二个值写另一种网络安全字体作为后备(fallback)
html 牢记表单输入的最佳实践:为每个输入赋予适当的类型和名称属性。 然后,给第一个输入一个占位符属性。代码示例:
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz"><section role="region" aria-labelledby="student-info"><h2 id="student-info">Student Info</h2><div class="info"><label for="student-name">Name:</label><input id="student-name" type="text" name="student-name" placeholder="Enter name"/></div><div class="info"><label for="student-email">Email:</label><input id="student-email" type="email" name="student-email" /></div><div class="info"><label for="birth-date">D.O.B.:</label><input id="birth-date" type="date" name="birh-date" /></div></section></form>
- Even though you added a placeholder to the first input element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
- Instead sthe placeholder text from the first input element, relying on the label being the best-practice.
css 有一种常见的模式可以在视觉上隐藏文本,仅供屏幕阅读器阅读。
此模式用于设置以下 CSS 属性:position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
html input attribute:
- id: 标记单个语句
- value:选项的值
- name:多个选项分组
- name 属性规定 input 元素的名称
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值,因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的,没有 name 属性就无法得到表单元素提交给服务端的值
html 表单提交-submit:submit 和 button
submit 是 button 的一种形式。submit 的显示文本只能是 submit,用 button 表示可以自定义html accesskey 当HTML页面有多个元素时,可以通过 accesskey 属性指定激活该元素的快捷键,这样用户通过键盘快捷键就可以激活对应的HTML元素。
下面示范 accesskey 属性的作用:用户名(n):<input name="" type=" text" accesskey="n"><br/> 密码(p):<input name="" type=" password" accesskey="p"><br/> <a href="https://www.baidu.com" accesskey="x">按alt+x跳转</a>
freeCodeCamp 练习3 -- Learn accessbility by building a quiz相关推荐
- Learn Blockchains by Building One
You're here because, like me, you're psyched about the rise of Cryptocurrencies. And you want to kno ...
- freecodecamp上的html练习项目
learn html by building a cat photo app freecodecamp,html练习项目learn html by building a cat photo app 下 ...
- how to learn html5,HTML5与CSS基础
你将学到什么 How to write a Web page Concepts of a markup language Basics of HTML5 and CSS Web design and ...
- react测试组件_测试驱动的开发,功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
- react中使用构建缓存_通过构建海滩度假胜地网站,了解如何使用React,Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
- javascript函数式_JavaScript中的函数式编程原理
javascript函数式 After a long time learning and working with object-oriented programming, I took a step ...
- react中使用构建缓存_完整的React课程:如何使用React构建聊天室应用
react中使用构建缓存 In this video course, you'll learn React by building a chat room app. 在本视频课程中,您将通过构建聊天室 ...
- 业余爱好者linux_如何从业余爱好者变成专业开发人员
业余爱好者linux by Ken Rogers 肯·罗杰斯(Ken Rogers) 如何从业余爱好者变成专业开发人员 (How to Go From Hobbyist to Professional ...
- typescript 博客_如何使用Typescript自动化博客发布过程
typescript 博客 Since I'm trying to build a writing habit, well, I'm writing more and more. Even thoug ...
最新文章
- 开发Eclipse自定义控件
- CES2018:英特尔披露量子计算和神经拟态计算研究最新进展
- plsql developer的一些使用
- 帝国cms微信商城小程序之多规格颜色尺寸长度等sku弹出层模块封装调用
- 如何使方法行数达到最优、常量与变量如何优雅的定义?
- DataGridView的使用
- c语言程序设计开卷考试b卷,C语言程序设计(B)试卷_杨崇联(A1).doc
- Oracle任务调度的高级选项
- JAVA16版本.JDK16关于TCP和UDP的优化
- 洛谷 P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm
- python处理word文档保留格式_python 处理document文档 保留原样式
- ASP.NET AJAX Debugging and Tracing
- 【数据结构与算法】字符串匹配 AC自动机
- 北大oj-1423- Big Number
- html的table的子节点,HTMLTableElement子节点并不如预期
- CVE-2019-0708 微软补丁更新
- tomcat 8.0下载
- glide 压缩图拍呢_Glide-图片的压缩
- 有趣的23000----整理(09)C,D词根
- In-Class Essay结构范文分享