文章目录

• 网页与前端
• HTML
• • 语法
  • 属性
  • 区块
  • 表单form标签
  • • 输入框
    • 单选按钮
    • 多选按钮
    • 提交按钮

      

      网页与前端

      学习前端之前, 我们首先得明白网页与前端之间的关系, 前端是构建网页的一部分, 负责用户在浏览器中看到和与之交互的内容. 以下是它们之间的关系的简要说明:

      • 网页: 网页是浏览器中呈现内容的文档或页面. 通常使用HTML (Hypertext Markup Language) 编写, HTML 定义了页面的结构和内容, 包括文本、图像、链接等. 网页通常还包括 CSS (Cascading Style Sheets) 用于定义页面的样式和布局, 以及 JavaScript 用于添加交互性和动态功能.
      • 前端: 前端开发是创建页面的过程, 它涵盖了 HTML、CSS和 JavaScript 的开发. 前端开发人员负责将 UI 设计的页面转化为可在浏览器中渲染的实际页面.
      • HTML: HTML是网页的骨架, 定义了页面的结构, 包括标题、段落、图像、链接等.
      • CSS: CSS用于控制页面的样式, 包括字体、颜色、间距、布局等. 它使网页看起来漂亮且一致.
      • JavaScript: JavaScript是一种编程语言, 用于添加交互功能. 前端开发人员使用 JavaScript 来创建动态元素、处理用户输入、与服务通信等, 以提供更丰富的用户体验.

        总之, 页面是通过前端开发来创建和维护的, 前端技术包括HTML、CSS和 JavaScript, 它们共同构建了用户在浏览器中看到和与之交互的内容. 前端开发的目标是提供具有吸引力、易用性和高性能的网页.

        相比于后端而言, 前端更容易入门, 只要掌握了 HTML、CSS、JavaScript, 就可以开发一些简单的页面了.

        HTML定义了网页的结构和内容, CSS控件网页的样式和外观, JavaScript增强网页的交互性和动态性.

        我们可以这么理解:

        HTML 是网页的结构, CSS 是网页的外观, JavaScript 是网页的行为.

        随着技术的进步, 前端开发社区开发了很多框架和库, 如Vue、React、Angular等. 这些框架简化了前端开发流程, 提供了组件化开发, 状态管理和路由等功能, 使开发更高效.

        HTML

        HTML (Hypertext Markup Language) 中文名就是 超文本标记语言, 用于创建网页的结构和内容.

        HTML是Web页面的基础, 它描述了页面的语义结构, 使浏览器能够正确的显示和解释内容. 它使用一些列的标签(也称为元素), 来定义文本、图像、表格等在网页上的排布和呈现方式.

        HTML 标签是由尖括号包围的关键字, 例如:

        这是一个段落.
        

        在HTML中, 标签用于定义和包围网页中的各个元素. 标签分为两种主要类型: 单标签和双标签.

        1. 单标签:
           • 单标签通常用于表示没有内容的元素, 例如图像、换行、横线等.
           • 它们以自封闭的方式出现, 不需要闭合标签, 因为它们没有内部内容.
           • 单标签的典型形式是, 其中 tagname 是标签名称. 示例: 表示插入一张图片,
             表示换行
           • 双标签:
             • 双标签用于定义包含内容的元素, 例如段落、标题、列表等.
             • 双标签由两部分组成: 开始标签和结束标签
             • 开始标签用于定义元素的起始位置, 结束标签用于定义元素的结束位置.
             • 在开始标签和结束标签之间可以包含元素的内容. 示例:

               这是一个段落.

               表示一个段落元素, 其中

               是开始标签,

               是结束标签, 之间的文本是该段落的内容.

        了解了 HTML 的标签之后, 我们再来了解 HTML 的文件结构, 一个 HTML 文档通常由以下部分组成:

        
        
            
            文档标题
            
            
            
            
            
        
            
            
        这是一个标题
            
        这是一个段落
            这是一个链接
            
        
        
        

        • : 生命文档类型为HTML5.
        • : HTML文档的根元素, 包含了整个文档的内容.
        • : 包含了一些文档的元信息, 如标题、字符编码等.
        • : 定义网页标题, 会显示在浏览器的标签页上.
        • : 包含实际的页面内容.

          语法

          了解了 HTML 的基本结构之后, 我们来学习一下 HTML 的基本语法.

          1. 文本内容: 使用

             标签定义段落,

             到

             标签定义标题, 、和标签可以用于强调文本.

          这是一级标题
          这是二级标题
          这是三级标题
          这是四级标题
          这是五级标题
          这是六级标题
          这是一个段落
          重要信息: 这是一个重要的内容
          
              更改段落文本样式字体加粗、斜体字、下划线、删除线
          
          

          

          1. 列表: 使用
             和
             • 标签创建无序列表, 使用
               和
               1. 标签创建有序列表.
               • 无序列表元素1
               • 无序列表元素2
               • 无序列表元素3
               1. 有序列表元素1
               2. 有序列表元素2
               3. 有序列表元素3

               

               1. 表格: 使用、、

                  、

                  等标签创建表格, 是表格标签的根元素, 然后是表格的行标签, 在(table row)内部是 (table data)与 (table header) 列标题 1 列标题 2 列标题 3 元素 11 元素 12 元素 13 元素 21 元素 22 元素 23 元素 31 元素 32 元素 33 我们发现上面的表格并没有显示边框, 如果我们想让其显示边框只需要加上 border属性即可. 列标题 1 列标题 2 列标题 3 元素 11 元素 12 元素 13 元素 21 元素 22 元素 23 元素 31 元素 32 元素 33 图像: 使用 标签插入图像. 链接: 使用标签创建链接. 访问 GitHub 注释: 使用添加注释, 不会在浏览器中显示. 属性 属性在HTML中起到非常重要的作用, 它们用于定义元素的行为和外观, 以及与其他元素的关系. 在HTML中, 每个元素都可以有一个或多个属性, 用于描述元素的特征和行为. 属性的基本语法是: , 其中属性名用于标识该属性, 属性值则定义该属性的值, 属性名和属性值之间用等号=隔开, 属性值一般要用引号括起来: 其中, src 是指定图片的文件路径的属性, alt 是指定在无法加载图片是显示的替代文本的属性. 这些属性可以让用户了解图像的内容, 同时也有助于调整图片的大小和位置. 属性是用来定义元素的性质和功能的, 它们可以指定元素的尺寸、颜色、文字方向、链接目标等, 有助于页面的定位和布局. 下面是一些常见的属性用法: class 属性: class属性用于向元素添加一个或多个类名, 以便通过CSS样式表定义样式. 此外, 类名还可以用来实现JavaScript的交互效果. 例如: 这是一个带有 note 类属性的 p 标签 id 属性: id属性是用于将元素标识为唯一的标识符. 它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素. 例如: 这是一个带有 header id 的 div 标签 style 属性: style属性是用于将CSS样式规则直接应用于元素. 它可以用于控制元素的颜色、字体、大小和布局等. 例如: 这是一段红色的文字 以上三种属性是所有标签都有的属性, 也有一些标签具有独特的属性, 比如 a 标签的 href 属性, img 标签的 src 属性等. 这是一个超链接 会这样显示: 点击这个链接就会去访问对应的网页. 如果将代码改成这样: 这是一个超链接 这是第二个超链接 我们看标签的target属性里面的值表示什么含义: 大概意思就是: _self: 表示在当前页面打开这个链接. _blank: 表示在新的页面打开这个链接. 我们发现上面的两个链接在同一行, 并没有换行, 如果我们想换行, 可以在末尾加上 标签: 这是一个超链接 这是第二个超链接 这是一个超链接 这是第二个超链接 标签的 alt 属性用于在没有找到图片的情况下显示一些类似于提示信息的语句(可设置自己想设置的). width和height属性用于设置图片的宽度和高度. 区块 当涉及到 HTML元素时, 可以将它们分为两个主要类别: 行内元素 和 块级元素. 这些不同类型的元素在 HTML 文档中的呈现和布局方面有很大的不同. 下面是关于这两种类型的元素的详细说明: 块级元素 (block): 块级元素通常用于组织和布局页面的主要结构和内容, 例如段落、标题、列表、表格等. 它们用于创建页面的主要部分, 将内容分割成逻辑块. 块级元素通常会从新行开始, 并占据整行的宽度, 因此它们会在页面上呈现为一块独立的内容块. 可以包含其他块级元素和行内元素. 常见的块级元素包括: , , 到 , , , , , 等. 行内元素 (inline): 行内元素通常用于添加文本样式或为文本中的一部分应用样式. 它们可以在文本中插入小的元素, 例如超链接、强调文本等. 行内元素通常在同一行内呈现, 不会独占一行. 它们只占据其内容所需的宽度, 而不是整行的宽度. 行内元素不能包含块级元素, 但可以包含其他行内元素. 常见的行内元素包括 , , , , , , 等. 示例: 标签没有语义, 经常用于创建页面的布局结构. 用于内联样式化文本, 给文本的一部分应用样式或者标记 上面这两个标签经常与CSS、JS一起搭配使用, 可以实现更加复杂的页面布局和样式化 链接 1 链接 2 链接 3 链接 4 链接 5 文章标题 文章内容 文章内容 文章内容 文章内容 文章内容 这是第 1 个span标签 这是第 2 个span标签 这是第 3 个span标签 链接点击这里 链接 表单form标签 HTML 表单 form 是一个重要的元素, 用于收集和提交用户输入的数据. 表单允许用户输入文本、选择选项、上传文件等, 然后将这些数据提交到服务器进行处理. 表单在网页中是不可或缺的, 上面网页中就应用到了表单. 一个基本的 HTML 表单由以下几个主要部分组成: 元素: 表单元素是表单的容器, 它定义了数据提交到哪里以及使用那种 HTTP 方法来提交数据. 它可以包含输入字段、按钮等元素 输入字段: 标签是 HTML 中用于创建表单元素的最常见标签之一. 它允许用户输入文本、选择选项、上传文件等. 元素有多个属性, 用于指定不同类型的输入和控制输入的方式. 以下是一些常见的标签的属性和它们的详细说明: type属性: 指定输入字段的类型, 它可以有以下不同的值: text: 创建文本输入框, 用于用户输入文本. password: 创建密码输入框, 输入内容会被隐藏. radio: 创建单选按钮, 用户只能选择一个选项. checkbox: 创建复选框, 用户可以选择多个选型. number: 创建数字选择框, 允许用户输入数字. email: 创建用于输入电子邮件地址的输入框. file: 创建文件上传字段, 用户可以上传文件. submit: 创建提交按钮, 用于提交表单数据. reset: 创建重置按钮, 用于重置表单数据. button: 创建自定义按钮, 通常与 JavaScript 一起使用. 输入框 placeholder属性: 表示的是提示信息, 并不是实际的值 value属性: 文本框中的默认值, 是真实存在于其中的值. 如果我们想在输入框中前面显示一些提示信息, 比如账号名和密码这些: 用户名: 密码: 当然也可以用我们前面提到的 标签代替上面的, 能实现一样的效果. 用户名: 密码: 上面的代码中: label标签中的 for属性 用于将label标签与这里input表单元素关联起来, 当用户点击这个label标签时, 与之关联的表单元素(这里是)会自动获得焦点. 例如点击用户名这个label标签, id为username的框会自动被选中 上面的密码类型有原来的text改为password, 好处是密码不可见 单选按钮 性别: 男 女 我们发现上面的单选按钮没有实现单选的功能, 需要这样改动: 性别: 男 女 多选按钮 性别: 男 女 爱好: 唱歌 跳舞 跑步 提交按钮 用户名: 密码: 这里需要说的是: 标签的action属性用于指定表单数据提交的目标URL, 即用户点击提交按钮后, 表单中的数据将被发送到这个指定的地址. 男 女 订阅 中国 美国 表单元素可以包含一些属性, 以指定表单的行为和样式. 常见的表单属性包括: 属性 描述 action 指定表单数据提交到服务器的URL method 指定用于提交数据的 HTTP 方法, 通常为 get 或 post name 为表单命名, 以便在 JavaScript 中引用 target 指定表单提交后的目标窗口或框架 用户注册 用户名: 密码: 电子邮件地址: 年龄: 性别: 男 女 最喜欢的编程语言: Python JavaScript Java C++ 遇见安然遇见你，不负代码不负卿。 谢谢老铁的时间，咱们下篇再见～