html学习

标签的作用：

1.有利于seo的优化，让你的搜索排名更靠前，广告除外
2.构建页面的结构，通过读取html标签，浏览器可以大概了解代码的每一部分具体代表了什么，以及这部分应该发挥怎样的作用

---

标签之标题

标题标签一共有6总，从1到6依此减小

快捷生成标题：hn*m,快速生成m个hn级别的标签

改变标签位置的常用方法

    <h1 align="left">一级标题</h1>
    <h2 align="center">二级标题</h2>
    <h3 align="right">三级标题</h3>

---

标签之段落

我们的小段文字就用<p>来表示，当我们要标记大段文字的时候我们需要使用<blocquote>

---

标签之图片

图片标签img

img是图片标签，单标签！！并且每个img只承载一张图片

<img src="路径" alt="当图片无法显示的时候显示文本">

关于图片的问题：

我们人为规定宽度width后图片会按照比例缩放，我们一般不指定高度，因为高度改变后可能改变图片的比例

---

图片的路径问题

<img src="../父级关系演示.jpg" alt="">

<img src="image/子集示例.jpg" alt="200px">

---

超文本链接

文字作为链接

<a href="https://www.baidu.com/"> 可以是字</a>

图片作为链接

 <a href="https://www.baidu.com/"> 
        <img src="超文本链接图片.jpg" alt="100px">
    </a>

默认情况下
1.没有访问过的为蓝色
2.访问过是紫色
3.点击显示红色

---

标签之文本

常用文本标签
1.em定义着重文字
2.b定义出题文字
3.i定义斜体文字
4.strong定义加重语气
5.del定义删除字
6.span元素没有特定的含义
可以嵌套！！！

    注意：文本和段落标签不一样，段落代表一段文本，而文本标签一般表示文本词汇

---

有序列表ol和无序列表ul

有序列表ol

<ol type="1">
        <li>1</li>
        <li>2</li>
    </ol>

    <ol type="A">
        <li>1</li>
        <li>2</li>
    </ol>

    <ol type="a">
        <li>1</li>
        <li>2</li>
    </ol>

有序列表的嵌套

有序列表的嵌套
    <ol>
        <li>水果</li>
        <li>
            蔬菜
            <ol>
                <li>辣椒</li>
                <li>黄瓜</li>
            </ol>
        </li>
        <li>肉类</li>
    </ol>

无序列表

<ul>
        <li>苹果</li>
        <li>梨子</li>
        <li>橘子</li>
    </ul>

type:
1.disc默认实心元
2.circle空心⚪
3.square 小方块
4.none 不显示

无序列表一般的作用是配合css用来做导航

快捷键：ul>li*n(n是数量，自己决定)

---

表格 table

<!--
    1.table表格
    2.tr行
    3.td列
-->

    <table>
        <!--一个tr代表一行，两个tr代表两行-->
        <tr>
            <!--td代表列，有一个单元格代表一列，两个单元格代表两列,一般td的值是等同的-->
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>d元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td></td>
            <td>单元格</td>
        </tr>
    </table>

快速生成表格

生成表格table>trn>tdm{信息}

---

table的合并

1.水平合并colspan
2.垂直合并rowspan

body部分的代码

    <p>合并单元格6和7</p>
    <p>合并单元格15和20</p>
    <p>16 17 21 22的合并!!,以左上为基准</p>
    <p>水平合并保留左边删除右边</p>
    <p>垂直合并保留上删除下</p>
     <table border="1" width="600" height="400">
         <tr>
             <td>单元格1</td>
             <td>单元格2</td>
             <td>单元格3</td>
             <td>单元格4</td>
             <td>单元格5</td>
         </tr>

         <tr>
             <td colspan="2">单元格6</td>
             <td>单元格8</td>
             <td>单元格9</td>
             <td>单元格10</td>
         </tr>
         <tr>
             <td>单元格11</td>
             <td>单元格12</td>
             <td>单元格13</td>
             <td>单元格14</td>
             <td rowspan="2">单元格15和20</td>
         </tr>
         <tr>
             <td colspan="2" rowspan="2">单元格16</td>
             <td>单元格18</td>
             <td>单元格19</td>
         </tr>
         <tr>
             <td>单元格23</td>
             <td>单元格24</td>
             <td>单元格25</td>
         </tr>
     </table>

---

from表单

一个表单一般包含输入框和按钮等等，输入框和按钮成为控件。表单就是容器，容纳各种空间

name是表单的名字
action是服务器地址
method是提交给后台的方法
submit代表提交按钮

<form action="" method="get">
        <input type="" name="" id="">
        <input type="submit" name="" id="">
    </form>

一个完整的表单应该包含三个基本组成部分：

表单标签
表单域
表单按钮

method post和get区别

1.get提交的数据url看得到,post提交的看不到
2.get用于提交少量数据,post用于提交大量数据

---

快级元素和内联元素区别

---

html5新增的部分标签

    <header>头部</header>
    <nav>导航</nav>
    <section>章，节等等</section>
    <article>代表完整的一块，比如一篇博客文章</article>
    <aside>侧边栏</aside>
    <footer>底部</footer>