设为首页收藏本站
查看: 1015|回复: 7

[其它] web前端-带你从0到一写出一个新闻页面

[复制链接]
  • TA的每日心情
    奋斗
    昨天 10:26
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    发表于 2020-7-26 16:19:57 | 显示全部楼层 |阅读模式
    首先,前端大家肯定都不会陌生。这里不多哔哔了,直接开始讲。
    本期知识点:h1-h6标题,p标签,br和hr,以及字体颜色的控制(涉及css)
    首先讲一下基本的标签。一个网页是有一个严格的规定的。这严格的规定当然就是w3c的文档。然而我们现在属于连门都没有入的门外汉,就不要想着按照标准来了。
    先写出html文件的基本后缀:html,htm。如果日后你想搞一个动态页面推荐php。日后可能出php教程,也可能不出。
    html文件基本骨架如下:
    1. <html>
    2. <head>
    3. <title>如百度</title>
    4. <meta charset="UTF-8">
    5. </head>
    6. <body>
    7. 这里放上你想要的内容
    8. </body>
    9. </html>
    复制代码

    title里面放的都是关于网站的标题,显示在标签栏的,如咱们访问红盟,标签页都会显示红盟的全名。
    实际开发中,不但写上全称,有时还需要写上网页的一句话介绍,可以是广告语或者网站特点。淘宝的:淘,我喜欢。
    而mata语句很多人估计直接懵逼。首先这个标签记忆也很简单,ma我ta她。我和她。charset可以拆分成cha r set。具体各位自己进行记忆。这里就不再多说。
    这里实际上是防止中文网页的乱码现象。初学者直接复制即可。因为现在刚学习不要求什么都记忆,允许你偷懒一下~
    然后就是我们的重点介绍对象:
    h1-h6.这个基本框架没有介绍。但是我这里还有一个代码。没想到吧哈哈。
    1. <html>
    2. <head>
    3. <title>标题</title>
    4. <meta charset="UTF-8">
    5. </head>
    6. <body>
    7. <h1>h1</h1>
    8. <h2>h2</h2>
    9. <h3>h3</h3>
    10. <h4>h4</h4>
    11. <h5>h5</h5>
    12. <h6>h6</h6>
    13. </body>
    14. </html>
    复制代码

    h1是最大的标题,h6是最小的标题。最大的标题和最小的标题用法如下:
    h1是主要写网站名字的。h6可以再底部写上关于©的内容。而其它的根据重要性依次递减就行。
    在之前的版本有font标签,但是随着h5更新换代,这个语句已经逐渐废掉了。
    【特别提示:h1推荐最好使用1次】
    这个提示非常重要!h1是最大的标题,也是最重要的。所以我们才会说这个标题所显示的字体是最大的字体。
    而在日后开发,就算你是自己写网站玩玩,也必须让爬虫能够认识你这个网页的主要部分。这样对于你的网站seo排名是非常重要的。
    如果你标题用着混乱,就算爬虫能够分清楚,排版也会混乱不堪。所以,请大家千万不要随意使用h1标签。其它的随便使用。
    【标题不可以用来设置字号大小,以后学css再教你】
    那么接下来我们认识屁...呸!p标签。
    p标签就是段落标签,用着还算常用,有字的地方,特别是大片大片的字,最常用p了。
    但是这个段落和我们写作文的不一样。写作文都有空格对吧。以后学css再教你们设置首行缩进。下节大家可以使用标签完成首行缩进
    的效果,不过复杂一点而已~新闻页面一般都要讲究作文一样的书面。

    接下来认识两个标签后,我们再来初步涉及一下css..
    br标签就是转行。大家用p每一个标签结束后。都会很大的空格。这个br就很好的让我们的避免了一种大的空格。它除了行距,没有空格。
    hr画横线,以后可能会逐步废弃,使用场景也不多,更多的横线是使用边框(border)来实现的。这是一种css。
    那么说了这么多,最后说一下行内样式表的css.
    style是样式的意思。样式么,当然是和css挂钩。新手不要求直接了解css,我直接给代码大家看看就好!
    以下代码使text变成红色!
    <p style="color: red;">text</p>

    这时候大家可以使用这些标签做出一个新闻页面。当然,大家肯定不能消化。我已经做好了。大家可千万动手操作,不要直接改字啊!
    1. <html>
    2. <head>
    3. <title>震惊!竟然......</title>
    4. <meta charset="UTF-8">
    5. </head>
    6. <body>
    7. <h1>今日,竟然.....</h1>
    8. <hr>
    9. <p>竟然.....</p>
    10. <p>竟然.....</p>
    11. </body>
    12. </html>
    复制代码

    需要注意的地方,会让你以后学html如鱼得水:
    html标签有的有结束标签,有的没有。
    html标签样式都是 属性(如颜色)="你想要规定的" 空格
    这些现在讲着大家听不懂,慢慢的都懂了。

    此外就是因为这节课内容非常多,且排版不中。如果大家有什么疑惑可以问我,至于百度谷歌也肯定要没事就要上一上。
    源码都在文中给出了
  • TA的每日心情
    奋斗
    昨天 10:26
  • 签到天数: 11 天

    [LV.3]偶尔看看II

     楼主| 发表于 2020-7-26 16:22:03 | 显示全部楼层
    我知道这教程对于很多新手很不友好。但是没办法,因为前端其实没有大家想象的那么简单。这只是连入门都没,以后学css的盒子布局和js,还有vue等直接让你大喊难。加油!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 11:25
  • 签到天数: 28 天

    [LV.4]偶尔看看III

    发表于 2020-7-26 17:37:14 | 显示全部楼层
    先收藏,谢谢楼主大大
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 10:26
  • 签到天数: 11 天

    [LV.3]偶尔看看II

     楼主| 发表于 2020-7-26 18:47:27 | 显示全部楼层
    hh0707 发表于 2020-7-26 17:37
    先收藏,谢谢楼主大大

    感谢您的支持呀
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 143 天

    [LV.7]常住居民III

    发表于 2020-7-26 23:54:40 | 显示全部楼层
    wlmt666 发表于 2020-7-26 16:22
    我知道这教程对于很多新手很不友好。但是没办法,因为前端其实没有大家想象的那么简单。这只是连入门都没 ...

    你觉得你帖子里的内容很难吗。。。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 10:26
  • 签到天数: 11 天

    [LV.3]偶尔看看II

     楼主| 发表于 2020-8-1 22:16:44 | 显示全部楼层
    真是低调le 发表于 2020-7-26 23:54
    你觉得你帖子里的内容很难吗。。。

    这连前端的敲门砖都没够到,后期css,js,vue,node.js等框架多的是,而且还有了解前后端交互,到时候你就不这么认为。不过前端只是比后端简单罢了。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 10:26
  • 签到天数: 11 天

    [LV.3]偶尔看看II

     楼主| 发表于 2020-8-1 22:21:16 | 显示全部楼层
    真是低调le 发表于 2020-7-26 23:54
    你觉得你帖子里的内容很难吗。。。

    不过你能够是学员级别的,相比技术肯定比我好。没有嘲讽的意思,但是我还是觉得站在新人角度考虑好一点。这些东西我在教另一个人他要求我必须录制视频,不然听不懂
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 10:00
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    发表于 2020-8-4 23:38:23 | 显示全部楼层
    目前报了国内某机构的网课在学习前端,目前只学习到html的基础知识大概到锚链接那里,发现有挺多零散的东西,学的时候有些时候有点烦躁,希望自己能客服下来,打好前端基础
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    关闭

    站长推荐 上一条 /3 下一条

    红盟社区--中国红客联盟 

    Processed in 0.089092 second(s), 20 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    Powered by HUC © 2001-2017 Comsenz Inc.

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表