HTML5-CSS3-JavaScript(1)

之前大致总结过HTML5的发展。

  这里贴出之前的随笔:http://www.cnblogs.com/jiangxiaobo/p/5199924.html

我们就从HTML5的基础总结起。希望可以提高自身的基础。

HTML5不是革命式的发展,它是对HTML以前版本的继承和发展,因此HTML5保留了以前HTML版本绝大部分标签。

1. 基本元素

  HTML5 保留的基本元素有如下几个。

    1》 <!-- ... --> 定义HTML注释。位于<!-- 与 -->之间的内容会被当成注释处理。

    2》 <html> 它是HTML5文档的根元素。但HTML5允许完全省略这个元素。

    3》 <head> 它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素。

    4》 <title> 它用于定义HTML5文档的页面标题。

    5》 <body> 它用于定义HTML5文档的页面主体部分,该标签可以指定id、class、style等核心属性,还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性,这些属性用于指定JavaScript脚本。

    6》 <style> 该元素用于引入样式定义。

    7》 <h1>到<h6> 定义标题一到标题六。

    8》 <p> 定义段落,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    9》 <br> 插入一个换行,该标签可以指定id、class、style等核心属性。

    10》 <hr> 定义水平线,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。HTML5中<hr.../>还代表了主题结束的语义。

    11》 <div> 定义文档中的节。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    12》 <span> 与<div>基本相似,区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。

2. 文本格式化元素

  下面这些元素让文本内容在浏览器中呈现出特定效果。

    1》 <b> 定义粗体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    2》 <i> 定义斜体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    3》 <em> 定义强调文本,实际效果与斜体文本差不多。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    4》 <strong> 定义粗体文本。与<b>标签的作用和用法基本相同。

    5》 <small> 定义小号字体文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    6》 <sup> 定义上标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    7》 <sub> 定义下标文本。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。

    8》 <bdo> 定义文本显示的方向。该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。除此之外,该标签也可以指定dir属性,该属性值只能是ltr或者rtl。

3. 语义相关元素

  HTML5保留了如下语义相关元素。

    1》 <abbr> 用于表示一个缩写。使用该元素时可指定如下属性。

      title 该属性用于指定该缩写所代表的全称。

    2》 <address> 用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。

    3》 <blockquote> 用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定如下属性。

      cite 该属性指定该引用文本所引用的网址URL

    4》 <q> 用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。

    5》 <cite> 用于表示作品(一本书、一部电影、一首歌曲)的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。

    6》 <code> 用于表示一段计算机代码。

    7》 <dfn> 用于定义一个专业术语。浏览器通常会用粗体或斜体字显示<dfn.../>所包含的文本。

    8》 <del> 定义文档中被删除的文本。浏览器通常会以中画线形式显示<del>包含的文本。

    9》 <ins> 定义文本中插入的文本。浏览器通常会以下画线形式显示<ins>包含的文本。

      <del>、<ins> 两个元素都可以指定如下两个属性:

        cite 该属性值为一个URL,该URL对应的文本解释了文本被删除或插入的原因。

        datetime 定义文本被删除或插入的日期、时间。

    10》 <pre> 用于表示该元素所包含的文本已经进行了“预格式化”。也就是说,<pre.../>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被保留下来,但浏览器会处理<pre.../>元素内大部分HTML元素。

    11》 <samp> 用于定义示范文本内容。

    12》 <kbd> 用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文本,使用说明中会经常使用到该元素。

    13》 <var> 用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。

4. 超链接和锚点

  HTML页面使用超链接与网络上的另一个资源保存关联,当用户单击页面上的超链接时,浏览器会导航到超链接所指的资源。

  HTML5保留了定义超链接的<a.../>元素,该元素可以指定id、class、style等核心属性,也可以指定onclick等各种事件属性。它还可以指定如下三个重要属性。

    href 指定超链接所关联的另一个资源。

    target 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值,分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。

    media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。

  <a.../>元素主要可以包含文本、图像、各种文本格式化元素和表单元素等内容。

  完整网址遵循的语法规则:

    scheme://host.domain:port/path/filename

    关于这个URL地址的解释如下:

      scheme 指定因特网服务的类型。最流行的类型是HTTP。

      domain 指定因特网域名。

      host 指定此域名的主机。如果被省略,HTTP的默认主机是www。

      port 指定主机的端口号。端口号通常可以被省略,HTTP服务的默认端口是80。

      path 指定远程服务器上的路径,该路径也可以被省略,省略该路径则默认被定位到网站的根目录。

      filename 指定远程文档的名称。如果省略该文件名,通常会定位到index.html、index.htm等文件,或定位到Web服务器设置的其他文件。

    画个表吧:

