HTML学习（一）html、xhtml、html5

最新推荐文章于 2021-11-28 23:43:33 发布

忠诚待人

最新推荐文章于 2021-11-28 23:43:33 发布

阅读量320

点赞数

分类专栏： HTML5 文章标签： html html5

原文链接：https://www.cnblogs.com/john-sr/p/5824236.html

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、基本概念

html：超文本标记语言 (Hyper Text Markup Language)

xhtml：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

html5：最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：h5≈ html+CSS 3+js+API。

标题html特性：

标识文本。例如：定义标题文本、段落文本、列表文本、预定义文本。
建立超链接，便于页面链接的跳转。
创建列表，把信息有序组织在一起以方便浏览。
在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。
可以制作表格，以便显示大量数据。
可以制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。

h5的认识：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

h5新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

二、文档类型声明方式

html:

过渡型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

严格型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

框架型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

xhtml:

过渡型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

html5:

<!DOCTYPE html>

三、语义

html：没有体现结构语义化的标签，我们通常都是这样来命名的<div id="header"></div>.这样表示网站的头部。

html5：在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer>

提供了语义化标签可以更好地支持搜索引擎的读取便于seo的蜘蛛的爬行。

四、XHTML和HTML 最主要区别（规范）

XHTML作为HTML的升级版。当然会有很多其它的规范。详细例如以下：

(1) 全部的标记都必需要有一个相应的结束标记。
　　曾经在HTML中。你能够打开很多标签，比如和<li>而不一定写相应的和</li>来关闭它们。但在XHTML中这是不合法的。
　　XHTML要求有严谨的结构，全部标签必须关闭。
　　假设是单独不成对的标签。在标签最后加一个"/"来关闭它。
　　比如：<img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />。
(2) 全部标签的元素和属性的名字都必须使用小写。
　　与HTML不一样，XHTML对大写和小写是敏感的。
　　<title>和<TITLE>是不同的标签。XHTML要求全部的标签和属性的名字都必须使用小写。比如：<BODY>必须写成<body> 。大写和小写夹杂也是不被认可的。
　　通常dreamweaver自己主动生成的属性名字"onMouseOver"也必须改动成"onmouseover"。
(3) 全部的XML标记都必须合理嵌套。
　　相同由于XHTML要求有严谨的结构。因此全部的嵌套都必须按顺序。
　　曾经我们这样写的代码：<p><b></p></b>必须改动为：<p><b></b></p>。
　　就是说。一层一层的嵌套必须是严格对称。
(4) 全部的属性必须用引号""括起来。
　　在HTML中。你能够不须要给属性值加引号，可是在XHTML中，它们必须被加引號。
　　比如：<height=80>必须改动为：<height="80">。
　　特殊情况，你须要在属性值里使用双引号，你能够用"，单引號能够使用’，
　　比如：<alt="say'hello'">
(5) 把全部<和&特殊符号用编码表示。
　　不论什么小于号（<）。不是标签的一部分，都必须被编码为& l t ；不论什么大于号（>），不是标签的一部分，都必须被编码为&gt 。不论什么与号（&），不是实体的一部分的，都必须被编码为&amp；注：以上字符之间无空格。
(6) 给全部属性赋一个值。
　　XHTML规定全部属性都必须有一个值，没有值的就反复本身。
　　比如：<input type="checkbox" name="shirt" value="medium" checked>
　　必须改动为：<input type="checkbox" name="shirt" value="medium" checked="checked" />
(7) 不要在凝视内容中使“–”。“–”仅仅能发生在XHTML凝视的开头和结束，也就是说，在内容中它们不再有效。
　　比如以下的代码是无效的：：用等号或者空格替换内部的虚线。
　　：以上这些规范有的看上去比較奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
(8) 图片必须有说明文字。每一个图片标签都必须有ALT说明文字。
　　<img src="ball.jpg" alt="large red ball" title="large red ball"/> //为了兼容火狐和IE浏览器，对于图片标签，尽量採用 alt和title双标签，单纯的alt标签在火狐下没有图片说明。

