HTML基础知识(1)

//特别的日子,送给你们,高考君们。。。。。
前言:关于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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容