Javaweb之HTML,CSS的详细解析

2. HTML & CSS

1). 什么是HTML ?

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

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

Javaweb之HTML,CSS的详细解析_第1张图片

2). 什么是CSS ?

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

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

Javaweb之HTML,CSS的详细解析_第2张图片

2.1 HTML快速入门

2.1.1 操作

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

Javaweb之HTML,CSS的详细解析_第3张图片

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

Javaweb之HTML,CSS的详细解析_第4张图片

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

首先html有固定的基本结构


    
        HTML 快速入门
    
    
        

Hello HTML

其中是根标签,和是子标签,中的字标签是用来定义网页的标题的,里面定义的内容会显示在浏览器网页的标题位置。</p> <p>而 <body> 中编写的内容,就网页中显示的核心内容。</p> <p></p> <p>第四步:然后选中文件,鼠标右击,选择使用浏览器打开文件,浏览器呈现效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/785f56479f5c4058bf6226d9eade5af6.jpg" target="_blank"><img alt="Javaweb之HTML,CSS的详细解析_第5张图片" height="323" src="http://img.e-com-net.com/image/info8/785f56479f5c4058bf6226d9eade5af6.jpg" width="650" style="border:1px solid black;"></a></p> <p></p> <h4>2.1.2 总结</h4> <p>1). HTML页面的基础结构标签</p> <pre><code class="language-html"><html> <head>   <title>                  

中定义标题显示在浏览器的标题位置,<body>中定义的内容会呈现在浏览器的内容区域</p> <p></p> <p>2). HTML中的标签特点</p> <ul> <li> <p>HTML标签不区分大小写</p> </li> <li> <p>HTML标签的属性值,采用单引号、双引号都可以</p> </li> <li> <p>HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)</p> </li> </ul> <p></p> <p></p> <h3>2.2 开发工具</h3> <ul> <li> <p>我们通过快速入门案例,发现由记事本文件开发html是非常不方便的,所以接下来我们需要学习一款前端专业的开发工具VS Code。</p> </li> <li> <p>Visual Studio Code(简称 VS Code )是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code 提供了非常强大的插件库,大大提高了开发效率。</p> </li> <li> <p>官网: Visual Studio Code - Code Editing. Redefined</p> </li> </ul> <p></p> <ul> <li> <p>详细安装教程:参考 <strong>资料/VSCode安装/安装文档/VS Code安装文档.md</strong></p> </li> </ul> <p></p> <blockquote> <p>注意:需要注意的是,我们作为一名开发者,不应该将软件软装在包含中文名的路径中 。</p> </blockquote> <p></p> <p></p> <p></p> <p></p> <h3>2.3 基础标签 & 样式</h3> <p>那我们在讲解HTML的常见基础标签 及 CSS的基本样式时,我们就以 新浪新闻页面 为例,来进行讲解,这样大家不仅能够知道 常见标签及样式的作用,还能够知道具体的应用场景。</p> <p>新浪新闻的具体页面效果如下:</p> <p></p> <p>原始页面网址:焦点访谈:中国底气 新思想夯实大国粮仓_新浪新闻</p> <p></p> <p>而对于这个新浪新闻的页面来说,核心内容分为两个部分,如下:</p> <ul> <li> <p>新浪新闻-标题部分</p> </li> <li> <p>新浪新闻-正文部分</p> </li> <li> <p></p> </li> </ul> <p></p> <p></p> <h4>2.3.1 新浪新闻-标题实现</h4> <h5>2.3.1.1 标题排版</h5> <h6>2.3.1.1.1 分析</h6> <p><a href="http://img.e-com-net.com/image/info8/1ead2be8ef05452eaa30a372f8c95e98.jpg" target="_blank"><img alt="Javaweb之HTML,CSS的详细解析_第6张图片" height="161" src="http://img.e-com-net.com/image/info8/1ead2be8ef05452eaa30a372f8c95e98.jpg" width="650" style="border:1px solid black;"></a></p> <p>1). 第一部分,是一张图片,需要用到HTML中的图片标签 <img> 来实现。</p> <p>2). 第二部分,是一个标题,需要用到HTML中的标题标签 <h1> ... <h6>来实现。</p> <p>3). 第三部分,有两条水平分割线,需要用到HTML中的 <hr> 标签来定义水平分割线。</p> <p></p> <h6>2.3.1.1.2 标签</h6> <p>1). 图片标签 img</p> <pre>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">       相对路径:       ./ : 当前目录 , ./ 可以省略的       ../: 上一级目录</pre> <p></p> <p>2). 标题标签 h 系列</p> <pre>A. 标题标签: <h1> - <h6>     </pre> <pre><code class="language-html"><h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6> </code></pre> <pre>B. 效果 : h1为一级标题,字体也是最大的 ; h6为六级标题,字体是最小的。</pre> <p></p> <p>3). 水平分页线标签 <hr></p> <p></p> <h6>2.3.1.1.2 实现</h6> <p>1). 打开VsCode,选择左侧最底部的 "资源管理器",然后选择打开文件夹,选择打开桌面的 HTML 文件夹</p> <p>2). 将资料中提供的 图片、音频、视频 文件夹的这三个文件夹(里面是图片、音视频素材),复制到 HTML 文件夹中。</p> <p><a href="http://img.e-com-net.com/image/info8/a6edfa45dbc8464f94db8fccc2903854.jpg" target="_blank"><img alt="Javaweb之HTML,CSS的详细解析_第7张图片" height="164" src="http://img.e-com-net.com/image/info8/a6edfa45dbc8464f94db8fccc2903854.jpg" width="650" style="border:1px solid black;"></a></p> <p>3). 在VsCode中创建一个新的 html 文件,文件的后缀名设置为 .html</p> <p><a href="http://img.e-com-net.com/image/info8/40d9c156302143d1ae6433816467d765.jpg" target="_blank"><img alt="Javaweb之HTML,CSS的详细解析_第8张图片" height="497" src="http://img.e-com-net.com/image/info8/40d9c156302143d1ae6433816467d765.jpg" width="650" style="border:1px solid black;"></a></p> <p>4). html 文件创建好之后,在其中输入 !,然后直接回车,就可以生成 HTML 的基础结构标签</p> <p><a href="http://img.e-com-net.com/image/info8/3e5823568c5a4c6d904e36931a298532.jpg" target="_blank"><img alt="Javaweb之HTML,CSS的详细解析_第9张图片" height="191" src="http://img.e-com-net.com/image/info8/3e5823568c5a4c6d904e36931a298532.jpg" width="650" style="border:1px solid black;"></a></p> <p>5). 编写标题排版的核心代码</p> <pre><code class="language-html"><!-- 文档类型为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>焦点访谈:中国底气 新思想夯实大国粮仓         新浪政务 > 正文 ​    

焦点访谈:中国底气 新思想夯实大国粮仓

       
  2023年03月02日 21:50 央视网    

你可能感兴趣的:(Web,html,css,前端,开发语言,笔记)