前端 — HTML

本文介绍: 学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。二、HTML的作用学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。三、HTML的标准结构。

一、网络的三大基石

一、网络的三大基石

三大基石：URL，HTTP协议，HTML

URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL

（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络

地址。

HTTP协议：http是一个简单的请求–响应协议，它通常运行在TCP之上。它指定了客户端可能

发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而

消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开

发和部署是那么的直截了当。

HTML：HTML称为超文本标记语言。

二、什么是HTML

一、HTML 指的是超文本标记语言

超文本：
普通人 vs 超人（比普通的人厉害）

普通文本 vs 超文本(比普通的文本厉害)

标记：

标记=标签

标签：<html> <body> <head> 由尖括号包围起来的关键词

分类：双标记标签/封闭类型标签 <p></p> 单标记标签/非封闭类型标签 <br/>

语言：HTML是一个描述网页的语言

总结：

学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览

器解析，解析完以后可以在浏览器中将页面进行展示。

二、HTML的作用

学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解

析，解析完以后可以在浏览器中将页面进行展示。

三、HTML的标准结构

1、先用普通文本文档新建一个文本，将文本的后缀改为.html 或者 .htm （大小写不区分）

2、编辑：标准结构

<html>
        <head></head>
        <body>
                this is my first html....
        </body>
</html>

3、运行界面：让浏览器解析：直接用浏览器将文件打开即可

建议：使用谷歌浏览器

四、IDE_HBuilder的使用

一、编码工具：

辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。

写代码也一样，需要借助工具来开发。

常见的编码工具有记事本、sublime Text、notepad++

二、集成开发环境

是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用

户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件

服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual

Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程

序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE

（如webstorm、DreamWeaver等），因为很多项任务会自动生成。

三、HBuilder使用 步骤：

（1）解压

（2）点击HBuilder.exe运行即可，免安装

（3）注册用户并登陆（建议登陆）

（4）选择适合自己的视觉方案

（5）选择主题

（6）创建项目

（7）创建 html 文件

（8）在空白界面中快捷键 h8

<html>
        <head>
                <title></title>
        </head>
        <body>
                this is my second html...
        </body>
</html>

（9）保存：Ctrl + s

（10）运行

（11）运行结果

五、HTML的标签的使用

一、html_head_body

HTML文档标准结构：

<html>
        <head>
        </head>
        <body>
                this is my second html... 
        </body>
</html>

1、html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所

以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间

是文档的头部和主体。

2、head标签—》里面放的是页面的配置信息

head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素

可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性

和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数

文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <sc ript>、 <base>。

应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body>

标签之前。文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的

附加信息。

3、body标签—》里面放的就是页面上展示出来的内容

body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超

链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用

在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，

可以包含文本、图片、音频、视频等各种内容！

二、head中可用标签

<html>
        <!-- 这是一个注释，注释的快捷键是ctrl+shift+/-->
        <!--
                head标签中：放入：页面的配置信息
                head标签中可以加入：
                <title>、<meta>、<link>、<style>、 <script>、 <base>。
        -->
        <head>
                <!--页面标题-->
                <title>百度一下，你就知道</title>
                <!--设置页面的编码，防止乱码现象
                        利用meta标签，
                        charset="utf-8" 这是属性，以键值对的形式给出  k=v a=b 
                        告诉浏览器用utf-8来解析这个html文档
                -->
                <meta charset="utf-8" /><!--简写-->
                <!--繁写形式：（了解）-->
                <!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->
                <!--页面刷新效果-->
                <!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />-->
                <!--页面作者-->
                <meta name="author" content="msb;213412@qq.com" />
                <!--设置页面搜索的关键字-->
                <meta name="keywords" content="马士兵教育;线上培训;架构师课程" />
                <!--页面描述-->
                <meta name="description" content="马士兵教育详情页" />
                <!--link标签引入外部资源-->
                <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
        </head>
        <!--
                body标签中：放入：页面展示的内容
        -->
        <body>
                this is a html..你好
        </body>
</html>

