插入图片音频视频 列表 表格 框架 锚点结合框架窗口
<!DOCTYPE html>
<html>
<!--head标签是设置页面的配置信息-->
<head>
<!--title标签是设置页面的标题信息-->
<title>first page</title>
<!--meta标签是设置页面的编码配置信息-->
<meta charset="utf-8"/>
</head>
<body>
我的第一个页面
<!--基本元素-->
<div>
<a name="top">第一章</a>
<h1>qcby</h1>
<h2>qcby</h2>uu
<h3>qcby</h3>
<h4>qcby</h4>
<h5>qcby</h5>
<h6>qcby</h6>
<a name="top2">第二章</a>
<h1>qcby</h1>
<h2>qcby</h2>
<h3>qcby</h3>
<h4>qcby</h4>
<h5>qcby</h5>
<h6>qcby</h6>
<a name="top3">第三章</a>
<h1>qcby</h1>
<h2>qcby</h2>
<h3>qcby</h3>
<h4>qcby</h4>
<h5>qcby</h5>
<h6>qcby</h6>
</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span style="color:red">span</span>
<span>span</span>
<span>span</span>
<hr>
<!--超链接
配套属性：href
href:超文本资源路径
target:指定超文本资源的打开方式
_self（本窗口）
_blank（新窗口）
_parent（跳出父级窗口）
_top（跳出顶级窗口）
自定义窗口？
窗口名指定窗口打开
锚点
配套属性：href
name:定点名称
-->
<!--锚点的使用-->
<a href="http://beihai.pc2345.cn/index/" target="test">taobao</a>
<a href="https://www.bilibili.com" target="test">bilibili</a>
<a href="https://leetcode.cn/" target="test">leetcode</a>
<a href="#top">回到顶部</a><!--本页面锚点-->
<a href="test.html"></a><!--切换页面-->
<a href="test.html#top"></a><!--切换到另一页面锚点-->
<div style="position:fixed;right:10px;top:10px"><!--css样式使用，如果子元素没有额外样式，那么都按照此样式-->
<div><a href="#top">第一章</a></div>
<div><a href="#top2">第二章</a></div>
<div><a href="#top3">第三章</a></div>
</div>
<!--图片标签
src是引用的图片资源
1>绝对路径
2>相对路径
兄弟关系：“tu.jpg" 叔侄关系："img/tu.jpg" 表兄弟关系："../img/tu.jpg"
3.直接浏览器复制地址
当图片没有显示成功的时候，显示alt里面的文本信息。
通过height和width可以设置宽高。
id class style是所有的标签都有的属性。
-->
<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=0&spn=0&di=7264239678495129601&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=906691340%2C2557737291&os=2135671293%2C1475933711&simid=3431096758%2C315878849&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7f%2Fdb%2Fc0%2F7fdbc067cb38b6ffb295430ddae8757b.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3F15ogs5w1AzdH3Fdma00-8mc88nAzdH3F&gsm=&islist=&querylist=&dyTabStr=MTEsMCwzLDYsMSw0LDIsNSw4LDcsOQ%3D%3D"
alt="这是一张图片">
<img src="../求职/tu.jpg" height=100 width=15>
<img src="../求职/tu.jpg" style="height:500px;width:150px">
<!--音频标签
1>绝对路径
2>相对路径
controls手动播放
autoplay自动播放
loop循环播放
-->
<audio src="C:\Users\Administrator\Music\y2172.mp3" controls="true"></audio>
<!--视频标签-->
<video src="C:\Users\Administrator\Videos\shipin.mp4" autoplay="true"></video>
<!--列表标签>
<!--unorderlist,无序列表-->
<ul>
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
</ul>
<!--orderlist，有序列表 可以用type设置序号类型 start设置从哪个开始编写-->
<ol >
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
</ol>
<ol type="a">
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
</ol>
<ol type="A" start="2">
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
<li>直接浏览器复制地址</li>
</ol>
<!--表格标签
<tr>表示行
<td>单元格
<th>字体加粗并居中
border="1"表示表格有边框
height表示表格高度度
width表示表格宽度
cellpadding控制单元格的填充度
cellspacing控制单元格之间的间距
thead、tbody、tfoot规定行的顺序，不管书写的时候怎么写，thead永远在最上面，tfoot永远在最下面
rowspan、colspan分别用于行和列的合并,但是合并后要将多余的行列删除>
-->
<table border="1" cellpadding="10px" cellspacing="0">
<!--tablerow -->
<tbody>
<tr>
<td rowspan="2">张三</td>
<td>女</td>
<td>21</td>
<td>篮球</td>
</tr>
<tr>
<td>男</td>
<td>23</td>
<td>足球</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>王五</td>
<td colspan="3">男</td>
</tr>
<tfoot>
<thead>
<tr>
<!--th和td的区别：th是居中的，用作表头-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
</table>
<!--框架标签，窗口标签
作用：嵌套其他页面
frameborder="0"可以去掉边框，让嵌套更自然
name可以给窗口起名称，可以结合锚点使用，跳转到相应窗口打开链接；
-->
<iframe src="https://www.bilibili.com" width="600px" height="400px" frameborder="0" name="test"></iframe>
</body>
</html>
<!--
html标签（元素）由两部分组成：标签、标签属性、标签内容，举例<div style="color:red" id="gs">
青城博雅</div>
-->
一些快捷键的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.!代表生成html基本框架元素 ctrl+？可以注释-->
<!-- 2.html元素直接书写 不加尖括号回车 可以生成元素-->
<!-- 3.div{oh},在花括号里书写文本回车 会直接在元素中生成文本 $代表数字-->
<!-- 4.生成多个 例子：div*10 ,也可结合3，带内容生成多个元素-->
<!-- 5.嵌套 -->
<div> </div>
<h4> </h4>
<a href=""></a>
<img src="" alt="">
<iframe src="" frameborder="0"></iframe>
<!-- div{0h} -->
<div>oh</div>
<!-- div{number$}*10-->
<div>number1</div>
<div>number2</div>
<div>number3</div>
<div>number4</div>
<div>number5</div>
<div>number6</div>
<div>number7</div>
<div>number8</div>
<div>number9</div>
<div>number10</div>
<!--嵌套 ul>li>a -->
<ul>
<li><a href=""></a></li>
</ul>
<!-- div>p+a+span+h3 -->
<div>
<p></p>
<a href=""></a><span></span>
<h3></h3>
</div>
<!-- div>p*3 -->
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
