【青训营前端进阶班笔记】第一节前端与HTML

什么是前端？

一句话总结：使用web技术栈解决多端图形界面交互问题的工程师

前端的边界随着技术的发展正在不断拓宽

HyperText Markup Language

<h1></h1>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

有序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

多级列表

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

<a href="https://www.baidu.com">百度一下</a>

<img src="" alt=""/>

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

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

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

滚动条

<input type="range">

数字选框

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

日期选框

<input typr="date" min="2018-02-10">

打字域

<texterea>Hey</texteara>

复选框

<p>
    <input type="checkbox">
    <input type="checkbox">
</p>

单选框

<p>
    <input type="radio" name="sport">
    <input type="radio" name="sport">
</p>

下拉选择

<p>
    <select>
        <option></option>
        <option></option>
        <option></option>
    </select>
</p>

当你希望用户打字输入，但又想提供一些提示时

<input list="contries">
<datalist id="countries">
    <option></option>
    <option></option>
    <option></option>
</datalist>

<blockquote cite="http://.....">
 <p>xxxxxxxxxxxxxxxxx</p>
</blockquote>

（短）cite引用表示引用某个标题，q表示引用之前讲过的内容

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

代码code标签，包裹pre标签可以写多行代码

<p><code>const</code>声明创建一个只读的常量。 </p>
<pre><code> const add (a,b)=a b; const multiply (a,b)=a b; </code></pre>

strong和em都表示强调，区别在于strong突出一个情况的紧急和严重，而em是文字上的关键词句

<p>在投资之前，<strong:>一定要做风险评估 </strong>。</p> <p>Cats <em>are</em>cute animals.</p>