20个html标签，写全部网页

html

1、html是什么呢？html是一套规则，浏览器认识的规则。

2、作为开发者对html的认知：
     学习Html规则
     开发后台程序：
         - 写Html文件（充当模板的作用） ******
         - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

3、本地测试
         - 找到文件路径，直接浏览器打开

4、编写Html文件
        - doctype对应关系html的规则版本，默认是html5
        - html标签，标签内部可以写属性 ====> 只能有一个 <html lang='en'> ====> 遵循某种语言，en表示汉语
        - 注释：

5、标签分类
- 自闭合标签
　　　　<meta charset="UTF-8" /> ===>指定页面编码，有也页面打开会是乱码，需要指定页面编码
- 主动闭合标签

6、head标签内部的标签

　　- <meta -> 编码，跳转，刷新，关键字，描述，IE兼容

IE兼容：<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
编码：<meta charset="UTF-8" /> ====>指定页面编码，自闭和标签，最后的 “ / ” 可以省略，但不建议省略。
跳转和刷新：<meta http-equiv="Refresh" Content="5; Url=https://www.baidu.com" />、<meta http-equiv="Refresh" Content="5" />
关键字：<meta name="keywords" content="汽车，汽车之家，汽车网，汽车图片，新闻，评测" />
描述：<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片" />

　　- title标签 ====> 用来描述页面标题

　　- <link /> 搞图标，欠
　　- <style />欠
　　- <script> 欠

　　ps：head的内部标签一般外部看不到，只有title标签是外部可查阅的
7、body标签
         - 图标，   >   < ===>空格，大于，小于号
         - p标签，段落
         - br，换行

        所有标签分为：
              块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
              行内标签： span（白板）
            标签之间可以嵌套
            标签存在的意义，css操作，js操作
            ps:chorme审查元素的使用
                - 定位
                - 查看样式
        - h系列
        - div
        - span
        - input系列 + form标签
            input type='text' ==> name属性，value="赵凡"
            input type='password' ==> name属性，value="赵凡"
            input type='submit' ==> value='提交' 提交按钮，表单
            input type='button' ==> value='登录' 按钮

            input type='radio' ==> 单选框 value，checked="checked"，name属性（name相同则互斥）
            input type='checkbox' ==> 复选框 value, checked="checked"，name属性（批量获取数据），发送到后台的数据为[]数组
            input type='file' ==> 依赖form表单的一个属性 enctype="multipart/form-data"
            input type='reset' ==> 重置

            <textarea >默认值</textarea> ==> name属性
            select标签 ==> name,内部option value, 提交到后台，size，multiple

   <select name="" id="">
        <option value="1">
            上海
        </option>
        <option value="2">
            北京
        </option>
    </select>

name,option,value

　　　size属性表示一次显示多个，multiple="multiple"表示多选
        - a标签
            - 跳转
            - 锚     href='#某个标签的ID'    标签的ID不允许重复

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content{
            height:600px;
            width:100%;
        }
    </style>
</head>
<body>


    <a href="#i1">第一章节</a>
    <a href="#i2">第二章节</a>
    <a href="#i3">第三章节</a>
    <div id='i1' class='content'>1</div>
    <div id='i2' class='content'>2</div>
    <div id='i3' class='content'>3</div>
</body>

锚

        - img
             src ==> 图片路径
             alt ==> 图片加载出错时显示
             title ==> 鼠标放置在图片上时显示说明：郁金香

<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" title="郁金香"/>

- 列表

    <ul><li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol><li>a</li>
        <li>b</li>
        <li>c</li></ol>

    <dt>第一章</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
    <dt>第二章</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>

列表的三种方式

        - 表格 ==> 标准格式如下:
            colspan = '' ==> 表示占多少行
            rowspan = '' ==> 表示占多少列

    <table>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

表格标准格式

  <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>ip</th>
                <th>port</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td colspan="2">主机1</td>
                <td rowspan="2">192.168.1.1</td>
                <td>9000</td>
            </tr>
            <tr>
                <td>主机1</td>
                <td>主机1</td>
                <td>主机1</td>
            </tr>
            <tr>
                <td>主机1</td>
                <td>主机1</td>
                <td>主机1</td>
            </tr>
        </tbody>
    </table>

colspan，rowspan例子

        - label
            用于点击文件，使得关联的标签获取光标
            <label for="username">用户名：</label>
            <input id="username" type="text" name="user" />
        - fieldset
            legend

    - 20个标签

以上为HTML的20个左右的标签，可以满足日常开发的使用。

INPUT

20个html标签，写全部网页

html