一.html包含的元素
1.1 html的lang属性
lang->language 叫做语言声明属性：lang属性规定元素内容的语言
<html lang="en"></html>
<!--en为英语-->
<html lang="zh"></html>
<!--zh为中文-->1.2 h元素
-
h元素：网页的标题
-
h1-h6，h1设置关键字可将搜索靠前，所以一般一个网页只设置一个h1
<h1>我是h1标题</h1> <h2>我是h2标题</h2> <h3>我是h3标题</h3> <h4>我是h4标题</h4> <h5>我是h5标题</h5> <h6>我是h6标题</h6 >
1.3 p元素
-
p->paragrep网页的段落
-
一个网页可设置多个p元素，不过为了便于区分可加上class属性
<!--
p元素：网页的段落
-->
<p class="ph1">
哈哈哈哈哈哈哈哈哈哈
</p>
<p class="ph1">
你好啊
</p>1.4 strong元素
-
strong元素给字体加粗
<!--
strong元素->强壮 ->加粗
-->
<p>
<strong>你好啊</strong>白敬亭<strong>哈哈</strong>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>1.5 code-br-hr元素
-
code 代码，实现特殊字体，开发中很少用code，用span元素然后进行字体样式设计
-
以下code、span元素两种方式实现的效果一样
<style>
.text1{
font-family: monospace;
}
</style>
<code>这是一段代码</code><br>
<span class="text1">这是一段代码</span>1.6 span元素
- span元素的作用是对文本进行简单的归类，单独使用时跟p元素无区别
<body> <!-- span元素的作用是对文本进行简单的归类 --> <span class="text1">我是一段文本</span> <p> <span class="new-price"> $69 </span> <span class="old-price">$99</span> </p> </body>
1.7 div元素
-
实现整体的包裹
<DIV class="box1">
<h2>白敬亭</h2>
<p>北京怀柔小王子（白RAP）</p>
</DIV>
<DIV class="box2">
<h2>吴宣仪</h2>
<p>（五选一）</p>
</DIV>1.8 img元素的其他属性
-
src属性 ->source 来源
-
网络图片
-
本地图片
-
绝对路径
-
相对路径
-
-
<p>使用img网络路径</p>
<img src="https://bkimg.cdn.bcebos.com/pic/d1a20cf431adcbef805739c8a7af2edda2cc9f99?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyMjA=,g_7,xp_5,yp_5/format,f_auto"
alt=""
width="300px" >
<br>
<p>使用img本地绝对路径实现图片的展示</p>
<img src="D:\学习\HTML\img/img.jpg"
alt=""
width="300px">
<br>
<p>使用img本地相对路径实现图片的展示</p>
<img src="../img/img.jpg"
alt=""
width="300px">-
alt属性：当图片失效时(加载失败时)显示文本
-
gif图片的支持
-
width属性：调整宽度，浏览器会根据宽度自动设置高度
-
heigth属性：调整高度，设置了高度之后浏览器会根据高度自动设置宽度
-
一般不会直接这样直接设置高度和宽度、而是采用css样式进行设置
<body> <!-- 1.gif图片支持 --> <p>gif图片</p> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach-bbs.letv.com%2Fforum%2F201701%2F28%2F175011uv2cpn96vthnhn2v.gif&refer=http%3A%2F%2Fattach-bbs.letv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622125897&t=38abb9eae0b5f06be0919730bf013fa9" alt=""> <!-- 2.alt属性：图片失效（加载失败时）显示文本 --> <p>alt属性</p> <img src="https://gimg2.baidu" alt="gif图片"> <p>width属性 </p> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach-bbs.letv.com%2Fforum%2F201701%2F28%2F175011uv2cpn96vthnhn2v.gif&refer=http%3A%2F%2Fattach-bbs.letv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622125897&t=38abb9eae0b5f06be0919730bf013fa9" alt="" width="400"> </body>
-
1.9 a元素
-
hre属性：超链接
-
外部链接：比如打开百度的链接
-
本地链接：本地开发的其他网页
-
-
target属性：设置链接跳转的方式
-
_self：在本标签页上打开新的网页
-
_blank:在新的标签上打开链接
-
_parent:在父结点上打开链接
-
_top：在顶层上打开链接
-
<!-- href 超链接 -->
<p>打开是外部网页</p>
<a href="https://www.baidu.com/"> 百度一下</a>
<br>
<a href="https://www.taobao.com/"> 淘宝一下</a>
<br>
<p>打开本地网页</p>
<a href="./11_div元素的基本演练.html"> div元素的演练</a>
<br>
<!-- targte作用是设置在本标签上跳链接、或者打开新的标签跳链接
默认是：_self 自己
_blank 空白
-->
<p>target _blank打开</p>
<a href="https://www.baidu.com/"
target="_blank"> 百度一下</a>
<br>
<p>target _self打开</p>
<a href="https://www.baidu.com/"
target="_self"> 百度一下</a>
<br>1.10 iframe元素
-
iframe：创建包含另外一个文档的内联框架（行内框架），开发很少中这个元素
-
framborder属性：边框线
-
iframe可嵌入a元素一起用
<iframe
src="./13_a元素的基本演练.html"
frameborder="1"
width="1000"
height="600" >
</iframe>- iframe 也可以嵌入iframe元素
<iframe src="./14_iframe元素的使用.html" frameborder="1" width="1000" height="600"> </iframe>1.11 base元素
-
base元素：为页面上的所有链接规定默认地址或默认目标
-
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白
-
base元素必须位于head元素内部
-
与a、img、link元素结合运用
-
target属性：统一默认设置链接跳转方式
<body> <a href="" >百度一下</a> <a href="img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">百度一下图片</a> <a href="https://www.taobao.com/" target="_self">淘宝一下</a> </body>1.12 a元素锚点链接
-
通过href属性+#id获取锚点元素，从而实现跳转
<!-- a元素href属性，＃号跟id实现锚点链接 --> <a href="#title1">标题1</a> <a href="#title2">标题2</a> <a href="#title3">标题3</a> <h2 id="title1">标题1</h2> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <p>我是内容1</p> <br> <br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br> <br><br><br><br><br><br> <h2 id="title2">标题2</h2> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <p>我是内容2</p> <br> <br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br> <br><br><br><br><br><br> <h2 id="title3">标题3</h2> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p> <p>我是内容3</p>1.13 a 元素的伪链接
-
a 元素不一定是用来打开新网页的，而是打开链接，链接可为：
-
打开新网页
-
下载资源
-
打开压缩文件夹
-
发送邮件
-
观看视频等
-
-
href为空时无链接跳转（无base元素存在时）
-
href=”#“时，#意义为#top，链接跳到顶部，相当于锚点链接
-
伪链接
-
以后通过JavaScript代码实现
-
通过监听事件实现
-
<a href="#">点击该链接将跳到顶部</a>
<br>
<!-- 伪链接
1.使用javascript实现
2.通过onclik监听点击事件实现
-->
<a href="javascript:alert('hello world')">弹出弹窗</a>
<!-- onclik监听,发生点击时 -->
<a href="" onclick="alert('hello html')"> 弹出弹窗</a>二.字符编码
1.1 head元素的字符编码设置
<meta charset="utf-8">在head元素中嵌套meta元素实现字符编码的设置：charset=“utf-8”
常见的字符编码如下，一般用UTF-8：
-
GBK：中文
-
ASCII
-
utf-8
三.常见的字符实体
-
空格  ；
-
<小于号 <； lt->less than
-
<大于号 >；gt->grate than
-
& 和号 & amp；
-
”“双引号 "；
-
‘’单引号 &apos；
-
￥元 ¥；
-
©版权 ©；
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
