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