| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>标签</title>
- <style>
- div {
- width: 700px;
- height: 300px;
- border: 1px solid #f00;
- /* background: #00f; */
- }
- </style>
- </head>
- <body>
- <!-- 页面发生任何改动时 都需要保存 否则浏览器不显示
- 保存 ctrl + s
- -->
- <!-- -->
- <!-- 注释 ctrl + /
- 便携开发
- -->
- <!--
- 复制 ctrl + c
- 粘贴 ctrl + v
- -->
- <!--
- 标签：
- 1.按闭合分类
- 开始标签：<head> <body>
- 结束标签: </head> </body>
- 闭合标签
- 空标签
- 双标签:由开始标签和结束标签组成的可以承接，嵌套内容的标签。
- 单标签：由开始标签组成并自动闭合的标签。
- 2.按是否换行分类
- 块级元素： 独占一行 设置宽高生效
- 行内元素： 一行显示，多个标签一行显示 设置宽高不生效
- 行内块元素：可以一行显示，可以设置宽高 中间有空白间隙
- 3.HTML文档标签(文档流)
- 4.H5新标签（暂时不讲）
- -->
- <!--
- div 划分区域
- h1~h6 标题标签 特点：放大加粗字体 h1~h6 逐级缩小
- p 文本段落内容
- br 换行
- hr 分割线
- ul li 无序列表
- 属性：type
- 默认 实心圆 disc
- 空心圆 circle
- 实心正方形 square
- ol li 有序列表
- 属性： type: 1 i I A a
- start 从...开始
- reversed 倒序
- dl dt dd 图文混排列表
- dt 放置图片
- dd 放置文字
- -->
- <!--
- b 加粗字体 单纯的加粗
- strong 加粗字体 强调语义 重点内容
- i 倾斜字体 单纯的倾斜
- em 倾斜字体 强调语义
- u 下划线
- sub 下标
- sup 上标
- s 删除线
- span 定义区域块
- -->
- <div>
- 我的 你的
- 你的 它的
- <h1>个人简历</h1>
- <h2>个人简历</h2>
- <h3>个人简历</h3>
- <h4>个人简历</h4>
- <h5>个人简历</h5>
- <h6>个人简历</h6>
- <span style="width: 100px;height: 100px;background-color: #f00;">行内元素</span>
- <!--
- a 标签 超链接 跳转
- 属性 href
- 1.放置要跳转的页面地址
- 2.# 回到页面顶部
- 3.""/'' 空字符串 刷新当前页面
- -->
- <a href="https://cn.bing.com/search?q=%e5%8f%b0%e9%a3%8e%e6%b5%b7%e8%91%b5%e6%88%96%e7%99%bb%e9%99%86%e5%b9%bf%e4%b8%9c&efirst=0&ecount=50&filters=tnTID%3a%22DSBOS_D3ED833566C5470EA9D416D4E8F895D9%22+tnVersion%3a%22e7dfdb28fe6346da87ffc9eb159d2c28%22+Segment%3a%22popularnow.carousel%22+tnCol%3a%220%22+tnOrder%3a%224d78b9f0-d788-46ac-9c77-e97e28114613%22&form=HPNN01">跳转2</a>
- <a href="http://www.baidu.com">跳转页面</a>
- <a href="#">跳转3</a>
- <a href="">跳转4</a>
- <p>这是一段<b>自我介绍</b>这是一段<b>自我介绍</b>这是一段自<br>
- 我介绍<strong>这是一段</strong>自我介<strong>绍这是一</strong>段自我介绍这是<br>
- 一段<i>自我</i>介<i>绍这</i>是一段<em>自我</em>介绍这是<em>一段</em>自我介<br>
- 绍这是一段自我介绍这是一段<span>自我介绍</span></p>
- <hr>
- <p>这是一段<u>自我</u>介绍这是<sub>一段自我</sub>介绍这是<sup>一段自我</sup>介绍这是<s>一段自我介</s>绍这是一段自我介绍</p>
-
- <!--
- 检查 点击页面选中检查 f12
- -->
- <ul type="disc">
- <li>内容1</li>
- <li>内容2</li>
- <li>内容3</li>
- </ul>
- <ol reversed>
- <li>内容1</li>
- <li>内容2</li>
- <li>内容3</li>
- </ol>
- <dl>
- <dt style="width: 100px;height: 100px;">
- <img style="width: 100%;height: 100%;" src="../images/1.jpg" alt="">
- </dt>
- <dd>一张图片</dd>
- </dl>
- <dl>
- <dt style="width: 100px;height: 100px;">
- <img style="width: 100%;height: 100%;" src="../images/1.jpg" alt="">
- </dt>
- <dd>一张图片</dd>
- </dl>
- <dl>
- <dt style="width: 100px;height: 100px;">
- <img style="width: 100%;height: 100%;" src="../images/1.jpg" alt="">
- </dt>
- <dd>一张图片</dd>
- </dl>
- <dl>
- <dt style="width: 100px;height: 100px;">
- <img style="width: 100%;height: 100%;" src="../images/1.jpg" alt="">
- </dt>
- <dd>一张图片</dd>
- </dl>
- <!--
- 图片标签 img
- 属性：
- src:放置图片路径地址
- 绝对路径 从网上获取的图片地址
- 相对路径 本地下载的图片
- 同级路径 ./
- 上级路径 ../
- alt:当图片无法展示时所展示的替换文字
- 图片无法展示的几种情况？
- 1.当图片是违禁图片
- 2.网速无法加载出图片
- -->
- <img src="https://ts1.cn.mm.bing.net/th/id/R-C.31df3a5a2d8462228734f95d459883e2?rik=7EE6TeWDk%2f%2bctQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214331.jpg&ehk=SpI7mz%2byLqOkT8BL79jcd3iCtQYNFlBHQzbtF1p0vuQ%3d&risl=&pid=ImgRaw&r=0" alt="">
- <img style="width: 150px;height: 150px;" src="../images/1.jpg" alt="宣传图">
- <img style="width: 150px;height: 150px;" src="../images/1.jpg" alt="宣传图">
- <img style="width: 150px;height: 150px;" src="../images/1.jpg" alt="宣传图">
- <img style="width: 150px;height: 150px;" src="../images/1.jpg" alt="宣传图">
- <br>
- 文字文字文字 文字文字文字文字文字
- </div>
- </body>
- </html>
|
