• HTML零基础入门教程完整版

    目录

    一、Web标准

    1. 结构（Structure）
    2. 表现（Presentation）
    3. 行为（Behavior）

    二、VSCode的使用——快捷键

    1. 新建文件（Ctrl+N）

    2. 保存（Ctrl+S），注意要保存为.html文件

    3. Ctrl+加号键，Ctrl+减号键 可以放大缩小视图

    4. 按alt+鼠标 可以多行同时编辑

    5. shift+alt+箭头 复制黏贴

    6. 生成页面骨架结构
      输入!按下Tab键
      在这里插入图片描述
      在这里插入图片描述

    7. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口选“Open In Default Browser”

    8. 单行注释或取消： ctrl+/

    9. 自动优化格式：选中代码块，alt+shift+F

    三、插件安装

    在这里插入图片描述
    搜索并安装以下4个插件：

    插件作用
    Auto Rename Tag自动重命名配对的HTML/XML标签
    Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code中文语言包
    Open in Browser右键选择Open in Browser或者ctrl+B在浏览器上运行当前html文件
    CSS Peek追踪样式

    四、网页开发工具

    4.1 文档类型声明标签

    文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

    在这里插入图片描述
    这句代码的意思是：当前页面采取的是HTML5版本来显示网页
    注意：

    1. 要写在最前面，
    2. 它不是一个html标签，它就是文档类型声明标签

    4.2 lang语言种类

    1. en定义为英语
    2. zh-CN定义语言为中文
      在这里插入图片描述

    4.3 字符集

    在 标签内，可以通过 标签的charset属性来规定HTML文档应该使用哪种字符编码：
    在这里插入图片描述

    charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

    五、HTML常用标签

    • ~

      标题

    • 段落

    • 换行
    • 或加粗
    • 或倾斜
    • 或 删除
    • 或 下划线

    5.1 图像标签

    在这里插入图片描述
    图片src相对路径：
    在这里插入图片描述
    绝对路径：
    相对路径是正斜杠，而绝对路径是反斜杠：
    例如：
    或者完整的网络地址。

    5.2 链接标签

    1. 外部链接
      在这里插入图片描述
    2. 内部链接
      在这里插入图片描述
    3. 空链接
        
    <a href="#">公司地址a>

    • 1
    • 2
    1. 下载链接
      点击下载压缩包：人工智能第一次作业.zip
        
    <a href="人工智能第一次作业.zip">下载zip压缩包文件a>

    • 1
    • 2
    1. 网页元素链接
      点击图片，跳转到百度
     
    <a href="http://www.baidu.com"><img src="hhh.jpg" alt="刘雨昕">a>

    • 1
    • 2

    5.3 锚点链接

    点击链接，可以快速定位到当前页面的某个位置，例如百度
    在这里插入图片描述

    • 在链接文本的和href属性中， 设置属性值为#名字的形式，如：
      第二集
    • 找到目标位置标签，里面添加一个id属性 = 刚刚的名字，如：

    • 第二集介绍

    5.4 注释标签

    

    • 1

    5.5 特殊标签

    在这里插入图片描述

    5.6 表格标签

    表格标签：table
    行标签：tr
    头标签：th（文字家粗居中）
    表格标签：td
    在这里插入图片描述

    	
    
    

    • 1
    • 2
    • 3

    例题：完成以下表格：
    在这里插入图片描述
    在这里插入图片描述

    <body>
 	
    
    
   <table align="center" border="1" cellpadding="5" cellspacing="0" width="500">
       <tr>
           <th>排名th>
           <th>关键词th>
           <th>趋势th>
           <th>今日搜索th>
           <th>最近七日th>
           <th>相关链接th>
       tr>
       <tr>
           <td>1td>
           <td>鬼吹灯td>
           <td><img src="箭头向下.png" alt="" width="15">td>
           <td>345td>
           <td>123td>
           <td>
               <a href="https://tieba.baidu.com/index.html">贴吧a>
               <a href="http://www.baidu.com">百度a>
               <a href="https://baike.baidu.com/">百科a>
           td>
       tr>
       <tr>
        <td>2td>
        <td>盗墓笔记td>
        <td><img src="箭头向上.png" alt="" width="15">td>
        <td>124td>
        <td>123td>
        <td>
            <a href="https://tieba.baidu.com/index.html"  target="blank">贴吧a>
            <a href="http://www.baidu.com"  target="blank">百度a>
            <a href="https://baike.baidu.com/"  target="blank">百科a>
        td>
    tr>
   table>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    5.6.1 表格标签和

    在这里插入图片描述

    5.6.2 合并单元格

    colspan=“合并单元格的个数” 跨列合并
    rowspan=“合并单元格的个数” 跨行合并

    在这里插入图片描述

    5.7 列表标签

    1. 无序列表的各个列表想之间没有顺序级别之分
      2. 中只能嵌套
      • ，直接在
          标签中输入其他标签后缀文字的做法是不被允许的
        • 之间相当于一个容器，可以容纳所有元素

        无序列表：ul

         <ul>
        <li>香蕉li>
        <li>苹果li>
        <li>橘子li>
    ul>

        • 1
        • 2
        • 3
        • 4
        • 5

        有序列表：ol

        <ol>
        <li>超好li>
        <li>爆好li>
        <li>无敌li>
    ol>

        • 1
        • 2
        • 3
        • 4
        • 5

        自定义列表：dl

        1. 中只能包含
          和
        2. 和
          个数没有限制，经常是一个
          对于多个
          <dl>
        <dt>联系我们dt>
        <dd>新浪微博dd>
        <dd>官方微信dd>
        <dd>联系电话dd>
    dl>

        • 1
        • 2
        • 3
        • 4
        • 5
        • 6

        在这里插入图片描述

        5.8 表单标签

        5.8.1 input标签的type属性

        在这里插入图片描述
        例题：提交按钮和重置
        在这里插入图片描述

        5.8.2 input标签的name和value属性

        1.name和value是每个表单元素都有的属性值，主要给后台人员使用
        2.name表单元素的名字，要求单选按钮和复选按钮要有相同的name值

        例题：
        在这里插入图片描述

        5.8.3 input标签的checked和maxlength属性

        1. checked属性主要针对于单选按钮和复选框，主要作用一打开页面就可以默认选中某个表单元素
        2. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
          在这里插入图片描述

        5.8.4 label标签

        例题：点击label标签内的文本时，选中单选按钮
        在这里插入图片描述

        5.8.5 select下拉列表