五、HTML5基本语法

（一）链接

<html>

<head>
  <meta charset="utf-8" />
  <title>The First</title>
  <!-- title自带换行 -->
</head>

<body>
  <!-- 这是注释 -->
  <h1>HELLO</h1>
  <h2>HELLO</h2>
  <h6>HELLO</h6>
  <!-- 1为最小 6为最大 -->
  <font size="6">6号字体</font>
  <!-- 字号与h字号相反，1最大 -->
  <hr width="200" />
  <!-- 水平分割线 -->

  <a href="">假链接</a>
  <br /><a href="#">Top</a>
  <!-- 点击跳至页面顶端 -->
  <a href="#maodian">点击前往</a>
  <!-- 设点本页超链接锚点，点击即跳转 -->
  <p id="maodian">It's me</p>
  <!-- 跳转至此处 -->
  <p>
    我的博客<br />
    <a href="http://xyyhub.github.io/" target="_black">点击跳转</a><br />
  </p>
  <!--
			href：你要跳转的地址
			target: 控制新的页面打开模式
				_blank新打开一个页面显示 
				_self覆盖原网页打开 【默认值】
		-->

  <img src="img/avatar.jpg" width="200" height="200" alt="图片不存在" title="我的头像" />
  <!-- 插入图片，alt设定图片错误时显示的文字，title设定鼠标悬停显示的文字 -->

  <h4>无序列表</h4>
  <ul type="dise">
    <!-- 默认即为dise实心圆点，还有circle空心圆，square实心方 -->
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <!--
			快捷键：
			ul>li*n 一个ul下面有n个li
			ctrl+d 复制当前行
		-->

  <h4>有序列表</h4>
  <ol type="dise">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ol>

  <!-- 图片加列表实例 -->
  <img src="img/tall.png" alt="图片不存在" title="上海" width="400" height="300" align="left" hspace="90" />
  <!-- align设置对齐方式，hspace设置间隔 -->
  <h3>
    <font color="red">陆家嘴</font>
  </h3>
  <ul type="disc">
    <li>上海大厦</li>
    <li>国贸大厦</li>
    <li>金融中心</li>
  </ul>
</body>

</html>

在这里插入图片描述

（二）表格 Table

<html>

<head>
  <title>Table</title>
  <meta charset="utf-8">
</head>

<body height="7800">
  <table border="1" align="center" bgcolor="pink">
    <!-- 建立表格 -->
    <tr>
      <!-- tr建立行 -->
      <td>
        <!-- td建立列 -->
        html
      </td>
    </tr>
  </table>

  <table border="1" align="center">
    <!-- 设定表标题 -->
    <caption>Table Title</caption>
    <!-- 设定表头 -->
    <thead bgcolor="pink">
      <tr>
        <td>List Name 1</td>
        <td>List Name 2</td>
        <td>List Name 3</td>
      </tr>
    </thead>
    <!-- 建立表身体 -->
    <tbody>
      <tr>
        <td rowspan="2" bgcolor="pink">1</td><!-- rowspan合并行 -->
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td rowspan="2" bgcolor="pink">2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td rowspan="2" bgcolor="pink">3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
    </tbody>
    <!-- 设定表尾 -->
    <tfoot>
      <tr align="center" bgcolor="pink">
        <td colspan="3">Table Foot 1 & 2 & 3 .</td><!-- colspan合并列 -->
      </tr>
    </tfoot>
  </table>
  <!--
			border:表格中的边框 默认情况下0 取值代表边框的粗细
			cellspacing:单元格与单元格之间的间距 默认为2个像素的
			cellspadding:单元格与内容之间的距离 默认1个像素
			width: 表格的宽度 默认情况下为内容的宽度
			height:表格的高度 默认情况下为内容的高度
			
			align: 水平对齐的方式： left center right 默认left
			在table中设置 表格在浏览器中为 居左 居中 居右
			在tr中设置 当前行的内容在表格中 居左 居中 居右
			在td中设置 当前列【当前单元格】的内容在表格中 居左 居中 居右
			
			valign 垂直对齐方式 ： top middle bottom
			在table中设置 无效
			在tr中设置 当前行的内容在表格中 居上 居中 居下
			在td中设置 当前列【当前单元格】的内容在表格中 居上 居中 居下
			<tr valign="bottom" height="100">
				<td valign="bottom" height="100">用户名</td>
				<td>密码</td>
				<td>手机号</td>
			</tr>
			
		-->

