Fork me on GitHub

html基础(1)

Posted on | In

前言：关于HTML编辑器的使用，普通记事本就行，不过为了格式美观，这里采用Sublime Text(有点大材小用的味道)，notepad++也行。文本存储时，后缀使用.htm和html都行，双击文件即可运行。

  • 整体格式

    1
    2
    3
    4
    5
    6
    <!DOCTYPE html>
    <html>
    <body>
    编辑的一些内容
    </body>
    </html>

  • 标题
    总共六级，分别对应着h1~~h6

    1
    2
    <h1>这是一个一级标题</h1>
    <h5>这是一个五级标题</h5>

  • 段落
    没有等级之分

    1
    <p>这是一个段落</p>

  • 省略符
    在编辑html时，有时需要备注一些东西

    1
    <!--这里填写需要备注的内容-->

  • 链接
    有时会在网页中使用一个链接进行知识扩展

    1
    <a href="某个链接的URL">这是一个图片的链接</a>

  • 换行
    有时希望在不换段落的情况下换行。

    1
    <p>这是行甲<br />这是行乙</p>

  • 居中排列标题

    1
    <h1 align="center">这是一个居中排列的一级标题</h1>

  • 背景颜色
    在中添加背景颜色类型

    1
    2
    3
    <body bgcolor="yellow">
    </body>
    <!--将会使页面背景变成黄色-->

  • 水平线

    1
    <hr />

  • 图片

    1
    <img src="所引用图片的URL地址" width="某宽" height="某高" />

  • html输出问题
    对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

  • 一个例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <! DOCTYPE html>
    <html>
    <body bgcolor="yellow">		<!--使得背景颜色为黄色-->
    <h1 align="center">高考加油</h1>	 <!--使得该一级标题为居中-->
    <p>这是段落1<br/>en....(>0_0)>!! hello,高考.</p>	<!--采用换行符分开同一段落中的内容-->
    <p>这是段落2</br>goog lucky!!!</p>
    <p>这是段落3</br>相信自己，努力奋斗！！</p>
    <hr />	<!--采用<hr />在1，2文段间添加一个水平线-->
    <h2 align="center">努力者</h2>
    <a href="http://www.gaokao.com/">高考网</a>	<!--使用ahref="URL"的格式添加一个链接-->

    <p align="center"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528335541929&di=3ddb5ca9007a699eddbacd4a14a1ecfd&imgtype=0&src=http%3A%2F%2Fwww.pallasa.com%2Fjzxt%2FUploadFiles_6031%2F201603%2F2016032109464855.jpg" width="500" heiht="200"/></p>		<!--这里添加一个父类，然后让其中的图片居中-->
    <h3 align="center">祝君们金榜题名</h3>
    <p>人生有太多的第一次，
    			今日就是高考之日。
    					付出终有回报，
    						信心绝对重要。
    							明天还要考试，
    								别忘面带微笑。
    									有空睡个好觉，
    										不必紧张煎熬。
    											敞开鲲鹏怀抱，
    												直上青云九霄。


    													祝天下学子高考顺利金榜题名！
    </p>			<!--表明html输出时会忽略掉空格空行-->
    </body>
    </html>

下一篇：HTML基础知识(2)