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. SWIG 基本概念和入门

    C 和 C++ 被公认为(理当如此)创建高性能代码的首选平台.对开发人员的一个常见要求是向脚本语言接口公开 C/C++ 代码,这正是 Simplified Wrapper and Interface ...

  2. Ubuntu 16.04安装Notepadqq编辑器替代Notepad++

    Notepad++只有Windows平台产品,对于Linux下有其替代的产品Notepadqq. 安装: sudo add-apt-repository ppa:notepadqq-team/note ...

  3. python学习笔记01-变量

    变量的作用: 1.保存信息  方便日后被调用 操作 2. 更改 代表描述性的意思 让人明白是什么意思 行业命名规则: 1.student_number 2.studentNumber 驼峰体 不要以大 ...

  4. Xamarin.Android 制作搜索框

    前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml &l ...

  5. springBoot(9)---定时任务,异步任务

    定时任务,异步任务 一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fi ...

  6. .NET MVC扩展UrlHelper支持CDN

    0x00.为什么要扩展 因为我的服务器是小水管,加载一个完整的网站往往需要很久,想加速网站加载速度,静态文件最好是分离出来,所有就想到了扩展UrlHelper,用来支持CDN加载文件. 0x01.论引 ...

  7. Azure认知服务之Face API上手体验

    Azure认知服务:Face API Face API是Azure认知服务之一,Face API有两个主要功能: 人脸检测 Face API可在图像中以高精度人脸位置检测多达64个人脸.图像可以通过文 ...

  8. Eclipse打包出错——提示GC overhead limit exceeded

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在Eclipse开发环境中打包发布apk安装包的时候,有时候会出现下面的错误: 原因 在打包的时候,Eclipse占用的内存会增大,当分配给Ecl ...

  9. 如何走上更高平台分享传递干货知识：（开通个人Github面向开源及私有软件项目的托管平台：https://github.com/zlslch/）（图文详解）（博主推荐）

    不多说,直接上干货! https://github.com/ 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时,大家可以关注我的个人博客:    http ...

  10. centos7编译linux的内核源码

    昨天编译了一个linux 内核源码,遇到一些问题, 今天把我遇到的问题和解决方法分享给大家.希望可以帮助到需要的人. 1.检查是否安装了相应的包 我第一次编译的时候只安装的“Development T ...