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

下面是我在学“前端与HTML”这节课，做的笔记：

首先HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。小知识：html不区别大小写

然后再看一下html语言的基本结构：

 <head>
     <meta charset="UTF-8">
     <title>我的第一个html页面</title>
 </head>
 <body>
</body

一块一块的看：下面的是我引用开始学习 HTML - 学习 Web 开发 | MDN (mozilla.org)的原话，我觉得可以很清晰的了解html的标签组成

[剖析一个 HTML 元素]

让我们进一步探讨我们的段落元素：

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

“!DOCTYPE html”这个标签的功能是告诉浏览器应该用什么规则去编译这个文件。

“html”标签包裹了完整的页面。

“head”标签包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，比如CSS样式。

    <meta charset="UTF-8">这个是字符编码

    <title>我的第一个html页面</title>这个是网页标题

    <h1>字体排印学</h1>


h1-h6是一级到六级标签，字体从大到小

呈现效果：

![7.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f631c6736f6b4016b5cb14c1a07c5cdd~tplv-k3u1fbpfcp-zoom-1.image)

<h2>世界电影票房排行榜</h2>
<ol><!--有序列表-->   <ol>标签是有序列表，会自动排序
    <li>阿凡达</li>
</ol>

呈现效果：

<h2>购物清单</h2>
<ul><!--无序列表-->    <ul>是无序列表
    <li>草莓</li>
    <li>西瓜</li>
</ul>

呈现效果：

<h2>霸王别姬</h2>
<dl><!--定义列表-->
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
</dl>

呈现效果：

<a href="https://www.bytedance.com" target="_blank" title="字节跳动官网"> 字节跳动传送门</a><br>

“_blank ”是将会新建标签来打开网页
而title 属性是，当你将光标放在链接上时，它给予你的提示信息。

<img src="" alt="Metal movable type" width="400"><br>

alt 是当图片无法正常显示时，显示的文字（比如无图模式）

<audio src="" controls></audio><br>

controls 使用浏览器默认的音频控件样式

video标签

<video src="" controls></video><br>

下面是input标签的属性的多个值

<input placeholder="请输入用户名"><br>
<input type="range"><br>
<input type="number" min="1" max="10"><br>
<input type="date" min="2020-10-20"><br>

标签 textarea会创建一个区域来让用户输入

请输入你的答案

下面的多选框，单选，下拉选择的

<p>
    你都喜欢什么水果呢？请选择：
    <label><input type="checkbox">苹果</label><!--多选框-->
    <label><input type="checkbox">西瓜</label>
</p>
    
<p>
    你最喜欢什么水果呢？请选择：
    <label><input type="radio" name="fruits">苹果</label><!--单选框-->
    <label><input type="radio" name="fruits">西瓜</label>
</p>

单选框，实现是通过type等于radio，name都等于fruits

<p>
    <select><!--下拉选择-->
        <option>苹果</option>
        <option>西瓜</option>
        <option>木瓜</option>
    </select>
</p>

这个input标签可以根据list属性找到id是list的datalist标签，实现的效果是当用户在输入时，会有补全效果；

<input list="countries">
<datalist id="countries">
    <option>中国</option>
    <option>美国</option>
    <option>英国</option>
</datalist>

下面展示的标签是引用标签，他们的字体会区别于常规字体

<blockquote cite="https://www.bytedance.com">
    <p>
        字节跳动
    </p>
</blockquote>

这个cite属性，表示p标签里的内容是从该网站引用的

下面的cite标签也是表示引用，q标签也是；不过cite标签常用于目录或标题，而q表示常常是具体的内容

<p>
    我最喜欢的一本书是<cite>小王子</cite>。<br>
    我们讲过<q>字符串是不可变量</q>
</p>

下面的code标签（用于代码）、pre标签都会改变字体以示区别

<code>const</code>
<pre>const</pre>
<pre><code>const</code></pre>

下面的strong标签和em标签表示强调，前者会使字体变大，后者会使字倾斜

    <p>投资<strong>有风险</strong>，入局<em>需谨慎</em></p>

然后老师给了一个页面划分的大概位置：

然后是“语义化是什么？”“谁在使用我们写的html”“语义化的好处”“如何做到语义化”

前端与 HTML | 青训营笔记

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

下面是我在学“前端与HTML”这节课，做的笔记：

[剖析一个 HTML 元素]

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