跳转到主要内容

章节web.dev 学习文章

Learn

162 页更新于 14 小时前

开始阅读

本章内容162

  1. 01 Learn Accessibility Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps tha... 14 小时前
  2. 02 ARIA and HTML Most developers are familiar with the standard markup language of our modern web, HyperText Markup Language... 14 小时前
  3. 03 Color and contrast Have you ever tried to read text on a screen and found it difficult to read due to the color scheme or stru... 14 小时前
  4. 04 Conclusion and next steps Congratulations, you've made it through Learn Accessibility! At this point, you've learned a lot of best pr... 14 小时前
  5. 05 Design and user experience Think about your favorite website or app—what makes it your favorite? Now, think about a website or app you... 14 小时前
  6. 06 Keyboard focus Many people use a keyboard—or other software/hardware that mimics the functionality of a keyboard, such as ... 14 小时前
  7. 07 Forms A form is an element that allows a user to provide data into a field or a group of fields. Forms can be as ... 14 小时前
  8. 08 Glossary In this document, you'll find common terms and concepts related to accessibility. A11y A11y is numeronym fo... 14 小时前
  9. 09 Images Accessible images may seem like a simple topic at first glance—you add some "alt text" to an image, and you... 14 小时前
  10. 10 JavaScript JavaScript plays a major role in almost everything we create—from smaller dynamic components to full produc... 14 小时前
  11. 11 How is digital accessibility measured? Digital accessibility means designing and building your digital offerings so that, regardless of a person's... 14 小时前
  12. 12 The Document Along with structure, there are many supporting HTML elements to consider when building and designing for d... 14 小时前
  13. 13 Animation and motion Have you ever been riding in a car, boat, or plane and suddenly felt the world spin? Or had a migraine so b... 14 小时前
  14. 14 Patterns, components, and design systems Many people use component-driven development using pattern style guides, component libraries, or full desig... 14 小时前
  15. 15 Content structure One of the most important aspects of digital accessibility is the underlying structure of the page. When yo... 14 小时前
  16. 16 Assistive Technology testing {% Aside %} This module is a continuation of the previous two testing modules, automated accessibility test... 14 小时前
  17. 17 Automated accessibility testing So far in this course, you have learned about the individual, business, and legal aspects of digital access... 14 小时前
  18. 18 Manual accessibility testing {% Aside %} This module on manual accessibility testing is a continuation of the previous module, automated... 14 小时前
  19. 19 Typography Creating and designing accessible content is more than just choosing an easy-to-read font. Even with access... 14 小时前
  20. 20 Video and audio Have you ever wanted to watch a live event but couldn't find your headphones, so you turned on the captions... 14 小时前
  21. 21 What is digital accessibility, and why does it matter? Imagine a world where you couldn't buy a present for a friend because the online shopping cart was incompat... 14 小时前
  22. 22 Learn CSS This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next f... 14 小时前
  23. 23 Animations Sometimes you see little helpers on interfaces that when clicked, provide some helpful information about th... 14 小时前
  24. 24 Backgrounds Behind every CSS box is a specialized layer called the background layer. CSS provides a variety of ways to ... 14 小时前
  25. 25 Blend Modes Duotone is a popular color treatment for photography which makes an image look like it is only made up of t... 14 小时前
  26. 26 Borders In the box model module, we considered a frame analogy to describe each section of the box model. {% Img sr... 14 小时前
  27. 27 Box Model Say you have this bit of HTML: <p>I am a paragraph of text that has a few words in it.</p> Then you write t... 14 小时前
  28. 28 Color Color is an important part of any website and in CSS there are many options for color types, functions and ... 14 小时前
  29. 29 Conclusion and next steps Congratulations! You've made it to the end! By now, you have learned a lot about CSS, and hopefully you fee... 14 小时前
  30. 30 Filters Say you need to build an element that's got a slightly opaque, frosted glass effect that sits over the top ... 14 小时前
  31. 31 Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. W... 14 小时前
  32. 32 Focus On your webpage, you click a link that skips the user to the main content of the website. These are often r... 14 小时前
  33. 33 Functions So far in this course, you've been exposed to several CSS functions. In the grid module, you were introduce... 14 小时前
  34. 34 Gradients Imagine you've got a site to build and at the top, there's an intro with a heading, summary and a button. T... 14 小时前
  35. 35 Grid A really common layout in web design is a header, sidebar, body and footer layout. {% Img src="image/VbAJIR... 14 小时前
  36. 36 Inheritance Say you just wrote some CSS to make elements look like a button. <a href="http://example.com" class="my-but... 14 小时前
  37. 37 Layout Imagine you're working as a developer, and a designer colleague hands you a design for a brand new website.... 14 小时前
  38. 38 Lists Imagine you have a bunch of items you plan to buy during your next grocery trip. One common way to represen... 14 小时前
  39. 39 Logical Properties A really common user interface pattern is a text label with a supporting inline icon. {% Codepen { user: ... 14 小时前
  40. 40 Overflow When content extends beyond its parent, there are many options for how you can handle it. You can scroll to... 14 小时前
  41. 41 Pseudo-classes Say you've got an email sign up form, and you want the email form field to have a red border if it contains... 14 小时前
  42. 42 Pseudo-elements If you've got an article of content and you want the first letter to be a much bigger drop cap— how do you ... 14 小时前
  43. 43 Selectors If you've got some text that you only want to be larger and red if it's the first paragraph of an article, ... 14 小时前
  44. 44 Shadows Say you've been sent a design to build and in that design there's a picture of a t-shirt, cut out, with a d... 14 小时前
  45. 45 Sizing Units The web is a responsive medium, but sometimes you want to control its dimensions to improve the overall int... 14 小时前
  46. 46 Spacing Say you've got a collection of three boxes, stacked on top of each other and you want space between them. H... 14 小时前
  47. 47 Specificity Suppose that you're working with the following HTML and CSS: <button class="branding">Hello, Specificity!</... 14 小时前
  48. 48 The cascade CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS... 14 小时前
  49. 49 Transitions When interacting with a website, you might notice that many elements have state. For example, dropdowns can... 14 小时前
  50. 50 Text and typography Text is one of the core building blocks of the web. When making a website, you don’t necessarily need to st... 14 小时前
  51. 51 Z-index and stacking contexts Say you've got a couple of elements that are absolutely positioned, and are supposed to be positioned on to... 14 小时前
  52. 52 Learn Responsive Design This course takes you on a journey through the many facets of modern responsive web design. The first few m... 14 小时前
  53. 53 Accessibility Allowing your pages to respond to different screen sizes is just one way of making sure your website is acc... 14 小时前
  54. 54 Conclusion and next steps Congratulations! You've made it to the end! We hope that you have enjoyed this overview of responsive desig... 14 小时前
  55. 55 Icons Most images are part of your content, but icons are part of your user interface. They should scale and adap... 14 小时前
  56. 56 Interaction Small screen devices like mobile phones often have touchscreens. Large screen devices like laptops and desk... 14 小时前
  57. 57 Internationalization The World Wide Web is available to everyone in the world—it's right there in the name! That means that your... 14 小时前
  58. 58 Introduction Right from the start, the World Wide Web was designed to be agnostic. It doesn't matter what hardware you'v... 14 小时前
  59. 59 Macro layouts Macro layouts describe the larger, page-wide organization of your interface. {% Img src="image/HodOHWjMnbNw... 14 小时前
  60. 60 Media features Responsive design wouldn't be possible without media queries. Before media queries there was no way of know... 14 小时前
  61. 61 Media queries Designers can adjust their designs to accommodate users. The clearest example of this is the form factor of... 14 小时前
  62. 62 Micro layouts When we think of layouts, we often think of page-level designs. But smaller components within the page can ... 14 小时前
  63. 63 The picture element The previous module demonstrated how the srcset attribute allows you to provide different-sized versions o... 14 小时前
  64. 64 Responsive images Text on the web automatically wraps at the edge of the screen so that it doesn't overflow. It's different w... 14 小时前
  65. 65 Screen configurations Responsive web design was in many ways a reaction to mobile phones. Before smartphones appeared, very few p... 14 小时前
  66. 66 Theming Even branding can be responsive. You can adjust the presentation of your website to match the user's prefer... 14 小时前
  67. 67 Typography If you don't specify any styles for your text, browsers will apply their own default styles. These are call... 14 小时前
  68. 68 User interface patterns A design viewed on a small screen shouldn't look like a shrunk-down version of a large-screen layout. Likew... 14 小时前
  69. 69 Learn Forms This course breaks down HTML forms into easy to understand pieces. Over the next few modules, you'll learn ... 14 小时前
  70. 70 Accessibility The form you build is for people. People use different devices. Some use a mouse, some a touch device, some... 14 小时前
  71. 71 Address forms Filling in an address can be time-consuming and frustrating. What is an Address line 2? You may not have a ... 14 小时前
  72. 72 Form attributes in depth HTML element attributes can enhance your <form> and form controls. Help users fill in form controls To mak... 14 小时前
  73. 73 Help users avoid re-entering data in forms After learning about the form element and how to make a form interactive, let's see how you can help users ... 14 小时前
  74. 74 Autofill Having to re-enter your address for the tenth time is tiring. Browsers, and you, as a developer, can help u... 14 小时前
  75. 75 Conclusion and next steps Congratulations! You've made it to the end. So far, you've learned a lot about forms, and hopefully you fee... 14 小时前
  76. 76 Test forms across devices and platforms You can fill out a form in many ways. People might use your form on their smartphone while standing in a cr... 14 小时前
  77. 77 Gathering data In this module, you learn how to define goals, analyze your forms, measure changes, and get notified about ... 14 小时前
  78. 78 Design basics In the first section, you learned how to build a basic form. This section is all about best practices. In t... 14 小时前
  79. 79 Form fields in depth To provide the best possible user experience, make sure to use the element and element type that's most ap... 14 小时前
  80. 80 The form element in depth In a previous module, you learned how to use the <form> element. In this module, you learn how a form work... 14 小时前
  81. 81 Use forms to get data from users Imagine you want to ask people on your website about their favorite animal. As a first step, you need a way... 14 小时前
  82. 82 Help users enter data in forms To make a form interactive, you need to add form elements. There are controls to enter and select data, ele... 14 小时前
  83. 83 Identity {% Aside 'warning' %} User account authentication is a complex issue in terms of privacy and security. To g... 14 小时前
  84. 84 Internationalization and localization If you're reading this, you're using the World Wide Web. Your forms may be used by people speaking differen... 14 小时前
  85. 85 JavaScript You can use JavaScript to respond to user interactions on your form, reveal additional form fields, submit ... 14 小时前
  86. 86 Payment forms {% Aside %} This module is about payment forms and doesn't explain how to implement transactions on your si... 14 小时前
  87. 87 Security and privacy When you create a form, you work with user data. Your number one concern should be to ensure that user data... 14 小时前
  88. 88 Styling forms To ensure that your form is accessible to as many people as possible, use the elements built for the job: ... 14 小时前
  89. 89 Styling form controls In this module you learn how to style form controls, and how to match your other site styles. {% Aside 'cau... 14 小时前
  90. 90 Test your forms In previous modules, you learned how to build a form, help users avoid re-entering data, and how to validat... 14 小时前
  91. 91 How to test forms for usability Usability testing is a technique to evaluate a device or product, such as a web form. By testing your form ... 14 小时前
  92. 92 Help users enter the right data in forms Browsers have built-in features for validation to check that users have entered data in the correct format.... 14 小时前
  93. 93 Learn HTML Welcome to HTML! HyperText Markup Language, or HTML, is the backbone of the web, providing the content, as... 14 小时前
  94. 94 HTML APIs In the introduction to this series it says "HTML elements are the nodes that make up the Document Object Mo... 14 小时前
  95. 95 Attributes Attributes were briefly discussed in Overview of HTML; it's time for a deep dive. Attributes are what make ... 14 小时前
  96. 96 Audio and Video As you learned in the images module, HTML enables embedding media into a web page. In this section, we look... 14 小时前
  97. 97 Conclusion and next steps If you have been following this course in order, you have made it to the end of Learn HTML! You've learned ... 14 小时前
  98. 98 Details and summary A disclosure widget is a user interface control that hides and shows content. If you are reading this on we... 14 小时前
  99. 99 Dialog A modal dialog is a special type of pop-up box on a web page: a pop-up that interrupts the user to focus on... 14 小时前
  100. 100 Document structure HTML documents include a document type declaration and the <html> root element. Nested in the <html> elem... 14 小时前
  101. 101 Focus Interactive elements, including form controls, links, and buttons, are by default focusable and tabbable. T... 14 小时前
  102. 102 Forms Most sites and applications include a web form. Joke sites, like DoWebsites Need To Look Exactly The Same I... 14 小时前
  103. 103 Headings and sections In the last section you learned how, even if you don't know what the words on a page mean, when semantic el... 14 小时前
  104. 104 Images Decorative images, such as background gradients on buttons or background images on sections of content or t... 14 小时前
  105. 105 Other inline text elements We've covered most, but definitely not all, the HTML elements. One area we haven't discussed is inline text... 14 小时前
  106. 106 Links In the introduction to the attributes section, you saw an example showing how attributes are added to the o... 14 小时前
  107. 107 Lists Lists are more common than you might think. If you've ever taken a programming class, the first project may... 14 小时前
  108. 108 Metadata In the document structure section you learned about the components you (almost) always find in the <head> ... 14 小时前
  109. 109 Navigation As you learned in links, the <a> element with the href attribute creates links that users can follow by c... 14 小时前
  110. 110 Overview of HTML HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documen... 14 小时前
  111. 111 Semantic HTML With over 100 HTML elements, and the ability to create custom elements, there are infinite ways to mark up ... 14 小时前
  112. 112 Tables HTML tables are used for displaying tabular data with rows and columns. The decision to use a <table> shou... 14 小时前
  113. 113 Template, slot, and shadow The benefit of web components is their re-usability: you can create a UI widget once, and reuse it multiple... 14 小时前
  114. 114 Text basics Similar to how your text editor provides <h1> to <h6> headings, along with a plethora of ways to format s... 14 小时前
  115. 115 Learn Images This course is created for beginner and advanced web developers alike, covering everything from the basics ... 14 小时前
  116. 116 Automating compression and encoding All of the syntaxes in this course—from the encoding of image data to the information-dense markup that pow... 14 小时前
  117. 117 Image formats: AVIF AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec. AVIF is even newer—th... 14 小时前
  118. 118 Image content delivery networks You may already be familiar with the core concept of a content delivery network (CDN): a network of distrib... 14 小时前
  119. 119 Site Generators, frameworks, and CMSs While certainly an improvement over manually saving alternate cuts of each image and hand-optimizing them t... 14 小时前
  120. 120 Conclusion Congratulations, you've made it to the end! By now you’ve learned a lot about how images work on the web, a... 14 小时前
  121. 121 Descriptive syntaxes In this module, you'll learn how to give the browser a choice of images so that it can make the best decisi... 14 小时前
  122. 122 Image formats: GIF While not terribly useful on the modern web, GIF (Graphics Interchange Format) provides a solid introductio... 14 小时前
  123. 123 A brief history of images on the web No matter how far along you are in learning to design and develop for the web, the <img> element needs ver... 14 小时前
  124. 124 Image formats: JPEG JPEG is the most common type of image used on the web, and with good reason: for decades, JPEG has almost i... 14 小时前
  125. 125 Key performance issues As it stands now, images are the web's biggest assets in terms of both total transfer size and number of re... 14 小时前
  126. 126 Image formats: PNG There are a few things that set PNG (Portable Network Graphics) apart from other formats, though as it was ... 14 小时前
  127. 127 Prescriptive syntaxes The <picture> element doesn't render anything on its own, but instead acts as a decision engine for an inn... 14 小时前
  128. 128 Raster images Raster images can be thought of as a set of pixel-by-pixel instructions for rendering a two-dimensional gri... 14 小时前
  129. 129 Responsive images Responsive image markup can be divided into two scenarios: situations where the goal is the most efficient ... 14 小时前
  130. 130 Vector images Vector graphics are a method of communicating a series of shapes, coordinates, and paths to their rendering... 14 小时前
  131. 131 Image formats: WebP Google originally developed WebP as a lossy image format to supersede JPEG, one that was able to produce fi... 14 小时前
  132. 132 Learn Privacy When you acquire a new user, you are granted their trust. It's your organization's responsibility to honor ... 14 小时前
  133. 133 Best practices Over this whole course, certain themes have come up again and again. Protecting your users' privacy involve... 14 小时前
  134. 134 Use just the data you need A good way to mitigate risk for users is to not hold sensitive data about them that you do not need that im... 14 小时前
  135. 135 Encryption Encryption is often a topic for security, but it's important for privacy too. The goal of encryption is to ... 14 小时前
  136. 136 Fingerprinting Fingerprinting means trying to identify a user when they return to your website, or identifying the same us... 14 小时前
  137. 137 Third parties It's rather rare that a website is wholly self-contained. The HTTP Web Almanac shows that most websites—aro... 14 小时前
  138. 138 Learn PWA Welcome to Learn Progressive Web Apps! This course covers the fundamentals of Progressive Web App developme... 14 小时前
  139. 139 App design This chapter focuses on some critical aspects of rendering content outside of the browser tab. The window D... 14 小时前
  140. 140 Architecture Designing your application to make the most out of the technology that makes PWAs reliable, installable, an... 14 小时前
  141. 141 Assets and data Developing an application typically involves several assets and resources, from the logic and code (compile... 14 小时前
  142. 142 Caching Cache storage is a powerful tool. It makes your apps less dependent on network conditions. With good use of... 14 小时前
  143. 143 Capabilities Progressive Web Apps can do more than just rendering content on the screen or connecting to web services. P... 14 小时前
  144. 144 Complexity management In his talk Simple Made Easy, Rich Hickey discusses the qualities of simple versus complex things. He descr... 14 小时前
  145. 145 Conclusion Congratulations! You've made it to the end! We hope that you have enjoyed this course of Progressive Web Ap... 14 小时前
  146. 146 Detection You can detect if the user is using your PWA in the browser or in standalone mode. On Chromium-based browse... 14 小时前
  147. 147 Enhancements There are many enhancements that can improve the conversion and usage of your PWA. App shortcuts App shortc... 14 小时前
  148. 148 Experimental features The web is a powerful platform, but there are still gaps in what it can solve. Those who want to develop fo... 14 小时前
  149. 149 Foundations A solid foundation is the base requirement for building great PWAs. To implement this foundation you need t... 14 小时前
  150. 150 Getting started Progressive Web Apps are still websites, with enhanced features and capabilities. They are not attached to ... 14 小时前
  151. 151 Installation Once the user installs your PWA, it will: Have an icon in the launcher, home screen, start menu, or launchp... 14 小时前
  152. 152 Installation prompt Users may not be familiar with the PWA install process. As the developer, you will understand when it is th... 14 小时前
  153. 153 Offline data To build a solid offline experience, your PWA needs storage management. In the caching chapter you learned ... 14 小时前
  154. 154 OS Integration Web apps have a big reach. They run on multiple platforms. They are easy to share via links. But traditiona... 14 小时前
  155. 155 Progressive Web Apps A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more rel... 14 小时前
  156. 156 Service workers Users expect apps to start on slow or flaky network connections, or even when offline. They expect the cont... 14 小时前
  157. 157 Serving A key aspects of Progressive Web Apps is that they're reliable; they can load assets quickly, keeping users... 14 小时前
  158. 158 Tools and debug All the tools available for web development are also helpful for progressive web app development, including... 14 小时前
  159. 159 Update You have published your PWA: some users use it from the browser, others install it on their devices. When y... 14 小时前
  160. 160 Web app manifest The web app manifest is a file you create that tells the browser how you want your web content to display a... 14 小时前
  161. 161 Window management Running on your own window, managed by your PWA, has all the advantages and responsibilities of any window ... 14 小时前
  162. 162 Workbox Maintaining your service worker and cache storage logic can be a challenge as your PWA grows. Workbox, is a... 14 小时前