HTML学习笔记 Part1

网络组组织学习HTML,CSS还有JavaScript,刚刚起步,一步一步来。

最近学的东西挺杂的,有点忙不过来。但是尝试一下总是好的,等稳定下来后再决定取舍吧。


概论

HTML,英文全称为HyperText Markup Language,意指超文本标记语言,它运用一些标签元素来搭建成网页的基本结构。整个HTML文档都是由一个个的标签组成的。对于网页设计而言,它就像是盖房子中搭建框架结构的那一步,非常重要。

后续要学到的CSS还有JavaScript都是作为网页的修饰。想要学好HTML,记住各个标签的名称和用途很重要。(当然我写博客是需要一些HTML语言基础的,所以对于一些基本的标签还是略知一二的)

HTML文档的基本结构

html文档一般以.html结尾。标签通常都是成对出现的,这种叫双标签,还有一种标签叫单标签。

通常一份好的HTML代码,它对缩进等一些格式方面的要求也是挺高的。目前我还处于学习阶段,代码风格就先暂时不写了= =

双标签,也叫双标记,基本的格式是<标记>内容</标记>比如标题:<title> … </title>。

单标签,也叫单标记,基本的格式是<标记>。如换行:<br>。

一份完整的html代码有着自己最基本的结构。

从图上可以看出,该结构呈树状。根节点为html标签,然后是head和body标签,分别代表网站的头部分和身体部分。其中head里面还分为meta和title等其他标签(我相信肯定不止这些),而body就是网页的主体,可以自由发挥。

HTML标签支持嵌套。

一些比较基础但比较重要的标签

<html></html>标签包裹着所有的其他标签,它是html最外层的元素。

<head></head>头标签,里面包含着网站标题和开头部分的一些信息。

<meta></meta>标签可以提供页面的一些信息,比如网站使用的字符集编码charset。

<body></body>标签之间所包含的内容即为网页整个页面的内容。

<!DOCTYPE html>是一个文档声明,它告诉浏览器这是HTML5版本的页面。

为什么要选择HTML5?请自行查阅资料。

然后,下面就是用HTML5写出来的helloworld。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>test</title>

    </head>

    <body>
        hello,world!
    </body>

</html>

关于注释。它是这样写的:<!–这里是注释的内容–>

注释的内容不会被显示到浏览器上。

转义字符

有时候我们如果要在网页上直接显示HTML标签,直接写是不可以的,浏览器会认为它就是标签而不是文本。

而且,当你要连续打多个空格时,会发现浏览器只能显示一个(其实这个markdown编辑器也是这样,毕竟和HTML互相兼容的),那应该怎么做?

对于第二个问题,我有一个土办法,就是用全角空格代替。实际上,HTML有对应的转义字符来打出这些字符。

我找到了一个网站,上面有HTML的转义字符对照表,在需要时可以直接拿来用。链接

一些比较重要的标签

  1. div

    <div> 可定义文档中的分区或节。可以把它理解为一个容器或者一个盒子,可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
  2. span

    <span>标签被用来组合文档中的行内元素,功能和div类似,区别在于span可以用来装一小段文字,不换行,它在一行内显示。
  3. h1 ~ h6

    <h1></h1>代表1级标题,依此类推,一共有6个不同级别的标题,其中标题等级越大字体越小。
  4. table

    用来实现表格的标签,它很重要。实际上,有很多网站的整体布局就是一个大表格,只是它并没有显出表格线而已。其中的<tr></tr>可以用来另起一行,用<th></th>和<td></td>来开辟单元格。前者可以作为表头,因为字体自带加粗,后者可以作为主题内容。
  5. p

    表示段落的标签,用来写一段文字,标签之间自动分段。
  6. ul

    其实是无序列表。然后其中的每一项用双标签<li></li>。
  7. img

    用该单标签插入图片。可以设置几个属性,比如src=”图片地址”,alt=”图片提示”,这个是当图片加载失败时显示的内容。然后是title=”xxx”,加上它后,就会在网页里把鼠标光标放在图片上时显示出这些文字。
  8. i/em与strong。。。嗯还有一个u

    这都是啥呢?i/em双标签可以把里面的文字变为斜体,strong可以加粗,至于u标签,,,这个是下划线,不过据说不建议使用这个标签而建议使用css样式?
  9. a

    用a标签添加超链接。<a href=”test.html” target=” blank”>这里是链接</a>
    href属性代表链接的位置,后面还有一个target属性,当它置为_blank时代表在新窗口打开此页面。
  10. hr

    单标签,代表一道水平分割线。

