内容LongLongLong是一种情怀
本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!
博客地址 点击跳转
在学习HTML5之前有几点忠告给大家
1.HTML5要学习的内容很多很杂,会越来越难,如果有人给你说H5一点都不难的话,那一定是坑你 ! 或者是对你有所图.HTML5相对于别的语言来说可能稍微有点轻松,但是绝对不简单!
2.其实,前期学H5的一些标签和样式挺简单的,你会感觉很轻松 ! 但是后面的内容会越来越难.
3.首先你得明白得学习一些什么东西,包括那些内容.下面是我给大家罗列的全部内容
4.在你学习任何一门语言的时候,一定要有心里准备和坚韧不拔的毅力.
下面废话不多话,直接上代码
浏览器功能
- 将网页渲染出来给用户查看
- 可以让用户通过浏览器和网页交互
- 浏览器内核就是通常所说的渲染引擎，因为内核不同，所以存在兼容问题。
服务器
- 服务器就是超级计算机，顶级配置。服务器是用来存储数据的，24小时不断电不关机的超级计算机。
什么是URL
**
http://127.0.0.1：80/index.html（完整的格式） http://URL协议类型
127.0.0.1服务器的IP地址
:80服务器的端口号
index.html需要访问的资源名称**
认识HTML
- HTML 由HyperText（超文本） Markup（标记） Language（语言）缩写而来
- HTML只有一个作用，它是专门用来给文本添加语义的。所以HTML被称作“超文本标记语言”。
字符集
- 示例代码 :
<meta charset="GBK"> GBK中文汉字 国标 纯中文网站
<meta charset="UTF-8"> UTF-8 国际通用 字库很全
DTD文档声明
- 示例代码 :
<!DOCTYPE html> 作用告诉浏览器 我是一个文档
H系列标签
- 示例代码 :
h1 h2 h3 h4 h5 h6 标签 只有h1到h6 主标题 字体依次变小
<!--在浏览器上显示一条分割线-->
<!--注意：独占一行-->
<hr/>标签
<!--注意：在浏览器中独占一行-->
<p>我是一段文本</p>
<!--快速添加前后标签--><!--选中文字，然后快捷键：Ctrl+Alt+T-->
注释
<!--<p>我是段落</p>--> 工作中注释非常重要 注释的内容不会显示在页面上
<!--快捷键：Ctrl + / -->
img标签和路径问题
img标签是英文的缩写，用来显示一张图片
img标签的格式
<img src = "">src是英文 source 的缩写，source：资源，src是用来告诉img标签需要显示的图片。
注意点
和H系列的标签不一样，img标签不会独占一行- 如果我们手动指定图片的宽度和高度，会使图片变形 如果不想图片变形，只指定一个值，系统会自动自动高度，都是等比拉伸，不会变形
img包含的属性 ：
- **width：宽度 height：高度 width/height两个属性来控制图片的高度和宽度 如果没有指定宽度和高度，系统会默认显示 **
- **title：当鼠标悬停在图片上的时候，需要弹出的描述框中显示什么内容 **
- **alt：是英文alternate的缩写 作用是：当需要显示的图片找不到时，显示什么内容。 **
路径问题：
- 给src赋值有两种方式
**1.通过相对路径赋值相对路径就是每次从.html中查找
2.同级就是图片和.html存储在同一个文件夹中格式：src="QRCode.jpg"含义：在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
下级下级就是存储图片的文件夹和.html文件在同一个文件夹中格式：在.html文件所在的文件夹中找到名称教程images的文件夹
上级上级就是存储图片的位置和存储代码的文件夹在同一个文件夹中格式：src="../QRCode.jpg"../代表跳出现在的文件夹从上级文件夹中查找名称叫做QRCode.jpg的文件
3.通过绝对路径赋值绝对路径每次都是从指定的硬盘开始查找
4.注意：
路径中不要出现中文，否则会导致无法显示图片
通过相对路径指定，不能跨硬盘**
换行标签
- 如何在HTML中换行，可以用br标签
- br标签的作用：换行
- br标签的格式：
- 注意点：
- 多个br标签可以连续使用，使用了几个就会换几行
- 由于HTML的作用就是给文本添加语义，而br标签的语义是不另起一个段落换行，而在企业中开发一般需要另起一个段落换行，所以开发中很少使用br标签。
a标签
- 什么是a标签
- a标签的作用:就是用于控制页面与玉面之间跳转的
- a标签的格式：<a href="指定需要跳转的目标界面">需要给用户查看的内容</a>
- a标签中还有一个叫做target(目标)属性，这个属性的作用是来控制如何跳转页面
- _self(当前):当前页面跳转，不新建选项卡
- _blank(空白):重新打开一个新选项卡跳转
- a标签中还有一个叫做title的属性，和img标签中的title属性是一样的，都是用来控制鼠标悬停时显示的提示文本的
- 注意点：
**1.a标签不仅可以让文字可以点击跳转，还可以让图片跳转
2.一个a标签必须有一个href属性，不然无法实现跳转
3.如果通过a标签的href属性指定一个URL地址的时候，前面必须加上(http:)//或(https://)
4.a标签除了可以指定网络地址以外，还可以指定本地地址**
- 示例代码 : 跳转到另一页
<a href="https://www.跳转地址">内容页</a>
<a href="https://www.跳转地址">
</a>
- 示例代码 : 本地跳转
<a href="本地地址.html">内容标题.html</a>
- 示例代码 : target
<a href="https://www.链接地址" target="_self">地址页</a>
<a href="https://www.链接地址" target="_blank">地址页</a>
- 示例代码 : title
<a href="https://www.nuomi.com/?cid=002540" title="友情提示:会跳转到百度糯米首页">糯米</a>
base标签
- base(基础)标签就是专门用来统一指定当前网页中所有的超链接（a标签）需要如何打开
- 注意点：
1.base标签必须写在head标签的开始标签和结尾标签中间
2.如果既在base标签中指定了target，又在a标签中指定了target，那么浏览器会按照a标签中指定的方式打开
- 示例代码 :
<base target="_blank"> 控制整个页面的跳转 插入在head标签之中
<a href="https://www.跳转地址" target="_self">比如百度糯米</a>
<a href="http://news.跳转地址">比如百度新闻</a>
<a href="https://www.跳转地址">比如hao123</a>
<a href="http://跳转地址">比如百度地图</a>
<a href="http://跳转地址">比如百度贴吧</a>
<a href="http://跳转地址">比如百度视频</a>
假链接
- 假链接就是点击之后不会跳转页面意义：在企业开前期，其他界面都没有写出来，所以不知道该往那里跳，所以用假链接来代替。
- 开发到后期之后把假链接替换成真链接假链接的格式：1.#：点击之后会自动回到页面顶部2.javascript：点击之后不会自动回到顶部
锚点
- 要想a标签跳转到指定的位置，必须告诉a标签一个独一无二的身份证号码，这样才能找到
- 如果给HTML中的标签绑定一个独一无二的身份号码呢？ 在html中都有一个叫做id的属性，id属性是独一无二的
- 想要跳转到指定的位置分两步
- 给目标位置添加一个id属性，然后指定一个独一无二的值
- 告诉a标签需要跳转到的目标标签对用的独一无二的身份证号码是多少格式：
<a href="#center">跳转到中部</a><h2 id="center">我是中部</h2> - 注意点：
1.通过a标签跳转到指定位置的时候，是没有过度动画效果的，直接一下就跳到指定位置
2.a标签除了可以跳转到当前界面的指定位置以后，还可以跳转到其他界面的时候直接跳转到指定位置格式：
- 示例代码 :
<a href="13-锚点的测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面3333</h2>
<a href="13-锚点的测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2>我是顶部</h2>
<a href="#center">跳转到中部</a>
<br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/>
<h2 id="center">我是中部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>我是底部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
无序列表
- 1.什么是列表标签列表标签就是用来给一对数据添加列表语义，告诉浏览器这堆数据是一个整体
- 2.HTML中列表标签的分类
- 2.1无序列表（最多）（unordered list）(ul的缩写)
- 2.2有序列表（最少）（ordered list）
- 2.3定义列表（其次）（definition list）
- 3.无序列表的作用给一堆数据添加列表语义，并且这一堆数据中所有的数据没有先后之分先后之分：例如排行榜没有先后之分：例如城市
- 4.无序列表格式
- 示例代码 :
<ul>
<li>需要显示的内容</li>
</ul>
li其实就是list item（列表条目）的缩写 list：（列表） item：（条目）
- 注意点：
1.ul标签是用来给一堆数据添加语义的，而不是给用来给它们前面添加小圆点的
2.ul标签和li标签是一个组合，一般情况同时出现，不会单个出现
3.ul标签和li标签是一个组合，所以ul标签中不推荐包含其他标签无序列表的
- 应用场景
1.新闻列表
2.商品列表
3.导航条
- 示例代码 :
<h2>中国的城市有那些</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>武汉</li>
<li>天津</li>
</ul>
练习
<hr width="500px" align="left">
<ul type="circle">
<li>男子帮前车拆穿碰瓷 遭"碰瓷党"砸穿车窗</li>
<li>老鼠咬坏天然气胶管 户主点火做饭气灶闪爆</li>
<li>小区业主和物业激战多年 老师被逼成“泼妇”</li>
<li>体操美女不幸爆菊身亡！下体血肉模糊</li>
<li>小伙陷传销欲骗家人钱 PS剁手指照被识破(图)</li>
</ul>
- 图片展示
- ul标签中最好只放li标签，但是在企业开发中，li标签的内容可能会很复杂，所以我们可以继续在li标签中添加其他的标签，来丰富界面
总结：
1.一定记住ul标签中最好只放li标签
2.但是li标签中还可以继续添加其他的标签
3.无序列表中的li标签除了可以添加别的标签丰富界面以后，还可以添加ul标签ul中可以有li，li中又可以有ul
有序列表
- 无序列表的作用
- 给一堆数据添加列表语义，并且这一堆数据中所有的数据有先后之分
- 有序列表格式：
<ol>(ordered list缩写)
<li>需要显示的内容</li>
</ol>
- 注意点和应用场景都和ul的差不多
定义列表
- 定义列表的格式：
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
- dt和dd都是英文缩写
1.dt是英文definition title的缩写，所以dt的含义就是用来定义列表
2.dd是英文definition description的缩写，所以dd的含义就是用来定义标题对应的描述
-
定义列表的作用：
1.定义列表的作用
2.给一堆数据添加列表语义
3.先通过dt标签定义列表中的所有标题，然后通过dd标签给每个标题添加描述信息 -
定义列表的应用场景
1.做网页底部的相关信息
2.图文混排 注意点：
**1.和ul和ol一样，dl和dt/dd是一个整体，所以他们一般都是同时出现的，不会单独出现
2.和ul和ol一样，由于dl和dt/dd是一组合标签，所以dl中建议只放dt和dd标签
3.一个dt可以没有对应的dd，也可以有多个对应的dd，但无论有或者没有dd都不推荐使用，只推荐一个dt对应一个dd
4.和li标签一样，需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签**
表格标签基本使用
以前很多网站都用表格标签做的，表格标签是一个时代的代表
作用：用来给一堆数据添加表格语义
表格是一种数据的展现形式，当数据量特别大的时候，用表格来展示的时候就会非常清晰表格标签的格式：
示例代码 :
<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>
table代表整个表格，一对table标签就是一个表格
tr标签代表表格中的一行数据，一对tr标签就是一行数据
td标签代表表格中一行的一个单元格，一对td标签就是一行中的一个单元格
- 注意点
1.表格标签中有一个边框属性，这个属性决定了边框的宽度，默认情况下属性值是0，所以看不到
2.表格标签和列表标签一样，是一个组合标签，所以table/tr/td同时出现，不会单独出现
表格标签的属性
- 宽度和高度的属性
1.可以给td标签和table标签使用
2.表格的宽度和高度默认按照内容的尺寸来调整，也可以给table标签设置width和height来手动指定
2.如果给td标签设置width和height属性，会修改当前单元格一行的宽度和高度，不会影响整个表格
- 水平对齐和垂直对齐属性
1.其中水平对齐可以给table和tr和td标签使用
2.垂直对齐只能对tr和td标签使用
3.给table标签设置align属性，可以控制表格在水平方向的对齐
4.给tr标签设置align属性，可以控制当前行中单元格内容的水平方向对齐
5.给td标签设置align属性，可以控制当前单元格内容在水平方向的对齐方式
- 注意点：
**1.如果td和tr中都设置了align属性，那么单元格中的内容会按照td中设置的来对齐
2.给tr标签设置valign属性，可以控制当前行中所有单元格的内容，在垂直方向的对齐方式
3.外边距和内边距属性 只能对table标签使用
4.外边距就是单元格和单元格之间的距离 默认情况下，外边距的距离是2px
5.内边距就是表格中的内容和单元格边框之间的距离 默认情况下内边距是1**
- 示例代码 :
<table border="1" width="500px" height="300px" align="center" cellspacing="12" cellpadding="20">
<tr valign="bottom">
<td width="150px" height="50px">11</td>
<td valign="top">22</td>
</tr>
<tr align="center">
<td align="right">33</td>
<td>44</td>
</tr>
</table>
细线表格
- 在表格标签中想通过指定外边距为0来实现细线表格是不行的，
- 其实他是2条线合并成一条线，看起来很不舒服的
- 细线表格的制作方式：
**1.给table标签设置
backgroundcolor为黑色
2.给tr标签设置backgroundcolor为白色
3.给table标签设置cellspacing = "1px"
**
注意点：
table标签和tr标签以及td标签都支持bgcolor属性示例代码 :
<table bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
- 图片展示
表格标签的其他标签
表格的标题
- 在表格标签中提供了一个专门用来设置表格标题的标签，叫caption
-
只要将这个标签写入表格当中，它就会自动居中
caption标签一定要写在table中，否则无效
caption标签一定要跟在table标签后面
标题单元格标签
- 在表格标签中提供了一个专门用来存储每一列标题的标签，这个标签叫做th标签，只要将当前列的标题存 储在这个标签当中就会自动居中+加粗
- 到此为止我们发现，表格中有两种单元格一种是td标签，一种th标签，th标签就是专门用来存储当前列 标题的
单元格合并
<table bgcolor="black" cellspacing="1px" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2" rowspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--<td colspan="2"></td>-->
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
-
图片展示
**单元格合并**
