基础标签功能
p标签
1
2
| # 元素解释：网站上正常段落文本的首选元素。P是“paragraph”的缩写。
<p>我是一个p标签！</p>
|
<!-- -->注释
颜色属性
1
2
3
4
5
6
7
8
9
10
| # 方式一：直接在标签内加样式
<h2 style="color: blue">CatPhotoApp</h2>
# 方式二：增加CSS样式
<style>
# 对标签加样式，直接引用
h2 {
color: blue;
}
</style>
<h2>CatPhotoApp</h2>
|
应用类于HTML元素，对元素增加CSS样式
1
2
3
4
5
6
7
8
| <style>
# 对元素的类加样式，需要在引用类的时候，加上``.``为前缀
.sty-text {
color: blue;
}
</style>
<h2 class="sty-text">CatPhotoApp</h2>
|
设置字体大小，字体类型
1
2
3
4
5
6
7
8
9
10
11
| # 方式一：直接在标签内加样式
<h2 style="font-size: 16px">CatPhotoApp</h2>
# 方式二：增加CSS样式
<style>
# 对标签加样式，直接引用
h2 {
font-size: 16px;
font-family: Monospace;
}
</style>
<h2>CatPhotoApp</h2>
|
添加图片
1
2
3
4
| # img 元素是自关闭元素，不需要结束标签。
<img src="https://www.your-image-source.com/your-image.jpg">
<img src="/statics/codecamp/images/relaxing-cat.jpg" alt = "your-image">
# alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示。
|
给图片添加格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <stype>
.smaller-image {
width: 100px;
}
.thick-green-border {
border-width: 10px;
border-style: solid;
border-color: green;
border-radius: 10px;
border-radius: 50%;
}
</style>
<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg" alt = "your-image">
|
锚点元素a
1
2
3
4
|
<p>这是一个a标签 <a href="https://www.w3cschool.cn">W3Cschool.cn</a>跳转到W3Cschool.cn</p>
<a href="https://www.w3cschool.cn">W3Cschool.cn</a>
|
固定链接使用#
有时你想要在你的网站上添加一个 a 元素，但你还不知道将它链接到哪里，这时你可以使用固定连接。
1
| <a href="#">cat photos</a>
|
为图片设置超链接
1
2
|
<a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
|
为图片添加alt描述
alt属性，是当图片无法显示时的替代文本。alt属性对于盲人或视觉障碍的用户理解图片中的内容非常重要，搜索引擎也会搜索alt属性来了解图片的内容。alt属性是一个必需的属性，为页面上的图片都加上alt属性是好习惯。
1
| <img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
|