是的。就是这个。

今天写了一小段测试代码,就贴这吧。。。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <a href="test.html" target="_blank">hhhhh</a>
        <table border = "0">
            <tr>
                <td><center>你好</center></td><td><center>世界</center></td>
            </tr>
            <tr>
                <td><img src="img/123.png"></td><td><img src="img/123.png" /></td>
            </tr>
        </table>    
        <h1>啊蛤</h1>
        现在我&nbsp;&nbsp;&nbsp;要输出一个&lt;br /&gt;
        <div id="" style="color = red;">
            哈哈哈哈嘿嘿嘿
        </div>
        <span id="">
            韩寒和韩红嘿嘿嘿韩红喊韩寒坏坏韩寒很后悔
        </span>
        <h2>啊嘿</h2>
        <p>
            你好,我是Shawn Zhou,欢迎光临我的新博客。

初次见面?请点击侧边栏“关于”页面,也许我们可以做朋友呢。

博客目前主要更新的内容是计算机二级试题选摘与ACM的一些题目,如果能对您有帮助,那真是很荣幸呢。

除了读文章,您可以来我的博客做什么呢?

听歌。左下角列出了一个小歌单,阅读之余可以来听听音乐(๑•̀ㅂ•́)و✧
(博主太弱啦,局部刷新都不会做,如果要听音乐,点击页面的时候记得选新窗口打开哦)

(采用了aplayer插件代替原来的网易云插件,现在舒服很多了!)

调教看板娘o( ̄ε ̄*)就在右下角哦。

留言吐槽。侧边栏的留言板,文章的评论区都可以哦φ(゜▽゜*)♪对博客或者博主有什么想法的话都可以写的23333
        </p>
        <p>
            你好,我是Shawn Zhou,欢迎光临我的新博客。

初次见面?请点击侧边栏“关于”页面,也许我们可以做朋友呢。

博客目前主要更新的内容是计算机二级试题选摘与ACM的一些题目,如果能对您有帮助,那真是很荣幸呢。

除了读文章,您可以来我的博客做什么呢?

听歌。左下角列出了一个小歌单,阅读之余可以来听听音乐(๑•̀ㅂ•́)و✧
(博主太弱啦,局部刷新都不会做,如果要听音乐,点击页面的时候记得选新窗口打开哦)

(采用了aplayer插件代替原来的网易云插件,现在舒服很多了!)

调教看板娘o( ̄ε ̄*)就在右下角哦。

留言吐槽。侧边栏的留言板,文章的评论区都可以哦φ(゜▽゜*)♪对博客或者博主有什么想法的话都可以写的23333
        </p>
        <hr >
        <h1>啊哈哈哈啊哈哈哈嗝</h1>
        <ul>
            <li>做成红烧竹鼠</li>
            <li><sub>做成红烧竹鼠</sub></li>
            <li><sup>做成红烧竹鼠</sup></li>
            <li><u>做成红烧竹鼠<u></li>
            <li><strong>做成红烧竹鼠</strong></li>
            <li><em>做成红烧竹鼠</em></li>
            <li><i>做成红烧竹鼠</i></li>
        </ul>
         <img src="img/pic.png" alt="图片加载失败QAQ" title="闪之轨迹 亚莉莎·莱恩福尔特">

    </body>
</html>

-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。