一.标签基本语法
html - 通过不同的标签来给网页提供不同的内容
1.html标签语法
html中的标签有双标签和单标签两种
1)双标签
<标签名 属性1=属性值1 属性2=属性值2 …> 标签内容 </标签名>
2)单标签
<标签名 属性1=属性值1 属性2=属性值2 …> 或者 <标签名 属性1=属性值1 属性2=属性值2 …/>
说明：
a.标签名不是程序员自己命名的,而是html提前规定好的
b.每个标签是单标签还是双标签是确定的，不能修改
c.不管属性值的本质是什么数据,属性值都必须写在双引号里面
d.双标签的标签内容可以是任何内容,包括:只要文字、其他一个或者多个,一层或者多层标签、标签和文字的组合
二.常用标签
<!DOCTYPE html>
<html>
<head>
<!-- 设置编码方式 -->
<meta charset="utf-8">
<!-- 设置标题 -->
<title>常用标签</title>
<!-- 设置网页图标
link标签 - 导入外部文件
1)rel属性 - 文件作用; stylesheet - 样式表、icon - 图标
2)type属性 - 导入的文件的类型和文件后缀;
text/css - 文件文本/后缀是.css
image/png - 图片文件/后缀是.png
3)href属性 - 文件路径
-->
<link rel="icon" type="image/png" href="./img/b.png""/>
</head>
<body>
<!-- 1.标题标签:h1 ~ h6 -->
<h1 id="i1">一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 2.段落标签:p
一个p标签的内容会单独占一行
-->
<p>“俞老师，价格太贵了”</p>
<p>“基本都是礼盒装，不实用”“苹果16元一斤，吃不起啊”</p>
<!-- 3.行内文字标签:span -->
<span>“俞老师，价格太贵了”</span>
<span>“基本都是礼盒装，不实用”“苹果16元一斤，吃不起啊”</span>
<!-- 4.加粗和倾斜:b、i (行内的) -->
<b>不是吧</b>
<i>是的呀</i>
<!-- 5.图片标签:img
src属性:本地图片地址或者网络图片地址(决定要显示的是哪张图片)
-->
<!-- 显示本地图片 -->
<img src="img/b.png" title="本地图片">
<!-- 显示网络图片 -->
<img title="网络图片"src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
<!-- 6.超链接:a
<a href="跳转地址">可见可点击的部分</a>
1)target属性 - 跳转方式; _self(默认值,直接在当前网页中加载新的页面)、_blank(在新的窗口中加载新的页面)
2)href属性 - 跳转地址
情况一:网页地址 - 跳转到新的网页
情况二:本地html文件路径 - 打开本地页面(本地跳转)
情况三:id选择器 - 网页精准定位
-->
<!-- 文字超链接 -->
<a href="http://www.baidu.com"" target="_blank">百度</a>
<a href="http://www.baidu.com">
<img src="img/b.png">
</a>
<br>
<a href="test1.html">第一章</a>
<br>
<a href="test2.html">第二章</a>
<br>
<a href="test3.html">第三章</a>
<br>
<a href="#i1">回到顶部</a>
</body>
</html>
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
