美文网首页
HTML基础知识(1)

HTML基础知识(1)

作者: Hf1dw | 来源:发表于2018-06-07 07:15 被阅读0次

    //特别的日子,送给你们,高考君们。。。。。
    前言:关于HTML编辑器的使用,普通记事本就行,不过为了格式美观,这里采用Sublime Text(有点大材小用的味道),notepad++也行。文本存储时,后缀使用.htm和html都行,双击文件即可运行。

    • 整体格式
    <!DOCTYPE html>
    <html>
    <body>
    编辑的一些内容
    </body>
    </html>
    
    • 标题
      总共六级,分别对应着h1~~h6
    <h1>这是一个一级标题</h1>
    <h5>这是一个五级标题</h5>
    
    • 段落
      没有等级之分
    <p>这是一个段落</p>
    
    • 省略符
      在编辑html时,有时需要备注一些东西
    <!--这里填写需要备注的内容-->
    
    • 链接
      有时会在网页中使用一个链接进行知识扩展
    <a href="某个链接的URL">这是一个图片的链接</a>
    
    • 换行
      有时希望在不换段落的情况下换行。
    <p>这是行甲<br />这是行乙</p>
    
    • 居中排列标题
    <h1 align="center">这是一个居中排列的一级标题</h1>
    
    • 背景颜色
      在<body>中添加背景颜色类型
    <body bgcolor="yellow">
    </body>
    <!--将会使页面背景变成黄色-->
    
    • 水平线
    <hr />
    
    • 图片
    <img src="所引用图片的URL地址" width="某宽" height="某高" />
    
    • html输出问题
      对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
    • 一个例子
    <! 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)

    相关文章

      网友评论

          本文标题:HTML基础知识(1)

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