H5第一周知识总结：
程序员文章站
2024-03-17 15:34:28
...
标签：
1.<h1>...<h1>-<h6>...<h6>为标题标签，字体逐渐变小如下：
<h1>最近新上映电影</h1>
<h2>爱情公寓</h2>
<h3>一出好戏</h3>
&nbsb表示空格- img标签：行内标签
图片标签，属性：src=图片存放的位置
align 对齐方式
width：高度
height：高度
alt：定义有关图形的短的描述，图片无法加载给出提示信息
如：
<h1>人与宠物</h1>
<img src="img/pic8.jpg" align="bottom" alt="小白狗"/>戴项链的小白
<br />
<img src="img/pic3.jpg" width="364" height="364"/>
</body>-
<a>.....<a>标签标识行内标签
href：定义连接的地址
a.外部地址：http：//www.baidu.com
b.占位
c.内部页面：相对路径
d.锚链接
方法
1. 定义锚点 <a name="名字"> 名字 </a>
2. 定位位置 <a href="#名字"> 定位到名字位置 </a>
target: 打开的位置
_blank新的选项卡中打开
_self 默认在当前页面打开如下：
<font size="7">
<a href="http://www.baidu.com" target="">百度</a>
<a href="#">网易</a>
<a href="img标签-3.html">img标签</a>
</font>
</body>
</html>锚链接：具体列子分析
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<a href="">军事</a>
<a href="#yule">娱乐</a>
<a href="#shishang">时尚</a>
<hr />
<div style="width: 500px;height: 800px;background-color: greenyellow;">
军事
</div>
<hr />
<div style="width: 500px;height: 800px;background-color: orange;">
<a name="yule">娱乐</a>
</div>
<hr />
<div style="width: 500px;height: 800px;background-color: pink;">
<a name="shishang">时尚</a>
</div>
</body>
此列子通过创建娱乐和时尚的链接，点击是可以直接链接到创建的`时尚和娱乐
4：块级和行内
块极标签：独占一行 在css样式中使用较多 主要作用：
用于展示或者划分页面的区域
<h1></h1> ~ <h6></h6>
<p></p> 特点： 独占行 容器\
<div></div行内标签(inline)：
<span></span> 单纯的行内元素 设置宽高没有效果
要想让行内元素识别width和height，则需要添加一个样式属性: display: inline-block
<font> <img> <a></a> <input/>
块级标签和行内标签的列子如下
<div style="width: 200px; height: 200px; background-color: pink;">
</div>
<div style="width: 200px; height: 200px; background-color: yellow;">
</div>
<div style="width: 200px; height: 200px; background-color: gold;">
</div>
<hr />
<span style="width: 300px;height: 300px;background-color: red;display: inline-block;">1</span>
<span style="width: 300px;height: 300px;background-color: green;display: inline-block;">2</span>
<span style="width: 300px;height: 300px;background-color: blue;display: inline-block;">3</span>上面的div创建的使各占一行显示的，而span创建的是并排显示的但是span要加display：inlin-block
- 列表标签：
无序列表标签
<ul>
<li></li> 块级标签
<li></li>
<li></li>
<li></li>
...
</ul>
有序列表标签
<ol>
<li></li> 块级标签
<li></li>
<li></li>
<li></li>
...
</ol>列表的属性问题
<style>
#u1 li{
list-style: none;
float: left;
}
#u1 li a{
text-decoration: none;
color: darkgray;
}
</style>
第一个是让列表去掉前面的.或者各种符号，
如：<ol type="1" start="3" >
<li>咒怨</li>
<li>电锯惊魂</li>
<li>午夜凶铃</li>
<li>死神来了</li>
</ol>
type表示类型，此表示按 1 2 3 4显示在列表前面
start表示重3开始依次显示即3 4 5 6
第二个是让列表按照指定的方式进行显示，不使用则竖排显示。
自定义列表问题：下面是一个自定义列表的列子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
<style>
dd {
display: block;
-webkit-margin-start: 40px;
-moz-margin-start: 10px;
font-size: 10px;
color: #999999;
}
</style>
</head>
<body>
<dl>
<dt>
<img src="img/pic2.jpg" width="100px" height="100px"/>
<dd>韩庚 郑恺</dd>
</dt>
<dt>
<img src="img/pic3.jpg" width="100px" height="100px"/>
<dd>郑恺 郭采洁</dd>
</dt>
<dt>
<img src="img/pic4.jpg" width="100px" height="100px"/>
<dd>韩庚 郑恺 赵丽颖</dd>
</dt>
</dl>
</body>
</html>- 音频标签：
html5才有的标签
音频： audio
视频: video
<audio src="文件位置文件名" autoplay="autoplay" controls="controls"></audio>
<p></p>
<video src="文件位置文件名" autoplay controls loop></video>
</body>
</html>上一篇： 买蛋糕
下一篇： 浅谈Python函数调用方式的总结