学习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. mysql只能本机访问

    众所周知的是,mysql默认是listen 0.0.0.0:3306. 大网站的数据库服务器一般都在内网没有外网ip,用默认配置比较省事.但是如果只有一台vps,lnmp全部署在同一vps 上,mys ...

  2. 微信小程序授权流程(图)

    看图: 1. 前端H5调用JSSKD的方法  wx.login(), 2. 微信返回 临时登录凭证code 给前端H5 3. 将此Code给到开发者服务器 4. 服务器混同小程序的AppId 和 Ap ...

  3. Map集合的四种遍历方式(转载)

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class TestMap { pu ...

  4. js脚本语言在页面上不执行

    转换原理:// 编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.(将脚本编码) // 解码原理是将字符串赋給容器的innerHTML,再取innerText或text ...

  5. Hive 安装

    在安装Hive时,一定要在该机器上添加了hadoop服务. 下载并解压文件 tar zxvf apache-hive-3.1.1-bin.tar.gz mv apache-hive-3.1.1 /op ...

  6. 我爱Markdown (2)

    Markdown的语法很简单,所以很容易上手.下面介绍一下常用的Markdown的语法, 本文将介绍: 01 - Back-ticks 反尖号 02 - Headers 标题 03 - Emphasi ...

  7. 话说C语言的关键字volatile

    最近搞NVMe驱动需求分析,对volatile这个单词实在是再熟悉不过了. 而在C语言中,有一个关键字就叫做volatile, 其字面意思是"挥发性的, 不稳定的,可改变的". 那 ...

  8. 设计模式笔记-观察者(Observer)

    观察者设计模式应该是比较简单的一个设计模式. 定义 定义了对象之间的一对多依赖,这样以来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新. 简单理解就是: 当1个对象状态有所改变的时候,依 ...

  9. spring cloud连载第一篇之bootstrap context

    1. Spring Cloud Context: Application Context Services(应用上下文服务) 1.1 The Bootstrap Application Context ...

  10. (三)JNI常用示例

    针对我之前文章的练习:JNI方法总结 1. 字符串 JAVA层: test.testString("HELLOWORLD"); JNI层: JNIEXPORT jstring JN ...