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. 关于MySql中使用IFNULL()函数失效的问题。

    今天在学习时,碰到一个问题:在联表查询取得结果后,如果取得的结果是空值,则给一个默认值,如果不是空值,则返回这个值. 下面我们来看看业务场景: 在menu表中: 存储的是前端页面的菜单配置,注意成员权 ...

  2. Linux计划任务crontab

    Linux系统中存在两种工作调度的方式 周期性的(at),每隔一个固定的周期要来办的事项: 一次性的(crontab),做完一次以后就不会再执行: at at是个可以处理仅执行一次就结束调度的指令,不 ...

  3. effective java学习笔记之不可实例化的类

    在没有显式声明一个类的构造方法时,编译器会生成默认的无参构造方法,在设计工具类时,我们通常将方法设置成静态方法,以类名.方法名的形式调用,此时这个类就没有必要创建实例,我们知道抽象类不可以被实例化,但 ...

  4. CS:APP3e 深入理解计算机系统_3e Y86-64模拟器指南

    详细的题目要求和资源可以到 http://csapp.cs.cmu.edu/3e/labs.html 或者 http://www.cs.cmu.edu/~./213/schedule.html 获取. ...

  5. 转：Natas Wargame Level28 Writeup(EBC加密破解)

    From:http://alkalinesecurity.com/blog/ctf-writeups/natas-28-getting-it-wrong/ Now that I knew it was ...

  6. MVC系列——一个异常消息传递引发的思考

    前言:最近在某个项目里面遇到一个有点纠结的小问题,经过半天时间的思索和尝试,问题得到解决.在此记录一下解决的过程,以及解决问题的过程中对.net里面MVC异常处理的思考.都是些老生常谈的问题,不多说, ...

  7. 接口json数据与数据库数据循环比对校验

    创建测试计划,加载数据库驱动: 线程组: csv配置元件: 注:Filename用的是相对路径,csv文件要与jmeter脚本文件在同一目录 JDBC连接配置: jdbc请求: 用户定义的变量: ht ...

  8. 事务处理操作（COMMIT,ROLLBACK）。复制表。更新操作UPDATE实际工作中一般都会有WHERE子句，否则更新全表会影响系统性能引发死机。

    更新操作时两个会话(session)同时操作同一条记录时如果没有事务处理操作(COMMIT,ROLLBACK)则会导致死锁. 复制表:此方法Oracle特有

  9. 【java】method.invoke(方法底层所属对象/null，new Object[]{实际参数})

    反射调方法时无论是静态/非静态,固定/可变参数,都有Object对象数组对参数进行包装. package com.tn.clas; import java.lang.reflect.Method; i ...

  10. 栈stack（2）：栈的链表实现

    定义 从上一篇我们知道,栈(stack)是一个只允许一端进行删除插入操作的线性表.同时,我们联想到线性表的链式结构,其特点是用一组任意的存储单元存储线性表的数据元素,因此我们选择使用链表去实现栈,规定 ...