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. dcloud 近期遇到的小知识一览

    1.form-data时,请求头改变为application/x-www-form-urlencoded. 2.下拉刷新,首先在page.json里面的style将enablePullDownRefr ...

  2. 为什么使用 Spring Boot?

    Spring 是一个非常流行的基于Java语言的开发框架,此框架用来构建web和企业应用程序.与许多其他仅关注一个领域的框架不同,Spring框架提供了广泛的功能,通过其组合项目满足现代业务需求. S ...

  3. Maven相关命令

    mvn comile  编译(main - >java) mvn test 测试 mvn package  打成 jar / war 包 mvn install 将模块放入本地仓库 mvn cl ...

  4. PLSQL使用scott登录

    Oracle有3种用户: system.sys.scott,其中system和sys的区别在与能否创建数据库,sys用户登录才可以创建数据库,而scott是给初学者学习的用户,学习者可以用Scott登 ...

  5. Java-二进制转10进制原理机制

    任何文件在计算机储存时都是以二进制储存的,由 1和0 组成,如: 101010101010100111110100101010 现在有一组二进制数据: 10010110 那么他转成10进制是多少呢(我 ...

  6. Scala - 快速学习01 - Scala简介

    Scala简介 Scala(Scalable Language)是一门多范式(multi-paradigm)编程语言,Scala的设计吸收借鉴了许多种编程语言的思想,具备面向对象编程.函数式编程等特性 ...

  7. 一文搞懂 Linux network namespace

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 本文通过 IP ...

  8. 微信小程序入门（四）

    16.WXSS特性之模板及引用 模板引用 index.wxml <template name="tempItem"> <view> <view> ...

  9. 剑指offer例题分享--7

    前言:继续前面的分享... 面试题31: 代码如下: #include<iostream> #include<limits.h> using namespace std; bo ...

  10. Buffer的工作方式

    1.Buffer的工作方式 前面<java NIO的工作方式>介绍了Selector检测到通信信道I/O有数据传输时,通过select()方法取得SocketChannel,将数据读取或写 ...