美文网首页
前端入门?我来教你(HTML)

前端入门?我来教你(HTML)

作者: f1a94e9a1ea7 | 来源:发表于2019-02-24 12:49 被阅读5次

    HTML 也是一种语言,用来描述网页。

    标签

    怎么描述的呢?

    用标签,标签包括开始标签和结束标签,比如 p 标签:

    <p>hello HTML</p>
    

    <p> 是开始标签,</p> 则是结束标签, 尖括号里的 「p」表示段落(paragraph) ,被包含在这个标签对里的 「hello HTML」则会以段落的形式显示。

    所有标签都是这种形式。

    如果把尖括号里的 「p」 改成 「a」:<a></a> ,就是一个 a 标签了, a 标签表示链接,点击后跳转到指定地址,现在 a 标签里面什么内容都没有,点都没地方点,那我们就放点内容进去:

    <a> 点击跳转 HTML 教程 </a>
    

    现在 「点击跳转 HTML 教程」几个字颜色会变成蓝色,而且下面会有一条横线,这是 a 标签的默认样式。

    但是现在还没有告诉 a 标签要跳转的链接,即使可以点击这个 a 标签了,它也没地方跳。那么就要用到标签的属性了。

    标签属性

    属性是写在开始标签里的,形式是:属性名=属性值,比如 a 标签跳转的属性是 「href」 ,我们要跳转的地方是:http://www.w3school.com.cn/html/html_links.asp

    那就这样写:

    <a href="http://www.w3school.com.cn/html/html_links.asp"> 点击跳转 HTML 教程 </a>
    

    你现在应该自己也想试一下,可以打开 w3c 的 html 教程,点击里面的「亲自试一试」按钮。

    我个人比较推荐上 mdn 学习,只是它的样式排版可能对初学者来说会有点混乱。

    语义性

    虽然大多数时候我们只用 div 标签 和 span 标签就够了,但是为了:

    1. 增强可读性,方便维护

    2. 方便机器阅读

    3. 方便爬虫抓取

    (其实以上三点都可以划掉,大部分工作是不会用到的,但是你得自己心里有个底知道这些)

    后来人们又增加了许多语义性的标签,比如:aside 标签标示侧边栏不很重要的内容,main 标签用来包裹页面的主要部分等等,可以通过搜索引擎查查看都新增了哪些语义标签。

    结尾&作业

    上面概括地说了 HTML 标签的用法和特征,也给了两个学习的地址,里面每个标签都有详细解释,也有编辑器让你熟悉这些标签,大家要自己去熟悉熟悉上面的每个标签,我不可能像那上面一样每个标签都说一遍,这不现实也没必要,入门级的 HTML 太简单,就是一些常用标签的含义和他们的属性。

    当你真的有在 w3c 或者 mdn 过一遍后,希望你能完成下面的问题:

    1. CSS 和 JS 在 HTML 有几种引入方式,都是怎么引入的?

    2. JS 代码应该放在 HTML 文件的哪里?为什么?

    3. 这是一篇 wiki 文章,尝试自己用语义标签把它写出来。

    最后如果你在过程中遇到了难以解决的问题或者觉得我哪里写得还需要改进需要补充希望可以跟我说。

    然后就是搜索最好不要用某度,github.com 搜索 lartern ,每个月有 500M 免费流量可以翻墙,或者用必应。

    注释:

    难以解决:换了 n 多相关关键字都没有搜索到答案

    相关文章

      网友评论

          本文标题:前端入门?我来教你(HTML)

          本文链接:https://www.haomeiwen.com/subject/pnwvyqtx.html