一、字体标签
- 字体标签
< fon...... </font> - 作用：规定文本的字体、字体尺寸、字体颜色
- 示例:
<font size="3" color= "red">我是红色</font>
<p><font size=14 face="楷体" color="red">我是楷体、红色</font></p>
<p><font size=14 face=" 黑体" color=" #0000ff">我是蓝色</font></p>
<p><font size=14 face="宋体" color="blue">我 也是蓝色</font></p>
- [小贴士]
- 在HTML4中，不赞成使用该标签
- 在HTML5中，不支持该标签
属性
- size：字体大小，范围为1-7
- face：字体类型，比如“黑体”等
- color：字体颜色
- 例子：
<html>
<head>
<title>first.html</title>
</head>
<body>
<font size="7" face="黑体" color="blue">
这是第一个页面~~
</font>
</body>
</html>
二、段落标签
- 段落标签
<p......</p> - 作用：定义一个段落
- 示例：
<p>我是段落</p>
<p>HTML超文本标记语言，通过使用标记来描述文档结构和表现形式的一种语言，由浏览器
进行解析，然后把结果显示在网页上.它是网页构成的基础,，你见到的所有网页都离不开HT
ML , HTML是用来制作网页的标记语言</p>
<p>我是段落</p>
- [小贴士]
- 段落内依据所在容器的宽度自动换行
- 浏览器会自动地在段落的前后添加空行
-
<p>和<br>的区别
- 换行符
<br>没有结尾标签 - 例子：
<html>
<head>
<title>first.html</title>
</head>
<body>
<p>
asdfadgasdfasdgasdgf<br>joaijdfoiaoigja
</p>
<p>
ueuibtibadfgiabeibasg
</p>
</body>
</html>
三、注释标签
- 注释标签 ``
- 作用：编写程序时，给代码的解释或提示，能提高程序代码的可读性,以便于以后的参考、修改
- 示例：
<!--这里是注释,是作者对程序代码做的解释说
明，以增加代码可读性-->
<!--这里 是注释，是作者对程序代码做的解释说明，以增加代码可读性-->
- [小贴士]
- 注释不会在浏览器中进行显示
- 注释出现的频率非常高
- 例子：
<html>
<head>
<title>first.html</title>
</head>
<body>
<!--这是一个注释-->
<p>
asdfadgasdfasdgasdgf<br>joaijdfoiaoigja
</p>
<p>
ueuibtibadfgiabeibasg
</p>
</body>
</html>
四、标题标签
- 标题标签 h标签:
<h ? >....</h ? > - 作用：定义标题头的六个不同文字大小，依次显示重要性的递减，也就是权重依次降低。
- 示例：
<h1>我是<font color="red">1</font>级标题</h1>
<h2>我是<font color="red">2</font>级标题</h2>
<h6>我是<font color="red">3</font>级标题</h6>
- 小贴士：尽量靠近在html中的
<body>标签，越近越好，以便让搜索引擎最快的领略主题
<h1>标题标签可以给seo优化
五、图片标签
- img：
<img src="***"/> - 作用： 在浏览器显示图片
- 示例：
<img src= "image/logo.jpg" alt="**"/> - 常用属性：src、alt、height、width
- src：文件路径
- alt：提示信息，如果src没有找到就会打印alt里面的信息
- 例子：
<html>
<head>
<title>first.html</title>
</head>
<body>
<!--相对路径-->
<img src="image/headlogo/3.jpeg" alt="not found~" width="100px" height="100px">
<!--绝对路径-->
<img src="d:/My_Files/Python_Project/html/image/1.gif" alt="not found~">
</body>
</html>
六、超级链接标签
-
a标签
<a>....</a> -
作用：使用超级链接与网络上的另一个文档相连
-
示例：
<a href="page2.html">打开另一个页面</a>
<a href="page2.html">单击我会打开另一个页面</a>
<a href="image/welcome.png">单击我打开会打开一张图片</a>
- 小贴士：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
a标签的target属性
- 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我的新页面</h1>
<p><a href="first.html">返回到首页</a></p>
<a href="https://www.baidu.com">百度</a>
<a href="image/2.jpeg">打开一个图片</a>
<!--使用图片打开超链接-->
<a href="https://www.baidu.com" target="_blank">
<img src="image/2.jpeg" width="100px" height="200px">
</a>
</body>
</html>
网友评论