美文网首页
前端入门?我来教你(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)

    HTML 也是一种语言,用来描述网页。 标签 怎么描述的呢? 用标签,标签包括开始标签和结束标签,比如 p 标签:...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 前端入门?我来教你(CSS)

    CSS 规则 CSS 的顶层样式表由两种规则组成的规则列表构成: at-rule,也就是 at 规则 qualif...

  • 前端入门?我来教你(前言)

    为什么会写这个? 我是自学过来的,所以对自学前端这件事深有体会,如果当时有个人带我,我会少走很多弯路。 然后又经常...

  • 前端入门?我来教你(面试)

    为什么想先说说面试呢? 一是因为我刚刚面试完,这次的面试还挺多东西可以说一说的. 二是学前端的朋友肯定都想知道到时...

  • 2018-04-10前端学习笔记

    前端入门 核心基础 HTML+CSS+JAVASCRIPT HTML 教程:菜鸟教程-HTML 练习检测:慕课网-...

  • 新手如何入门学习前端?

    Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下。 一、HTML、CSS基础、JavaScr...

  • 适合前端开发的书籍

    首先是前端入门,html+css的相关书籍。 《Head First HTML与CSS》。入门首选好书,通俗易懂,...

  • 前端入门(HTML)

    1.HTML(Hypertext Markup Language)超文本标记语言。2.它主要负责网页的三个要素中的...

  • 前端学习

    入门 若想学 HTML, 应从哪里入门? 想成为前端工程师,那么在大学期间应该如何规划 如何自学计算机前端开发? ...

网友评论

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

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