黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版

文章目录

  • 前言
  • 一、认识web前端、HTML、CSS
  • 二、VS Code开发工具（插件弃用问题）
  • 三、HTML结构标签介绍
    • 1. 标签页标题< title >
    • 2. 图片标签< img >
      • 1) 常见属性
      • 2) src路径书写方式
    • 3. 标题标签< h >
    • 4. 水平分页线标签< hr >
  • 四、用Vscode实现标题排版
    • 1. 创建文件
    • 2. 初始化一下html文件
    • 3. 仿照新浪新闻元素编写标签
  • 五、完整源码和实现效果
  • 总结

前言

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题排版内容的总结，帮助需要学习Web开发的朋友温故而知新。

本系列笔记不会像韩顺平老师Java课程专栏笔记那么细致，主要是以展示知识点和基本语法和使用方法为主，作为本人以及各位朋友在Web开发过程中的一份“API文档”使用，语言会更言简意赅，目录会做得更细分，帮助大家在遗忘某个知识点时能够迅速准确回忆知识。

  1. 认识web前端、HTML、CSS
  2. VS Code开发工具（插件弃用问题）
  3. HTML结构标签介绍
  4. 用Vscode实现标题排版
  5. 完整源码和实现效果

一、认识web前端、HTML、CSS

  • Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium, 万维网联盟）负责制定。
  • 三个组成部分；
    • HTML: 负责网页的结构（页面元素和内容）
    • CSS: 负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
    • JavaScript: 负责网页的行为（交互效果）
  • HTML: HyperText Markup Language，超文本标记语言。
    • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
    • 标记语言：由标签构成的语言
      • HTML标签都是预定义好的。例如：使用< h >标签展示标题，使用< a >展示超链接，使用< img >展示图片，用< video >展示视频。
      • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
  • CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

二、VS Code开发工具（插件弃用问题）

根据文档把VScode安装好，该下的插件下好

  • 第11个插件Beautify已经弃用，这里我下了另一个插件JS-Beautify
    在这里插入图片描述
  • 第12个插件已经弃用，据提醒该功能已经被VsCode内置，无需单独下载
    在这里插入图片描述

三、HTML结构标签介绍

  • 以下是HTML结构标签基本格式：< title >中定义标题显示在浏览器的标题位置，< body >中定义的内容会呈现在浏览器的内容区域
<html><head><title> </title></head><body></body>
</html>

  • html的特点

    • 标签不区分大小写
      <html> <HTml> <HTML>都是一样的
      • 开发中一般使用小写
    • 标签的属性当中，双引号和单引号都可以使用
    • 语法结构比较松散（并不严格）
      • 建议编写的时候语法还是要写得严格一点

  • 我们以新浪新闻的页面排版为例，阐述这四个部分HTML各元素的实现。
    文章链接在此：焦点访谈：中国底气 新思想夯实大国粮仓
    在这里插入图片描述
    按从上往下的顺序，我们分别需要用到四个标签：

    • < title > : 标签页标题——焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻
    • < img > ：新闻中心logo图片
      • < h1> : 正文标题，这里我们用一级（最大）
    • < hr > : 水平分割线，有两条

1. 标签页标题< title >

把内容直接写在< title > < /title >中间即可
在这里插入图片描述

2. 图片标签< img >

1) 常见属性

  • src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
  • width: 图像的宽度 (px / % , 相对于父元素的百分比)
  • height: 图像的高度 (px / % , 相对于父元素的百分比)

2) src路径书写方式

  • 绝对磁盘路径（本地）：图片右击->属性->安全中查看
    在这里插入图片描述

  • 绝对网络路径（在网络上找网址）：右击图片，在新标签页中打开连接->新网站中右击图片，在新标签页中打开图片->复制图片网址
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 相对路径

    • ./ : 当前目录 （./ 可以省略）：这种情况适用于图片和我们编写的html文档在同一个文件夹

    • …/: 上一级目录（…/不能省略）：适用于图片和我们编写的html文档不在同一个文件夹

    • 例如：我们编写的html文件与图片并不在同一个文件夹里面，所以需要用…/返回上一个目录HTML，这样才可以正确访问到图片。这种情况用./是访问不到图片的，因为不在同一个文件夹。
      在这里插入图片描述

