HTML基础知识(1)
2018-06-07 本文已影响0人
Hf1dw
//特别的日子，送给你们，高考君们。。。。。
前言：关于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>
