HTML
1.1HTML简介
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
1.2超文本标签语言
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
1.3HTML版本
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。
总而言之，HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Inte]met飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
1.4HTML的特点
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
- 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
- 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
- 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
- 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
1.5HTML常用的基本标签
1.5.1 标题标签
<!--h1这个标签是一个一级标题，类似还有h1,h2,h3 这种几级标题。-->
<h1>
<strong>初学者寄语</strong>
<!--strong标签的作用是加粗 可以将一段字符加粗-->
</h1>
file:///C:/Users/磊酱嘤嘤嘤/Desktop/QQ图片20191218193236.png[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZVk2bjr-1576672885614)(C:\Users\磊酱嘤嘤嘤\Desktop\QQ图片20191218193236.png)]
1.5.2 段落标签
<p> </p>这个标签中间跟了一段话
这个标签就是分段用的
<p>
<!--a标签 是一个超链接标签 把网址链接到你的网页上-->
<a href="https://www.baidu.com/" target="_self"></a> <br>
我是HTML初学者，这是我写的第一个网站。<br>
<!--br是一个换行标签-->
<!--em是一个斜体标签 将字体变斜-->
<em>作者：骆宾王</em> <br>
鹅鹅鹅 <br>
曲项向天歌 <br>
白毛浮绿水 <br>
红掌拨清波 <br>
</p>
1.5.3 换行标签
TAB+br
如上述代码
作用是从这一行换到下一行
1.5.4水平线标签
TAB+
<hr>
<!--hr标签是一个很长的划界线-->
一条横跨网页的水平线
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YKIKz0tu-1576672885619)(file:///C:\Users\磊酱嘤嘤嘤\Documents\Tencent Files\545503069\Image\Group\Image2_3S1I`}XBJQOQC]]Q[~_YH9.png)]
1.5.5 字体样式和特殊符号标签
<strong>初学者寄语</strong>
<!--strong标签的作用是加粗 可以将一段字符加粗-->
<!--em是一个斜体标签 将字体变斜-->
<em>作者：骆宾王</em> <br>
< >：空格符号标签
<©>:版权符号标签
1.6 图像标签
<img src=’""> src 后面跟的是图片的地址
图像标签的作用是给网页上放置一个图像
<!--img 标签作用是把图片放到你的网页上 ，你可以设置图片的大小-->
<img src="../HTML/1.jpg" alt="鹅"width="640"height="400"> <br>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B4KxKt7L-1576672885623)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1576670664660.png)]
1.7超链接标签
作用 ：给网页中链接其他网页的网址。
<a href="https://www.baidu.com/" target="_self"></a> <br>
target的值
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
_self : 在自己的窗口打开
_blank： 在新窗口中打开
列表 表格 媒体元素
列表
<!--列表：无序列表ul li 有序列表ol li-->
著名枪械
<ul>
<li>AK-47</li>
<li>m4-a1</li>
<li> MP5 </li>
</ul>
<ol>
<li>急停</li>
<li>定位</li>
<li>预瞄</li>
</ol>
<!--自定义列表dl dt dd-->
<dl>
<dt>艾姆纳姆</dt>
<dd>Stan</dd>
<dd>Withoutme</dd>
<dd>Rapgod</dd>
<dd>Luckyou</dd>
<dt>赵雷</dt>
<dd>三十岁的女人</dd>
<dd>成都</dd>
<dd>我的世界</dd>
表格
表格 Table
行 tr
列td
!--表格 table 行 tr 列 td-->
<!--需注意这样做出来的表格是没有边框的 要加边框 必须给它定义一个边框属性 border="1px"-->
<table border="1px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>籍贯</td>
</tr>
<!--rowspan 这列所跨的行数-->
<!--colspan 所跨的列数-->
<tr>
<td rowspan="2">刚娃</td>
<td>21</td>
<td>武功</td>
</tr>
<tr>
<td>21</td>
<td>武功</td>
</tr>
</table>
音频 audio
<!--audio :是一个音乐标签 可以给网页上添加音乐文件 autoplay 标签可以让音乐自动播放 controls标签的作用是增加一些关闭 暂停按钮-->
<audio src="Eminem%20-%20Venom%20(Music%20From%20The%20Motion%20Picture).flac" autoplay controls></audio>
视频 video
<!--video :是一个视频标签 可以给网页上添加视频文件 autoplay 标签可以让视频自动播放 controls标签的作用是增加一些关闭 暂停按钮-->
<video src="Eminem%20-%20Venom%20(Music%20From%20The%20Motion%20Picture).flac" autoplay controls></video>
网页结构 行业规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这些标签是行业规范 让代码结构更加好看-->
</body>
<header>
这是头部标签
</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section>独立区域</section>
<footer>尾部标签</footer>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最重要的表单</title>
</head>
<body>
表单form是HTML最重要的标签 <br>
表单的标签是 form <br>
action:提交地址 <br>
method:提交方式 <br>
get方式：携带参数 参数可以在URL中看到 ，不安全 大小有限 <br>
post:参数不可见. 安全 大小没有限制(表单提交常用方式post) <br>
<form action="https://www.baidu.com/" method="post">
<!--文本框 type="text"-->
用户名<input type="text" name="username" value=""><br>
<!--密码框 type="password"-->
密码 <input type="password"name="mimakuang"value=""><br>
<!--单选按钮type="radio"-->
性别
<input type="radio"name="sex"value="男">男
<input type="radio"name="sex"value="女">女 <br>
<!--多选按钮 type="checkbox"-->
爱好
<input type="checkbox"name="x">看电影
<input type="checkbox"name="d">听音乐
<input type="checkbox"name="f">玩游戏 <br>
<!--下拉列表框 select option-->
<!--selected 默认选中的值-->
年龄<select name="年龄" >
<option value="0"selected>1岁</option>
<option value="1">2岁</option>
<option value="2">3岁</option>
<option value="3">4岁</option>
</select><br>
<!--按钮 type value=按钮上的文字-->
<input type="button"value="普通按钮"><br>
<!--图片按钮 type=image src:图片的路径 -->
<input type="image"src=>
<!--文本域 textarea-->
<textarea name="文本域" cols="30" rows="10"></textarea> <br>
你想要说的话 <br>
<!--提交按钮 type="submit"-->
<input type="submit"value="登录">
<!--重置按钮 type="reset"-->
<input type="reset"value="重置"> <br>
<!--搜索框 search-->
<input type="search"name="x">
</form>
</body>
</html>
e="文本域" cols="30" rows="10"></textarea> <br>
你想要说的话 <br>
<!--提交按钮 type="submit"-->
<input type="submit"value="登录">
<!--重置按钮 type="reset"-->
<input type="reset"value="重置"> <br>
<!--搜索框 search-->
<input type="search"name="x">
</form>
</body>
</html>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
