学习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. Python-Django编程问题汇总

    OS:Windows10 64 IDE:JetBrain Python Community Edition 2017.3.4 Python:python-3.6.4 Django:V2.0.3 问题一 ...

  2. TX2 安装v4l

    在TX2上使用v4l2-ctl --all -d /dev/video0查看相机参数时报错: v4l2-ctl :command not found 手动安装: sudo apt-get instal ...

  3. 一、OPENERP 的一个demo

    安装好OPENERP后,使用 ps -aux|grep openerp 从输出的内容可以得到OPENERP的安装信息, /usr/bin/python /usr/bin/openerp-server ...

  4. Mac使用Launchd命令行lauchctl操作服务的简单用法

    注意:操作时前面比如带上sudo,不然只能操作当前用户的服务,会出现无法操作一些root用户的服务的问题.系统版本为Mac 10.12. 1.配置好plist之后: #加载一个服务到启动列表 sudo ...

  5. Mac下一台电脑管理多个SSH KEY(转)

    一.关于ssh是什么? http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 二.需求: 一台电脑上(Mac os)管理多个ssh ...

  6. yii学习记录-gii配置

    这篇博文中你将了解到以下内容 YiiDemo配置文件 Yii代码生成器 修改PHP执行环境变量 参考 Yii 是一个基于组件.纯OOP的.用于开发大型 Web 应用的高性能PHP框架.它将Web编程中 ...

  7. 【Markdown】Markdown相关问题

    1.显示多行代码 将代码用一个tab缩进或者四个空格缩进

  8. C# this关键字(给底层类库扩展成员方法)

    本文参考自唔愛吃蘋果的C#原始类型扩展方法—this参数修饰符,并在其基础上做了一些细节上的解释 1.this作为参数关键字的作用 使用this关键字,可以向this关键字后面的类型添加扩展方法,而无 ...

  9. vue记事1

    1.组件引入css. 例:test.vue引入swiper.min.css | -- src |  | -- components | | -- test |  | -- test.vue | | - ...

  10. HUE配置文件hue.ini 的pig模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 一.默认的pig配置文件 ########################################################################### ...