【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文档书写格式
文档基本规范 标题 标题:标明需求的简短语句.或模块名称,目录是由标题生成,一份目录结构清晰的需求文档与标题的划分是密不可分. 正文 正文:有规范格式和生效标志的正式文本,正文包括 文字.表格.图片. ...
最新文章
- CentOS6中安装、配置、启动GitLab以及遇到的那些坑
- SAP ui5 jQuery.sap.getModulePath(FioriTest)
- 图神经网络(二)GCN的性质(3)GCN是一个低通滤波器
- 【学习记录】第一章 数据库设计-《SQL Server数据库设计和开发基础篇视频课程》...
- python自动化学习之语法学习(判断语句和循环语句)
- android省市区三级联动案例:(一)运行效果
- iOS硬解码H264视频流
- 在登陆Fedora 9时选择语言
- 手机自学html,5套Bootstrap手机模板HTML源文件分享
- CDA数据分析师 - 备考指南
- 监控摄像头服务器中断是什么原因,监控系统常见问题故障及处理方法
- ArcGis10.2详细安装步骤
- html5怎么设置字体位置,css如何设置字体位置
- html5 canvas花瓣,canvas花瓣飘落
- FAT文件系统存储原理
- 基于LSTM自动生成中文藏头诗
- 获取电信光猫超级密码 获取宽带账号密码 获取公网ip
- 科大讯飞智慧医疗事业部空降领头人,深度解析讯飞“AI+医疗”战略
- 学习笔记1:线性回归和逻辑回归、AUC
- MySQL数据库技术