HTML
1. 第一个HTML程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-HelloHTML</title>
</head>
<body>
Hello HTML
</body>
</html>
2. HTML介绍
HTML HyperText Markup Language
超文件标记语言
HTML标记语言是由W3C组织明确标准的。
<b></b> <strong></strong>
HTML5
HTML5标准的制定者
谷歌浏览器,火狐浏览器,欧朋,Safari,IE,Edge
可以使用360极速版浏览器
3. HTML标签规则
双边标签
<body></body>
开始标签和结尾标签组成,结尾标签有</>标记
单边标签
<meta charset="UTF-8" />
一个标签结束,通常情况下会存在 /> 结尾
HTML标签是可以带有属性的
charset="UTF-8" 告知当前页面的解析使用编码集为UTF-8
属性="值" or 属性='值' or 属性=值
HTML结构标签
<!DOCTYPE HTML>
<HTML>
<head>
头标签
可以设置当前页面的解析编码集,页面关键字,页面描述,标题,JS引入,CSS
引入...
</head>
<body>
指整个页面
</body>
</HTML>
4. HTML标签
4.1 meta标签和标题标签
<meta charset='UTF-8'>
meta标签是一个多功能标签
charset 编码集设置
description 页面描述
keywords 关键字
<title>01-HelloHTML</title>
整个页面的标题,标题有时候也用于SEO优化
4.2 文本标签[已淘汰]
< font color = " #9acd32" face = " 宋体" size = " 7" > 赛赛说他太年轻</ font> < br>
< h1> 黄焖鸡</ h1>
< h2> 热干面</ h2>
< h3> 蛋炒饭</ h3>
< h4> 香辣虾</ h4>
< h5> 肉蟹煲</ h5>
< h6> 冰淇淋</ h6>
4.3 排版标签
< p>
团聚时,你选择告别并逆行;困惑时,你选择直面和公开;畏惧时,你选择坚守与担当。这一刻,你选择善意;这一刻,有你,才有胜利!
</ p>
< span> 疯狂动物城</ span>
< span> 星际穿越</ span>
< span> 霸王别姬</ span>
< span> 窃听风暴</ span>
< span> 末代皇帝</ span>
< span> 指环王</ span>
< div> 教父</ div>
< div> 海豚湾</ div>
< div> 忠犬八公</ div>
< div> 楚门的世界</ div>
< br>
4.4 a链接标签
<!--
target 属性选择
_self 表示当前页面打开新链接
_blank 表示新标签页打开新链接
-->
<a href="https://www.baidu.com" target="_self">百度一下~~~</a> <br>
<a href="https://www.jd.com">JD.com</a> <br>
<a href="https://www.taobao.com" target="_blank">淘你喜欢</a>
<!-- 锚点 -->
<font><a href="#middle">去中间</a></font>
<a name="top"></a>
<font><a href="#bottom">去底部</a></font>
<font size="7" color="#9acd32"><a href="#top">回顶部</a></font>
<a name="middle"></a>
<font size="7" color="#9acd32"><a href="#bottom">去末尾</a></font>
<font><a href="#top">回到顶部</a></font>
<a name="bottom"></a>
<font><a href="#middle">回到中间</a></font>
4.5 列表
有序列表
ol
无序列表
ul
列表元素
li
< ul type = " none" >
< li> 这个杀手不太冷</ li>
< li> 黑客帝国</ li>
< li> 盗梦空间</ li>
< li> 泰坦尼克号</ li>
< li> 辛德勒的名单</ li>
</ ul>
< ol type = " a" start = " 3" >
< li> 罗马假日</ li>
< li> 狮子王</ li>
< li> 少年派的奇幻漂流</ li>
< li> 死亡诗社</ li>
< li> 拯救大兵瑞恩</ li>
</ ol>
4.6 img标签
< img src = " img/a.jpeg" width = " 200px" height = " 200px" >
< img src = " http://image.bitautoimg.com/a.jpg" alt = " " >
4.7 audio音频标签
< audio src = " http://music.163.com/song/media/outer/url?id=30953009.mp3" controls loop > </ audio>
4.8 video使用标签
< video src = " video/a.mp4" controls > </ video>
4.9 table表格
< table width = " 600px" align = " center" border = " 1px" >
< tr>
< th> ID</ th>
< th> 姓名</ th>
< th> 年龄</ th>
</ tr>
< tr>
< td> 1</ td>
< td colspan = " 2" > 2</ td>
</ tr>
< tr>
< td rowspan = " 2" > 4</ td>
< td> 5</ td>
< td> 6</ td>
</ tr>
< tr>
< td> 8</ td>
< td> 9</ td>
</ tr>
< tr>
< td> 10</ td>
< td> 11</ td>
< td> 12</ td>
</ tr>
< tr>
< td> 13</ td>
< td> 14</ td>
< td> 15</ td>
</ tr>
</ table>
5. form表单【重点】