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

本次课程重点内容

HTML

HTML

常用的HTML标签：标题标签、序列标签、链接标签、img标签、input标签、文本类标签

标题标签
标题标签有h1~h6，可以改变标签字体大小，h1最大h6最小

<div id="app">
  <h1>Hello Word</h1>
  <h2>Hello Word</h2>
  <h3>Hello Word</h3>
  <h4>Hello Word</h4>
  <h5>Hello Word</h5>
  <h6>Hello Word</h6>
</div>

序列标签
序列标签分为：有序标签(ol/li)和无序标签(ul/li)。
有序标签(ol/li)：

<div id="app">
  <ul>
    <li>Hello word</li>
    <li>Hello word</li>
    <li>Hello word</li>
  </ul>
</div>

无序标签(ul/li):

<div id="app">
  <ol>
    <li>Hello word</li>
    <li>Hello word</li>
    <li>Hello word</li>
  </ol>
</div>

链接标签
可以用<a>标签来跳转页面

<div id="app">
    <a href="https://juejin.cn/">稀土掘金</a>
</div>
<div id="app">
    <a href="https://juejin.cn/" target="_blank">稀土掘金</a>
</div>

使用target="_blank"属性可以在新窗口打开页面不再更替原有页面。

img标签
用img标签可以加载图片

<div id="app">
   <img scr="" alt=""/>
</div>

src:获取图片地址
alt:图片因某些原因无法加载时，可以显示alt中的文本

input标签
让用户提供一些用户信息。

<div id="app">
  <input placeholder="请输入用户信息">
  <input type="range" >
  <input type="number" min="1" max="10">
  <input type="date" min="2023-01-16">
  <textarea>hello</textarea>
</div>

placeholder:默认值
type:可以通过该属性来改变input类型

文本类标签
<blockquote>:快捷引用，一般也叫长引用。其中的cite属性可以显示引用的来源。
<cite>:短引用，一般用来引用某个章节后者作品名字。
<q>:一般用来引用一些具体内容。
<code>:表示代码。
<strong>:表示强调，更突出这个东西非常重要、紧急、严重。
<em>:同样表示强调，但相对于strong更多在于语气上的强调。

HTML内容划分

<header>:可以将一些logo、导航放到header标签中。
<nav>:导航标签
<main>:将主要内容放入main标签中。
<article>:可以将内容放入article标签中，一个页面可以有多个或者0个article标签。一般用于博客条目、报纸文章、论坛帖子、用户评论
<aside>:可以将跟内容相关但不是主要的内容放入aside标签中。
<footer>:一般将版权信息放入footer标签中

前端与 HTML | 青训营笔记

本次课程重点内容

HTML

HTML内容划分