URL流行的scheme以及对应资源

scheme 对应资源
file 访问本地磁盘上的文件
ftp 访问远程FTP服务器上的文件
http 访问WWW服务器上的文件
news 访问新闻组上的文件
telnet 访问Telnet链接
gopher 访问远程Gopher服务器上的文件

    除此之外,<a.../>元素还可生成一个命名锚点,命名锚点用于HTML页面中生成一个定位点,这样允许超链接直接链接到指定页面的该定位点。

    插入定位锚点需要指定name属性,name属性值就是该锚点的名称。例如如下代码:

      <!-- 下面代码会生成一个命名锚点 -->

      <a name="test"></a>

    用浏览器浏览命名锚点时,该命名锚点不会生成任何显示内容,我们可以使用如下超链接来定位到该锚点:

      <a href="anchor.html#test">定位到test锚点</a>

5. 列表相关元素

  HTML5 还保留了如下几个列表相关元素。

    1》 <ul> 定义无序列表。该元素可以指定id、class、style等属性,还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。

    2》 <ol> 定义有序列表。该元素可以指定id、class、style等属性,还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。除此之外,再HTML5规范中,该元素还可以指定如下三个属性。

      start 指定列表项的起始数字。默认是第一个,如1、A等。

      type 指定使用哪种类型的编号,例如1代表使用数字,A和a代表使用字母,I和i代表使用罗马数字。该属性在HTML5规范中已经不推荐使用了,推荐使用CSS来定义。

      reversed 该属性指定是否将排序反转。很遗憾,目前没有任何浏览器支持该属性。

    3》 <li> 定义列表项目。该元素可以指定id、class、style等属性,还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容,因此可以包含较多类型的子元素。

    4》 <dl> 也用于定义列表,该元素只能包含<dt.../>和<dd.../>两种子元素。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。

    5》 <dt> 定义标题列表项。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。

    6》 <dd> 定义普通列表项。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容,因此可以包含较多类型的子元素。

6. 图像相关元素

  HTML5保留了<img.../>元素在页面中定义图像,这个元素只能是一个空元素,它不可以包含任何内容。该元素可以指定id、style、class等属性,还可以指定onclick等事件属性。不仅如此,使用该元素必须指定如下两个属性。

    src 该属性指定图片文件所在的位置,该属性值既可以是相对路径,也可以是绝对路径。

    alt 该属性指定一段文本,该文本将作为该图片的提示信息。

    除此之外,该元素还可以指定如下两个可选属性。

    height 指定该图片的高度,该属性值可以是百分比,也可以是像素值。

    width 指定该图片的宽度,该属性值可以是百分比,也可以是像素值。

    除此之外,与图片相关的还有如下两个标签。

    <map> 用于定义图片映射。该元素主要可以包含一个或多个<area.../>子元素,每个<area.../>子元素定义一个区域,不同区域可链接到不同URL。

    <area> 用于定义图片映射的内部区域。该元素只能是一个空元素,该元素可以指定id、style、class等属性,还可以指定onclick等事件属性,还可以指定onfocus、onblur等焦点相关属性。除此之外,还可以指定如下几个属性。

      shape 指定该内部区域是哪种区域,该属性的默认值是“rect”,即矩形区域;除此之外,还可以是circle和ploy,分别代表圆形区域和多边形区域。

      coords 指定多个坐标值,用于确定区域位置。

      href 用于确定该区域所链接的资源。

      alt 该属性指定一段文本,该文本将作为该图片提示信息。

      target 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值,分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。

      media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。

      一旦我们使用<map.../>元素定义了图片映射之后,就可以让指定图片使用该图片映射,通过为<img.../>元素指定usemap属性让该图片使用图片映射,设置usemap属性值为#mapname即可。

        <img src="logo.jpg" width="300" height="120" border="0" usemap="#test" alt="logo图片" />

        <!-- 定义图片映射 -->

        <map name="test" id="test">

          <!-- 为该图片映射定义2个区域 -->

          <area shape="circle" coords="57,55,25" href="http://www.baidu.com" alt="百度一下" />

          <area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.baidu.com" alt="百度一下" />

        </map>

