【Html从头开始】-1 HTML文档基本格式
一、html是什么?
html是一种超文本标记语言,也是目前网络上应用最为广泛的语言.它主要通过html标记对网页中的文本图片声音等内容进行描述,是构成网页文档的基础。
二、html文档的基本格式
html文档的文件后缀名为 .html,其中包括几个基本结构。
1、<!DOCTYPE>标记:
标记位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,如【demo1】中使用的是 标准的html格式文档。
在开头处使用<!DOCTYPE>标记为所有的 HTML 文档指定 HTML 版本和类型,只有这样浏览器才能将该网页作为指定的文档类型进行解析。
2、<html></html>
标记:
<html>
标记位于<!DOCTYPE> 标记之后,也称为根标记,用于告知浏览器其自身是一个 HTML 文档,<html>
标记标志着 HTML 文档的开始,<html>
标记标志着 HTML 文档的结束,在它们之间的是文档的头部和主体内容。
3、<head></head>
标记:
<head>
标记用于定义 HTML 文档的头部信息,也称为头部标记,紧跟在<html>
标记之后,主要用来封装其他位于文档头部的标记,例如<title>
、<meta>
、<link>
及<style>
等,用来描述文档的标题、作者以及和其他文档的关系等。
一个 HTML 文档只能含有一对<head>
标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
4、<meta></meta>
标记:
META标签是HTML标记HEAD区的一个关键标签,它位于HTML文档的<head>
和<title>
之间(有些也不是在<head>
和<title>
之间)。它提供的信息虽然用户不可见,但却是文档的最基本的元信息。<meta>
除了提供文档字符集(例如本例的utf-8编码格式)、使用语言、作者等基本信息外,还涉及对关键词和网页等级的设定。
5、<title></title>
标记:
能在栏目上显示你需要的文字,例如<title>CNDS博客</title>
6、<body></body>
标记:
<body>
标记用于定义 HTML 文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>
标记内,<body>
标记中的信息才是最终展示给用户看的。
一个 HTML 文档只能含有一对<body>
标记,且<body>
标记必须在<html>
标记内,位于<head>
头部标记之后,与<head>
标记是并列关系。
7、举例
<span style="font-size: 160px;">
<!DOCTYPE html>
<br>
<html lang="en"><br><head><br>
<meta charset="UTF-8"><br>
<title>CNDS博客</title><br>
</head><br>
<body><br>我的第一个网页!<br></body>
<br>
</html></span>
三、代码标签
1、<p>
标签定义段落
<p>
元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
2、align文本水平对齐方式
语法:<td align="value">
属性:
1)left 左对齐内容(默认值)。
2)right 右对齐内容。
3)center 居中对齐内容。
4)justify 对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。
5)char 将内容对准指定字符。
3、style定义文本样式
语法:<element style="value">
style_definition : 一个或多个由分号分隔的 CSS 属性和值。
举例:
<h1 style="color:blue; text-align:center">This is a header</h1>
<p style="color:red">This is a paragraph.</p>
4、color定义文本颜色
color 颜色值可以通过以下方式进行设置:
1)颜色名称:red、blue、white…
,举例:color: red;
2)十六进制: #RRGGBB
和#RGB
,#后面跟6位或者3位十六进制字符,举例:color: #000f9f;
3)RGB:rgb(R,G,B)
,取值可以是0~255的整数或者百分比,举例:color:rgb(156,96,24);;
4)RGBA:rgba(R,G,B,a)
其拓展了RGB颜色模式,它包含了阿尔法通道,允许设置透明度(a为透明度,0为透明,1为不透明);
5)HSL:hsl(H,S,L)
,色相-饱和度-明度,色相表示一个色环的一个角度,饱和度和明度使用百分比来表示;
6)HSLA:hsla(H,S,L,a)
,其拓展了RGB颜色模式,它包含了阿尔法通道,允许设置透明度(a为透明度,0为透明,1为不透明);
5、<u>
显示的字带有下划线
用法举例:
<p>在这段文字的后面<u>添加了下划线</u>。</p>
6、<del>
显示的字带有删除线
用法举例:
<p>My favorite color is <del>blue</del>!</p>
7、举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CNDS博客</title>
</head>
<body>
<p align="center"><strong>绝句</strong></p>
<p align="right"><em>作者:杜甫</em></p>
<p style="color: blue">两个黄鹂鸣翠柳,<p>
<p><u>一行白鹭上青天。</u></p>
<p style="color: blue">窗含西岭千秋雪,</p>
<p><del> 门泊东吴万里船</del></p>
</body>
</html>
其他标签用途和语法,可参考:
按字母排序https://www.runoob.com/tags/html-reference.html
按功能排序https://www.runoob.com/tags/ref-byfunc.html
【Html从头开始】-1 HTML文档基本格式相关推荐
- 微软复合文档二进制格式实例分析
复合文档二进制格式(compound File binary Format:CFBF)基本上以扇区(sector)为单位,sector大小由文件头中的信息决定,文件头是固定大小为512的扇区: CFB ...
- 在Delphi中很精确地控制生成的WORD文档的格式
原文地址:http://blog.163.com/laidedou@126/blog/static/1150740632012036110729/ var WordApplication1: T ...
- python-docx结合lxml读取word文档段落格式、字体格式等信息
python-docx结合lxml读取word文档段落格式.字体格式等信息 最近还是在研究docx文档,搞了几天终于有点心得了.不得不说,虽然python-docx库没那么强大能直接获取样式继承的字体 ...
- 项目文档word格式规范
项目word文档常见格式规范,有 有需要的见附件
- 取消Word2007中“word正在设置文档的格式”,防止文档结构图错乱
这几天在编写一份文档,用的是word2007.然后发现每次打开文档,文档结构图都会发生错乱.而且打开文档时,word2007底部会提示"word正在设置文档的格式,按Esc取消". ...
- 【DEVOPS】实现Swagger2应用接口文档Word格式的在线实时更新
借助 maven plugin + 自定义服务Swagger2Word服务,实现满足自定义格式需求的RESTful API文档的实时更新和在线展示.(注意:这里的API接口文档是独立于应用的,不似Sw ...
- Qt富文本 - 文档边框格式
文档边框格式 新建桌面应用程序testRichText,基类QMainWindow,勾选创建界面文件,其他选择默认. 编辑mainwindow.cpp构造函数 mainwindow.h#ifndef ...
- VBA word 文件类型html,vba设置word文档的格式
①将格式应用于选定内容 下列示例使用Selection属性将字符和段落格式应用于选定文本.使用Font属性获得字体格式的属性和方法,使用ParagraphFormat属性获得段落格式的属性和方法. S ...
- wiki文档书写格式
文档基本规范 标题 标题:标明需求的简短语句.或模块名称,目录是由标题生成,一份目录结构清晰的需求文档与标题的划分是密不可分. 正文 正文:有规范格式和生效标志的正式文本,正文包括 文字.表格.图片. ...
最新文章
- Opencv2.4.4示例程序说明
- Storm和Kafka集成的重要生产错误和修复
- 读了鸿蒙 OS 的代码后,我发现优秀项目都有这个共性!
- 哈工大计算机考研 跨考,09哈工大计算机考研复试之我的经历_跨考网
- android5.1禁用通知栏,android-阻止通知栏
- 前端面试题2016--CSS
- Django的缓存(1)
- 【目标定位】基于matlab卡尔曼滤波UWB-IMU组合定位导航【含Matlab源码 1601期】
- matlab2016a打开为响应,MATLAB2016a启动慢
- 面对SSH暴力破解,给你支个招
- Java基础——链表
- OPC client安装教程
- hikaricp mysql_HikariCP
- 华为认证HCIA-云服务工程师正式发布
- 第4-8课:方块消除游戏
- unix/Linux BSD以及System V---认知
- 初学python心得1000字实训_数学教学1000字六年级心得大全
- 【文献阅读】翻译王军武老师的文献--《稠密气固流的连续理论现状回顾》二、第一节 引言
- CSS 动画练习 写轮眼
- 如何注册 @msn邮箱
热门文章
- 技术解析|如何绘制密度分布图
- 信管1172-201711671226-WWY —JSP智能手机销售网后台设计
- android studio微信小程序,App拉起微信小程序工具方法
- linux tar 报错 Removing leading ‘/‘ from member names 解决方法
- linux ps le hrtime,Linux 高精度定时器hrtimers简单介绍和应用场景
- 分布式事务解决方案——基于Atomikos的实现
- 如何高效学习-斯科特杨 读书总结
- 基于JAVA在线民宿预定系统计算机毕业设计源码+系统+lw文档+部署
- 如何制作PDF格式的电子图书
- 循环结构whil、for