HTML基础语法

目录
  • HTML基础语法
    • 一、网页
    • 二、HTML标签
      • 1、标签语法规范
      • 2、HTML基本结构标签
      • 3、开发工具
        • VS Code的使用
      • 4、HTML常用标签
        • 语义标签
        • 盒子标签
        • 图像标签
        • 超链接标签
        • 注释标签
        • 特殊字符
        • 表格标签
        • 列表标签
          • 无序列表*
          • 有序列表
          • 自定义列表*
        • 表单标签
          • 表单域
          • 表单控件
    • 三、查阅文档

HTML基础语法

一、网页

  • 网页是指在英特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合

  • HTML不是一种编程语言，而是一种标记语言（标记标签）；HTML是指超文本标记语言——可以加入图片、音乐等超越了文本限制|超级链接文本，它是用来描述一个网页的一种语言

  • 浏览器：IE,Chrome,Firefox

    • 浏览器内核（渲染引擎）：负责读取网页内容，整理信息，计算网页的显示方式并显示页面

  • web标准：结构、表现和行为相分离

    • 标准 说明
      结构 结构用于对网页元素进行整理和分类，HTML等
      表现 表现用于设置网页元素的板式、颜色、大小等外观样式，CSS等
      行为 行为是指网页元素的定义及交互的编写，JavaScript等

页面整体分为两部分：

  • 一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。

  • 一部分是body部分，这部分内容则会在浏览器中展示出来

二、HTML标签

1、标签语法规范

HTML标签是有尖括号包围的关键字

HTML通常是成对出现的，称为双标签

有些特殊的标签必须是单个标签，称为单标签

标签关系

  • 包含关系
  • 并列关系

2、HTML基本结构标签

（骨架标签）

标签名 定义 说明
HTML标签 页面最大的标签，我们称为根标签
文档的头部 注意在head标签中我们必须要设置的标签是title
文档的标题 让页面拥有一个属于自己的网页标题
文档的主体 元素包括文档的所有内容，页面内容基本都是放到body标签里面的 
  
  

      
    
    
    Document

3、开发工具

Visual Studio Code（推荐）

VS Code的使用

快捷方式

  • VS Code生成HTML骨架的快捷方式：!

  • 新建文件：Ctrl + N

  • 保存文件：Ctrl + S

  • 格式化代码：Shift + Alt + F

插件的安装

  • Chinese插件：汉化VS Code
  • Open in Browser插件：右键选择浏览器打开
  • Auto Rename Tag插件：自动重命名配对HTML/XML标签

4、HTML常用标签

语义标签

  • 标题标签

    -

    （head）——作为标题使用，并且重要性依次递减

    • 一级标签

  • 段落标签

    （paragraph）——可以把HTML文档分为若干个段落

    • 我是段落标签

  • 换行标签
    （break）——文本强制换行

    • 开始
      换行

  • 文本格式化标签

    语义 标签 说明
    加粗 或 更推荐使用标签加粗，语义更强烈
    倾斜 或 更推荐使用标签倾斜，语义更强烈
    删除线 或 更推荐使用标签添加，语义更强烈
    下划线 或 更推荐使用标签添加，语义更强烈 
    • 加粗
倾斜
删除线
下划线

盒子标签

没有语义，一个盒子，用来装内容的。

  • ：用来布局，一行只能放一个
    ，大盒子
  • ：用来布局，一行可以放多个，小盒子

图像标签

语法：

属性 说明
src 必须属性，指定图片文件的路径和文件名（超链接）
alt 替换文本，图片不能显示时显示该内容（文本）
title 提示文本，鼠标放到图像上时显示的文字（文本）
width 设置图像的宽度（像素值或百分比）
height 设置图像的高度（像素值或百分比）
border 设置图像边框的粗细（像素值）

图像标签可以拥有多个属性，必须写在标签名后面

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

属性采取键值对的格式，即key="value"的格式，属性="属性值"

路径

  • 目录文件夹：就是普通的文件夹，里面只不过是放了我们做网页所需要的相关素材，比如html文件、图片等
  • 根目录：打开目录文件夹的第一层就是根目录
  • 相对路径：以html文件所在位置作为参考基础，而建立的目录路径
    • 同级相对路径：文件名
    • 下一级相对路径：./文件夹/文件名
    • 上一级相对路径：../文件名
  • 绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

超链接标签

文本或图像

属性 作用
href 用于指定链接目标的url地址（必须属性），当为标签应用href属性时，它就有了超链接功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开

链接类型

