前端与 HTML | 青训营笔记

用户5243309071516
312 阅读1分钟

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

1.png

前端要具备的属性：美观、安全、功能、性能、兼容（不同设备都可以使用）、无障碍（所有群体都可以使用，eg：色盲适用吗）、体验

HTML：HyperText Markup Language 超文本：图片、文字、链接等 标记语言：标签，如<p>xxx</p>

  • 标签有不是成对出现的，如<img src="xxx.png" />，/ 直接简写，src为添加属性
<!doctype html> //html版本
<html>//根标签
    <head>//页面源数据，无需呈现给用户的部分
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>//呈现给用户的
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

对应的dom树如下：

2.png

  • 标题 QQ截图20230115112908.png

  • 列表

QQ截图20230115113049.png

  • 链接 href对应超链接地址，title鼠标悬停在超链接上面时显示的信息，target点开链接新开页面还是将原有页面覆盖（默认新开页面）

欲练葵花宝典，需引刀自宫

<a href="https://www.mozilla.org/" title="The Mozilla homepage">欲练葵花宝典，需引刀自宫</a>
  • 图片音频
<img src="xxx" alt="mmmm" width="400" />//alt是图片加载失败显示的内容
<audio src="xxx" controls></audio>//controls默认显示控制控件
<video src="xxx" controls></video>
  • 输入 <textarea>输入较长内容时使用，可以多行输入，输入框的大小也可以随意调整 QQ截图20230115114622.png
  • 选择

QQ截图20230115115010.png

image.png

  • 引用 <blockquote>块级引用
    <cite>短引用，一般是书名或是章节 <q>短引用，一般是具体的内容
    <code>短代码引用 <pre><code>多行代码引用
    image.png
  • 文字 <em>斜体 <strong>加粗

语义化HTML的重要⭐
代码可读性、可维护性、搜索引擎优化、无障碍性

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容
avatar
文章
阅读
粉丝