HTML基础

1.初识前端

文本文档编写，后缀.html

<html>
    <head>
        这是头部
    </head>

    <body>
        这是主体
    </body>
</html>

2.前端工具

  • 开发工具：VSCode （安装如下扩展）
    • Chinese(Simplified)(简体中文)
    • open in browser
  • 浏览器：Google Chrome

3. VSCode快捷键

  • ! + 回车 ：生成H5 框架
  • shift + alt + A :注释
  • shift + alt + ⬆：向上复制一行
  • shift + alt + ⬇：向下复制一行
  • alt + ⬆：向上移动一行
  • alt + ⬇：向下移动一行

4. H5简介与基础框架

<!DOCTYPE HTML>
<html>  <!-- 定义html文档 限定文档内容 -->
    <HEAD>  <!-- 文档头部 给开发者看的 -->
        <meta charset="UTF-8">  <!-- 文档属性 -->
        <title> 标题 </title>   <!-- 定义文档的标题 显示在浏览器的头部 -->
    </HEAD>

    <body>  <!-- 文档的主体 给用户直接看到 -->
        Hello HTML

    </body>

</html>

5. 标题标签

H1 --> H6 一级标题 --> 六级标题

快捷键：H$*6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 标题标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 快捷键 H$*6 -->
</body>
</html>

6. 标签之段落、换行、水平线

  • 段落 --> p

    <p> 这是一个段落 </p>

  • 换行 --> br

    <p> 换 <br> 行 </p>

  • 水平线 --> hr

    属性 ： clolor 颜色 、 width 长度 、 size 宽度、align 位置（left\right\center）

    <p>水平线</p>
<hr>
<hr color="red" width="300px" size="500px" align="left">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签之段落、换行、水平线</title>
</head>
<body>
    <!-- 段落 -->
    <p> 这是一个段落 </p>

    <!-- 换行 -->
    <p> 换 <br> 行 </p>
    
    <!-- 水平线 -->
    <p>水平线</p>
    <hr>
    <hr color="red" width="300px" size="500px" align="left">
</body>
</html>

7. 标签之图片

  • 图片 --> img

    属性：src 图片路径 、 alt 为查询到图片时显示的文字 、 width 图片长度 、 height 图片宽度 、 title 鼠标悬停在图片上显示的文字

    <img src="ai.ico" alt="AI" width = "300px" height="300px" title="鼠标悬停在图片上显示的文字">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签之图片</title>
</head>
<body>
    <img src="ai.ico" alt="">
    <img src="ai.ico" alt="AI" width = "300px" height="300px" title="鼠标悬停在图片上显示的文字">
</body>
</html>

8. 图片路径详解

  • 绝对路径

    <img src="ai.ico" alt="">

  • 相对路径 子级 ./

    <img src="./ai.ico" alt="">

  • 相对路径 父级 ../

    <img src="../img/ai.ico" alt="">

  • 网络路径

    <img src="https://www.baidu.com" alt="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片路径详解</title>
</head>
<body>
    <!-- 绝对路径 -->
    <img src="ai.ico" alt="">

    <!-- 相对路径 子级 ./-->
    <img src="./ai.ico" alt="">

    <!-- 相对路径 父级 ../-->
    <img src="../img/ai.ico" alt="">

    <!-- 网络路径 -->
    <img src="https://www.baidu.com" alt="">
</body>
</html>

9. 标签之超文本链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超文本链接</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

10. 标签之文本

  • em 着重

    <em>着重</em>

  • b 粗体

    <b>粗体</b>

  • i 斜体

    <i>斜体</i>

  • strong 加重语气

    <strong>加重语气</strong>

  • del 删除字

    <del>删除字</del>

  • span 无特殊含义

    <span>无特殊含义</span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本</title>
</head>
<body>
    <!-- em 着重 -->
    <em>着重</em>
    <!-- b 粗体 -->
    <b>粗体</b>
    <!-- i 斜体 -->
    <i>斜体</i>
    <!-- strong 加重语气 -->
    <strong>加重语气</strong>
    <!-- del 删除字 -->
    <del>删除字</del>
    <!-- span 无特殊含义 -->
    <span>无特殊含义 </span>
</body>
</html>

11. 列表标签之有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
    </ol>

    <!-- 嵌套列表 -->
    <ol>
        <li>水果</li>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
        </ol>
    </ol>

    <!-- 属性 顺序显示 -->
    <ol type="1">
        <li>1</li>
    </ol>
    <ol type="A">
        <li>A</li>
    </ol>
    <ol type="a">
        <li>a</li>
    </ol>
    <ol type="I">
        <li>I</li>
    </ol>
    <ol type="i">
        <li>i</li>
    </ol>
</body>
</html>

12. 列表标签之无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
    </ul>

    <!-- 嵌套列表 -->
    <ul>
        <li>蔬菜</li>
        <ul>
            <li>胡萝卜</li>
            <li>大白菜</li>
        </ul>
    </ul>

    <!-- 属性 -->
    <ul type = 'disc'>
        <li>实心圆点</li>
    </ul>

    <ul type = 'circle'>
        <li>空心圆点</li>
    </ul>

    <ul type = 'square'>
        <li>小方块</li>
    </ul>

    <ul type = 'none'>
        <li>无</li>
    </ul>

    <!-- 快捷键 -->
    <!-- ul>li*3 -->

</body>
</html>

