前端与 HTML | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

什么是 HTML

超文本标记语言：HyperText Markup Language
- 超文本（HyperText）：即除文本外，还包含图片、视频等信息表达形式
- 标记语言（Markup Language）：即使用标签化的语言（如<p>段落</p>）
  - 在标签化的语言中，可以在标签中添加属性，如<p color="xxx"></p>中的color就是属性名、xxx就是属性值
  - 当某个标签中不需要嵌套其他标签时，可以省略结束标签，如<br />
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>一个段落</p>
    </body>
</html>
```
对于上述的一段简单的 HTML 代码，其中：
1. <!DOCTYPE html>用于说明使用的 HTML 版本
2. <html></html>是页面的根标签
3. <head></head>用于存放页面的源数据
4. <body></body>用于存放需要面向用户展示的内容
文档对象模型（DOM）树

再次以上述代码举例，其对应的 DOM 树如下：
HTML 语法
- 标签和属性不区分大小写，推荐使用小写
- 空标签可以不闭合，如<input />
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，如required、readonly

标签

列表

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

无序列表

<ul>
    <li>xyz</li>
    <li>abc</li>
    <li>!@#</li>
</ul>

key-value

<dl>
    <dt>xxx:</dt>
    <dd>xxx1</dd>
    <dt>yyy:</dt>
    <dd>yyy1</dd>
    <dd>yyy2</dd>
    <dd>yyy3</dd>
</dl>

链接

<a href="http://example.com" target="_blank">链接</a>

输入

输入提示：<input placeholder="提示文本" />

条状选择：<input type="range" />

范围输入：<input type="number" />

日期输入：<input type="date" min="2000-01-01" />

多行输入：<textarea>多行输入文本</textarea>

单选输入：

<label><input type="radio" name="xxx">a</label>
<label><input type="radio" name="xxx">b</label>

多选输入：

<label><input type="checkbox" name="xxx">a</label>
<label><input type="checkbox" name="xxx">a</label>

下拉选择：

<select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

辅助输入：

<input list="lists" />
<datalist id="lists">
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
</datalist>

posted @ 2023-01-16 21:01 SRIGT 阅读(7) 评论(0) 编辑收藏举报来源

刷新页面返回顶部