0
点赞
收藏
分享

微信扫一扫

Javaweb之HTML,CSS的详细解析

星巢文化 03-15 23:30 阅读 3


 2. HTML & CSS

1). 什么是HTML ?

HTML: HyperText Markup Language,超文本标记语言。

  • 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
  • 标记语言:由标签构成的语言
  • HTML标签都是预定义好的。例如:使用 <h1> 标签展示标题,使用<a>展示超链接,使用<img>展示图片,<video>展示视频。
  • HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

下面展示的是一段html代码经过浏览器解析,呈现的效果如右图所示:

Javaweb之HTML,CSS的详细解析_html

2). 什么是CSS ?

CSS: Cascading Style Sheet,层叠样式表,用于控制页面的样式(表现)。

下面展示的是一段 html代码 及 CSS样式 经过浏览器解析,呈现的效果如右图所示:

Javaweb之HTML,CSS的详细解析_html_03

2.1 HTML快速入门

2.1.1 操作

第一步:创建一个名为HTML的文件夹,然后找到课程资料中的 1.jpg 文件放到该目录下,此时HTML文件夹中内容如下:

Javaweb之HTML,CSS的详细解析_Code_05

第二步:创建一个文本文件,然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示:

Javaweb之HTML,CSS的详细解析_Code_07

第三步:选中文件,鼠标右击,选择使用记事本打开文件,并且编写前端代码

首先html有固定的基本结构

<html>
    <head>
        <title>HTML 快速入门</title>
    </head>
    <body>
        <h1>Hello HTML</h1>
        <img src="1.jpg"/>
    </body>
</html>

其中<html>是根标签,<head>和<body>是子标签,<head>中的字标签<title>是用来定义网页的标题的,里面定义的内容会显示在浏览器网页的标题位置。

而 <body> 中编写的内容,就网页中显示的核心内容。

第四步:然后选中文件,鼠标右击,选择使用浏览器打开文件,浏览器呈现效果如下:

Javaweb之HTML,CSS的详细解析_Code_10

2.1.2 总结

1). HTML页面的基础结构标签

<html>
    <head>
        <title> </title>
    </head>
    <body>
       
    </body>
</html>

Javaweb之HTML,CSS的详细解析_html_12

<title>中定义标题显示在浏览器的标题位置,<body>中定义的内容会呈现在浏览器的内容区域

2). HTML中的标签特点

  • HTML标签不区分大小写
  • HTML标签的属性值,采用单引号、双引号都可以
  • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

2.2 开发工具

  • 我们通过快速入门案例,发现由记事本文件开发html是非常不方便的,所以接下来我们需要学习一款前端专业的开发工具VS Code。
  • Visual Studio Code(简称 VS Code )是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code 提供了非常强大的插件库,大大提高了开发效率。
  • 官网: Visual Studio Code - Code Editing. Redefined
  • 详细安装教程:参考 资料/VSCode安装/安装文档/VS Code安装文档.md

注意:需要注意的是,我们作为一名开发者,不应该将软件软装在包含中文名的路径中 。

2.3 基础标签 & 样式

那我们在讲解HTML的常见基础标签 及 CSS的基本样式时,我们就以 新浪新闻页面 为例,来进行讲解,这样大家不仅能够知道 常见标签及样式的作用,还能够知道具体的应用场景。

新浪新闻的具体页面效果如下:

Javaweb之HTML,CSS的详细解析_Code_13

Javaweb之HTML,CSS的详细解析_Code_14编辑

原始页面网址:焦点访谈:中国底气 新思想夯实大国粮仓_新浪新闻

而对于这个新浪新闻的页面来说,核心内容分为两个部分,如下:

  • 新浪新闻-标题部分
  • 新浪新闻-正文部分
  • 编辑

2.3.1 新浪新闻-标题实现

2.3.1.1 标题排版

2.3.1.1.1 分析

Javaweb之HTML,CSS的详细解析_Code_15

Javaweb之HTML,CSS的详细解析_html_16编辑

1). 第一部分,是一张图片,需要用到HTML中的图片标签 <img> 来实现。

2). 第二部分,是一个标题,需要用到HTML中的标题标签 <h1> ... <h6>来实现。

3). 第三部分,有两条水平分割线,需要用到HTML中的 <hr> 标签来定义水平分割线。

2.3.1.1.2 标签

1). 图片标签 img

A. 图片标签: <img>

B. 常见属性: 
    src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
    width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
    height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
    
    备注: 一般width 和 height 我们只会指定一个,另外一个会自动的等比例缩放。
    
C. 路径书写方式:
    绝对路径:
        1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
                       <img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">

        2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                       <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
    
    相对路径:
        ./ : 当前目录 , ./ 可以省略的
        ../: 上一级目录

2). 标题标签 h 系列

A. 标题标签: <h1> - <h6>

<h1>111111111111</h1>
    <h2>111111111111</h2>
    <h3>111111111111</h3>
    <h4>111111111111</h4>
    <h5>111111111111</h5>
    <h6>111111111111</h6>

B. 效果 : h1为一级标题,字体也是最大的 ; h6为六级标题,字体是最小的。

3). 水平分页线标签 <hr>

2.3.1.1.2 实现

1). 打开VsCode,选择左侧最底部的 "资源管理器",然后选择打开文件夹,选择打开桌面的 HTML 文件夹

2). 将资料中提供的 图片、音频、视频 文件夹的这三个文件夹(里面是图片、音视频素材),复制到 HTML 文件夹中。

Javaweb之HTML,CSS的详细解析_Code_18

3). 在VsCode中创建一个新的 html 文件,文件的后缀名设置为 .html

Javaweb之HTML,CSS的详细解析_html_20

4). html 文件创建好之后,在其中输入 !,然后直接回车,就可以生成 HTML 的基础结构标签

Javaweb之HTML,CSS的详细解析_HTML_22

5). 编写标题排版的核心代码

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈:中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <!-- 
    img标签: 
        src: 图片资源路径
        width: 宽度(px, 像素 ; % , 相对于父元素的百分比)
        height: 高度(px, 像素 ; % , 相对于父元素的百分比)
        
        <img src="img/news_logo.png" width="80%" >

路径书写方式:
        绝对路径:
            1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
                           <img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">

            2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                           <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
        相对路径:
            ./ : 当前目录 , ./ 可以省略的
            ../: 上一级目录

-->
    <img src="img/news_logo.png"> 新浪政务 > 正文

    <h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1>
    
    <hr>
    2023年03月02日 21:50 央视网
    <hr>

</body>
</html>



举报

相关推荐

0 条评论