# HTML5/BS

* [Chrome](#chrome)
* [Percent-encoding reserved](#percent-encoding-reserved)
* [HTML5](#html5)
  * [lang](#lang)
  * [Subresource Integrity](#subresource-integrity)
* [media type](#media-type)
* [icons](#icons)
* [Events](#events)
* [CSS box model](#css-box-model)
  * [box-sizing](#box-sizing)
  * [content](#content)
  * [padding](#padding)
  * [border](#border)
  * [margin](#margin)
* [Spacing](#spacing)
* [Mobile](#mobile)
* [Flexbox](#flexbox)
* [UI Frameworks](#ui-frameworks)
* [Bootstrap](#bootstrap)
  * [Version 3](#version-3)
  * [Version 4](#version-4)
  * [Version 5](#version-5)
  * [Grid system](#grid-system)
  * [forms](#forms)
* [whitespace and wrap](#whitespace-and-wrap)
* [robots](#robots)
* [Frameworks](#frameworks)

## Chrome

```
hard reload: Ctrl + F5
F12 -> Ctrl+Shift+P -> "screenshot"
delete address history: Shift + Del
remove domain name: F12 -> console
    document.body.innerHTML = document.body.innerHTML.replace(/\.\w+\.\w+(?=:)/g, "")
```

## Percent-encoding reserved

<https://en.wikipedia.org/wiki/Percent-encoding>

| !   | #   | $   | %   | &   | '   | (   | )   | \*  | +   | ,   | /   | :   | ;   | =   | ?   | @   | \[  | ]   |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| %21 | %23 | %24 | %25 | %26 | %27 | %28 | %29 | %2A | %2B | %2C | %2F | %3A | %3B | %3D | %3F | %40 | %5B | %5D |

## HTML5

<https://www.w3.org/TR/html5\\>
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element>

### lang

empty string indicates that the primary language is unknown

<https://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes\\>
<http://www.ietf.org/rfc/bcp/bcp47.txt>

### Subresource Integrity

<https://www.w3.org/TR/SRI/#resource-integrity>

## media type

MIME type or content type: <http://www.iana.org/assignments/media-types/media-types.xhtml#application>

```
application/pdf
audio
font
example
image
message
model
multipart
text
video
```

## icons

<https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/white/svg>

## Events

<https://developer.mozilla.org/en-US/docs/Web/Events>

```
cut/copy/paste  
input: the value of an <input>, <select>, or <textarea> element is changed  
ValueChange: mainly for an accessibility purpose, e.g.: <progress>  
change(Firefox OS specific, any change made to a file inside a given storage area)
```

## CSS box model

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\\_Box\\_Model/Introduction\\_to\\_the\\_CSS\\_box\\_model\\>
Every box is composed of four parts (or areas), defined by their respective edges.\
![](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model/boxmodel.png)

### box-sizing

<https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>

`content-box` is the default.\
`border-box` tells the browser to account for any border and padding in the value you specify for width and height.

### content

"real" content of the element

size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

When the content area has a background, it extends into the padding.

### padding

extends the content area to include the element's padding.

```
dimensions: padding-box width/height
thickness: padding[-top/right/bottomleft]
```

### border

extends the padding area to include the element's borders.

```
dimensions: border-box width/height
thickness: border[-width]
```

If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

### margin

extends the border area to include an empty area used to separate the element from its neighbors.

```
dimensions: margin-box width/height
size: margin[-top/right/bottomleft]
```

When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.\
<https://developer.mozilla.org/en/CSS/margin\\_collapsing>

## Spacing

<https://getbootstrap.com/docs/4.0/utilities/spacing/>

```
Examples: class="mx-auto / pt-3"

{property}{sides}-{size} for xs
{property}{sides}-{sm, md, lg, xl}-{size}

m - margin
p - padding

t - top
b - bottom
l - left
r - right
x - *-left and *-right
y - *-top and *-bottom
blank - all 4 sides

0 - 0
1 -$spacer * .25
2 -$spacer * .5
3 -$spacer
4 -$spacer * 1.5
5 -$spacer * 3
auto - margin auto
```

## Mobile

<https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport\\_meta\\_tag>

```
viewport: a virtual "window"
viewport meta tag: let web developers control the viewport's size and scale.
```

<https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple\\_ref/doc/uid/TP40008193>

```
initial-scale: The default is calculated to fit the webpage in the visible area.
maximum-scale:  The default is 5.0. The range is from >0 to 10.0.
user-scalable: whether or not the user can zoom in and out. yes
shrink-to-fit=no: override  "width=device-width" to prevent the page from scaling
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
```

## Flexbox

* Game: <https://flexboxfroggy.com/>
* Doc: <https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS\\_layout/Flexbox> ![](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)

Click links to live try:

* `flex-direction`: specifies which direction the **main axis** runs; `column` -> vertically
* `flex-wrap`: default `nowrap`
* `flex-flow` = `flex-direction` + `flex-wrap`
* [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#examples): default `flex-start`, items sit at the start of the main axis
* [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#examples)：default `stretch`，fill the parent in the direction of the cross axis
* [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#formal_syntax)：around content items along a flexbox's cross-axis
* [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex#examples): grow or shrink to fit the space | flex-grow + flex-shrink + flex-basis

## UI Frameworks

<https://github.com/stars/fzinfz/lists/frontend>

## Bootstrap

### Version 3

<https://getbootstrap.com/docs/3.3/getting-started/#download-cdn>

### Version 4

<https://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template>

<http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/>

* compiles faster than ever thanks to Libsass
* moved nearly everything to flexbox, added a new grid tier to better target mobile devices, and completely overhauled our source Sass with better variables, mixins, and now maps, too.
* <https://getbootstrap.com/docs/4.0/components/card/>
* move gradients, transitions, shadows, grid classes, and more into Sass variables.
* drop support for IE8/IE9, Safari 8-, iOS 8-, etc
* JS plugins in ES6. new teardown methods, option type checking, new methods, and more.
* auto-placement of tooltips, popovers, and dropdowns from <https://popper.js.org>
* npm scripts instead of Grunt

### Version 5

<https://blog.getbootstrap.com/2021/05/05/bootstrap-5/>

```
No more jQuery!
Dropped Internet Explorer 10 and 11
Dropped Microsoft Edge < 16 (Legacy Edge)
Dropped Firefox < 60
Dropped Safari < 12
Dropped iOS Safari < 12
Dropped Chrome < 60
```

### Grid system

<https://getbootstrap.com/docs/3.3/css/#grid>

Rows must be placed within a .container\[-fluid] for proper alignment and padding. Columns create gutters (gaps between column content) via `padding`. That padding is offset in rows for the first and last column via negative margin on `.rows`.

### forms

<https://getbootstrap.com/docs/4.0/components/forms/#form-groups>

.form-group provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.

.row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

<https://getbootstrap.com/docs/4.3/components/forms/#inline-forms>

.form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

## whitespace and wrap

<https://css-tricks.com/almanac/properties/w/whitespace/>

|          | New lines | Spaces and tabs | Text wrapping |
| -------- | --------- | --------------- | ------------- |
| normal   | Collapse  | Collapse        | Wrap          |
| pre      | Preserve  | Preserve        | No wrap       |
| nowrap   | Collapse  | Collapse        | No wrap       |
| pre-wrap | Preserve  | Preserve        | Wrap          |
| pre-line | Preserve  | Collapse        | Wrap          |

## robots

```
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">

robots.txt
    User-agent: Google
    Disallow:

    User-agent: *
    Disallow: /tmp/
```

## Frameworks

htmx | AJAX, CSS Transitions, WebSockets and Server Sent Events: <https://htmx.org/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://book.ferro.pro/dev/html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.