zoukankan      html  css  js  c++  java
  • HTML5

    一.HTML简介

    Hyper Text Markup Language(超文本标记语言)
    超文本包括:文字、图片、音频、视频、动画等

    二.HTML发展史

    1993-6发布超文本标记语言
    .......................
    2000-1-26发布XHTML1.0
    .......................
    2013-5-6发布HTML5

    三.HTML5优势

    1.世界知名浏览器厂商对HTML5的支持
    2.市场的需求
    3.跨平台
    四.W3C
    World Wide Web Consortium(万维网联盟)
    成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
    http://www.w3.org/
    http://www.chinaw3c.org/

    W3C标准包括
    结构化标准语言(XHTML 、XML)
    表现标准语言(CSS)
    行为标准(DOM、ECMAScript )

    五.网页基本结构

    <html>
    <head>
    <title>我的第一个网页</title>
    </head>
    <body>
    我的第一个网页
    </body>
    </html>

    六.网页元素的构成
    <!DOCTYPE html> 代表声明当前文件为HTML文件
    title 代表网页头部显示的文本信息
    <meta charset="UTF-8" /> 指定字符编码:常用的有GB2312:中文简体编码 Big5:繁体中文 ISO-885901:纯英文编码 UTF-8:国际通用编码
    推荐使用UTF-8,如果不指定默认为ISO-885901

    七.网页基本标签
    1.标题标签 <h1></h1>.....<h6></h6> 其中h1最大,h6最小
    2.段落标签 <p></p> 段落文字前后换行
    3.换行标签 <br/> 自闭合
    4.水平线标签 <hr/>
    5.加粗 <strong></strong>
    6.斜体 <em></em>
    7.特殊符号
    7.1 空格 &nbsp;
    7.2 小于号 &lt;
    7.3 大于号 &gt;
    7.4 双引号 &quot;
    7.5 版权符号 &copy;
    8.图像标签
    <img src="图像路径" alt="图像显示不出来显示的文字" title="鼠标悬浮到图像展示的文字" width="宽度px" height="高度px"/>

    9.超链接
    普通超链接<a href="指定链接地址">点击</a>
    功能性连接:<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
    锚链接:点击文字跳转指定位置<a href="#a1">跳转锚链接a1位置</a> <a name="a1">a1</a>

    <!DOCTYPE html> <!--DOCTYPE代表声明当前文件为HTML文件-->
    <html>
    <head lang="en"> <!-- lang="en" 代表当前页面是英文的-->
    <meta charset="UTF-8"> <!-- meta 便于浏览器解析 GB2312:中文简体编码 Big5:繁体中文 ISO-885901:纯英文编码 UTF-8:国际通用编码-->
    <title>WebStorm创建的第一个HTML文件</title>
    </head>
    <body>
    <!--标题标签:h1-h6-->
    <h1>日期</h1>
    <h2>日期</h2>
    <h6>日期</h6>
    <!--段落标签-->
    2018年10月25日
    <p>2018年10月25日11:03:34</p>
    <!--换行标签-->
    2018年10月25日11:05:52<br/>

    2018年10月25日11:06:29
    <!--水平线标签-->
    <hr/>
    <!--加粗和斜体-->
    加粗字体
    <strong>加粗字体</strong>
    <em>斜体字体</em>
    <strong><em>加粗斜体</em></strong>

    <hr/>
    <!--特殊符号-->
    王洪涛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;没有脑细胞<br/>

    a&lt;b<br/>

    c&gt;a<br/>

    &quot;abc&quot;<br/>

    &copy;S1304版权所有
    <hr/>

    <!--图像标签-->
    <img src="../image/TIM图片20171102111331.png" alt="图像损坏" title="悬浮展示文字" width="100px" height="100px"/>
    <hr/>
    <!--超链接-->
    <a href="SecondHtml.html" target="_blank"><img src="../image/TIM图片20171102111331.png" alt="图像损坏" title="悬浮展示文字" width="100px" height="100px"/></a>

    <a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

    <a href="#a1">跳转锚链接a1位置</a>
    <a href="SecondHtml.html/#second">B页面位置</a>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <a name="a1">a1</a>

    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    通过点击a标签跳转过来的页面
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <a name="second">Second锚链接定位</a>
    </body>
    </html>


  • 相关阅读:
    Oracle 数据库连接很慢,服务器监听一直等待
    Maven 根据不同的环境使用不同的配置
    Maven 根据不同的包路径打出不同的Jar包
    Linux 安装Nginx并支持SSL
    Nginx OpenSSL创建自签证书实现HTTP转HTTPS
    Oracle 服务突然中断处理(检查状态、重启)
    请求转发和重定向
    PHP PDO的简单封装(使用命名空间方式)
    PHP PDO学习小结
    MYSQL预处理机制
  • 原文地址:https://www.cnblogs.com/wws553/p/9850023.html
Copyright © 2011-2022 走看看