作业二

2015-12-03 本文已影响0人美美哒的程序猿

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

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

写在前面的话：

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

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

一个段落
代码片段：
Paste_标签代码
预览效果：
Paste_Image.png
3.强调内容字体加粗
代码片段：
Paste_标签代码
预览效果：
Paste_标签

       <ul> 
         <li>列表信息</li>
           <li>列表信息</li> 
           </li> .........</li>
       </ul>
       这个标签是为了在网页将信息以列表的形式显示出来

代码片段：

Paste_<ul>标签代码
预览效果：

Paste_<ul>标签
相类似的还有
<ol>
<li>第一个列表</li>
<li>第二个列表</li>
<li>第三个列表</li>
</ol>
唯一的区别就是列表前面的圆点改为数字递增
5.<q>适合引用短文本</q>
代码片段：

Paste_<q>标签代码
预览效果：

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

Paste_ 标签代码

预览效果：

Paste_ 标签

        +<hr>标签作用是添加水平横线，和<br>一样只有开始标签，用法也相同就不加演示了。

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

        +<address>网页上显示的地址</address>
        +<code>加入一段代码</code>
        +<pre>加入代码段</pre>
        +<div>内容的排版</div> 这个标签作用就是将内容划分为相应的板块
        + HTML中注释语法：  **<!--****注释文字写的地方 -->**
        +在HTML中加入空格使用"&nbsp；"

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

作业二

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

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

写在前面的话：

猜你喜欢

热点阅读