初学HTML-CSS第一天

简介: 首次学习前端基础,了解HTML控制元素、CSS控制样式,模仿制作简单新闻页面。通过实践掌握了标题、图片、视频、文本等标签的使用,以及样式调整和布局方法,初步实现了页面元素的结构与美化。

第一次学习了前端基础知识。知道HTML是来控制前端的元素,CSS控制样式。试着模仿了一个简单的新闻界面。
1、首先我们要在头部标签里写一个标题image.png
保存之后试着运行一下。效果如下:image.png
2、新闻从上到下依次是logo,标题,正文,和尾部。想要实现logo我们需要导入一个图片,需要用到img标签。
img标签中有src、alt、width、higth元素。详细的src是图片路径。当然这个路径有三种方式:在线地址、相对路径、绝对路径,这里我们推荐使用相对路径。alt是如果图片找不到了输出什么,width、higth是这个视频的宽度和高度单位一般是px像素。具体实现代码:image.png
3、标题的标签一般用h1-h6,我们这里使用h1:image.png
这个span标签可以精准的让里面的文字来改变样式,我们这里要使用选择器来定位到它,选择器有元素选择器,类选择器和id选择器,优先级是id选择器>类选择器>元素选择器。如果是统一让这个标签改变样式推荐用元素选择器,但是只是想只改变这一处的话推荐用后两个,这里我们选择id选择器:image.png
在头部标签里加入style标签然后这样使用。
4、下面可以插入一个视频了,我们使用video标签,这个和插入图片基本一样。src、width、higth。单独多了一个controls:决定是否显示播放按钮。image.png
5、接下来我们开始做正文部分,新闻肯定一般都是一段文字一张图片的形式。这里加入段落的话使用p标签,其中也可以对文字部分进行加粗、下划线、倾斜、删除线处理。分别使用b、u、i、s、标签来实现。image.png当然我们上面插入logo的时候已经很轻松的掌握了插入图片的方式,这里也是插入第二张图片image.png
6、插入线条用hr标签。image.png
7、最后就是日期和一个跳转网站的超链接了。日期还是正常文字用p标签。超链接我们使用a标签:href网站路径、target是选择是否要在新页面打开,是就是blank,在本页面打开是self,如果不设置的话默认是self。
8、想要解决文本居中我们用div标签把整个所有新闻的内容包裹在里面,可以理解为把它放到一个盒子里,再用style改变样式来使这个盒子居中。image.png
image.png

相关文章
|
4月前
|
前端开发
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
269 108
|
4月前
|
自然语言处理 前端开发 JavaScript
js异步
js异步
595 108
|
4月前
|
前端开发
Promise.all()方法和Promise.race()方法有什么区别?
Promise.all()方法和Promise.race()方法有什么区别?
401 115
|
4月前
|
SQL 数据可视化 数据挖掘
云上 · 百炼 MCP 数据分析与可视化 Demo 实战
一套跑在阿里云百炼上的“生成 SQL → 执行 → 分析 → 出图”闭环方案,端到端无本地依赖,可发布为组件/网页对外服务。
297 8
|
4月前
|
存储 JSON NoSQL
MongoDB 简介
MongoDB 是一款开源、高性能、无模式的文档型 NoSQL 数据库,采用 BSON 文档存储数据,支持灵活的数据结构,适用于社交、游戏、物流、物联网等多种场景。具备高性能、高可用、高扩展及丰富查询能力,适合需快速迭代、大规模数据存储与高并发读写的应用。
564 2
|
4月前
|
XML JSON 数据库
大模型不听话?试试提示词微调
想象一下,你向大型语言模型抛出问题,满心期待精准回答,得到的却是答非所问,是不是让人抓狂?在复杂分类场景下,这种“大模型不听话”的情况更是常见。
275 9
|
4月前
|
缓存 Java Spring
Spring循环依赖:当两个Bean陷入鸡生蛋死循环时...
Spring中循环依赖问题常见于Bean相互依赖时,尤其在单例模式下。文章深入解析了循环依赖的成因及Spring的三级缓存解决方案,帮助理解Bean生命周期与依赖管理。
|
4月前
|
前端开发 JavaScript
Promise.allSettled()方法和Promise.all()方法有什么区别?
Promise.allSettled()方法和Promise.all()方法有什么区别?
390 123
|
4月前
|
前端开发
Promise.all()方法的作用是什么?
Promise.all()方法的作用是什么?
347 121

热门文章

最新文章