2; HTML 基本结构
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 基本结构的更多相关文章
- 【.net 深呼吸】细说CodeDom(1):结构大观
CodeDom 是啥东东?Html Dom听过吧,XML Dom听过吧.DOM一般可翻译为 文档对象模型,那 Code + DOM呢,自然是指代码文档模型了.如果你从来没接触过 CodeDom,你大概 ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- Python学习--04条件控制与循环结构
Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- ElasticSearch 5学习(10)——结构化查询(包括新特性)
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
- ASP.NET Core应用针对静态文件请求的处理[4]: DirectoryBrowserMiddleware中间件如何呈现目录结构
和StaticFileMiddleware中间件一样,DirectoryBrowserMiddleware中间本质上还是定义了一个请求地址与某个物理目录之间的映射关系,而目标目录体现为一个FilePr ...
- Go结构体实现类似成员函数机制
Go语言结构体成员能否是函数,从而实现类似类的成员函数的机制呢?答案是肯定的. package main import "fmt" type stru struct { testf ...
- CRL快速开发框架系列教程十(导出对象结构)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- Javacript实现字典结构
字典是一种用[键,值]形式存储元素的数据结构.也称作映射,ECMAScript6中,原生用Map实现了字典结构. 下面代码是尝试用JS的Object对象来模拟实现一个字典结构. <script& ...
随机推荐
- Gephi安装过程中出现错误:can’t find java 1.8 or higher
Gephi具体的安装过程我就不多说了,一直点击下一步就OK了,我想说的是出现如下图这种或者类似的错误怎么解决. 在百度的过程中发现很多的博文等等出现这个错误的解决方法都是安装对应版本的JDK啊,配置对 ...
- 微信小程序快捷键(Mac和windows)
最近因为有点闲暇时间,所以抽空简单了解了小程序,因为小程序是使用微信开发者工具编码,不能使用其它编辑器,比如,Sublime,Hubilder等. 所以就百度了一下小程序快捷键,但总觉得不全,所以就去 ...
- 使用clipBoard.js进行页面内容复制
官方网址: https://clipboardjs.com/
- C#连接mysql数据库的一个例子和获取本机IP的方法
本例子是一个最初级直接连接mysql数据库的例子,实现了往数据库插入数据的操作: string MyConnectionMysql="Server=localhost;Datbase=xxx ...
- IntelliJ IDEA如何设置新建类时,自动注释作者信息和日期时间
本文提供两种注释风格供参考. 风格1:简约Style 效果如下: 设置步骤: File--> Settings--> Editor--> File and Code Template ...
- 剑指offer【06】- 旋转数组的最小数字(java)
题目:旋转数组的最小数字 考点:查找和排序 题目描述:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4, ...
- .NET Core 如何调用 WebService
0.使用背景 因为现在的项目都是基于 .NET Core 的,但是某些需要调用第三方的 WebService 服务,故有了此文章.其基本思路是通过微软提供的 Svcutil 工具生成代理类,然后通过 ...
- springBoot(5)---单元测试,全局异常
单元测试,全局异常 一.单元测试 1.基础版 1.引入相关依赖 <!--springboot程序测试依赖,如果是自动创建项目默认添加--> <dependency> <g ...
- rest-framework之APIView 序列化组件
rest-framework之APIView 一 安装djangorestframework 方式一:pip3 install djangorestframework 方式二:pycharm图形化界面 ...
- Android6.0机型上调用系统相机拍照返回的resultCode值始终等于0的问题
版权声明:本文为博主原创文章,未经博主允许不得转载. 正常情况下调用系统相机拍照: 如果拍照后点击的是“确定”图标,返回的resultCode = -1(Activity.RESULT_OK): 如果 ...