前端（1）HTML｜ 青训营笔记

东方既白DawnStar
94 阅读3分钟

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

1 前端技术栈

  1. HTML定义内容
  2. CSS定义样式
  3. JavaScript定义行为
  4. 网络协议，如HTML

2 前端应该关注哪些方面？

  1. 功能
  2. 美观
  3. 无障碍
  4. 性能
  5. 安全
  6. 兼容
  7. 用户体验

3 HTML基础

  1. 超文本标记语言HyperText Markup Language
  2. <img src="xxx" />标签、属性名、属性值
  3. HTML由一些元素构成。这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

3.1 HTML文件格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html>——文档类型，表示这是HTML文件；
  • <html></html>——包含整个页面的内容，称为根元素；
  • <head></head>——该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等;
  • <body></body>——该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容；
  • <title>——定义文档的标题；
  • icon
<link rel="icon" href="images/icon.png">

3.2 HTML语法

  1. 标签和属性不区分大小写，推荐小写；
  2. 空标签可以不闭合；
  3. 属性值推荐双引号包裹；
  4. 某些属性值可以省略，如required等

3.2.1 <h1>~<h6>

  • 标题
  • 数值越小，标题越大

3.2.2 列表

分为有序列表和无序列表。

    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>
    <hr>
    <ol>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ol>
    <dl>
        <dt>name</dt>
        <dd>yrx</dd>
        <dt>usr</dt>
        <dd>东方既白</dd>
        <dt>age</dt>
        <dd>18</dd>
        <dt>color</dt>
        <dd>red</dd>
        <dd>blue</dd>
    </dl>
  • ol li表示有序列表；
  • ul li表示无序列表；
  • dl dt dd表示描述列表。

3.2.3 链接

<a href="dawnstar.top" target="_blank">xxx</a>
  • 链接是一个非常重要的元素，互连网之所以互联互通，很大程度上依赖于链接。
  • target="_blank"属性使得点击链接后在新窗口打开。
  • 图片img的链接通过src属性。
    • 视频audio
    • 音频video

3.2.4 输入

image.png

    <input placeholder="请输入用户名"><br>
    <input type="range"><br>
    <input type="number"><br>
    <input type="date" min="2019-10-9"><br>
    <textarea name="hey" id="" cols="30" rows="10">dawnstar</textarea>
  • 上面是一些输入。
  • 属性min max控制输入的范围。

image.png

    <p>
        <label><input type="checkbox"> 111</label>
        <label><input type="checkbox" checked>222</label>
    </p>

    <p>
        <label><input type="radio" name="sport">111</label>
        <label><input type="radio" name="sport">222</label>
    </p>

    <p>
        <select>
            <option>111</option>
            <option>222</option>
        </select>
    </p>
  • 这是一些可供选择的输入。
  • checkbox实现多选；
  • radio实现单选，只能在name相同的选项中选出一个；
  • option实现在下拉框中选择。

3.2.5 文本处理

image.png

<em>重点</em>
<strong>非常重要</strong>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<del>删除线</del>
<ins>被插入的文本</ins>

<blockquote>块引用</blockquote>
<code>行内引用</code>

缩略语 <p>向<abbr title="1650396516@qq.com">qq.com</abbr>发邮件</p>

联系地址

<address>
    <p>author:<a href="https://github.com/dongfangjibai666">yrx</a></p>
</address>

上标下标

<sup>2</sup>
<sub>3</sub>

展示计算机代码

<code>通用代码</code>
<pre>预定义格式文本</pre>
<var>变量名</var>
<kbd>键盘输入</kbd>
<samp>程序输出</samp>

时间和日期

<time datatime="2022-5-15">2022年5月15日</time>

3.2.6 块级元素和内联元素

  • 块级元素在页面内以块的形式展现——相对于其前面的内容，它会出现在新一行，其后的内容会被挤到下一行展现，典型div；
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容，典型span。

3.2.7 内容划分

image.png

4 语义化

  • HTML的元素、属性以及属性值代表的意义，
  • 开发者追寻标签的语义，在不同情况下合理的使用正确的标签。

HTML只是传达内容的，而不是样式。

今天就到这了 ^ _^

avatar
文章
阅读
粉丝