• 【JavaWeb - 网页编程】一 HTML

    第一章 HTML

    创作日期：2021-12-19

    1.1 网页简述

    1.1.1 B/S软件的结构

    1.1.2 前端的开发流程

    1.1.3 网页的组成部分

    页面由三部分内容组成：

    • 内容（结构）：我们在页面中可以看到的数据，使用 HTML 技术来展示
    • 表现：指内容在页面上的展示形式，比如：颜色，布局，大小等等，使用 CSS 技术实现
    • 行为：指的是页面中元素与输入设备交互的响应，使用 JavaScript 技术实现

    1.2 HTML技术

    1.2.1 HTML简介

            Hyper Text Markup Language（超文本标记语言）简称：HTML。HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容如：文字处理，画面安排，图片显示等。

    1.2.2 创建HTML页面

    • 创建Web工程：

    • 在Web工程下创建HTML文件：

    • 运行HTML文件：

    1.2.3 HTML的书写规范

    1. <!DOCTYPE html><!-- 约束，声明 -->
    2. <html lang="zh_CN"><!-- html标签表示html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是：head和body -->
    3. <head><!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码 -->
    4.     <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
    5.     <title>标题</title><!-- 表示标题 -->
    6. </head>
    7. <body><!-- body标签是整个html页面显示的主体内容 -->
    8. hello
    9. </body>
    10. </html>

    1.2.4 HTML标签的介绍

    • 标签的格式：<标签名>封装的数据</标签名>
    • 标签名大小写不敏感
    • 标签拥有自己的属性
      • 基本属性：呈现大小，颜色，布局等
      • 事件属性：触发事件等
    • 标签分为单标签与多标签：
      • ​​​​​​​单标签格式：<标签名/>
      • 双标签格式：<标签名>封装的数据</标签名>

    1.2.5 HTML标签的语法

    • 标签不能交叉嵌套：

    • 标签必须正确关闭：

    • 标签属性必须要有值，属性值必须加引号：

    • 注释不能嵌套：

    1.3 HTML常用标签介绍

    1.3.1 font 字体标签

    • font标签是字体标签，它可以用来修饰文本的字体，颜色，大小（尺寸）
      • color属性修改颜色
      • face属性修改字体
      • size属性修改文本大小
    • 需求：在网页上显示 "我是字体" 标签，并修改字体为 宋体，颜色为红色
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>1.font.html</title>
    6. </head>
    7. <!-- 需求：在网页上显示 "我是字体标签" ，并修改字体为 宋体，颜色为红色，大小为7 -->
    8. <body>
    9. <font face="宋体" color="red" size="7">我是字体标签</font>
    10. </body>
    11. </html>

    1.3.2 特殊字符

     

     

     

     

    下一节：

  • 相关阅读:
    Kafka-go各部分详细分析、案例
    ssm+vue的公司人力资源管理系统（有报告）。Javaee项目，ssm vue前后端分离项目。
    APP定制开发流程和特点有哪些？
    网络精通-VLAN高级配置之给予MAC地址划分VLAN
    DEA一直updating index，这样无法使用其内部各种方法跳转，而且持续时间特别长
    136、LeetCode-496.下一个更大元素Ⅰ
    gin实现event stream
    Flask 学习-9. 开启调试模式（debug模式）的2种方法
    【亲测有用】idea2024.1中前进后退按钮图标添加
    在Spark中集成和使用Hudi
  • 原文地址：https://blog.csdn.net/woailuo8214/article/details/125620334