三、body中可用标签

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>文本标签</title>
        </head>
        <body>
                <!--文本标签-->
                <!--下面的文字就是普通的文本，文本编辑器中的任何效果：比如空格，换行 都不影响页面，
                        页面想要实现效果 必须通过标签来实现
                -->
                媒体：为人父母，                                     要不要“持证上岗”？
                媒体：为人父母，要不要“持证上岗”？
                媒体：为人父母，要不要“持证上岗”？
                媒体：为人父母，要不要“持证上岗”？
                <!--标题标签
                        h1-h6  字号逐渐变小，每个标题独占一行，自带换行效果
                        h7之后都属于无效标签，但是浏览器也不会报错，而是以普通文本的形式进行展现
                -->
                <h1>媒体：为人父母，要不要“持证上岗”？</h1>
                <h2>媒体：为人父母，要不要“持证上岗”？</h2>
                <h3>媒体：为人父母，要不要“持证上岗”？</h3>
                <h4>媒体：为人父母，要不要“持证上岗”？</h4>
                <h5>媒体：为人父母，要不要“持证上岗”？</h5>
                <h6>媒体：为人父母，要不要“持证上岗”？</h6>
                <h7>媒体：为人父母，要不要“持证上岗”？</h7>
                <h8>媒体：为人父母，要不要“持证上岗”？</h8>
                <!--横线标签
                        width:设置宽度
                                        300px ：固定宽度
                                        30%：页面宽度的百分比，会随着页面宽度的变化而变化
                        align：设置位置  left ,center,right    默认不写的话就是center居中效果
                -->
                <hr width="300px" align="center"/>
                <hr width="30%" align="center"/>
                
                <!--段落标签：
                        段落效果：段落中文字自动换行，段落和段落之间有空行
                -->
                <p>&nbsp;&nbsp;&nbsp;&nbsp;5月&emsp;26日，“建议父母持合格&lt;父母证&gt;上岗&copy;”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
                <p>5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
                <p>5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
                
                <!--加粗倾斜下划线-->
                <b>加粗</b>
                <i>倾斜</i>
                <u>下划线</u>
                <i><u><b>加粗倾斜下划线</b></u></i>
                <!--一箭穿心-->
                <del>你好 你不好</del>
                
                <!--预编译标签：在页面上显示原样效果-->
                <pre>
public static void main(String[] args){
        System.out.println("hello msb....");
}
                </pre>
                
                <!--换行-->
                5月26日，“建议父母持合格父母证上岗”冲上微博<br />热搜，迅速引发热议。在正在召开的全国两会上，全国政
                
                <!--字体标签-->
                <font color="#397655" size="7" face="萝莉体 第二版">建议父母持合格父母证上岗</font>
                
        </body>
</html>

一、实体字符

六、方法的实现，调用

package notepad;

import sun.util.resources.cldr.my.CurrencyNames_my;

import java.util.Scanner;

public class TestMethod03 {
    //功能：我心里有一个数，你来猜，看是否猜对
    //方法的定义：功能：实现猜数功能：
    //1.你猜一个数
    public static void guessNum(int my){

        //我心里有一个数(1-6)
        int you = (int) (Math.random() * 6) + 1;

        //将两个数比对：
        System.out.println(you==my?"猜对了":"猜错了");
    }

    //这是一个main方法，是程序的入口
    public static void main(String[] args) {

    //调用猜数的方法：
        Scanner sc = new Scanner(System.in);
        System.out.print("请录入你的数：");
        int my = sc.nextInt();
        guessNum(my);
    }
}

package notepad;

import sun.print.SunMinMaxPage;

public class TestMethod01 {
    //方法的定义：（写方法)
    //将返回值返回到方法的调用处
    public static int addNum(int num1, int num2){
        int sum = 0;
        sum += num1;
        sum += num2;
        return sum;
    }

    //这是一个main方法，是程序的入口
    public static void main(String[] args) {
        //10+20:
        int num1 = 10;
        int num2 = 20;
        int sum = 0;
        sum += num1;
        sum += num2;
        System.out.println(sum);

        //方法的调用：（用方法）
        int sum2 = addNum(10, 20);
        System.out.println(sum2);

        //30+90:
        int num3 = 30;
        int num4 = 90;
        int sum1 = 0;
        sum1 += num3;
        sum1 += num4;
        System.out.println(sum1);

        //方法的调用：（用方法）
        int sum3 = addNum(30, 90);
        System.out.println(sum3);

        //50+48:
        System.out.println(addNum(50, 48));
    }
}