前端与HTML | 青训营笔记

Mingcomity
99 阅读3分钟

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

前端与HTML

一.HTML是什么

HyperText Markup Language

HyperText : 图片、标题、链接、表格

Markup Language ： <h1> 文章标题</h1>

二.DOM 树

< ! doctype html> <!-- 为浏览器指定这个页面的文档类型 -->
<html> <!-- 必须以 <html> 标记开始我们的页面，以</html>标记结束 -->
    <head> <!-- 与当前页面内容无关、但承载一些对页面描述的标记 -->
        <meta charset = " UTF-8"> <!-- 告诉浏览器的信息;charset用于指定字符编码 -->
        <title>页面标题</title> <!-- 在标签上呈现出来的 -->
    </head>
    <body> <!-- 与页面内容相关的元素 -->
        <h1>
            一级标题
        </h1>
        <p>
            段落内容
        </p>
    </body>
</html>

三.HTML语法规范

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、meta
  • 属性值推荐双引号包裹
  • 某些属性值可以省略，比如 required、readonly
  • HTML5 的规范中，自闭合标签不加斜杠，但兼容斜杠
  • XHTML要求自闭合标签必选有斜杠

四.HTML5标签

1.标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签

<p>这是一个段落</p>

3.链接标签

<a href="https://www.baidu.com">百度一下</a>

常见属性：

属性名值作用
hrefURL链接跳转的目标URL
target_blank
_parent
_self
_top
framename		规定在何处打开目标 URL。
仅在 href 属性存在时使用。

4.列表标签

4.1无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

4.2有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

4.3自定义列表

<dl>
    <dt>+</dt><dd>列表项</dd>
    <dt>+</dt><dd>列表项</dd>
    <dt>+</dt><dd>列表项</dd>
</dl>

5.分组标签

<div>内容1</div>
<span>内容2</span>

6.表格标签

<table>
    <tr>
        <th>表头一</th>
        <th>表头二</th>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
</table>

7.图像标签

<img src="#">

8.音频标签

<audio src="#" controls></audio>
<!-- controls 显示浏览器默认播放控件 -->

9.视频标签

<video src="#" controls></video>
<!-- controls 显示浏览器默认播放控件 -->

10.语义标签

image-20220724144218437.png

标签描述
<header> 规定文档或节的页眉
<nav> 定义导航链接
<main> 规定文档的主内容
<article>定义文档的文章
<aside>定义页面主内容以外的内容
<footer>定义文档或节的页脚，参考链接、版权等
<section>定义文档的节
<figure>规定自包含内容，比如图示、图表、照片、代码清单等
<figcaption>定义
元素的标题
<details>定义用户能够查看或隐藏的额外细节
<summary>定义
元素的可见标题
<time>定义日期/时间

11.表单标签

<input type="text" placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="2">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>

<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

12.框架标签

<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>

13.其他标签

标签属性描述
<blockquote cite="#"></blockquote>引用的地址长引用
<cite></cite>短引用（作品名字和章节）
<q></q>短引用（具体的引用,有双引号）
<code></code>用于引用短代码有关
<pre><code></code></pre>用于引用长代码有关
<strong></strong>用于提示这段文字很重要（文意重要）
<em></em>用于提示一段话内中的重点（语气重音）

五.HTML语义化

1.什么是HTML语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang 属性表示内容使用的语言

2.语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

3.如何做到语义化

  • 了解每个标签的属性的含义
  • 思考什么标签适合描述这个标签
  • 不使用可视化工具生成代码

六.个人思考

第一天上字节青训营基础班的录播课，虽然刚开始课程视频有大大小小的问题，不过好在修复的及时。

由于第一天的算是基础课，所以也都比较简单基础些，不过讲到自己的收获也还是有的，在这之前对语义化的了解是比较少的，现在看来是需要进一步加强了，总之继续加油。

七.引用参考

  1. 学习HTML5这一篇就够了

avatar
文章
阅读
粉丝