博学谷学习记录 | 学习总结，用心分享 | 前端学习基础之HTML标签

过去的一周是我在黑马程序员学习前端的第一周，在此为第一周的学习做一下总结。

这一周的学习内容主要涉及两个部分----HTML和CSS的基础知识。HTML是网页的骨架，CSS则是网页的修饰符，对于一张优美的静态网页来说，二者是不可或缺的（虽然CSS里也有animation之类的动画效果，但和JS比起来可以说是小巫见大巫了）。

HTML，Hyper Text Markup Language，即超文本标记语言，一种标记语言，而非编程语言。乍一看是个晦涩难懂的生词，但它的名字却能很好的反映出其特点。

其实这种语言的存在并不稀奇，而是历史发展的必然产物，如同现代的“书同文、车同轨”。首先，计算机是不能理解人类世界里的书写规范，因此人类想要和电脑进行交流就必须定下来一系列的规则；其次，这些规则不光要计算机能读懂，而且也要符合人类的阅读习惯；再者，这些规则最终的目的是要在全世界浏览者眼里显示同样的内容，由此便诞生了HTML。

HTML部分可分为“输入部分”和“输出部分”。

输入部分主要讲了文字、图片、音频、视频、超链接、列表、表格等标签，

1.文本标签中有标题h1~h6六级标题和段落p标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <hr>
    <p>独占一行</p>

但有时“光秃秃”的一段文字并不能解决人们的表意需求，于是又引入了“格式化”标签，主流的格式化标签如下，

    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>斜体</i>
    <em>斜体</em>
    <s>删除线</s>
    <del>删除线</del>
   

字母标签和单词（简写）标签有着相同的表达效果，但单词（简写）标签常用字非常重要的数据表达处。

2.图片标签为<img>标签，这是一个单标签，但标签内可以写很多内容，这些内容又被称为属性（property），例如 src --图片路径、alt--图片无法加载时的提示语、title--图片标题、width和height--图片尺寸。

<img src="./images/cat.gif" alt="一只猫" title="一只猫" width="200" height="" >

图片路径可分为绝对路径和相对路径，绝对路径可以是完整的网址，也可以是Windows上从盘符开始的路径或者是macOS上/username开始的路径，相对路径则是基于html而言的，可以是上（上）一级的文件，也可以是当前一级（或以下）的文件路径。

3.音频、视频标签为<audio></audio> <video></video> 的双标签，由于音视频是动态的，因此还涉及到几个静态图片没有的属性，比如控制组件controls、自动播放属性autoplay、循环播放属性loop等。而且对于视频来说还有一个重要的属性--静音属性，muted，加上这个属性之后，播放视频的时候默认静音播放，是一个非常有用的属性，鉴于不同浏览器对视频声音的不同处理，为了保险起见，还是加上为好。

    音频
    <br>
    <audio src="./images/music.mp3" controls autoplay loop></audio>
    <br>
    视频
    <br>
    <video src="./images/video.mp4" controls muted width="400"></video>
    <br>

4.超链接标签是为了跳转内容准备的，点击之后就会转换到另一个页面去，需要注意的是若目前还未想好跳转链接，则可以用“#”来替代，target属性则是可以帮助我们选择是新打开一个网页，还是在原网页上进行跳转，默认是在当前页面跳转，_blank则是跳转的新的页面。

5.列表分为有序列表、无序列表和自定义列表。无序列表有默认的 · 作为每一项内容的引导符，而有序列表则默认数字作为每项内容的引导符。

    列表<br>
    ul ol 只能放 li , li 里面可以放任意内容
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    <ol>
        <li>97</li>
        <li>85</li>
        <li>70</li>
        <li>65</li>
    </ol>
    <br>

    自定义列表 <br> 
    dl 里只能放 dt dd, dt dd 里面可以放任意内容
    <dl>
        <dt>帮助中心</dt>
        <dd>用户管理</dd>
        <dd>订单操作</dd>
    </dl>

