国外互联网科技网站,网站建设实训报告命名规范,电子商务网站建设的目标是什么,股权分配方案创业初期文章目录 前言一、认识web前端、HTML、CSS二、VS Code开发工具#xff08;插件弃用问题#xff09;三、HTML结构标签介绍1. 标签页标题 title 2. 图片标签 img 1) 常见属性2) src路径书写方式 3. 标题标签 h 4. 水平分页线标签 hr 四、用Vs… 文章目录 前言一、认识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文档”使用语言会更言简意赅目录会做得更细分帮助大家在遗忘某个知识点时能够迅速准确回忆知识。
认识web前端、HTML、CSSVS Code开发工具插件弃用问题HTML结构标签介绍用Vscode实现标题排版完整源码和实现效果 一、认识web前端、HTML、CSS
Web标准也称为网页标准由一系列的标准组成大部分由W3CWorld 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 中定义的内容会呈现在浏览器的内容区域
htmlheadtitle /title/headbody/body
/htmlhtml的特点 标签不区分大小写 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
h111/h1
h211/h2
h311/h3
h411/h4
h511/h5
h611/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 langen
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性的 --meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthS, initial-scale1.0title焦点访谈中国底气 新思想夯实大国粮仓_新浪新闻/title
/head
body!-- src: 指定图像的urlwidth: 图像的宽度height: 图像的高度--img src../img/news_logo.png 新浪政务 正文!-- 实现标题用一级标题 --h1焦点访谈中国底气 新思想夯实大国粮仓/h1!-- 实现两条分割线其中有时间信息 --hr2023年03月02日 21:50 央视网hr/body
/html总结
本篇文章是2023年最新黑马JavaWeb企业级开发知识清单01前端介绍、html实现标题排版内容的总结帮助需要学习Web开发的朋友温故而知新。
