3、文档设置标记上-格式标记(主要内容标记<br><p><center><pre><li><ul><ol><dl><dt><dd><hr><div>)


<br>

强制换行标记:让后面的文字、图片、表格等等,显示在下一行。例:
<html>
<head>
<title>测试</title>
<meta charset=”UTF-8”>
</head>
<body>
HTML!<br/>超文本标记语言!
</body>
</html>

<p>

换段落标记:换段落,由于多个空格和回车在HTML中会被等效为一个 空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 <p>段落!例:

<html>
<head>
<title>p标签示例</title>
<meta charset=”UTF-8”>
</head>
<body>
<p>
换段落标记:换段落,由于多个空格和回车在HTML中会被等效为一个 空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 <p>段落!
</p>
<p>
换段落标记:换段落,由于多个空格和回车在HTML中会被等效为一个 空格,所以HTML中要换段落就要用<p>,<p>段落中也可以包含 <p>段落!
</p>
</body>
</html>

<center>

居中对齐标记:让段落或者是文字相对于父标记居中显示。例:

<html>
<head>
<title>center标签示例</title>
<meta charset=”UTF-8”>
</head>
<body>
<p>
<center>居中对齐标记:让段落或者是文字相对于父标记居中显示</center>
</p>
</body>
</html>

<pre>

预格式化标记:保留预先编排好的格式。例:

<html>
<head>
<title>pre标签示例</title>
<meta charset=”UTF-8”>
</head>
<body>
<p>预格式化标记: 保留预先编排好的格式</p>
<p>
<pre>预格式化标记: 保留预先编排好的格式</pre>
</p>
</body>
</html>

<li>

列表项目标记:每一个列表使用一个<li>标记。例:

<html>
<head>
<title>第三节课</title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>第一节课</li>
<li>第二节课</li>
<li>第三节课</li>
<li>第四节课</li>
<li>第五节课</li>
</ul>
</body>
</html>

<ul>

无序列表标记:<ul>声明这个列表没有序号


<ol>

有序列表标记:可以显示特定的一些顺序。

格式如下:

<ol type="符号类型">

<li type="符号类型"></li>

<li type="符号类型"></li>

</ol>

例1:

<html>
<head>
<title>第三节课</title>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>第一节课</li>
<li>第二节课</li>
<li>第三节课</li>
<li>第四节课</li>
<li>第五节课</li>
</ol>
<ol type="I">
<li>第一节课</li>
<li>第二节课</li>
<li>第三节课</li>
<li>第四节课</li>
<li>第五节课</li>
</ol> <ol type="A">
<li>第一节课</li>
<li>第二节课</li>
<li>第三节课</li>
<li>第四节课</li>
<li>第五节课</li>
</ol>
</body>
</html>

图示:

有序列表的type属性值

①:1

阿拉伯数字1.2.3等等,默认type属性值

②:A

大小字母A、B、C等等

③:a

小写字母a、b、c等等

④:Ⅰ

大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等

⑤:ⅰ

小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等


<dl><dt><dd>

定义型列表:对列表条目进行简短的说明。

格式如下:

<html>
<head>
<title>第三节课</title>
<meta charset="UTF-8">
</head>
<body>
<dl>
<dt>软件说明:</dt>
<dd>简单介绍软件的功能及基本应用</dd>
<dt>软件界面:</dt>
<dd>用于选择软件的外观</dd>
</dl>
</body>
</html>


<hr>

水平分割线标记:段落之间的分割线。例:

<html>
<head>
<title>第三节课</title>
<meta charset="UTF-8">
</head>
<body>
水平分割线标记:段落之间的分割线!
<hr>
水平分割线标记:段落之间的分割线!
</body>
</html>

<div>

分区显示标记,也称之为层标记:常用来编排一大段的HTML段落,也可以用于格式化表,和<p>很相似,层可以多层嵌套使用。例:

<html>
<head>
<title>第三节课</title>
<meta charset=”UTF-8”>
</head>
<body>
<div>
分区显示标记,也称之为层标记
<hr>
分区显示标记,也称之为层标记
</div>
<div>
分区显示标记,也称之为层标记
<hr>
分区显示标记,也称之为层标记
</div>
</body>
</html>

4、文档设置标记下-文本标记(主要内容标记<hn><font><b><i><sub><sup><tt><cite><em><strong>

<small><big><u>)


文本标记分类

1.hn---标题标记:共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小

2.font---字体设置标记:设置字体的格式

三个常用属性

1.size(字体大小)

<font size="14px">

2.color(颜色)

<font color="red">

3.face(字体)

<font face="微软雅黑">

3.b---粗字体标记

4.i---斜字体标记

5.sub---文字下标字体标记

6.sup---文字上标字体标记

7.tt---打印机字体标记

8.cite---引用方式的字体,通常是斜体

9.em---表示强调,通常显示为斜体字

10.strong---表示强调,通常显示为粗体字

11.small---小型字体标记

12.big---大型字体标记

13.u---下划线字体标记


小练习:

<html>
<head>
<title>第四节课</title>
<meta charset="UTF-8">
</head>
<body>
Hn标题标记
文本编辑<br/>
<h1>文本编辑</h1>
<h2>文本编辑</h2>
<h3>文本编辑</h3>
<h4>文本编辑</h4>
<h5>文本编辑</h5>
<h6>文本编辑</h6>
font 标记
文本编辑
<font size="1">文本编辑</font>
<font size="3">文本编辑</font>
<font size="7">文本编辑</font>
<font size="7" color="red" face="微软雅黑">文本编辑</font>
<font size="7" color="red" face="宋体">文本编辑</font>
<font size="7" color="red" face="新细明体">文本编辑</font>
B标记加粗
文本编辑
<b>文本编辑</b>
i标记斜体
文本编辑
<i>文本编辑</i>
sub下标标记
2<sub>2</sub>
sup上标标记
2<sup>2</sup>
引用标记
<cite>文本编辑</cite>
em标记表示强调,显示为斜体
<em>文本编辑</em>
strong标记表示强调,加粗显示
<strong>文本编辑</strong>
small标记,显示小一号字体,可以嵌套使用,当字体为最小时将会显示最小字体字号
<small>文本编辑</small>
<small>
<small>文本编辑</small>
</small>
<small>
<small>
<small>文本编辑</small>
</small>
</small>
big标记,显示大一号的字体
<big>文本编辑</big>
<big><big>文本编辑</big></big>
u标记是显示下划线
<big><big><big><u>文本编辑</u></big></big></big>
</body>
</html>

前端学习:html基础学习二的更多相关文章

  1. vagrant的学习 之 基础学习

    vagrant的学习 之 基础学习 本文根据慕课网的视频教程练习,感谢慕课网! 慕课的参考文档地址:https://github.com/apanly/mooc/tree/master/vagrant ...

  2. 前端学习:html基础学习一

    1.HTML的语法(主要内容HTML语法格式.文档注释.代码格式) HTML的特点 1.可以设置文本的格式,比如标题.字号.文本颜色.段落等等 2.可以创建列表(例如打开百度,我们可以看到这样的列表) ...

  3. JsRender 前端渲染模板基础学习

    JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...

  4. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  5. 大二暑假第三周总结--开始学习Hadoop基础(二)

    简单学习NoSQL数据库理论知识 NoSQL数据库具有以下几个特点: 1.灵活的可扩展性(支持在多个节点上进行水平扩张) 2.灵活的数据模型(与关系数据库中严格的关系模型相反,显得较为松散) 3.与与 ...

  6. python 学习之 基础篇二 字符编码

    声明: 博文参考1:字符编码发展历程(ASCII,Unicode,UTF-8) 博文参考2:Python常见字符编码间的转换 (1)为什么要用字符编码 早期的计算机使用的是通电与否的特性的真空管,如果 ...

  7. Jquery学习之基础篇二

    1.Jquery添加元素的方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被 ...

  8. C#学习笔记---基础入门(二)

    枚举 枚举是被命名的整型常数的集合:枚举类型的变量只有赋值后才能使用:不同枚举中的枚举值可以重名:可以自定义枚举值. enum Playstates {            跑, 跳,下滑,左转,右 ...

  9. 前端学习:html基础学习五

    9.HTML表单设计(主要内容<form><input><select>标记) 表单标记 <form>...</form> <form ...

随机推荐

  1. SSM学习(一)搭建基础框架

    不知不自觉,工作也两年多了,由于公司一直用的是ssh框架,所以所学也一直是ssh.直到有一天,服务器被攻击,tomcat目录下总有莫名其妙的一些文件,这些文件通过远程ftp下载了一些病毒和木马,服务器 ...

  2. 翻译:SET NAMES

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  3. 盘点selenium phantomJS使用的坑

    参考:http://www.jianshu.com/p/9d408e21dc3a   http://www.cnblogs.com/luxiaojun/p/6144748.html 豆瓣应该是ip被封 ...

  4. Sagit.Framework For IOS 开发框架入门教程4:注册页布局-被消灭的变量

    前言: 上篇写完:Sagit.Framework For IOS 开发框架入门教程3:Start引导页-框架布局和隐藏事件的内幕 之后,好久没写文章了,有IT连创业系列.有DotNetCore的一篇文 ...

  5. Asp.Net Web API(一)

    什么是Web API HTTP不仅仅服务于Web Pages.他也是一个创建展示服务和数据的API的强大平台.HTTP是简单的,灵活的,无处不在的.你能够想象到几乎任何的平台都会有HTTP服务库.HT ...

  6. java表单重复提交常用解决办法

    最近在看些基础的东西,顺便做下笔记.相信大家在平时网页使用中,经常会有按钮重复点击,然后点不动刷新,还有当网络延时比较厉害点了没反应在点击的重复提交.为了避免这种情况,总结了一下4点处理方案 表单重复 ...

  7. 《Netty5.0架构剖析和源码解读》【PDF】下载

    <Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的 ...

  8. iOS实现类似QQ的好友列表,自由展开折叠(在原来TableView的基础上添加一个字典,一个Button)

    //直接代码 只包含 折叠展开字典的处理搭建#import "CFViewController.h" @interface CFViewController ()<UITab ...

  9. python学习日记:day11-----装饰器

    1,time模块 import time print(time.sleep())#让程序在执行到这个位置到时候停一会 print('哈哈哈') 获取当前时间 import time time.time ...

  10. Spring拦截器总结

    本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 Spring过滤器WebFilter可以配置中文过滤 拦截器实现步骤 ...