<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
h2{
color: blue;
/*所有的h2都会变为blue*/
}
/*设置字体的大小*/
h1 {
font-size: 10px;
}
/*设置字体的样式*/
h2 {
font-family: Sans-serif;
}
/*引入字体*/
/*<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">*/
/*对字体的降级*/
/*在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。
当某种字体不可用时，你可以让浏览器将其 “降级” 为另一种字体。
例如，如果你希望元素使用 Helvetica 字体，但是当 Helvetica 不可用时也会降级为Sans-Serif 字体，则可以使用此CSS样式：
p {
font-family: Helvetica, Sans-Serif;
}
现在，你可以注释掉对Google字体的使用，注释掉link标签，以使 Lobster 字体不可用。请注意观察它是如何降级为 Monospace 字体的。*/
/*HTML 调整网页里图片大小*/
.larger-image
{
width: 500px;
}
/*CSS 边框具有 style(样式)、color(颜色)、width(宽度) 等属性。*/
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
/*让边框变为圆形*/
border-radius: 50%;
}
/*背景颜色*/
.green-background {
background-color: green;
}
/*HTML 为标签添加ID属性*/
#cat-photo-element {
background-color: green;
}
<h2 id="cat-photo-app">
/*有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)*/
/*元素的 margin （外边距）控制元素的 border（边框）和周围元素实际所占空间的距离。如果将一个元素的 margin 设置为负值，则元素将会变大。*/
/*CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。*/
/*padding: 10px 20px 10px 20px;这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左*/
/*margin: 10px 20px 10px 20px;这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。*/
/*CSS 多个class处理样式覆盖*/
/*class="class1 class2"*/
/*CSS 通过ID的样式属性覆盖class类的声明*/
/*<h1 id="orange-text">*/
/*CSS 通过内联样式覆盖class类的声明*/
/*<h1 style="color: white;">*/
/*CSS 通过使用Important覆盖所有其他样式*/
/*color: pink !important;*/
/*rgb*/
</style>
<body>
<!--标签 h1 元素通常用于主标题，而 h2 元素通常用于副标题。还有 h3，h4，h5 和 h6 元素来表示不同的和新的部分。-->
<h1>这就是标签</h1>
<!--段落标签-->
<p>我是一个p标签!</p>
<!--html更换文本的颜色-->
<!--样式的属性有很多，其中color用来指定颜色。-->
<h2 style="color: red">CatPhotoApp</h2>
<!--使用CSS选择器定义标签-->
<!--<style>
选择器 {属性名称: 属性值;}
h2 {color: red;}
</style>-->
<!--HTML设置标签字体的大小-->
<!--添加图片-->
<!--img 元素具有 alt 属性。alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示。-->
<img src="../img/0A62AE68CF7D7986D6449E2A6D46057F.jpg" />
<!--把 a 元素的 href 属性的值替换为一个 # （# 也称为哈希符号），将其转换为一个固定链接。-->
<!--无序列表-->
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
<!--有序列表-->
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
<!--创建文本输入框-->
<!--注意，input元素是自关闭的。-->
<input type="text">
<!--占位符-->
<input type="text" placeholder="this is placeholder text">
<!--添加表单-->
<!--action属性的值指定了表单提交到服务器的地址。-->
<form action="/url-where-you-want-to-submit-form-data"></form>
<!--提交按钮-->
<button type="submit">this button submits the form</button>
<!--必填-->
<input type="text" required>
<!--添加单选框-->
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<!--添加复选框-->
<!--checkboxes（复选按钮）通常用于可能有多个答案的问题的形式。-->
<!--每一个复选按钮都应嵌套在其自己的 label元素中。所有关联的复选按钮输入应该具有相同的 name属性。-->
<label><input type="checkbox" name="personality">1</label>
<label><input type="checkbox" name="personality">2</label>
<label><input type="checkbox" name="personality">3</label>
<!--HTML 使用checked属性设置复选框和单选框默认被选中-->
<!--使用 checked 属性，你可以设置一个单选框和复选框默认被选中。
为此，只需在 input 元素中添加属性checked 。例如：
<input type="radio" name="test-name" checked>-->
<label><input type="checkbox" name="personality" checked=""> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<!--div 元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。-->
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
