【HTML5】HTML5基础语法汇总

HTML

超文本标记语言（Hyper Text Markup Language，简称HTML）是一种构建网页的标准标记语言。

那么“超文本”和“标记语言”是什么意思呢？

• 超文本：可以展示动画、图片、音视频等多媒体的内容，还可以进行文本之间的跳转。
• 标记语言：HTML全部是由标记标签组成的。这些标签用来描述网页的结构特点。

HTML与CSS、JavaScript组合使用，可以用来完成一个网页、网页应用程序、移动应用程序界面的开发。

三者的协作关系和各自的职能是什么呢？ HTML是构建一个网页的基础，CSS会让网页变得更好看，JavaScript会让网页实现更多的交互行为。 CSS和JavaScript可以嵌入在HTML合适的位置中。

因此，HTML是网页开发最基础的知识了，它是构建一个网页的基础，也是网页的骨架。

基本开发方式

选择一款文本编辑器（甚至记事本都可以），编辑HTML代码，保存为.html文件。

原本使用过Atom：

现在基本使用VSCode或者WebStorm：

可以借助文本编辑器运行，也可以在浏览器中找到文件运行。

HTML最基本的样例

DOCTYPE HTML>


  
  HelloWorld


  HelloWorld

HelloWorld的运行结果：

DOCTYPE HTML>


  
  基本元素


  
  Sam
  Sam
  Sam
  Sam
  Sam
  Sam
  
  
  
  SamSamSam
  
  
  
  SamSamSam
  
  SamSamSam

上面这段代码是非常简单的，运行结果：

HTML语法 HTML骨架标签

• ：告诉浏览器我们的HTML版本是HTML5，然后浏览器就按照HTML5的规则进行解析。
• ：HTML标签中的根结点标签。
• ：HTML标签中的头标签，是对页面进行的一系列配置。比如使用的编码格式、网页的标题，等等。这里面编辑的内容都不会展示到网页的内容区域。
• ：HTML标签中的内容标签，网页上展示的内容都是由body标签完成的。

上面的HTML标签里经常有这些标签

• ：提供对界面进行配置的一些元素的信息，位于head标签里。
• ：表示使用UTF-8的编码格式。如果没有特殊要求都使用这个。
• ：整个文档的标题标签，代表网页标题要展示的内容。

HTML标题标签

• ：文档标题标签，大小最大，往下依次递减。
• ：……
• ：……
• ：……
• ：……
• ：文档标题标签，大小最小，往上依次递增。

HTML段落标签

• ：二者之间添加段落内容即可。

HTML换行标签和分割线标签

• ：换行标签。
• ：分割线标签。

HTML格式化标签

• ：字体加粗。
• ：字体加粗，加强语义。
• ：字体倾斜。
• ：字体倾斜，加强语义。
• ：删除线。
• ：删除线，加强语义。
• ：下划线。
• ：下划线，加强语义。
• ：加双引号。
• ：下标。
• ：上标。

HTML的div和span标签

- ``：被div包裹住的内容会以分块的形式纵向排列在网页上，可与CSS结合。
- ``：对行内元素进行组合，横向排列在网页上，可与CSS结合。

HTML图片

• ：图片标签。
  • src：显示图片属性。
  • width：显示图片宽度的属性。
  • height：显示图片高度的属性。
  • alt：当图片无法显示的时候，代替图片的文字的属性。
  • title：鼠标停留在图片上时，显示的文字的属性。

注意路径选择：

• 绝对路径：可以选择PC或者服务器的一个文件或者一个网络路径（网路连接）。
• 相对路径：
  • 图片和img.html在同一文件夹下：
  • 图片在img.html所在文件夹的父文件夹下：../可以多次使用：../../../pic.jpg
  • 图片在img.html所在文件夹的子文件夹下：

HTML列表

• ：无序列表。
  • ：有序列表。
    2. ：有序、无序列表的项。
    3. ：描述列表。
    4. ：描述列表的项。
    5. ：描述列表项的内容。

  可配置无序列表的标识：

  • disc：原点标识（默认效果）。
  • circle：空心圆标识。
  • square：方块标识。
  • none：不显示标识。

  可配置有序列表的标识：

  • 1：按照阿拉伯数字排序（默认）。
  • A：按照大写字母排序。
  • a：按照小写字母排序。
  • I：按照大写罗马字母排序。
  • i：按照小写罗马字母排序。

  start属性可以配置列表开始的序号。

  HTML表格
  • ：定义一个表格。
  • ：定义一个行。
  • ：定义表格的元素。
  • ：定义表格的头。
  • ：设置表格标题。

  属性：

  • width：表格宽度。
  • height：表格高度。
  • border：表格边框。
  • cellspacing：单元格和单元格之间的距离。
  • cellpadding：单元格内容和边框之间的距离。
  • align：表格在网页中的位置。

  注意：

  • 、、、嵌套顺序不能颠倒
  • 必须在里使用
  HTML超链接
  • ：超链接标签。
    • href：定义链接地址的属性。
    • title：鼠标停留在超链接上，会显示的文字。
    • target：网页打开方式
      • _blank：
      • _self：
    • 书签定位：
      • id="value"
      • href="#value"
  上面内容整合起来的一个实例：

  下面的代码在“HTML训练”的基础上改进而来，代码如下（原博客有原样例图）：

  DOCTYPE html>
  
    
      
       清华大学 Tsinghua University 
    
    
       清华大学 
      
      
        window.onload = function() {
          var picture_c = document.getElementById("pic");
          var ctx_picture = picture_c.getContext("2d");
          //页面背景图片
          var img = new Image();
          //随便给一张测试图片
          img.src = "file:///D:/HTML5/qinghua.png";
          img.onload = function() {
            var iw = img.width;
            var ih = img.height;
            //设置canvas的宽等于图片宽，这样移动端（比例显示)的图片就能完全显示
            picture_c.width = iw;
            picture_c.height = ih;
            //开始绘制一个新的路径
            ctx_picture.beginPath();
            //设置路径起点坐标
            ctx_picture.moveTo(0, 0);
            //绘制直线线段到坐标点(60, 50)
            ctx_picture.lineTo(0, ih);
            ctx_picture.lineTo(iw, ih);
            ctx_picture.lineTo(iw, ih*0.1831775700934579);
            ctx_picture.lineTo(iw*0.8617594254937163, 0);
            //先关闭绘制路径，注意，此时用直线连接当前端点和起始端点
            ctx_picture.closePath();
            //剪切
            ctx_picture.clip();
            ctx_picture.drawImage(img, 0, 0, iw, ih, 0, 0, iw, ih);
          }
        }
      
      
      清华大学的校训是自强不息 厚德载物
        这也是所有清华学子的精神
      
        
        
          西山苍苍，东海茫茫，吾校庄严，巍然中央，
          东西文化，荟萃一堂，大同爰跻，祖国以光。
          莘莘学子来远方，莘莘学子来远方，春风化雨乐未央，行健不息须自强。
          自强，自强，行健不息须自强！
          自强，自强，行健不息须自强！
          
          左图右史，邺架巍巍，致知穷理，学古探微，
          新旧合冶，殊途同归，肴核仁义，闻道日肥。
          服膺守善心无违，服膺守善心无违，海能就下众水归，学问笃实生光辉。
          光辉，光辉，学问笃实生光辉！
          光辉，光辉，学问笃实生光辉！
          
          器识其先，文艺其从；立德立言，无问西东。
          孰介绍是，吾校之功，同仁一视，泱泱大风。
          水木清华众秀钟，水木清华众秀钟，万悃如一矢以忠，赫赫吾校名无穹。
          无穹，无穹，赫赫吾校名无穹。
          无穹，无穹，赫赫吾校名无穹。
          
          这首校歌是我国优秀传统文化的结晶，可以表示中国文化之精神。而同时又能符合校训，达出清华教育的宗旨
      
      
        《清华大学校歌》为清华大学之校歌，由汪鸾翔先生作词，张慧珍女士作曲，评审于1923年前后
      
      
      清华大学的缩写是THU
      
      清华大学的地址是北京市海淀区清华园1号
      
      
        下面是今年理科最高分考生李华的成绩单
        
          
             
            学科
            成绩
        
        
          
            总成绩：730
          
        
        
          
            语数英
            语文
            140
          
          
            数学
            150
          
          
            英语
            150
          
        
        
          
            理综
            物理
            108
          
          
            化学
            96
          
          
            生物
            86
          
          
            理综：290
          
        
      
      
        下面代码定义了一个Java类
        
          public class Dalao {
            public static void main(String[] args) {
              System.out.println("\u5927\u4f6c\u000d\u000a");
            }
          }
        
      
      
      
        public class Dalao {
          public static void main(String[] args) {
            System.out.println("\u5927\u4f6c\u000d\u000a");
          }
        }
      
      
        Java是一种广为人知的编程语言。
      
      
        可以输入如下命令：
        rm -rf / *
        在Linux下体会“人生至乐”
      
      i、j、k通常用于作为循环计数器变量。
      而a、b、c之类的变量命名缺乏实际含义
        ，不推荐使用
      
      
        写代码是一件令人快乐头秃的事情。
        学编程就是一个逐渐努力，从入门到精通放弃的过程。
      
      
        QQ音乐更新了评论区规则。
        很多网友戏称：早该如此。
        下面是官方推荐的一种评论方式：
      
      
        特别喜欢《有一种悲伤》这首歌，然后自作主张给它写了后半段：
        我不喜欢闯荡，找不到你方向，为了理想，我选择，去流浪，我放弃了狂妄，卑微的很绝望，没有念想，也就不会失望，有一种悲伤，是给你肩膀却没有身份停靠，是帮你解忧去独自承受心亡，只剩奢望，有一种悲伤，是陪你疯狂之后一个人在街上摇晃，暴雨倾狂，举酒纪念，北方。
            ——《有一种悲伤》A-Lin
      
      
        没有任何意义的灌水刷屏的纯表情/纯字符/纯@/纯标点/纯数字/字符画类的评论不被允许。
        例如：
      
      
        aaaaaaa、88888、@#！！！、475#@81***
      
      
        考研数一考什么？
      
      
      
        高等数学
        线性代数
        概率论与数理统计
        没了啊
      
      
      
        再来一遍——考研数一考什么？
      
      
        高等数学
        线性代数
        概率论与数理统计
      
      
        阿拉伯数字太丑，我想看罗马数字，从IV开始
      
      
        高等数学
        线性代数
        概率论与数理统计
      
      
        
      
    
  
  

  表单

  表单在网页中多用于输入用户名和密码，以及填写个人信息等输入操作。

  • 插入标签
    • ：插入单行的文本信息。
    • ：单选框。
    • ：定义一个提交按钮。
  • 下拉标签
    • ：下拉标签。
    • ：下拉标签的项。
    • size：同时展示多少个标签。
    • 标签嵌套标签
    • 中selected属性表示该条目是默认选中状态。
  • 输入多行信息
    • ：下拉标签。
    • rows：可以输入的可见行数。
    • cols：每一行可见的输入长度。
  • 表单域
    • ：用于收集用户输入内容的表单信息。
    • action：提交代码服务器地址。
    • method：提交GET、POST方法等。

  样例代码：

  DOCTYPE HTML>
  
    
      
      表单操作
    
    
      
        
          面试登记
          
            
              姓名:
              
            
          
          
            
              性别:
              男
              女
            
          
          
            
              
                Java
                Python
                C
                JavaScript
                Visual Basic.NET
                C++
                Scala
                Ruby
                C#
              
            
          
          
            
              自我介绍:
              
              To introduce myself.
              
            
          
          
            
              
              
            
          
        
      
    
  
  
  

  运行结果：