作业二

写给技术小白的HTML初级教程


以下是个人理解,仅供参考。

写在前面的话:

先给大家推荐我学习HTML的网站和方式,基础的就是慕课网上的《HTML+CSS基础课程》和网易云课堂上面翁凯老师的《HTML5入门》,我是看完之后在ecplice上写静态页面把所有标签反复使用,刚开始时在旁边注释写上这个标签的作用,加强记忆。


  • 关于HTML百度百科是这样说的,HTML是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。它是目前网络上应用最为广泛的语言,也是构成网页的主要语言。
    简单通俗来说就是平时我们想在淘宝,百度这些网站上查看某个东西时,点击图片或者链接,在服务器能找到这个资源的情况下它会给浏览器返回若干.html文件,通过浏览器的解释就出现了我们看到的页面了。如果你想查看页面的HTML源码,那么打开一个网页,点右键,选查看源文件,那就是html语言!你会看到原本在页面上显示的内容被一些带有“<>”的标签围绕,这是因为html的标签告诉浏览器将要呈现的页面应该“长”什么样。
  • 在介绍标签之前我想先说一下在哪写HTML,HTML是前端工程师和后端工程师都应该了解的,作为前端的话可以使用sublime Text,由于我是Javaweb后端开发所以平时都在ecplice上写HTML,当然在下载了ecplice的前提下还要配置服务器环境,大家可以百度一下。
  • 一个HTML文件像一个一样,那么其中的标签就代表树中的节点。其中就是根节点,根节点有两个孩子分别是和,标签中通常包含了这个HTML文件所需环境和标签,还可以包含一些css样式。标签中包含了网页显示的主要内容,同时里面的标签也挺多的,那么接下来给大家介绍HTML中的标签, 标签由英文尖括号<>括起来的,例如

    就是一个标签,一般情况下标签都是成对出现的,有开始标签和结束标签。

  • 下来介绍一下标签的具体使用方法。
    1.标题文本(x为1-6)
    代码片段
    作业二_第1张图片
    Paste_标签代码

    预览效果
    作业二_第2张图片
    Paste_标签
  1. < p>一个段落


    代码片段
    作业二_第3张图片
    Paste_

    标签代码


    预览效果
    作业二_第4张图片
    Paste_Image.png

    3.强调内容字体加粗
    代码片段
    作业二_第5张图片
    Paste_标签代码

    预览效果
    作业二_第6张图片
    Paste_标签
  2.        
    • 列表信息
    • 列表信息
    • .........
    这个标签是为了在网页将信息以列表的形式显示出来

代码片段

作业二_第7张图片
Paste_
    标签代码

预览效果
作业二_第8张图片
Paste_
    标签

相类似的还有

  1. 第一个列表

  2. 第二个列表

  3. 第三个列表


唯一的区别就是列表前面的圆点改为数字递增
5.适合引用短文本
代码片段

作业二_第9张图片
Paste_标签代码

预览效果

Paste_标签

+
长文本的引用
,和上面的标签使用方法一样就不做演示了。
+
标签表示换行只有开始标签,和编程语言中的"\n"作用相同。
代码片段:

Paste_
标签代码

预览效果:

作业二_第10张图片
Paste_
标签
        +
标签作用是添加水平横线,和
一样只有开始标签,用法也相同就不加演示了。

  通过上面的演示大家能看出来html中的标签使用还是比较简单的,简单来说就是你想让你的内容出现什么样的效果,那么就使用相应的标签,下面介绍的标签就不一一演示,大家可以下去自己练练手。

        +
网页上显示的地址
+加入一段代码 +
加入代码段
+
内容的排版
这个标签作用就是将内容划分为相应的板块 + HTML中注释语法: **** +在HTML中加入空格使用" ;"

上面只是 一些常用的标签,小伙伴们如果想深入了解的话可以看看《HTML与XHTML权威指导》

你可能感兴趣的:(作业二)