# HTML Basic Notes ## Emmet ### 嵌套操作孩子 : > ```html div>ul>li

``` 兄弟 : + ```html div+ul>li

``` 上级：^ ```html ul>li^div

ul>li>a^^div

``` 重复：\* ```html ul>li*3

``` 分组：() ```html div>(p>span)*2

``` ### 属性操作 id:# class:. ```html div#header+div.main+div#footer

``` 属性值:[] ```html a[title=test target=_self] ``` 数列值：\$ ```html p.item$*3

p.item$$*3

``` 数列操作符：@ ```html p.item$@-*3 @- = -1

p.item$@3*3 @3 = 从3开始3次

p.item$@-3*3 @-3 = 3次后到3结束

``` ### 字符操作字符操作：{} ```html a{click} click a>{click}+span{me} clickme ``` ### 缺省元素 ```html .header+.footer = div.header+div.footer ul>.item*3 = ul>li.item*3 table>.row*4>.cell*3 = table>tr.row*4>td.cell*3 ``` ## Structure - [Semantics Section Reference](http://www.html5jscss.com/html5-semantics-section.html) ### section 必须含有**hx**标题子标签 ### Header Not only can the page `` contain a header, but also can every `

` and `

` element. ### Footer Not only can the page `` contain a footer, but also can every `

` and `

` element. ### hgroup ### nav - 传统导航条 - 侧边栏导航 - 页内跳转 - 翻页操作 ### main - 每个网页只有 1 个`main`元素 - `main`不可为`article`、`aside`、`header`、`footer`、`nav`孩子 ### address 联系信息 - QQ、住址、电子邮箱、主页链接 ### aside 名词解释的附属部分/友情链接/广告 ### blockquote 长文本引用 ### pre 代码段 ## Head Tag `Meta` data list in [HEAD](https://github.com/joshbuchea/HEAD). ### Favicon ```html ``` ### Theme Color - [MDN Introduction](https://developer.mozilla.org/docs/Web/HTML/Element/meta/name/theme-color) - [HTML Specification](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) ```html ``` ## Form - [Form Design Patterns](https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post) ```html ``` ### validate - [Complete Guide for Form Validation](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation) - [Complete Guide for Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) ### novalidate 关闭表单的提交验证 ### 表单元素共有属性 #### Form Property `form=form_name`: 使表单元素可放置于表单之外 #### Form Action Property `formaction=target_name`: 使表单元素可提交到不同页面 #### Form Method Property `formmethod=post/get`: 使表单元素以不同的方式提交 #### Form Enctype - 默认值：application/x-www-form-urlencoded 提交前编码所有字符 - multipart/form-data 不编码字符，**上传控件表单元素**必须使用改值 - text/plain 表单元素数据中的空格->`+` #### Form Target 定义表单提交后加载页面打开方式 - blank 在新窗口中打开被链接文档 - self 默认:在相同的框架中打开被链接文档 - parent 在父框架集中打开被链接文档 - top 在整个窗口中打开被链接文档 - frameName 在指定的框架中打开被链接文档 #### Form Novalidate 取消表单元素的提交验证将 submit 元素的 formnovalidate 属性值为 true，使整个表单提交验证失效，实现加提交；进而弹出再次确认按钮(真提交)。 #### AutoFocus #### Required ### Form Labels 指定表单元素的标签 ```html OS : ``` #### 隐式 Control 属性 javascript tips：通过 control 属性改变标签对应表单元素的值 ```js const textbox = $('#label_id').control; textbox.value = '666666'; // 等同于 input.value = '666666'; ``` ### Form input #### Form Input Type ##### Form Input Text ##### Form Input Radio name 相同时, 多个 radio 组成一个 radio group ##### Checkbox ##### Search 搜索条 ##### Form Tel 电话号码 - 无输入检查 ##### Form Url ##### Form Email ##### Form DateTime date/month/week/time/datetime-local: ```js stepUp(); stepDown(); ``` ```html input.valueAsNumber input.valueAsDate ``` ##### Form Datalist ```html Choose a browser from this list: ``` #### indeterminate javascript tips：检查 type=checkbox 的状态 ```js if (checkbox.indeterminate) { doSomething(); } else { if (checkbox.checked) { doSomething(); } else { doSomething(); } } ``` #### `list` && `autocomplete` 为输入框指定智能提示数据 ```html ``` #### pattern 通过正则表达式指定输入格式 ```html ``` #### validity 返回 ValidityState 对象，拥有 ValidityState.valid 属性 ### output input 元素的镜像元素 ### textarea #### maxlength #### cols 每行可显示字符最大数 #### wrap - hard:换行时加入换行标志，**此时必须指定**`cols`属性 - soft:不加入换行标志 ### menu ### dialog ### datalist ```html style="display: none"; ``` ### Form Demo ```html Sign Up Form ``` ## Content ### Details Accordion list without JavaScript: ```html

FAQ

Why is it called an accordion menu?

Because each part of it can expand and contract, like in an accordion. If you don't know what an accordion is, just imagine a cute fluffy cat. You still won't know what it is, but at least you'll feel better about not knowing.

Huh?

Huh.

If I use an accordion menu will it make me cool?

No, not unless you're designing a MySpace profile. The {"

"} element is cool though, and you can use that for a lot of things. I'm using it on this page right below here, to show the code for each example!

``` #### Details Summary ```html

Details

Something small enough to escape casual notice.

``` #### Data Grid #### 配合 AutoComplete 属性 #### Open 默认 open=false ### Description List - `

`: description Term. - `

`: description details. ```html

Review your data

Please review the data you entered in the previous step to ensure it is correct:

First name: Marc
Last name: Simmons
Date of Birth: May 15 1990

``` ### Summary 折叠/收缩时触发 toggle 事件 ### Table ```html

Col Header 1	Col Header 2	Col Header 3
Row Header 1	Row 1 Col 2	Row 1 Col 3
Row Header 2	Row 2 Col 2	Row 2 Col 3
Summary	Col 2 summary	Col 3 summary

``` ### Mark 突出/高亮显示，无关原文作者 ### Ins Insert text ### Del Delete text ### U underline text ### Em 文章重点 ### Strong 段落强调 ### Small - 免责声明、注意事项、法律规定、版权声明 - 不改变文字样式 ### Hr 下划线 ### Progress value/max 百分比 ```html File progress: 70% ``` ### Meter #### Value #### Min #### Max #### Low #### High #### Optimum ### Wbr 软换行 ## Media ### Figure 流内容如代码、文件、图片、音频、视频 ### Figcaption figure 可拥有唯一的 0/1 个 figcaption `

figure_title

` ```html