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

前端-html

ol 标签

ol -> orderedlist

内部的标签:li->list

demo:

        <ol>
            <!-- li -> list -->
            <li>阿凡达</li>
            <li>泰坦尼克号</li>
            <li>复仇者联盟3</li>
        </ol>

ul标签

ul -> unorderedlist

无序列表

内部的标签->li ->list

demo:

        <ul>
            <li>阿凡达</li>
            <li>泰坦尼克号</li>
            <li>复仇者联盟3</li>
        </ul>

dl标签

dl -> define nation list

demo:

<dl>
            <!-- dt -> define national title -->
            <dt>导演:</dt>
            <!-- define national description -->
            <dd>克里斯托弗·诺兰</dd>
            <dt>主演:</dt>
            <dd>小罗伯特·唐尼,克里斯·埃文斯,马克·鲁比尔</dd>
            <dd>不知道了</dd>
        </dl>

a标签

a -> anker 超链接 target="_blank":不是替换原窗口，新窗口打开。target:目标

demo:

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

img标签

img:图片标签 alt:替代性的文本，当一些图片加载失败（用户开启省流量模式。。。或者因为某些原因没有加载）可以使用一些替代性的文本来代替。

demo:

<img src="" alt="Metal movable type" /> 

audio标签

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素

这是一个HTML5的标签

demo:

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>

音频格式的MIME类型

| Format | MIME-type | | ---- | | ---- | | MP3 | audio/mpeg | | Ogg | audio/ogg | | Wav | audio/wav |

| 标签 | 作用 | | ---- | | ---- | | <aduio> | 定义了声音的内容 | | <source> | 规定了多媒体资源, 可以是多个，在 与 标签中使用 |

vudio 标签

video是视频，audio是音频

demo

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

<input>

input:输入框

type:类型

placeholder:默认的占位符

type

type = "text"

文字输入框

type = ""number

数字输入框

type = "password"

密码输入框

type = "range"

滑动

demo_1

<input type="range" min="-10" max="10">
        -----------
        <!-- 精度 -->
        <!-- 最小和最大 -->
        <input type="range" min="5" max="10" step="0.01">
        <!-- 如果要接受任何值而不论扩展到小数点后多少位，都可以为step 属性指定 any 数值。 -->
        <input type="range" min="0" max="3.14" step="any">

demo_2

<!-- 带散列标记的范围控件
    此范围控件使用的 list 属性指定<datalist> 的 ID，该 ID 定义了控件上的一系列带散列的标记。 
    其中有 11 个，因此在 0％和每个 10％标记处都有一个。 每个点均使用 <option> 元素表示，
        其元素 value 设置为应绘制标记的范围值。 -->
        <input type="range" list="tickmarks">
            <datalist id="tickmarks">
                <option value="0"></option>
                <option value="10"></option>
                <option value="20"></option>
                <option value="30"></option>
                <option value="40"></option>
                <option value="50"></option>
                <option value="60"></option>
                <option value="70"></option>
                <option value="80"></option>
                <option value="90"></option>
                <option value="100"></option>
            </datalist>

type = "date"

日期输入

demo

<input type="date" min="2019-01-01" max="2019-12-31">

type = "radio"

单选

demo:

<p>
            <label><input type="radio" name="xx"/>xx</label>
            <label><input type="radio" name="xx"/>yy</label>
        </p>

type = checkbox

多选

多行输入

demo:

<textarea></textarea>

下拉框

demo:

<p>
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </p>

用户自由输入的demo

<!-- 用户自由输入，便于用户输入为用户做一些提示 -->
        <input list="countries"/>
        <datalist id="countries">
            <option value="Afghanistan"></option>
            <option value="Albania"></option>
        </datalist>

文本类 引用

blockquote

块级引用

长引用 (引用别人的一段话)

cite:来自那

 <blockquote cite="鲁迅">
            <p>
                aaaaaaaaaaaaaaaaa
            </p>
        </blockquote>

cite

短引用

<p>
我最喜欢的书是:<cite>百年孤独</cite>
</p>

q

短引用

和cite的区别

具体的一个内容

cite:书名

code

代码引用

<code>const</code>

强调

strong

强调这个非常重要,非常严重非常紧急

demo:

<strong>做个风险评估啊</strong>

em

em -> 语气上强调

demo:

猫好<em>可爱</em>

long标签

表示内容所使用的语言

很多浏览器 如Chrome,会自动猜测用户是什么语言的，然后翻译，可能不准确，可以用long标签显示的指明一下