站点工具

用户工具


<markdown>
 
[\<\< 返回HTML教程](:document/html)
 
# HTML 须知
 
## 设定文档语言
```html
<html lang="zh-CN">
```
* SEO(搜索引擎优化)
* 有助于视觉障碍人士通过读屏器阅读页面
 
设定部分页面内容的语言
```html
<p>日语 <span lang="jp">ご飯が熱い</span> 的意思是什么?</p>
```
 
## 块级元素和行内元素
* 块级元素在页面中以块的形式展现 - 块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中,如 `<div>`,`<h1>`, `<p>`。
* 行内元素通常出现在块级元素中并被其它文本所包围 - 行内元素不会导致文本换行,如 `<a>`,`<em>`,`<strong>`。
 
## 属性
### 布尔属性
比如 `<input>` 被添加 `disabled` 属性后,就接收不到用户输入了。
```html
<input type="text" disabled>
<input type="text">
```
 
### 全局属性
`id`, `class`,`style`,`title` 都是是全局属性,可以被任何 HTML 元素使用。  
 
`hidden` 可用于隐藏某个页面元素。
```html
<div class="notice" hidden>请先登录</div>
```
 
`contenteditable` 全局属性可以使元素内容变成可编辑。
```html
<p contenteditable>同学们好!<p>
```
 
### 单引号或者双引号?
都行
```html
<a href="http://www.example.com">A link to my example.</a>
<a href='http://www.example.com'>A link to my example.</a>
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
```
 
## 在HTML中包含特殊字符
| 显示  | 代码 |
| :---: | :---: |
| < | `&lt;` |
| > | `&gt;` |
| " | `&quot;` |
| ' | `&apos;`|
| & | `&amp;` |
 
```html
<p>在 HTML 里,你可以用 &lt;p&gt; 来表示段落。</p>
```
 
## 注释
```html
<p>老板你真英明!<p>
<!-- <p>我老板是傻X!</p> -->
```
**快捷键**:在 VSCode 里按 `ctrl + /` 或 `command + /` 注释代码。
 
## 参考链接
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
* https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started
 
 
</markdown>
admin · 2021/09/15 12:14 · 前端基础_html_html须知.md.1631679292.txt.gz