前端与 HTML | 青训营笔记

用户779208260069
62 阅读4分钟

HTML

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

什么是HTML？什么是HTML语义化？有何作用

  • HTML5是构建Web内容的一种语言描述方式
  • 语义化含义：正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码，同时让网络爬虫更好地解析
  • 语义化作用：
    • 有利于seo(搜索引擎优化，有利于排名)有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
    • 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
    • 支持多终端设备的浏览器渲染。

HTML元素详解

  1. 开始标签（Opening tag）： 包含元素的名称（本例为 p），被⼤于号、⼩于号所包围。表示 元素从这⾥开始或者开始起作⽤。
  2. 结束标签（Closing tag）： 与开始标签相似，只是其在元素名之前包含了⼀个斜杠。这表示着元素的结尾。
  3. 内容（Content）： 元素的内容，本例中就是所输⼊的⽂本本身。
  4. 元素（Element）： 开始标签、结束标签与内容相结合，便是⼀个完整的元素。

1668761135347-0601cf82-6c5e-41f2-8e5b-721b2792c69f.png

标签嵌套

小猫咪很暴躁，给暴躁加粗

<p>我的猫咪脾气<strong>暴躁</strong></p>

1668761384715-d3e43972-2fd3-4f76-a13c-f19488ff849c.png

空元素

不包含任何内容的原色称为空元素,例如<img>标签

<img src="images/FutureR-icon.png" alt="测试图片"

一个典型的HTML文档结构

1673750023233-658a141c-ae0c-46cb-bfa7-01de2d302a0c.png 单个元素如何构成完整的HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html> 文档类型
    • 混沌初分，HTML 尚在襁褓（⼤约是 1991/92 年）之时，DOCTYPE ⽤来链接⼀些 HTML 编写守则，⽐如⾃动查错之类。DOCTYPE 在当今作⽤有限，仅⽤于保证⽂档正常读取。现在知道这些就⾜够了。
  • <html></html> - <html>元素
    • 该元素包含整个页面内容,也称为根元素
  • <head></head> - <head>元素
    • 该元素的内容对⽤户不可见，其中包含例如⾯向搜索引擎的搜索关键字（keywords）、⻚⾯描述、CSS 样式表和字符编码声明等。
  • <meta charset="UTF-8"> 该元素指定文档使用UTF-8字符编码
    • UTF-8 包括绝⼤多数⼈类已知语⾔的字符。基本上 UTF-8 可以处理任何⽂本内容，还可以 避免以后出现某些问题，没有理由再选⽤其他编码
  • <title></title> - <title> 元素
    • <title>王吉祥的网站</title>
    • 1668761806063-fed4c9c5-5dec-4501-bbd0-b7df4fa85e51.png
  • <body></body> - <body> 元素
    • 该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或者其他内容

标签分类

image.png

具体标签介绍

head标签里能有什么

head标签不展示给⽤户，它的作⽤是保存⻚⾯的⼀些元数据

1）为⽹站添加标题 <!--EndFragment--> </body> </html>

<head>
 <meta charset="utf-8">
 <title>我的测试⻚⾯</title>
</head>

2）元数据

  • 指定文档的字符编码
<meta charset="utf-8">
<!-- ISO-8859-1 -->
  • 添加作者和描述
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide complete beginners to the 
Web with all they need to know to get started with developing web sites and applications.">

各⼤⼚商都会提供⾃⼰的元数据格式或这种协议，便于内容的索引展示。例如facebook的OGP。

  • 站点⾃定义图标，将 favicon.ico⽂件放⾄同级⽬录下
<link rel="icon" href="favicon.ico" type="image/x-icon">
  • link标签还可以引入css和js
<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js" defer></script>

重点标签

行内标签和块级标签 ⾏内标签：<button><input> <select><textarea><span>

  • 展示标签
    • <div>,<span>,<video>,<audio>,<iframe>,<img>,<table>,<svg>,<canvas>
  • 交互标签
    • <input> <textarea> <button> <video> <select>

常见标签用法

列表标签

<!-- 有序列表 -->
    <h2>世界电影票房排行</h2>
    <ol>
        
        <li>阿凡达</li>
        <li>钢铁侠</li>
        <li>战狼</li>
    </ol>
    <!-- 无序列表 -->   
    <h2>购物清单</h2>
    <dl>
        <li>🍇</li>
        <li>🍉</li>
        <li>🍊</li>
  	</dl>

    <!-- 通过关键信息描述 -->
    <h2>战狼</h2>
    <dl>
        <dt>导演</dt>
        <dd>吴京</dd>
        <dt>主演</dt>
        <dd>吴京</dd>
        <dd>王吉祥</dd>
        <dd>夏加成</dd>
  	</dl>

1673752080882-ae4b1009-546a-4ae5-8dbb-d14b1581e0b1.png

图片标签

<img src="https:www.baidu.com/1.jpg" alt="Metal movable type" width:"400" />

<!-- alt="Metal movable type"  -->
当图片加载不出来的时候默认以一个替代性的文本代替

音频文件

<!-- 音频文件 -->
    <div>
        <audio src="xxx" controls></audio>
    </div>
<!-- controls带有浏览器默认控件的video元素 -->

视频控件

<!-- 音频文件 -->
    <video src="xxx" controls></video>
<!-- controls带有浏览器默认控件的video元素 -->

输入功能

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

选项框

<!-- 多选功能 -->
    <div>
        <input type="checkbox" id="boy" name="people" />
        <label for="boy">男</label>
        <input type="checkbox" id="girl" name="people" />
        <label for="girl">女</label>

    </div>

<!-- 通过label所对应的值来决定多选还是单选 -->
 <!-- 单选功能 -->
    <div>
        <!-- radio标签组的形成,需要所有的radio类型的Input name值相同 -->
        <input type="radio" id="boy" name="sex" value="boy"/>
        <label for="boy">男</label>
        <input type="radio" id="girl" name="sex" value="girl"/>
        <label for="boy">女</label>
    </div>

下拉框功能

<div>下拉框功能</div>
    <select>
        <option value="student">学生</option>
        <option value="teacher">老师</option>
        <option value="admin">管理员</option>
    </select>

文本类标签

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<!-- 斜体字 -->
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<!-- q为双引号引用 -->
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<!-- 字体加粗 -->
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

1673755300296-9904af36-79d9-467c-9590-c0ec2252a40e.png

avatar
文章
阅读
粉丝