HTML入门(2)——HTML5基础

HTML基础

个人主页 :@ 守夜人st
系列专栏:
HTML5+CSS3+JavaScript从入门到精通
…持续更新中敬请关注…
博主简介:软件工程专业,在校学生,写博客是为了总结回顾一些所学知识点


前言

跟具W3C规范要求,Web设计应该遵循结构、表现和行为的分离。
三者关系如下:
结构:使用HTML设计网页的结构和内容。
表现: 使用CSS设计网页的样式。
行为: 使用Javascript 和 DOM 设计网页脚本代码。

权威参考:https://www.w3.org/TR/html5/


目录

  • HTML基础
  • 前言
    • HTML文档结构
    • HTML5语法


HTML文档结构

一个完整的HTML4文档基本结构:

<html>
	<head>
		
	head>
	<body>
		
	body>
html>
  • 示例中每个标签都是成对出现的
  • 一个开始标签和一个结束标签

再来看看一个简单的HTML5文档基本结构:

DOCTYPE html>
<meta charset = "UTF-8">
<title>HTML5基本语法title>
<h1>HTML的目标h1>
<p>HTML5的目标是为了能够创建更简单的Web程序,书写更简洁的HTML代码。
<br/>例如,为了使Web应用程序的开发变得更容易,提供了很多API;为了使HTML变得更简洁,开发出了新的属性、新的元素等。总体来说,为下一代Web平台提供了许许多多的新功能。
HTML5文档允许省略<html><head><body>等元素,使用HTML5的DOCTYPE声明文档类型,简化<meta>元素的charset属性值,省略<p>元素的结束标记、使用<元素/>的方式来结束<meta>元素。以及<br>元素等语法知识要点。

HTML5语法

HTML5 以 HTML4 为基础,保证与之前的 HTML4 语法达到最大限度的兼容。同时对 HTML4 进行了全面升级改造。

  1. 内容类型
    HTML5的文件扩展名和内容类型保持不变,扩展名仍为”.html“或”.htm“,内容类型(Content Type)仍为”text/html“

  1. 文档类型
    在HTML4中,文档类型的声明方法如下:
DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在 HTML 5 中,文档类型的声明方法如下:

DOCTYPE html>

当使用工具时,也可以在DOCTYPRE声明中加入SYSTEM识别符,声明方法如下:

DOCTYPE HTML SYSTEM "about:legacy-compat">

在 HTML 5 中,DOCTYPE 是不区分大小写的,引号也不区分是单引号还是双引号。
注意:使用 HTML5 的 DOCTYPE 会触发浏览器以标准模式显示页面,浏览器根据DOCTYPE来识别该使用那种解析模式!!!


  1. 字符编码
    在 HTML4 中,使用meta元素定义文档的字符编码:
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">

在 HTML5 中,继续沿用meta元素定义文档的字符编码,但是简化了charset属性的写法:

<meta charset = "UTF-8">

对于HTML5说上述两种方法都有效,用户可以继续使用第一种方式,通过content元素的属性来指定,但是不能同时混用两种方法。

在传统网站中可能会存在以下标记方式,在HTML5中这种字符编码方式将被认为是错误的

<meta charset = "UTF-8" http-equiv="Content-Type" content = "text/html;charset = UTF-8">

  1. 标记省略
    在 HTML5 中,元素的标记可以分为三种类型:不允许写结束标记可以省略结束标记开始标记和结束标记全部可以省略
    不允许写结束标记:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
    可以省略结束标记:li、dt、dd、p、rt、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
    开始标记和结束标记全部可以省略:html、head、body、colgroup、tbody。

  1. 布尔值
    对于布尔值属性,如 disabled 与 readnoly 等,每当只写属性而不指定属性值时,表示属性值为true,如果属性值为false,可以不使用该属性。另外,要想将属性值设定为true时,也可以将属性名设定为属性值,或将空字符串设定为属性值。
    示例:

<input type="checkbox" checked>

<input type="checkbox">

<input type="checkbox" checked="checked">

<input type="checkbox" checked="">
  1. 属性值
    属性值可以加双引号,也可以加单引号。HTML5 再此基础上做了一些改进,当属性值不包括空字符串、<、>、=、单引号等字符时,属性值两边的引号可以省略。
<input type = "text">
<input type = 'text'>
<input type = text>

总结

HTML5 相比于 HTML4 不仅有了很多新元素和一些有趣的特性,而且更加简洁的编码方式,目前世界上比较知名的浏览器都支持了 HTML5,这也是HTML5 发展的一大优势。刚开始学习小伙伴就直接可以从 HTML5 开始学习,只需要简单的了解一些HTML的发展历史就可以了。

在这里插入图片描述

感觉不错的话,动手点个赞吧!

你可能感兴趣的:(html5,前端,css3,javascript)