3. 标题标签< h >

标题标签: <h1> - <h6>
<h1>11</h1>
<h2>11</h2>
<h3>11</h3>
<h4>11</h4>
<h5>11</h5>
<h6>11</h6>效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。

4. 水平分页线标签< hr >

在这里插入图片描述

四、用Vscode实现标题排版

1. 创建文件

  • 在vscode文件夹下创建文件，文件后缀名一定要写为html
    在这里插入图片描述

2. 初始化一下html文件

  • 直接输入!号回车，会自动生成html中所有的结构标签
    在这里插入图片描述
    在这里插入图片描述
  • 注释直接选中需要注释的语句，ctrl + shift + /或者ctrl + /就可以一键注释

3. 仿照新浪新闻元素编写标签

  • 红色方框内为HTML文件经典内容，不用修改，蓝色部分是标签页标题，需要修改
    在这里插入图片描述
    即修改蓝色方框内容为（浏览器标签题目）——焦点访谈： 中国底气 新思想夯实大国粮仓_新浪新闻
    在这里插入图片描述

  • 将需要的图片、音频资料放入文件夹中（在本地电脑上粘贴，不要在vscode里面复制粘贴）
    在这里插入图片描述

  • 写上新浪新闻的logo图片地址（src）

  • 图片一般只设置宽度或高度的一个，这样就可以等比例缩放，图片不会拉伸变形
    在这里插入图片描述

  • 如果只写百分比，那么尺寸会调整为父元素的比例，父元素为< body >< /body >区域
    在这里插入图片描述

  • 当然，在本篇例子中，我们不需要对logo大小做任何改动，只需要在后面加上一行字就可以了。
    在这里插入图片描述
    实现：
    在这里插入图片描述

  • 标题用< h1 >即可

  • 用< hr > 实现分割行，两个分割行之前加上时间信息
    在这里插入图片描述
    实现：
    在这里插入图片描述

五、完整源码和实现效果

<!-- 文档类型为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=S, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻</title>
</head>
<body><!-- src: 指定图像的urlwidth: 图像的宽度height: 图像的高度--><img src="../img/news_logo.png"> 新浪政务 > 正文<!-- 实现标题，用一级标题 --><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><!-- 实现两条分割线，其中有时间信息 --><hr>2023年03月02日 21:50 央视网<hr></body>
</html>

在这里插入图片描述

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题排版内容的总结，帮助需要学习Web开发的朋友温故而知新。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/874412.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【大数据专题】Spark题库

【大数据专题】Spark题库

1 . 简述什么是Spark &#xff1f; 试题回答参考思路&#xff1a; Spark是大数据的调度&#xff0c;监控和分配引擎。它是一个快速通用的集群计算平台.Spark扩展了流行的MapReduce模型.Spark提供的主要功能之一就是能够在内存中运行计算 &#xff0c;但对于在磁盘上运行的复杂…
阅读更多...
ElasticSearch-match_phrase查询

ElasticSearch-match_phrase查询

match_phrase GET /my_index/address/_search {query: {match_phrase:"hello world"} } hello world 必须相邻才能被搜索出来&#xff0c;比如下面的句子&#xff1a; 1.Hello World tom, do you know me // 能搜到 2.see the world // 搜不到 3.Hello tom // 搜不…
阅读更多...
代码随想录day19 235. 二叉搜索树的最近公共祖先 、701.二叉搜索树中的插入操作 、 450.删除二叉搜索树中的节点

代码随想录day19 235. 二叉搜索树的最近公共祖先 、701.二叉搜索树中的插入操作 、 450.删除二叉搜索树中的节点