13. 标签之表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>

        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
    </table>

    <!-- 属性 border 边框 -->
    <table border="1">
        <tr>
            <td>边框</td>
        </tr>
    </table>
    <!-- width 长度 -->
    <table border = '1' width = '400px'>
        <tr>
            <td>长度</td>
        </tr>
    </table>
    <!-- height 宽度 -->
    <table border = '1' height = '200px'>
        <tr>
            <td>宽度</td>
        </tr>
    </table>

    <!-- 快捷键 table>tr*4>td*3{快捷键}-->
    <table>
        <tr>
            <td>快捷键</td>
            <td>快捷键</td>
            <td>快捷键</td>
        </tr>
        <tr>
            <td>快捷键</td>
            <td>快捷键</td>
            <td>快捷键</td>
        </tr>
        <tr>
            <td>快捷键</td>
            <td>快捷键</td>
            <td>快捷键</td>
        </tr>
        <tr>
            <td>快捷键</td>
            <td>快捷键</td>
            <td>快捷键</td>
        </tr>
    </table>
</body>
</html>

14. 表格单元格合并

  • 水平合并 --> colspan

     <!-- 水平合并 留左边 删除右边
        合并单元格6 单元格7
 -->
 <td>单元格5</td>
<td colspan="2">单元格6、单元格7</td>
<!-- <td>单元格7</td> -->
<td>单元格8</td>

  • 垂直合并 --> rowspan

     <!-- 垂直合并 留上边 删下边
             合并单元格16 单元格20
 -->
<tr>
    <td>单元格13</td>
    <td>单元格14</td>
    <td>单元格15</td>
    <td rowspan="2">单元格16、单元格20</td>
</tr>
<tr>
    <td>单元格17</td>
    <td>单元格18</td>
    <td>单元格19</td>
    <!--  <td>单元格20</td> -->
</tr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并</title>
</head>
<body>
    <!-- 合并单元格9 10- 11 13 14 15 17 18 19 -->
    <table border="1" width = "400px" height = "200px">
        
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
        <!-- 水平合并 留左边 删除右边
        合并单元格6 单元格7
        -->
        <tr>
            <td>单元格5</td>
            <td colspan="2">单元格6、单元格7</td>
            <!-- <td>单元格7</td> -->
            <td>单元格8</td>
        </tr>
        <tr>
            <td colspan="3" rowspan="3">单元格9 10 11 13 14 15 17 18 19</td>
            <!-- <td>单元格10</td>
            <td>单元格11</td> -->
            <td>单元格12</td>
        </tr>
        <!-- 垂直合并 留上边 删下边
             合并单元格16 单元格20
        -->
        <tr>
            <!-- <td>单元格13</td>
            <td>单元格14</td>
            <td>单元格15</td> -->
            <td rowspan="2">单元格16、单元格20</td>
        </tr>
        <tr>
           <!--  <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td> -->
           <!--  <td>单元格20</td> -->
        </tr>
    </table>
</body>
</html>

15. Form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form表单</title>
</head>
<body>
    <!-- action 服务器地址
         name 表单名字
         method  get/pos 
    -->
    <form action="">
        <p>请输入:</p>
        <input type="">
        <input type="sunmit" value="按钮">
        <button>button</button>
    </form>
</body>
</html>

16. 表单元素

  • 文本框 --> type = "text"

    <!-- 文本框 type="text"-->
    <form>
        用户名：
        <input type="text">
    </form>

  • 密码框 --> type = "password"

    <!-- 密码框 type="password" -->
    <form>
        密码:
        <input type="password">
    </form>

  • 提交按钮 --> type = "submit" value = "提交"

    <!-- 按钮  type="submit" value="提交"-->
    <form>
        <input type="submit" value="提交">
    </form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素</title>
</head>
<body>
    <!-- 文本框 type="text"-->
    <form>
        用户名：
        <input type="text">
    </form>

    <!-- 密码框 type="password" -->
    <form>
        密码
        <input type="password">
    </form>

    <!-- 按钮  type="submit" value="提交"-->
    <form>
        <input type="submit" value="提交">
    </form>
</body>
</html>

17. 块内元素与行内元素(内联元素)

  • 块内元素

    div、form、h1-h6、ul、p、hr、table

  • 行内元素（内联元素）

    a、span、em、i、b、strong

  • 行内块级元素 不换行 但能识别宽高

    img、button、input

块元素 行内元素
在页面上独占一行 不会独占一行 只占自身大小
可以设置width、height属性 width、height属性 无效
可以包含行内元素和其他块级元素 只包含内联元素 不会包含块级元素

18.H5新增标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5新增标签</title>
</head>
<body>
    <!-- div 容器元素 -->
    <div>
        <ul>
            <li>导航</li>
        </ul>
    </div>
    <div>
        <img src="" alt="">
    </div>
    <div>
        <p></p>
    </div>

    
    <div id="header"></div>
    <div id="nav"></div>
    <div id="article">
        <div id = "section"></div>
    </div>
    <div id="aside"></div>
    <div id="footer"></div>
    
    <!-- H5新标签 -->
    <header></header>
    <nav></nav>
    <article>
        <section></section>
    </article>
    <aside></aside>
    <footer></footer>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML基础
    一、HTML简介 1、HTML是什么？ HyperTextMarkupLanguage 超文本（功能丰富）标记（标...
    千年幸福论阅读 5,594评论 0赞 2
  • html基础内容
    一、基本结构 <!DOCTYPE HTML> 空格： 滚动标签 <marquee> 属性 direction：滚动...
    嘘嘘__阅读 3,989评论 2赞 6
  • html基础（二）
    html基础 块级元素 一行只能有一个，可以设置宽高 h1-h6标签 H1标题标签是 标注当前页面中的文档最重要的...
    mao_orz阅读 3,902评论 0赞 0
  • HTML基础
    快捷键 1.1 html常用的标签 字体是默认加粗h1到h6是一级标签到六级标题标签 span标签...
    Wo信你个鬼阅读 3,514评论 0赞 0
  • HTML基础-常用标签
    一、h1到h6标题标签 H1到h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次（当然可以...
    南南121阅读 3,325评论 0赞 0