</body>

</html>

在这里插入图片描述

（三）表单 Form

<html>

<head>
  <title>
    用户登录界面
  </title>
  <meta charset="utf-8">
</head>

<body>

  <form action="text01.html" method="post" align="center">
    <p>账号：<input name="username" maxlength="10" placeholder="请输入用户名" size="100"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>确认：<input type="password" name="rpwd"></p>
    <p>性别：
      男<input type="radio" name="sex" value="男" checked>
      女<input type="radio" name="sex" value="女"></p>
    <p>
      爱好：
      游泳<input type="checkbox" name="hobby" value="游泳">
      健身<input type="checkbox" name="hobby" value="健身">
      篮球<input type="checkbox" name="hobby" value="篮球">
      足球<input type="checkbox" name="hobby" value="足球">

    </p>
    <p>
      出生日期：
      <select>
        <option selected="selected">一月</option>
        <option>二月</option>
        <option>三月</option>
        <option>四月</option>
        <option>五月</option>
        <option>六月</option>
        <option>七月</option>
        <option>八月</option>
        <option>九月</option>
        <option>十月</option>
        <option>十一月</option>
        <option>十二月</option>
      </select>
    </p>
    <p>
      文件上传：<input type="file">
    </p>
    <p>
      <textarea cols="20" rows="10">hello word</textarea>

      <p>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">
        <input type="hidden" name="id" value="100">
        <!--
					submit:会直接提交Form表单
					reset:重置
					button:不提交
					hidden:隐藏域传递信息
				-->
      </p>

  </form>

  <!--
			<form>内
				action:提交路径
				method:
					form表单常用的两种提交方式
					get:默认参数，提交的参数会在地址栏中显示不安全，
						有字符限制，常用于查询
					post:安全，提交的参数不会在地址栏中显示，
						基本上无字符限制
			
			文本框:  <input type=”text”/>
				name 控件的名称  (一组控件的名称)
				value 控件的值
				size 控件的长度
				maxlength控件中文字的最大数量
				readonly控件设置为只读的

			密码框：<input type=”password”/>
			单选按钮：<input type=”radio”/>
			复选框：<input type=”checkbox”/>
				Checked：默认选中
				
			下拉列表框：<select><option></option></select>
				Selected：默认选中
				Multiple：全部显示
				
			文件上传项：<input type=”file” name=”file”/>
				
			文本域：<textarea name=”” cols=”” rows=””></textarea>
				
			提交按钮：<input type=”submit” value=”注册”>
			
			重置按钮：<input type=”reset” value=”重置”>
			
			普通按钮：<input type=”button” value=”普通按钮”>
			
			隐藏字段：<input type=”hidden” name=”id”/>

		-->

</body>

</html>

在这里插入图片描述

（四）框架 Frame

使用了frameset标签，不需要使用body. 属性： rows：横向切分页面 cols：纵向切分页面 frameborder :是否显示框架边框 0 、 1、 yes、 no 标签代表切分每个部分的页面 src：引入页面的路径 name 框架页面的名称 noresize :禁止调整大小 scrolling : 是否显示滚动条

<html>

<head>
  <title>Frameset</title>
  <meta charset="utf-8">
</head>

<frameset rows="20%,*">
  <frame src="shop.html"></frame>

  <frameset cols="20%,*">
    <frame src="left.html"></frame>
    <frame src="用户管理.html" name="rightFrame"></frame>
  </frameset>

</frameset>

</html>