1. HTML 的基本结构

2. HTML 控制标记的格式

3. 最常用的控制标记

本章讲解最基本的 HTML 元素，也就是创建文档结构所需的元素。例如：标题、段落、

页面分隔、注释等等。

2.1 HTML 的基本结构

<html> -------根控制标记

<head> -------头控制标记

<title>标题</title> -------标题标记

</head> -------头控制标记（尾）

<body>

-------网页显示区域

</body>

</html> -------根控制标记(尾)

(1).<html>…</html>根控制标记

开头和结尾成对出现，双标签

(2).<head>…</head>头控制标记

1.<title>很单纯的文件标题声明

2.<meta>控制标记的动态文件转换声明

3.<base>超链接网址基准参考点

4.Javascript 和 VBScript 程序

5.stylesheet 可用来设置排版来的声明

6.<link>可引用外部文件，如 CSS 排版样本

(3).<title>…</title>设置浏览器的视窗标题

(4).<body>…</body>页面可见内容

2.2 HTML 控制标记的格式

(1).<标记名称>

单一型,无设置值的。

如：<br>

(2).<标记名称 属性=”属性值”>

单一型，有设置值的。

如：<hr width=”80%”>

(3).<标记名称>…</标记名称>

对称型，无设置值。

如：<title>…</title>

(4).<标记名称 属性=”属性值”>…</标记名称>

对称型，有设置值。

如：<body bgcolor=”red”>…</body>

<font size= ”7”>…</font>

2.3 最常用的控制标记

(1).跳行 <br>

格式：<br>

无属性设置

(2).段落 <p>

格式：<p align=”排列方式”>…</p>

属性名称 属性值 说明

align left 往左靠（默认）

center 往中靠

right 往右靠

(3).水平直线 <hr>

格式：<hr>

属性名称 属性值 说明

size 像素 绝对设置，以数字表示，属性值越大，线越粗

百分比 相对设置，以%表示，属性值越大，线越粗

width 像素 绝对设置，长度不会应视窗的改变而改变

百分比 相对设置，长度会随着视窗宽度而改变

noshade 实体线

(4).向中对齐 <center> (被废弃的标签)

格式：<center>…</center>

(5).背景色与文字设置

格式：<body bgcolor=”背景色” text=”文字颜色”>

整体页面的边距，行距

<body leftmargin=”像素” topmargin=”像素”>

(6).标题文字设置

格式：<h1>…</h1>

<h2>…</h2>

<h3>…</h3>

<h4>…</h4>

<h5>…</h5>

<h6>…</h6>

属性名称 属性值 说明

align left 靠左

center 靠中

right 靠右

(7).特殊字符设置

格式：< lt;

> gt;

& amp;

“ quot;

(8).在 HTML 备注

格式：<!--…-->

(9).实体字符控制标记

1.<b>…</b> 粗

2.<i>…</i> 斜

3.<s>…</s> 删

4.<u>…</u> 下划

5.<tt>…</tt> 电报

6.<sub>…</sub> 下标

7.<sup>…</sup> 上标

(10).语意字符控制

1.<address>…</address> 地址

2.<big>…</big> 大字

3.<del>…</del> 删除

4.<ins>...</ins> 修改

5.<samll>…</small> 小字

6.<strong>…</strong> 加强语气(加粗)

7.<em>...</em> 加强语气(倾斜)

(11).<font>字体控制 (被废弃的标签)

格式：<font>…</font>

属性名称 属性值 说明

size 0-7 字体大小

color 英文或十六 颜色

face 字体 字体

(12).格式化

格式：<pre>…</pre>

让书写的文字格式化！

(13).引用文本

格式：<blockquote>...</blockquote>

属性名称 属性值 说明

cite url 被引用的地址

2; HTML 基本结构的更多相关文章

  1. 【.net 深呼吸】细说CodeDom（1）：结构大观

    CodeDom 是啥东东?Html Dom听过吧,XML Dom听过吧.DOM一般可翻译为 文档对象模型,那 Code + DOM呢,自然是指代码文档模型了.如果你从来没接触过 CodeDom,你大概 ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. Python学习--04条件控制与循环结构

    Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...

  4. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  5. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  6. ElasticSearch 5学习(10)——结构化查询（包括新特性）

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

  7. ASP.NET Core应用针对静态文件请求的处理[4]: DirectoryBrowserMiddleware中间件如何呈现目录结构

    和StaticFileMiddleware中间件一样,DirectoryBrowserMiddleware中间本质上还是定义了一个请求地址与某个物理目录之间的映射关系,而目标目录体现为一个FilePr ...

  8. Go结构体实现类似成员函数机制

    Go语言结构体成员能否是函数,从而实现类似类的成员函数的机制呢?答案是肯定的. package main import "fmt" type stru struct { testf ...

  9. CRL快速开发框架系列教程十(导出对象结构)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  10. Javacript实现字典结构

    字典是一种用[键,值]形式存储元素的数据结构.也称作映射,ECMAScript6中,原生用Map实现了字典结构. 下面代码是尝试用JS的Object对象来模拟实现一个字典结构. <script& ...

随机推荐

  1. Ubuntu 16.04下Samba服务器搭建和配置(配截图)

    一.相关介绍 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和 ...

  2. Javascript高级编程学习笔记（51）—— DOM2和DOM3（3）操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  3. TX-LCN分布式事务Demo实战

    1. TX-LCN分布式事务Demo实战 1.1. 原理介绍 1.1.1. 事务控制原理 TX-LCN由两大模块组成, TxClient.TxManager,TxClient作为模块的依赖框架,提供T ...

  4. AI - 机器学习常见算法简介（Common Algorithms）

    机器学习常见算法简介 - 原文链接:http://usblogs.pwc.com/emerging-technology/machine-learning-methods-infographic/ 应 ...

  5. Python - 调试Python代码的方法

    调试(debug) 将可疑环节的变量逐步打印出来,从而检查哪里是否有错. 让程序一部分一部分地运行起来.从核心功能开始,写一点,运行一点,再修改一点. 利用工具,例如一些IDE中的调试功能,提高调试效 ...

  6. 如何解决git====push 过程中出现的。error: failed to push some refs

    当我们在利用git  push 文件到仓库时出现了一下问题: ! [rejected] master -> master (fetch first)error: failed to push s ...

  7. react native项目启动需要做的操作

    一.启动: 1.查看端口(默认8081是否被占用) netstat -ano   可以查看所有的进程 2.netstat -ano | findstr "8081"  查看某个端口 ...

  8. Spring Cloud微服务如何设计异常处理机制？

    导读 今天和大家聊一下在采用Spring Cloud进行微服务架构设计时,微服务之间调用时异常处理机制应该如何设计的问题.我们知道在进行微服务架构设计时,一个微服务一般来说不可避免地会同时面向内部和外 ...

  9. 通过 Emoji 表情标识 Git 每次提交的信息

    在 Git 提交时我们可以通过附加 emoji 表情来着重提醒其他开发人员本次地更改重点,也就是说我们可通过不同的表情可以快速地知道这次提交具体做了哪方面地工作. 比如说本次提交我添加了一个新的单元测 ...

  10. 解决ionic3 android 运行出现Application Error - The connection to the server was unsuccessful

    在真机上启动ionic3打包成的android APK,启动了很久结果弹出这个问题: Application Error - The connection to the server was unsu ...