HTML
一、html概念和结构及部分标签
1.概念: 什么是html
- html是超文本标记语言
- 超文本: 超出文本的范畴,功能比文本更强大
- 标记语言: 语法由标签组成
2.结构
- html
- head
- title
- body
3.排版标签
- 字体标签 :
<font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>
- 标题标签 :
<hn>标题<hn> n取值1~6, 1是一级标题, 2是二级标题...
- 段落标签 :
<p>段落</p>
<!--
注意：
段落之间自动进行换行
-->
- 粗体标签
<b>内容</b>
- 斜体标签
<i>内容</i>
- 下划线标签
<hr/>
- 换行标签
<br/>
Ctrl+Shift+/: 注释快捷键
标签可以嵌套,具有属性
3. 路径问题
3.1 相对路径
- 相对路径就是每次从.html文件所在位置的文件夹开始查找,称之为绝对路径.
3.1.1 同级
- 同级就是"图片"和".html文件"存储在同一个文件夹中
- 格式 : src=“QRCode.jpg”
- 含义 : 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
3.1.2 上级
- 上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
- 格式: src="…/QRCode.jpg"
- 含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫QRCode.jpg, 其中…/ 代表找到当前文件夹的上一级文件夹
3.2绝对路径
- 绝对路径就是每次都从指定的盘符开始查找.
- 绝对路径注意点:
(1) 路径中不要出现中文, 否则可能出现未知问题
(2)如果是通过"相对路径"来指定图片, 不能跨盘符,例如.html文件在C盘, 那么不能去查找D盘图片
4.其他标签
(1) 图片标签
<img src="../img/b.jpg"/>
(2) 列表标签
[1]无序列表标签
<!--语法-->
<ul type="类型">
<li>需要显示的条目内容</li>
...
</ul>
示例:
<!--二 无序列表 ul-->
<!--type属性: 列表的类型; circle: 空心圆; square: 实心的正方形-->
<ul type="square">
<!--li定义列表里面的条目(item). li定义在ul里面-->
<li>乔丹</li>
<li>詹姆斯</li>
<li>艾弗森</li>
<li>科比</li>
</ul>
- ul标签 注意 :
- ul跟li标签一般同时结合用,不会单独分开,li标签必须在ul里面
- 应用 : 新闻列表,商品列表,导航条等
[2]有序列表标签
<!--语法-->
<ol type="类型" start="起始索引">
<li>需要显示的条目内容</li>
...
</ol>
示例:
<!--一,有序列表 ol
start属性: 起始的索引(默认是第1个)
type属性: 列表类型; 1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
-->
<ol start="1" type="1">
<!--li定义列表里面的条目(item). li定义在ol里面-->
<li>乔丹</li>
<li>詹姆斯</li>
<li>艾弗森</li>
<li>科比</li>
</ol>
(3) 超链接标签
[1]作用 : 用于控制页面与页面(服务器资源)之间跳转的
<!--超链接标签的格式: -->
<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
<!--target属性取值:
_blank：新起页面
_self：当前页面（默认）
-->
<!--href属性: 跳转的路径(可以是本地的也可以是远程的)
target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)
-->
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="../index.html">信息展示页面</a>
[2]假链接
- 点击链接不会跳转
<a href="#">这是一个假链接</a>
(4)表格标签
[1] 语法:
<table border="1px" width="" height="" bgcolor="" align="">
<tr>
<td>需要显示的内容</td>
</tr>
</table>
<!--1.解释说明
table标签代表整个表格
tr标签代表是表格中的一行
td标签就是一行中的一个单元格
2.注意点
表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
tr定义在table里面, td定义在tr里面
-->
[2]表格属性
- width : 宽度
- border : 边框的粗细
- align : 用于table, tr td
- rowspan : 跨几行
- colspan : 跨几列
- cellspacing : 指定单元格之间的间距
- cellspacing : 单元格与内容之间的间隔
[3]合并单元格
- 删除要合并的单元格，只留一个(最前方)
- 设置colspan或者rowspan属性，几个合并，值就是几
[其他常用]表格其他标签
<table>
<caption>表格标题</caption>
<tr>
<th>第一列的标题</th>
<th>第二列的标题</th>
<th>第三列的标题</th>
</tr>
...
</table>
<!--1.caption表格标题
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中;
2.th列标题
在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字. 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的;
-->
- caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
- 规范警示:
<tr></tr> <!--不算规范的表格, 就算是一行一列, td是不能少的-->
<tr>
<th></th>
<td></td>
</tr> <!--规范:
th标签不跟td标签在同一个tr标签里.
tr定义在table里面的, tr里面只放td或th; td、th里面 才放内容
-->
(5) 回到顶部
[1]锚点
<!--
id的作用: 用于标记位置
-->
<a id="aId01"></a>
...
<a id="aId02"></a>
...
<a href="#aId01">回到顶部</a>
<a href="#aId02">回到中部</a>
(6)video标签
[1]voideo 标签的属性(值)
- controls (controls): 向用户显示控件,如播放按钮
- autoplay(autoplay) : 视频在就绪后马上播放
- height(pixels): 设置视频播放器高度
- loop(loop) : 媒介文件完成播放后再次开始播放
- preload(preload) : 视频在页面加载时进行加载,并预备播放
- src(url) : 播放视频的URL
- width(pixels) : 设置视频播放器的高度
<video src="视频的资源" controls="controls">
</video>
(7)audio标签 : 用来播放音频
[1] audio标签属性
- autoplay
- controls : 向用户显示控件,如播放按钮
- loop : 每当音频播放结束时重新开始播放
- preload : 音频在页面加载时进行加载,并预备播放按钮
- src : 播放音频的URL
<auto src="音频的资源" controls="controls"></auto>
(8)详情概要标签
- details标签 : 描述详情信息
- summary标签 : 描述概要信息
(9) 图片链接
[1] herf表示链接地址;
<a href="http://www.baidu.com">
<img src="../img/b.jpg"/><br/>
百度
</a>
1313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
