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

主要学习了一些html语法

html 语法

标题 h1-h6

<h1></h1>
<h2></h2>
...
<h6></h6>

列表

有序列表

有序列表前面标有数字，ol可译为 ordered list

1. a
2. b
3. c

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

无序列表

此处列表前为小圆点，ul可译为 unorder list

• a
• b
• c

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

属性名+val 的列表

这是我之前没遇到过的，可以特殊的留个印象

导演：

陈凯歌

主演：

张国荣

<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>

输入

带有默认输入的

记载输入框中有默认输入，点击输入框后输入后，默认输入消失

<input placeholder="请输入用户名" value="">

可调节的范围

显示一个可调节范围的滑动按钮

<input type="range">

可输入带范围的数字

可通过上下按钮选择数字，也可直接输入

<input type="number" min="1" max="10">

输入带限制的日期

<input type="date" min="2023-1-15">

输入文本框

<textarea>hey</textarea>

多选框

A B

<p>
    <label><input type="checkbox"/> A</label>
    <label><input type="checkbox"/> B</label>
</p>

单选框

通过type为radio时不同name只能出现一次限制

A B

<p>
    <label><input type="radio" name="char"/> A</label>
    <label><input type="radio" name="char"/> B</label>
</p>

下拉选择

<p>
    <select>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</p>

用户输入，但可以给出快捷的提示

这个是我以前没有用过的，但感觉在很多网页前端见过的

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

短引用

在下拉选择中

<p>在<cite>下拉选择</cite>中</p>

代码显示

const add = (a,b) => a+b
const mult = (a,b) -> a*b

<pre><code>
    const add = (a,b) => a+b
    const mult = (a,b) -> a*b
</code></pre>

强调

重要性强调

在投资之前，一定要做风险评估

<p> 在投资之前，<strong>一定要做风险评估</strong></p>

语气或情绪强调

cats are cute animals

<p> cats <em>are</em> cute animals</p>

语义化

HTML 中的元素，属性及属性值都有某些含义

开发者应遵循语义来编写HTML

以上便是我在第一天所学的一些基本语法，都比较基础。