[HTML/HTML5]1 HTML文档设置
1.1 创建HTML文件
本质上，HTML文件就是具有下列两个特征的简单文本文件：
- HTML文件的扩展名为.html或者.htm。文件扩展名是一个缩写，它可将文件正确地关联到需要访问它的程序或工具。
- HTML文件由标记（tag）组成。标记就是用于告诉计算机如何显示页面内容的命令或程序。
命名规范：
- 统一使用一种扩展名，以免使自己、浏览器或用户产生混淆。
- 一些Web服务器区分大小写，因此当命名或引用文件名时请注意，要保持文件名大小写统一。
- 使用只包含字母字母和数字的简单文件名。请不要使用除连字符（-）和下划线（_）之外的其它空格、标点符号和特殊字符。
1.2 描述并应用基本的HTML文档格式
HTML元素的功能是告诉浏览器如何在页面上显示内容。HTML元素具有一个开始标记和结束标记，用于告诉浏览器标记指令从哪里开始，到哪里结束。
HTML标记都放在一对尖括号中（<>），并且带有一定的语义，因此很容易识别它们。
1.2.1 元素的类型
HTML元素主要分为下列几类：
- 文档设置。该类型的元素指的是那些建立一个基本的HTML页面所需的元素。例如：html、head、title和body都属于该类元素。
- 文本级语义元素。这一类型的元素帮助浏览器理解文本内容片段背后的语义。
- 区块元素。该类型的元素用于对较大块的内容进行分区，并分割页面。
- 分组元素。该类型的元素用于对较小块的内容进行分区，比如列表和段落。
- 嵌入元素。图片、音频和视频，以及其它交互性元素。
- 表格元素。对于可以简单地排列在一起的表格化数据，表格元素非常有用。
- 表单元素。所有用于开发Web表单的元素都属于表单元素。
除了这些基本的分类外，HTML元素还可以分为块级元素（block-level）和行级元素（inline），行级元素也称为文本级元素（text-level）。
一般来说，块级元素与行级元素存在下列关键差异：
- 块级元素可以包含其它块级元素，也可以包含行级元素。
- 默认情况下，块级元素被格式化为以一个空行开始。
- 块级元素在页面上的样式是“盒模型”。
与之相反，行级元素无法包含其它块级元素，并且不以一个新行作为开始。此外，无法采用与格式化块级元素相同的方法来完全格式化行级元素。
1.2.2 标记的类型
HTML标记分为两类：第一类标记用于标识元素的开始(<>)，另一类标记用于标识元素的结束(</>)。
HTML并不要求所有元素都同时具备开始标记和结束标记，某些元素只有一种类型的标记(<br>)。这种类型的元素通常被认为是空元素，因为他们单独使用，并不包含任何内容。
1.2.3 属性
很多HTML标记都有可以自定义的附加选项，这些选项称为属性（attribute），属性通常放在元素名之后、尖括号结束符之前。
<img src="mypicture.jpg" width="100" height="100" alt="A photo of me">
1.2.4 必不可少的标记
所有HTML页面都应该具有doctype、html、head、title和body标记。
- doctype：告诉浏览器页面遵循哪一组标准。
- html：表示整个HTML页面。
- head：表示页面的标志信息，比如页面标题(title)，该信息将被传送给浏览器和搜索引擎。
- title：定义页面标题，该标题将显示在浏览器窗口顶部，并在搜索引擎中列出。
- body：表示在浏览器窗口中要显示的页面内容。
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<bode>
This is a very basic HTML page.
</body>
</html>
（1）doctype
doctype元素用于告诉浏览器在文档中使用的编码或脚本语言属于哪一种类型。在HTML5之前的版本中，该元素向浏览器明确应该使用HTML还是XHTML来解析Web页面。在HTML5中。W3C极大简化了doctype元素，这使得doctype元素的作用在某种程度上不再明显。在HTML5中，只需在每个页面的顶部包含下面简洁的标记代码，就可以避免浏览器使用较旧的解析方法来分析页面：
<!DOCTYPE html>
（2）html
html元素用于包含所有其余的HTML元素。除了html元素和doctype元素外，页面中的其它所有HTML元素都应放在<html>和</html>标记中间。
（3）head
head元素用于告诉浏览器与页面有关的信息，而不是用于包含要在页面上显示的内容。在<head>和</head>标记之间，还可以包含其它一些元素以说明与页面有关的信息：
- title定义页面的标题。
- meta定义页面的附加信息，比如在该页面中使用哪一种字符集。
- style定义内部样式表信息。
- link定义一个指向外部文件的链接，在处理当前页面时需要用到该外部文件。
- script定义非HTML的脚本内容。
（4）body
body元素包含了用于定义页面显示内容的所有HTML元素，其中包含了格式化文本所需的标记、链接和图片等。
1.3 在HTML文件中添加注释
注释格式如下：
<!-- 在新产品推出后请注意更新该页面 -->
[HTML/HTML5]1 HTML文档设置的更多相关文章
- Springlake-02 权限&文档设置&Role设置&Folder设置&登录
1. 权限 有3个默认的权限用户: 1.System Owner so 管理员权限全部:Type Setup; Group Setup; Form Setup; Role Setup; Share R ...
- Sublime Text 3安装Package Control快速建立html5和xhtml文档
Sublime Text 3安装Package Control快速建立html5和xhtml文档 先关闭Sublime text 3:第1步:下载sublime_package_control-mas ...
- C# 给PDF文档设置过期时间
我们可以给一些重要文档或者临时文件设置过期时间和过期信息提示来提醒读者或管理者文档的时效性,并及时对文档进行调整.更新等.下面,分享通过C#程序代码来给PDF文档设置过期时间的方法. 引入dll程序集 ...
- IT兄弟连 HTML5教程 HTML文档主体标记body
在HTML的<body>和</body>标记中定义文档的主体,包含文档的所有内容(比如文本.超链接.图像.表格和列表等等).<body>标签有自己的属性,设置< ...
- Html5 部分帮助文档 未完待续
W3cSchoolH5帮助文档 Video属性 视频播放效果 Video标签 src视频得目录 controls属性提供添加 播放 和音量控件 当然呢 不设置宽和高得话 视频会很大 Video还可以 ...
- netcore webapi帮助文档设置
如何建 .netcore webapi 项目这个就不说了,这个都没有没必要看下去. 我这里是.netcore 2.0,虽然没测过1.0的,但想来差不多. 1.Nuget Packages安装,使用程序 ...
- office2007word文档设置多级目录
office本来不是很难,关键就是经验吧,直入主题. 文档结构图设置了四级,但是目录始终只显示三级,郁闷了好久,网上看的也不靠谱,方法如下: 引用-目录-插入目录 弹出插入目录设置后,修改级别为最大, ...
- HTML5学习之文档结构和语义（一）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- html5 兼容参考文档 与 浏览器hack兼容参考文档
移动端兼容参考文档 http://mobilehtml5.org/ 浏览器hack http://browserhacks.com/ 附上部分截图
随机推荐
- tomcat输出servlet-api.jar - jar not loaded 解决办法
tomcat输出servlet-api.jar - jar not loaded 解决办法 启动tomcat后,控制台输出信息:WEB-INF/lib/servlet-api.jar not load ...
- SeleniumIDE从0到1 （Selenium IDE 录制）
seleniumIDE安装成功后下面我们用百度网址来简单录制下: 简介一:百度输入框录制操作 1.打开SeleniumIDE 2.SeleniumIDE地址栏中输入百度网址:[https://www. ...
- 前端之CSS（一）
一.什么是CSS CSS是Cascading Style Sheets,层叠样式表,高大上的说法是用来控制网页数据的表现,可以使网页的表现与数据内容分离.通俗来讲,就是用各种盒子的堆叠实现我们想要的H ...
- 2017年1月4日 星期三 --出埃及记 Exodus 21:30
2017年1月4日 星期三 --出埃及记 Exodus 21:30 However, if payment is demanded of him, he may redeem his life by ...
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
- tcpdump高级过滤技巧
基本语法 ========过滤主机--------- 抓取所有经过 eth1,目的或源地址是 192.168.1.1 的网络数据# tcpdump -i eth1 host 192.168.1.1- ...
- linux下与windows下的换行符
[原文有些许错误,已作了修改] 回车符号和换行符号产生背景 关于“回车”(carriage return)和“换行”(line feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传 ...
- 利用JS制作简便计算器
var d; var a=prompt("请输入数字"); a=parseInt(a); if(isNaN(a)){ alert("請輸入正確數字"); } e ...
- chrome的常用快捷键和命令
常见快捷键 F12 打开Chrome控制台 Ctrl+J 进入"下载内容"页面 Ctrl+H 查看"历史记录"页面 Ctrl+D 将此页加入书签 Ctrl+F ...
- 启动tomcat部署项目时 ContainerBase.addChild: start:
严重: ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component ...