时间: 2024-10-09 12:42:41

HTML5-CSS3-JavaScript(1)的相关文章

HTMl5/CSS3/Javascript 学习推荐资源

HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/Python/Nodejs/Java/ASP .NET只要和展示有关的部分都可以称之为前端.在这里由于篇幅的限制,我们只推荐与HTML+CSS+Javascript三者有关的前端技术 入门 w3school html5 简单HTML5的入门教程 w3school css3 简单的CSS3入门教程 J

检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况

CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示当前浏览器对所有css3选择器的支持情况     http://tools.CSS3.info/selectors-test/test.html When can I use :这是一个专业的测试网站,为广大网页设计师提供CSS3\HTML5\SVG\JAVAScript api 技术的浏览器支持情

web前端全部课件(html5+CSS3+javascript+dom+bom+jquery+jqm+bootstrap+angular+ext+weixin+less)

一.HTML5 BASIC课件 Unit01:Web基础知识.HTML快速入门.文本 Unit02:图像和链接.表格.结构标记 Unit03:列表.表单.其他常用标记 二.CSS3 BASIC课件 Unit01:CSS 概述.CSS 语法\尺寸与边框 Unit02:框模型.背景.渐变\文本格式化-1 Unit03:文本格式化-2.表格.浮动.显示 Unit04:列表.定位 三.京东首页实战(无PPT) 四.WEB UI课件 Unit01:Photoshop基本操作.网页切图.图像优化 Unit0

移动网页设计与开发 HTML5+CSS3+JavaScript

第1章 网络平台1.1 对术语的简短说明1.2 你是谁,你需要知道些什么1.3 了解什么是HTML51.4 真正的HTML51.5 CSS3及其他1.6 浏览器支持1.7 测试,再测试,进行更多的测试总结 第2章 结构和语义2.1 HTML5的新元素2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA)2.3 语义标记的重要性2.4 微格式2.5 RDFa2.6 微数据2.7 数据属性2.8 Web组件:标记的未来?总结 第3章 设置响应性CSS3.1 媒体查询3.2 Java

2019前端面试经典(html5+css3+JavaScript)

前端目录 HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关 算法相关 网络安全相关 webpack相关 其他 Html相关 1 html语义化 意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析.注意: 1.尽可能少的使用无语义的标签div和span: 2.在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利: 3.不要使用

html5+css3+javascript 自定义弹出窗口

效果图: 源码: 1.demo.jsp 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>demo12.jsp</title> 5 <script type="text/javascript" src="js/myLayer.js&q

HTML5/CSS3/JavaScript

基本元素 元素名 属性名 属性说明 作用备注 <!--...-->     代码备注 <html>     根元素 <head>     页面头部 <title>     页面标题 <body>     页面主体 <h1>~<h6>     定义标题(字体大小区别) <p>     定义段落 <br>     插入一个换行 <hr>     定义水平线 <div>     定

学习HTML5+CSS3+Javascript的第一周

Javascript是一种轻量级.解释型的Web开发语言.JS代码需要写在<script></script>标签中,作为脚本语言的标识符来分隔其他源代码.避免与html标签和css样式混淆. js代码严格区分大小写.javascript暂不支持constant关键字,不允许用户自定义常量.javascript使用var关键字声明变量,先声明后使用:声明变量之后,在没有初始化之前,它的初始值为undefined(未定义的值).变量命名规则:1.首字符必须是大写或小写字母.下划线.或美

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

[IOS_HTML5]各种JS框架介绍--用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph