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>


  • 相关阅读:
    ICONS-图标库
    图形资源
    vue项目中,如果修改了组件名称,vscode编辑器会在引入修改组件的名字处提示红色波浪线 The file is in the program because:Imported via xxx Root file specified for compilation .
    接口在dev环境报跨域问题(has been blocked by CORS policy:Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header ispresent on the requested resource.),qa环境正常
    阿里云occ的图片文件URL用浏览器直接打开无法访问,提示This XML file does noe appear to have any style information associated with it. The document tree is shown below.
    vue 项目使用element ui 中tree组件 check-strictly 用法(父子不互相关联的反显情况)
    高德地图进行线路规划绘制标记点操作(vue)
    vue中实现拖拽调整顺序功能
    2021-01-22 浏览器相关知识
    2021-01-22 js 相关知识点
  • 原文地址:https://www.cnblogs.com/wws553/p/9850023.html
Copyright © 2011-2022 走看看