美文网首页
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)

相关文章

  • 零基础学习wed前端——1天

    html基础知识 1. html的基础结构: 标签 设置打开方式 标题 网页...

  • 前端基础总结:HTML基础知识

    HTML基础知识 1、HTML的历史:HTML,XHTML 2、HTML的全局属性:全局标准属性,全局事件属性 3...

  • Python第四天

    爬虫基础知识 1)提取本地html文件 (1)步骤 ✏ 需要自已先写一个html(或者本地已有一个html文件)✏...

  • 前端面试知识点

    前端基础知识 1、关于html 1、html语义化标签得理解、结构化的理解;能否写出简洁的html结构;SEO优化...

  • HTML基础知识(1)

    //特别的日子,送给你们,高考君们。。。。。前言:关于HTML编辑器的使用,普通记事本就行,不过为了格式美观,这里...

  • 前端学习大纲

    1、HTML (基础知识、编程语义化的HTML、构建DOM)2 、CSS (Grid、Flexbox、使用媒体查询...

  • 2019-06-17

    jq基础知识 属性操作 jquery属性操作1、html() 取出或设置html内容 2、text() 取出或设置...

  • 前端基础入门

    1、基础知识 html: HTML 是用来描述网页的一种语言。 css: (层叠样式表CascadingStyle...

  • Html初级知识总结

    一、Html初级知识总结 1.基础知识脑图总结 2.基本简介 2.1.什么是Html Html不是编程语言,而是用...

  • 1.HTML基础知识-HTML进阶

    一、HTML、XHTML和HTML5 1.HTML和XHTML (1)二者起源 HTML,超文本标记语言,是构成网...

网友评论

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

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