|
|
@@ -0,0 +1,161 @@
|
|
|
+<!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>
|
e
1 tahun lalu