类型 作用
空链接（#） 使得文本等元素呈现链接形式
外部链接 访问外部网站
内部链接 网站内部页面之间的相互链接，直接链接内部名称即可
下载链接 如果href里面地址是一个文件或者压缩包，会下载文件
网页元素链接 在网页中的各种网页元素，如文本、图像、表格、音频、视频等（当做文本类型放入即可）都可以添加超链接
锚点链接 点击链接，可以快速定位到页面中的位置

锚点链接的实现

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

    第二级目录

注释标签

快捷键：Ctrl + /

特殊字符

字符

数字参考

实体参考

描述

"""Quotation mark
&　&&Ampersand
<<<Less than
>>>Greater than
 (空白)  Non-breaking space
?¡¡Inverted exclamation
￠¢¢Cent sign
￡££Pound sterling
¤¤¤General currency sign
￥¥¥Yen sign
|¦¦broken vertical bar
§§§Section sign
¨¨¨Diæresis / umlaut
?©©Copyright
aªªFeminine ordinal
?««Left angle quote
?¬¬Not sign
-­&sny;Soft hyphen
?®®Registered trademark
ˉ¯¯Macron accent
°°°Degree sign
±±±Plus or minus
2²²Superscript two
3³³Superscript three
′´´Acute accent
μµµMicro sign
?Paragraph sign
···Middle dot
?¸¸Cedilla
1¹&supl;Superscript one
oººMasculine ordinal
?»»Right angle quote
?¼¼Fraction one quarter
?ǽFraction one half
?¾¾Fraction three-quarters
àÀ¿Inverted question mark
àÀÀCapital A, grave accent
áÁÁCapital A, acute accent
?ÂÂCapital A, circumflex
?ÃÃCapital A, tilde
?ÄÄdiæresis / umlau
?ÅÅCapital A, ring
?ÆÆCapital AE, ligature
?ÇÇCapital C, cedilla
èÈÈCapital E, grave accent
éÉÉCapital E, acute accent
êÊÊCapital E, circumflex
?ËËdiæresis / umlau
ìÌÌCapital I, grave accent
íÍÍCapital I, acute accent
?ÎÎCapital I, circumflex
?Ï&Imul;diæresis / umlau
DÐÐCapital ETH, Icelandic
?ÑÑCapital N, tilde
òÒÒCapital O, grave accent
óÓÓCapital O, acute accent
?ÔÔCapital O, circumflex
?ÕÕCapital O, tilde
?ÖÖdiæresis / umlau
×××Multiplication sign
?ØØCapital O, slash
ùÙÙCapital U, grave accent
úÚÚCapital U, acute accent
?ÛÛCapital U, circumflex
üÜÜdiæresis / umlau
YÝÝCapital Y, acute accent
TÞÞCapital Thorn,Icelandic,
?ßßGerman sz
àààSmall a, grave accent
áááSmall a, acute accent
aââSmall a, circumflex
?ããSmall a, tilde
?äädiæresis / umlau
?ååSmall a, ring
?ææSmall ae ligature
?ççSmall c, cedilla
èèèSmall e, grave accent
éééSmall e, acute accent
êêêSmall e, circumflex
?ëëdiæresis / umlau
ìììSmall i, grave accent
íííSmall i, acute accent
?îîSmall i, circumflex
?ïïdiæresis / umlau
eððSmall eth, Icelandic
?ññSmall n, tilde
òòòSmall o, grave accent
óóóSmall o, acute accent
?ôôSmall o, circumflex
?õõSmall o, tilde
?öödiæresis / umlau
÷÷÷Division sign,
?øøSmall o, slash
ùùùSmall u, grave accent
úúúSmall u, acute accent
?ûûSmall u, circumflex
üüüdiæresis / umlau
yýýSmall y, acute accetn
tþþSmall thorn, Icelandic
?ÿÿdiæresis / umlaut

表格标签

  1. ：用于定义表格标签
  2. ：标签用于定义表格中的行，必须嵌套在标签中
  3. ：用于定义表格中的单元格，必须嵌套在标签中
  4. ：表示HTML表格中的表头部分，一般位于第一行或第一列
    属性名属性值描述
    alignleft、center、right规定表格相对周围元素的对齐方式
    border1 或 ""规定表格单元格之间是否拥有边框，默认为""，表示没有边框
    cellpadding像素值规定单元格边沿与其内容之间的空白，默认像素1
    cellspacing像素值规定单元格之间的空白，默认2像素
    width像素值或百分比规定表格的宽度

    表格的属性（了解）

    属性要写到

    里面去

    属性名属性值描述
    alignleft、center、right规定表格相对周围元素的对齐方式
    border1 或 ""规定表格单元格之间是否拥有边框，默认为""，表示没有边框
    cellpadding像素值规定单元格边沿与其内容之间的空白，默认像素1
    cellspacing像素值规定单元格之间的空白，默认2像素
    width像素值或百分比规定表格的宽度

    结构标签

    在表格标签中，分别用：

    • 标签表示表格的头部区域：标签内部必须拥有标签，一般位于第一行

    • 标签表示把表格的主体区域：主要放数据的主体

    其要在

    标签里面

    合并单元格

    • 方式

      • 跨行合并：rowspan="合并单元格的个数"

      • 跨列合并：colspan="合并单元格的个数"

    • 目标单元格

      • 跨行：最上侧单元格为目标单元格，写合并代码

      • 跨列：最左侧单元格为目标单元格，写合并代码

    • 步骤

      1. 先确定跨行合并还是跨列合并

      2. 找到目标单元格，写上合并方式=合并单元格的数量，例如：

  5. 删除多余的单元格

    6. 列表标签

    无序列表*

    在HTML标签中，

      （unordered list）标签表示HTML页面中项目的无序列表，一般会以项目符号呈现表项，而列表使用
    • 标签定义列表项

        
    
      • 列表项1
        • 
    
      • 列表项2
        • 
    
      • ···
        •
      1. 无需列表的各个列表项之间没有顺序区别之分，是并列的
        2. 中只能嵌套
        • ，直接在
            标签输入其他标签或者文字的做法是不允许的
          • 与
              之间相当于一个容器，可以容纳所有的元素
            • 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
          有序列表

          在HTML标签中，

            （ordered list）标签用于定义有序列表，列表顺序以数字来显示，并且使用
          1. 标签来定义列表项

              
    
            1. 列表1
              2. 
    
            2. 列表2
              3. 
    
            3. ···
              4.
              1. 中只能嵌套
              1. ，直接在
                  标签中输入其他标签或者文字的做法是不允许的
                2. 与
                  3. 之间相当于一个容器，可以容纳所有元素
                3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置
                自定义列表*

                自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

                在HTML标签中，

                标签用于定义描述列表（或定义列表），该标签会与
                （定义项目/名字）和
                （描述每一个项目/名字）一起使用

                
    
                名词
                
    
                名词解释1
                
    
                名词解释2
                1. 里面只能包含
                  和
                2. 和
                  个数没有限制，经常是一个
                  对应多个

                表单标签

                使用表单目的是为了搜集用户信息

                在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成

                表单域

                表单域是一个包含表单元素的区域

                在HTML标签中，

                标签用于定义表单域，以实现用户信息的搜集和传递

                会把它范围内的表单元素信息提交给服务器

                

各种表单控件

                1. 在我们写表单元素之前，应该有个表单域把他们进行包含

                2. 表单域是

                  标签

                常用属性

                属性 属性值 作用
                action url地址 用于指定接收并处理表单数据的服务器程序的url地址
                method get/post 用于设置表单数据的提交方式
                name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域
                表单控件

                在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

                1. input输入表单元素

                  • 在标签（单标签）中，包含一个type属性，根据不同type属性值，输入字段拥有很多形式

                  • （提示：）

name:
passwd:
sex:boygril
                    属性值 描述
                    button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
                    checkbox 定义复选框
                    file 定义输入字段和浏览按钮，供文件上传
                    hidden 定义隐藏的输入字段
                    image 定义图像形式的提交按钮
                    password 定义密码字段。该字段中的字符被掩码
                    radio 定义单选按钮
                    reset 定义重置按钮。重置按钮会清除表单中的所有数据
                    submit 定义提交按钮。提交按钮会把表单数据发送到服务器
                    text 定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符
                    date 选择时间，年月日
                    • radio：选项 ------------------|\checked="checked"此属性当打开页面时可以默认选中这个按钮
                    • checkbox：选项 -----|/

                  • 除type属性外，标签还有其他很多属性

                  属性 属性值 描述
                  name 由用户定义 定义input元素的名称
                  value 由用户定义 规定input元素的值，默认显示的文字
                  checked checked 规定此input元素首次加载时应当被选中
                  maxlenth 正整数 规定输入字段中的字符的最大长度

                  name和value是每个表单元素都有的属性值，主要给后台人员使用

                  name表单元素的名字，要求单选按钮和复选框要有相同的name值

                2. select下拉表单元素

                  使用场景：在页面中，如果多个选项让用户选择，并且想要节约页面空间时，我们可以使用

                  1. 通过