代码随想录day19 235. 二叉搜索树的最近公共祖先 、701.二叉搜索树中的插入操作 、 450.删除二叉搜索树中的节点 235. 二叉搜索树的最近公共祖先 不算难&#xff0c;分类讨论即可 class Solution { public:TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, Tree…
阅读更多...
ubuntu 源码安装postgis插件

ubuntu 源码安装postgis插件

ubuntu 22 源码安装postgresql 16 教程 一、安装依赖&#xff1a; # 我的各个版本 # libgeos-dev 3.10.2 # libproj-dev 8.2.1 # libgdal-dev 3.4.1 # libxml2-dev 2.9.13 apt install -y libgeos-dev libproj-dev libgdal-dev libxml2-dev二、下载解压源码&#xff1a; …
阅读更多...
安全的备忘录工具有哪些 安全好用的备忘录

安全的备忘录工具有哪些 安全好用的备忘录

在这个数字化的时代&#xff0c;我们的生活中充斥着各种各样的信息&#xff0c;从工作计划到个人琐事&#xff0c;从账号密码到重要日期&#xff0c;这些信息都需要我们牢记。然而&#xff0c;人的记忆毕竟有限&#xff0c;于是&#xff0c;备忘录工具成为了我们日常生活中不可…
阅读更多...
bash XXX.sh文件和直接运行XXX.sh的区别

bash XXX.sh文件和直接运行XXX.sh的区别

区别&#xff1a; bash XXX.sh 明确说明使用bash作为脚本的解释器不需要文件有执行权限 XXX.sh 需要指定相关解释器。如果第一行是#!/bin/bash则使用bash&#xff0c;如果是#!/bin/sh&#xff0c;则使用sh作为解释器需要有执行权限:通过chmod x 文件名指定 注意: #!是特殊标…
阅读更多...
Could not load dynamic library ‘cudart64_100.dll‘

Could not load dynamic library ‘cudart64_100.dll‘

python代码报错 Could not load dynamic library cudart64_100.dll; dlerror: cudart64_100.dll not found 2024-07-22 14:19:21.931639: I tensorflow/stream_executor/cuda/cudart_stub.cc:29] Ignore above cudart dlerror if you do not have a GPU set up on your machine…
阅读更多...
运行 npm install 报错-4048

运行 npm install 报错-4048

我在已经开发中的项目&#xff0c;执行 npm install 命令时&#xff0c;出现报错&#xff1a; 并且之前在帖子中提到的报错类型还不一样&#xff08;帖子内容如下&#xff09;&#xff1a; 运行 npm run dev 总报错_运行npm run dev报错-CSDN博客 该报错内容主要为权限导致的&…
阅读更多...
C# 编程机器人

C# 编程机器人

右边写代码&#xff0c;控制左边机器人移动 冯腾飞/编程机器人 - Gitee.com
阅读更多...
ActiViz中的选择点vtkWorldPointPicker

ActiViz中的选择点vtkWorldPointPicker

文章目录 1. vtkWorldPointPicker简介2. 类的位置和继承关系3. 选择机制4. 返回的信息5. 选择的条件和参数6. 与屏幕空间选择器的比较7. 性能特征8. 应用场景9. 与其他vtk选择器的集成10. 完整示例总结1. vtkWorldPointPicker简介 vtkWorldPointPicker是Visualization Toolkit…
阅读更多...
SpringBoot框架学习笔记（五）：静态资源访问、Rest风格请求处理、配置视图解析器、接收参数的相关注解详解

SpringBoot框架学习笔记（五）：静态资源访问、Rest风格请求处理、配置视图解析器、接收参数的相关注解详解

1 WEB开发-静态资源访问 1.1 基本介绍 &#xff08;1&#xff09;只要静态资源放在类路径的以下目录&#xff1a;/static、/public、/resources、/META-INF/resources 可以被直接访问。maven项目的类路径即为main/resources目录--对应SpringBoot源码为WebProperties.java类 …
阅读更多...
基于STM32的PM2.5监测系统设计

基于STM32的PM2.5监测系统设计

