HTML5文件的基本结构 和W3C标准

第一章 HTML5文件的基本结构和W3C标准

任务1 实现页面注册信息验证功能
1.1 HTML5文件的基本结构和为W3C标准
1.1.1 HTML是用来描述网页的一种语言，是一种超文本标记语言。
2008年1月22日，HTML5第一份正式草案公布；2013年5月6日，HTML5.1正式草案公布。
1.1.2 优势：
（1）世界知名浏览器厂商对HTML5的支持
（2）市场的需求
（3）跨平台
1.1.3 W3C全称是万维网联盟（World Wide Web Consortium,W3C）.W3C是Web技术领域最权威和最具影响力的国际中立性技术标准机构。
W3C标准包括：结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准语言（DOM、ECMAScript）。
1.1.4 网页编辑工具：记事本、Dreamweaver、UltraEdit、Sublime、WebStorm等。为了方便，本书以WebStorm作为HTML文档多大的编辑工具。
1.1.5 HTML5文件的基本结构分为两部分，包括头部(head)和主体（body）两部分，头部包括网页标题（title）等基本信息，主体包括网页的内容信息、图片、文字等。
1.1.6 网页的基本信息
完整的网页除了基本结构外，还包括网页声明、< meta>标签等基本信息。
（1） DOCTYPE声明
DOCTYPE声明必须位于HTML文档的第一行

(2) < title>标签
< title>标签用于描述网页的标题，一般为一个简洁的主题
例如：< title>搜狐-中国最大的门户网站< /title>
（3）< meta>标签
< meta>标签用于描述网页的摘要信息，包括文档内容类型。字符编码信息、搜索关键字。网站提供的功能和服务的详细描述等
1.2 网页的基本标签
1.2.1 标题标签：标题标签标示一段文字的标题或主题，并且支持多层次的内容结构。例如，一级标签采用< h1>,二级标签采用 < h2>
例

< body>
< h1>一级标题< /h1>
< h2>二级标题< /h2>
< h3>三级标题< /h3>
< /body>
1.2.2 段落标签和换行标签
段落标签< p>…< /p>表示一段文字的等内容
例：< body>
< h1>北京欢迎你< /h1>
< p>北京欢迎你，有梦想谁都了不起！< /p>
< p>有勇气就会有奇迹< /p>
< /body>
换行标签< br/>表示强制换行显示，该标签比较特殊，没有结束标签，直接使用< br/>表示标签的开始和结束
例：< body>
< h1>北京欢迎你< /h1>
< p>
北京欢迎你，有梦想谁都了不起！< br/>
有勇气就会有奇迹。< br/>
< /p>
< /body>
1.2.3 水平线标签
水平线标签< hr/>表示一条水平线，与< br/>一样没有结束标签。
例：< body>
< h1>北京欢迎你
< hr/>
< p>
北京欢迎你，有梦想谁都了不起！

有勇气就会有奇迹。

< /p>
< /body>
1.2.4 字体样式标签
使用< strong>标签可以让字体变粗，使用< em>标签可以让文字倾斜
例< body>
< strong>徐志摩任务简介< /strong>
< p>
< em>1910年入杭州学堂< br/>
< em>1918< /em>年赴美国克拉大学学习银行学< br/>
< /p>
< /body>
1.2.5 注释和特殊符号
HTML的注释格式为< !–注释内容–>
例：< body>
< strong>徐志摩任务简介< /strong>
< p>
< !–< em>1910< /em>年入杭州学堂< br/>–>
< em>1918< /em>年赴美国克拉大学学习银行学< br/>
< /p>
< /body>
HTML中常用的特殊符号及其对应的字符实体如下表所示，这些实体符号都以”&”开头，以“；”结束。

特殊符号 字符实体
空格 ’&nbsp’;
大于号（>） >
小于号（<） <
引号（“） "
版权符号（©） &copy

1.3 图像标签
常见的图像格式即JPG格式、GIF格式、BMP格式、PNG格式。
图像标签的基本语法：<img src=“图片地址” alt=“图像的替换文字” title=“鼠标悬停提示文字”width=“图片宽度” height=“图片高度”/>

例：
效果为：

1.4 超链接标签
（1）基本语法：< a href=“链接地址” target=“目标窗口位置”>链接文本或图像< /a>
（2）超链接的应用场合：（1）页面间链接（2）锚链接（3）功能性链接
（3）行内元素和块元素
块元素特性：无论内容多少，该元素独占一行
行内元素特性：内容撑开宽度，左右都是行内元素的可以排在一行

本文地址：https://blog.csdn.net/weixin_44213625/article/details/107375335