6.表格的话总体来说比较复杂，除了有不同行列的格子外，还会涉及到同一行或者同一列格子的合并问题，如果是跨行合并则用rowspan属性，如果是跨列合并则用colspan属性，并遵循“留左留上”的原则，如果不及时删除合并格子中右侧或者下侧的数据，那么这些数据就会被挤到一边并占据其他数据的位置，而其他数据则会超出原来表格的范围。

表格<br>
    table 表格整体，可以包裹 tr <br>
    tr 行，可以用于包裹 td <br>
    td 表格单元格，可以用于包裹内容 <br>
    <table border="1" width="300" height="200"> width height 放在 css 里设置，最好不放在属性里
        <thead> thead 跟程序员没关系，但可以让浏览器更好地执行
            <tr>
                <th>name</th>
                <th>credit</th>
                <th>comment</th>
            </tr>
        </thead>
        <tbody> tbody 跟程序员没关系，但可以让浏览器更好地执行
            <tr>
                <td>name1</td>
                <td rowspan="2">100</td>
                <td>123456</td>
            </tr>
            <tr>

                <td>name2</td>
                <td>99</td>
                <td>123457</td>
            </tr>
        </tbody>
        <tfoot> tfoot 跟程序员没关系，但可以让浏览器更好地执行
            <tr><td>summary</td><td>123445</td><td>123456</td></tr>
        </tfoot>
    </table>

说完输出部分，下面则是输入部分，输入部分主要是表单input、按钮button、选择器select、文本域textarea以及标签label。

表单input有三类，分别为文本框（text、password）、选择框（radio、checkbox）、按钮（file、submit、reset、button），通过type属性来控制。

Input
    <br>
    Textfield Example<input type="text" placeholder="username">
    <br>
    Password Example<input type="password" placeholder="password">
    <br>
    Radio Example <input type="radio">
    <br>
    Gender <input type="radio" name="sex"> Male <input type="radio" name="sex"> Female
    <!-- checked 默认选择 -->
    Gender <input type="radio" name="sex"> Male <input type="radio" name="sex" checked> Female 
    <br>
    Checkbox Example<input type="checkbox">
    <br>
    Upload Example<input type="file" name="uploadfile">
    <br>
    Multiple Example<input type="file" multiple>
    <br>
    Submit Example <input type="submit">
    <br>
    Reset Example <input type="reset">
    <br>
    Button Example <input type="button" value="what?">
    <br>

按钮button的三个功能和表单中的按钮功能类似，也是有submit、reset、button三个不同的属性值，submit的功能是提交数据，reset的功能是重置全部已填写的数据，button的功能可由开发者自定义。

button
    <br>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
    <button type="button">none</button>
    <br>

选择器select为下拉选择，option标签里写选项。

    <select name=" ">
        <option >Beijing</option>
        <option >Shanghai</option>
        <option >Guangzhou</option>
        <option >Shenzhen</option>
    </select>

文本域textarea是一种常见的文本框，例如这边文章最下方封面&摘要里就有textarea，需要注意的是即使在属性rows和cols里填上了相应的值，指明了文本行数（高度）和列数（宽度），但文本域仍然可以自由调节大小，因此应该使用 resize: none 来禁止文本域的自由拉伸功能。

标签label为界面中某个元素提供了说明，通常将label与input关联到一起，可以增大用户点击区域。

举个例子，如果仅仅是将文本写在input标签后面，

<input type="radio" name="sex"> Male

则无法通过点击文本选中Male的单选框，

如果将label中的说明设为Male，并与input标签关联在一起，则可以通过点击Male文本来选中单选框。

label的使用方式有两种，一种是将自身属性for的属性值设置为关联标签的id值，另一种是将关联标签包裹在label标签内。

<input type="radio" name="sex" id="man"> <label for="man"> Male </label> 
<label><input type="radio" name="sex"> Female</label>