学习html无从下手,就在w3school的html手册按着教程学习了下。

什么是html?

html是指超文本标记语言,即Hyper Text Markup Language

html不是一种编程语言,是一种标记语言(markup language)

标记语言是一套标记标签(Markup tag)

html使用标记标签来描述网页

我们随便打开一个网页,鼠标点击右键=>查看网页源代码,即可看到html网页的标记语言。

html的组成:html由标签和文本组成,通常我们将它称之为html文档,也叫做网页。浏览器读取html文档兵役网页的形式显示他们(注释不会显示)

标签:

html标签是由尖括号包围的关键词,通常成对出现,一个是开始标签(开放标签)一个是结束标签(闭合标签)向<br> 和<hr>标签是单个标签。

<h1>~<h6>定义

html标题<h1>到<h6>定义的标题依次减小,此标签还有个可选属性(不赞成使用):align,选择对齐方式(属性值有left左对齐,center中心对齐,right右对齐, justify两端对齐)。比如:

<h1 class="h1" align="left">这是标题h1 | 应用属性align="left"</h1>
<h2 class="h2" align="center">这是标题h2 | 应用属性alig="center"</h2>
<h3 class="h3" align="right">这是标题h3 | 应用属性align="right"</h3>
<h4 class="h4" align="justify">这是标题h4 | 应用属性align="justify"</h4>
<h5 class="h5">这是标题h5</h5>
<h6 class="h6">这是标题h6</h6>

效果显示如下:

<p>标签定义段落

和上面一样它也有个align属性,也是不赞成使用。

<p align="left">这是段落。align="left"</p>
<p align="center">这是段落。align="center"</p>
<p align="right">这是段落。align="right"</p> <p align="justify">段落元素由 p 标签定义。</p>

上面的效果如下:

<br>定义简单的折行

它有clear属性。通常情况下,<br> 标签会告诉浏览器立即停止当前的文本流,并在下一行的左边,或者在左对齐的内联图形或表格的右边开始继续输出文本流。文本流中的其他行会在内联图像的底部显示,除非图形的 <img> 标签被设置为左对齐或右对齐(对于 <table> 标签也一样)。因此,<br> 标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。

具体的实例请看<br> 标签的 clear 属性

<hr>定义水平线

它有四个可选属性:align(和上面一样,但是没有justify属性值),noshade(属性值为noshade),size,width

后三个分别规定了hr 元素的颜色呈现为纯色,hr 元素的高度(厚度),hr 元素的宽度。举例:

<p>noshade规定hr 元素的颜色呈现为纯色, 属性设置为 noshade="noshade" 如下:<hr noshade="noshade"></p>
<p>size规定 hr 元素的高度(厚度), 属性设置为 size="20" 如下: <hr size="20"></p>
<p>width规定 hr 元素的宽度, 属性设置为 width="800" 如下: <hr width="800"></p>
<p>或者 width="50%": <hr width="50%"></p>

显示如下:

html标签有许多通用的属性,包括16种标准属性和79种事件属性。标准属性中常用到的只有class,id,title这几个(class几乎每个标签都要用到),事件属性用到的就多了,这里就不列举了。大家可以自行插看。

【Html基础】之<h1>~<h6> <p> <br> <hr>的更多相关文章

  1. HTML 标题<h1>-<h6>

    定义和用法 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请您慎重地选 ...

  2. <h1>~<h6> 标题标签

    <h1>~</h6>标题系列标签 解释:h1到h6 中h1标签最大,h6标签最小,逐一递增. 例如: <h1>标签</h1> <h2>标签& ...

  3. html5 分组标签 br hr p div blockquote figure ul ol li pre

    <br>    换行, 单标签 <hr>    分割线,水平线 <p>    段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...

  4. HTML5学习小结

    HTML5是用于取代1999年所制定的 HTML4.01和XHTML1.0标准的HTML标准版本.HTML5的第一份正式草案已于2008年1月公布:2012年12月,规范已经正式定稿.W3C计划在20 ...

  5. THLM,CSS

    目录 HTTP协议的四大特性 数据格式 状态码 HTML概念 标签 标签分类 按是否封闭分类 按级别分类 标签属性 head内常用标签 body内常用标签 body内重要标签 a 标签 img 标签 ...

  6. 前端day01

    目录 软件开发架构 web服务的本质 HTTP协议 HTML的注释 HTML的文档结构 标签的分类 标签的分类 列表标签 表格标签 软件开发架构 ​ c/s ​ b/s ​ b/s本质也是c/s ​ ...

  7. 【FE前端学习】第二阶段任务-基础

    技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...

  8. 前端基础之Html、CSS

    Html.css相关 Html Html结构: 标签 描述 <!DOCTYPE html> 文档声明 <html> 根元素 <head> 头部 <body 主 ...

  9. 前端知识之html基础

    前端知识之html内容 web服务本质 浏览器发送请求-->http协议-->服务端接收请求-->服务端返回响应-->服务端把html文件内容发给浏览器-->浏览器渲染页 ...

随机推荐

  1. FlowPortal-BPM——文件目录功能

    安装目录文件夹:Attachments 附件bin Bin目录:dll文件的引用DataSourceProviders 固定的数据库连接文件ExtServer 数据源服务FormService 表单服 ...

  2. C#-WebForm-css box-shadow 给边框添加阴影效果

    box-shadow介绍 css3可以使用 box-shadow 属性轻松地为元素添加阴影效果,box-shadow可以设定多组效果,每组参数值以逗号分隔. 语法: box-shadow:x-shad ...

  3. CentOS 7 安装方式汇总

    U盘安装 通过U盘安装 CentOS 的过程和安装Windows非常相似,首先将 CentOS 镜像文件刻录到U盘(或者光盘),设置固件(BIOS或者UEFI)从U盘启动,然后逐步设置即可. 使用 V ...

  4. jmeter之beanshell断言实例

    .首先储存一个接口的响应结果,比如在http请求的后面添加beanshell后置处理器(BeanShell PostProcessor)来储存http请求的响应结果: import org.json. ...

  5. Mac下使用Eclipse的Show in Terminal提示command not found: mvn

    在Mac下一般配置了Maven的环境变了一般都不会提示,但是如果使用zsh的扩展之后,系统默认的环境变量配置文件会发生变化,尤其使用Eclipse打开终端时,默认不会去读取用户目录下的~/.bashr ...

  6. Yii 使用Widge面面观

    我们可以把Widget视为一个嵌入到控制器管理 的视图中的微控制器,其实就是.net框架中的用户控件,或者类似于.net MVC中的子视图.与controller相比较,微件没有既没有动作,也没有过滤 ...

  7. django blank

    null: If True, Django will store empty values as NULL in the database. Defaultis False. 如果为True,空值将会 ...

  8. Android的网络编程

    1.3主要接口 Android平台有三种网络接口可以使用,他们分别是:java.net.*(标准Java接口).Org.apache接口和Android.net.*(Android网络接口).下面分别 ...

  9. 《LeetBook》leetcode题解(7): Reverse Integer[E]——处理溢出的技巧

    我现在在做一个叫<leetbook>的开源书项目,把解题思路都同步更新到github上了,需要的同学可以去看看 书的地址:https://hk029.gitbooks.io/leetboo ...

  10. 深度学习(六)keras常用函数学习

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9769301.html Keras是什么? Keras:基于Theano和TensorFlow的 ...