前端与HTML | 青训笔记

桃乐茜
73 阅读3分钟

前端与HTML | 青训笔记

这是我参与 [第五届青训营] 笔记创作活动的第一天

HTML是一种超文本语言，用各种标签实现。

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>
    <h1>一级标题</h1>
</body>
</html>

DOM树

浏览器解析html代码所解析出的DOM树结构，即将html代码转换为一个树形结构，树形结构的每个节点就称为一个DOM节点

dom树.png

HTML语法

  • 标签和属性不区分大小写，但是通常使用小写
  • 空标签可以不用闭合，例如input,meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required、readonly

标题标签

默认一级标题最大，往下依次减小

<h1></h1> ~ <h6></h6>

列表标签

列表标签有三类：有序标签、无序标签、key-value形式列表。

有序列表：在列表中默认加数字标号排序,使用ol标签包裹li标签实现

<ol>
    <li>100</li>
    <li>90</li>
    <li>80</li>
</ol>

无序列表：列表无顺序排列，使用ul标签包裹li标签实现

<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>苹果</li>
</ul>

key-value形式列表：即一个属性名后跟多个属性值。使用dl``dt``dd标签实现 dl标签包裹dt和dd形成列表，其中dt后面跟属性名,dd后面跟属于该属性名的属性值

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>

链接标签 链接使用<a href="" target=""></a>标签实现

href属性后面跟跳转网页的地址。

target属性后面跟跳转方式。_blank表示新窗口打开，默认为原有窗口打开 多媒体标签 图片标签：<img src="" alt="" width="100">

src属性后面跟图片地址，alt表示替代性文本，当图片加载失败时显示该属性中设置的文本，width表示所设置图片的宽度

音频标签：<audio src="" controls></audio>

视频标签：<video src="" controls></video>

src属性后跟音频路径，controls表示默认显示播放控制

表单类标签

input和textarea

其中最简单的标签为input标签<input type="text" placeholder=""> placeholder属性表示占位符，即当表单内没有输入时默认显示的文字。 更改type值可以输入文字以外的东西。

<input type="range">页面显示一个滑动条

<input type="number" min="1" max="10">指定用户输入数字，并设定最小数字和最大数字

<input type="date" min="2002-01-15">表示一个日期选择，可以设定最小日期

输入多行文字时可以选用textarea标签，默认可以调整输入框大小

实现选择的标签

依旧可以通过input标签实现单选和多选

单选：将type值设为radio，通过name属性作为标志实现在哪几个选项中进行单选，checked属性设置在哪个选项中则表示默认选择此选项

性别:<input type="radio" name="sex" id="">男 
     <input type="radio" name="sex" id="" checked>女

多选：将type值设置为checkbox，通过name属性标志在哪几个选项中进行多选，checked为默认选中

多选框: <input type="checkbox" name="type" id="" checked>类型1 
        <input type="checkbox" name="type" id="">类型2

下拉菜单：使用select 包裹 option实现

<select name="" id="">
    <option value="">成都</option>
    <option value="">重庆</option>
    <option value="">广州</option>
</select>

用户输入值时给出提示选择：不限制自由输入，对datalist里的选项可以快捷输入

<input list="countries">
<datalist id="countries">
    <option value="">成都</option>
    <option value="">重庆</option>
    <option value="">广州</option>
</datalist>

文本类标签

引用： 快捷引用：表示比较长的引用，一般用于直接引用别人的一段话,cite属性后跟文章的引用地址

<blockquote cite="">
    <p>海上升明月，天涯共此时</p>
</blockquote>

短引用：通过cite和q标签实现,cite通常指引用名字，q通常是引用的具体内容

<p>第一章讲的是</p><cite>HTML语法</cite>

代码引用：利用code标签引用起来 引用短代码：

<p><code>let a = 0;</code>是变量声明赋值操作</p>

引用长代码：

<pre><code>
    let a = 0;
    let b = 1;
</code></pre>

加粗强调：使用strong标签，表示强调的事情

斜体强调：使用em标签，表示语气的重音

页面内容划分

QQ图片20230115174149.png

HTML语义化

HTML中的元素、属性以及属性值都拥有某些含义，开发者应该遵循语义来编写HTML

语义化的好处：

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
avatar
文章
阅读
粉丝