前端—HTML篇（一）

HTML

一、HTML的发展史

Html—1993年6月互联网工程小组工作草案发布
Html2.0—1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时
Html3.2—1996年1月14日，W3C推荐标准
Html4.0—1997年12月18日，W3C推荐标准
Html4.01—1999年12月24日（微小改动）W3C推荐标准，2000年5月15日发布基本严格的html4.01语法是国际标准化组织和国际电工委员会的标准
xhtml1.0—2000年1月26日正式发布，是W3C推荐标准，后来经过修改于2002年8月1日重新发布
xhtml1.1—2001年5月31日发布
xhtml2.0—W3C的工作草案，改动过大，学习成本过高，失败。
Html5—2004年提出，2007年被W3C接纳并成立新的HTML工作团队，2008年正式发布html5第一份正式草案，2012年12月17日HTML规范正式定稿，2013年5月6日，html5.1正式草案发布。
HTML5作为最新版本，提供一些新的元素和新特性，建立新规则，这些元素，特性，和规则的建立，提供了许多新的网页功能，用网页实现动态渲染图形，图表图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

二、HTML5的优势

知名浏览器厂商对HTML5的支持
微软：2010年3月16日，explorer9开发者预览版，此版本将更多地支持css3，SVG，和html5等互联网通用标准
Google：2010年2月19日，谷歌项目经理通过博客宣布，谷歌将放弃对gears浏览器插件的支持，重点开发html5项目
苹果：2010年6月7日，苹果发布Safari5，这款浏览器支持10个以上html5新技术，包括全屏播放，HTML5视频，html5地理位置，html5的形式验证等功能。
opera：2010年5月5日，opera软件公司首席技术官在访华之际，接受中国软件资讯网等少数媒体采访，认为HTML5和css3是全球互联网发展的未来趋势。
Mozilla：2000年7月，发布Firefox4.0的第一个测试版本，从官方文档看，它对HTML5是完全级别的支持。
开发网页这个工作处于中游，既不是上游的浏览器制作商，又不是下游浏览器的终端使用者，这个角色意味着大家位于一个接口的位置，需要想办法满足下游的用户在使用上游不同浏览器时看到的网页效果相同。上面提到由于各种问题导致浏览器互不兼容，所以就得由中间开发者遵循一个统一的规范，标准进行网页开发，才能满足用户的需求。
注意
W3C万维网联盟:制定维护统一国际化web开发标准，web技术领域最权威和具有影响力的国际中立性技术标准机构。W3C标准不是某一个标准，而是一系列的标准集合，由三部分组成，即结构，表现，和行为。
结构内容：XHTML、HTML。
表现样式：css。
控制行为：Dom、ECMAScript标准==> JavaScript。

三、HTML的基本结构和基本标签

HTML:Hyper Text MarkUp Language （超文本标记语言）HTML描述网页的一种语言，是一种超文本语言，不是编程语言，仅是一种标记语言。既然是标记语言，那么HTML由一套标记标签组成（markup 通过）组成，在制作网页时，HTML用标记标签来描述网页。

1.文件类型说明
<!DOCTYPE html>
2.HTML文件以<html>开始，以</html>结束。/表示标签结束。
3.<head>,不显示在浏览器上，一般是属性的设置；<body>，要显示的文章内容
4.段落：<p>段落标签
5.注释：<!---comments--->
6.换行符：<br>,无结束标签
         <hr>,增加一条横线
         <pre>:元素中的文本以固定宽度的字体（通常是Courier）显示，并且它保留了空格和换行符。
7.斜体：<em>开始，</em>结束
8.加粗：<strong>开始，</strong>结束
9.标题：一级标题<h1>开始，</h1>结束
        二级级标题<h2>开始，</h2>结束
        三级标题<h3>开始，</h3>结束
        最多到六级标题，但是大多数使用前三级的标题。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静夜思</title>
</head>
<body>

<h1>静夜思</h1>

<em>朝代：唐代</em> &nbsp;&nbsp;&nbsp; 作者： <strong>李白</strong> <br/>

<hr/>

<p>
    床前明月光, <br/>
    疑是地上霜, <br/>
    举头望明月, <br/>
    低头思故乡。<br/>
</p>


</body>
</html>

结果：
在这里插入图片描述

四、特殊符号标签

<!--空格 &-->
<p>HAHA  Java</p>
<p>HAHA              ENEN</p>
<p>HAHA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ENEN</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有：ENNE

<!--万能的公式  &  ;-->
&phone;

运行实例：
在这里插入图片描述

五、图象标签

常见的图片格式： .png .jpg .jpeg .bmp .gif…
png 会有浏览器兼容问题
一般使用 .jpg .gif多一点
图片：静态资源单独放

statics\images

相对路径 …/…/
绝对路径 https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>

<!--标签中带有参数的  key=value -->

<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<img src="../statics/images/bd.png" alt="头像图片" title="百度" width="100" height="200">

</body>
</html>

运行结果：
在这里插入图片描述

六、超链接标签

基本使用：

<!--
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a</title>
</head>
<body>
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>


<a href="mailto:[email protected]" target="_blank">联系我们</a>


<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:123456789:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>


</body>

运行结果：
在这里插入图片描述

七、锚链接标签

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--标题一-->
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#butte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>
<a href="">F</a> <br>
<a href="">G</a> <br>
<hr>
<!--标记A-->
<a name="markerA">A</a>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<p>333333333333333333333</p>
<a name="markerB">B</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<a name="markerC"><h1>大标题</h1></a>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
<p>ddddddddddddddddddd</p>
</body>

运行结果：
在这里插入图片描述

八、块元素和行内元素

块元素

无论内容多少，都是独占一行的（p，h1~h6）

行内元素

只根据内容的长度来扩展。（a，strong，em….）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--块元素-->
<p>我是P标签的块元素</p>
<h1>我是H1标签的块元素</h1>

<!--行内元素-->
<a href="">我是a链接的行内元素</a>
<strong>粗体行内元素</strong>
<em>斜体行内元素</em>

</body>
</html>

运行结果
在这里插入图片描述

刘憨憨的小可爱

发布了34 篇原创文章 · 获赞 4 · 访问量 1203

私信关注