目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 &#x1f91e;大家好&#xff0c;这里是5132单片机毕业设计&#xff0c;今天给大家分享的是《基于STM32的PM2.5监测系统设计》。 设备的详细功能见网…
阅读更多...
Nginx 怎样处理请求的重试机制？

Nginx 怎样处理请求的重试机制？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 怎样处理请求的重试机制&#xff1f;一、为何需要重试机制&#xff1f;二、Nginx 中的重试机制原理三、Nginx 重试机制的配置参数四、Nginx 重试机制的实际…
阅读更多...
GPT盘新增容量后如何扩容？

GPT盘新增容量后如何扩容？

场景&#xff1a;一块5T的GPT盘&#xff0c;现有需求再加10T&#xff0c; 在虚拟化平台加10T盘后&#xff0c;机器不重启&#xff0c;执行命令 echo 1 > /sys/block/sdb/device/rescan刷新磁盘容量&#xff0c;可看到容量已刷出。 但执行fdisk /dev/sdb时&#xff0c;发现创…
阅读更多...
《0基础》学习Python——第二十二讲__网络爬虫/＜5＞爬取豆瓣电影封面图

《0基础》学习Python——第二十二讲__网络爬虫/＜5＞爬取豆瓣电影封面图

一、爬取豆瓣电影的图片封面 1、经过上节课我们所爬取的豆瓣电影的电影名、年份、国家、导演、主演、剧情&#xff0c;那么接下来我们将学习如何去爬取这些电影的图片&#xff0c;并将这些图片存放在文件夹中。 2、过程实现&#xff1a; 2.1、获取网页源码 首先还是和爬取电影名…
阅读更多...
Air780EP-AT开发-HTTP应用指南

Air780EP-AT开发-HTTP应用指南

简介 关联文档和使用工具&#xff1a; AT固件获取AT指令手册 概述 4G模块支持HTTP和HTTPS协议&#xff0c; HTTP应用的基本流程如下&#xff1a; 1、激活PDP&#xff08;参考&#xff1a;http://oldask.openluat.com/article/937&#xff09;2、初始化HTTP服务3、设置HTTP会话…
阅读更多...
服务器上使用Docker部署sonarQube，并集成到Jenkins实现自动化。

服务器上使用Docker部署sonarQube，并集成到Jenkins实现自动化。

目标是要在目标服务器上使用docker工具部署好sonar环境&#xff0c;然后再集成到Jenkins中实现自动化的代码审查工作。 Docker 首先Dokcer的源大部分现在都用不了&#xff0c;于是我上网查询&#xff0c;终于找到了一个可用的镜像。 编辑/etc/docker/daemon.json文件&#x…
阅读更多...
经典网络(一）resnet

经典网络(一）resnet

参考了网上的一些代码&#xff0c;对resnet有了更深入的理解。因此做了两个类&#xff0c;一个是ResidualChunk&#xff0c;一个是ResNet18。如果使用了nn.BatchNorm2d,则在conv函数中设置bias是无用的&#xff0c;可以设置为False。 在下面会列出来实践的代码&#xff0c;其中…
阅读更多...
Linux中的时间函数

Linux中的时间函数

参考&#xff1a; 几种取时间的方法&#xff08;附代码&#xff09; Linux中gmtime和localtime的区别(time_t格式转换为tm格式) C 库函数 - time() mktime和localtime_r能在多线程环境下使用么&#xff1f; Linux_C环境编程&#xff1a;时间日期函数总结 细说时间测量RDT…
阅读更多...
docker php8.1+nginx base 镜像 dockerfile 配置

docker php8.1+nginx base 镜像 dockerfile 配置

这个是docker 配置的base dockerfile 如果搭建phpnginx 环境&#xff0c;可以直接使用这个dockerfile配置。直接在你代码里面的dockerfile 引用此基础镜像。 # 使用官方的 PHP 镜像作为基础镜像 FROM php:8.1-fpm # 更换国内源并安装系统依赖 RUN rm -rf /etc/apt/sources.l…
阅读更多...
最新文章

Copyright @ 2022~2023