1.HTML
<!--h 是head的意思，开头标签 -->
<h1>展示</h5>
<h2>展示</h5>
<h3>展示</h5>
<h4>展示</h5>
<h5>展示</h5>
<!-- p是段落的意思 -->
<p>段落</p>
<!-- img是加载图片 -->
<img srt = "网络图片地址" alt - "图片未显示时的文字">
<!-- a是跳转页面 -->
<a href ="跳转的地址">跳转的地址如果是百度地址，你这里可以写百度</a>
<!-- 内联跳转需要加#号，href后面跟的是跳转到的Id内容-->
<a href = "#jump_to">跳转id是jump_to的地方，内联跳转#不要忘</a>
<h1 id = "jump_to"> 就是这个</h1>
<!-- target是锚元素的一个属性，用来指定链接的打开方式。属性_black表示表示链接
会在新标签页打开。href是锚元素的另一个属性，用来制定链接的url -->
I have a <a target ="_black" href = "url">big<a/> dog
<!-- #号站位符,如果把 a 的 href 属性值设置为 #，创建的是一个死链接（不跳转到其他画面） -->
<a href = "#" > 占位符 </a>
<ul>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
</ol>
<!-- 输入框 如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：<input type="text" required>-->
<input type = "text" placeholder = "文本框初始化显示的内容">
<!-- 表单 -->
<form action = "url_where_you_want_to_submit_form_data">
</form>
<label for = "single">
<input id = "single" type = "radio" name = "comm" value = "single" checked>单选
</label>
<!-- 表单提交 如果id = “check”被选中，发送key,value{comm,check} ，checked “默认选中”-->
<label for = "check">
<input id = "check" type = "checkbox" name = "comm" value ="check" checked>多选
</label>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
css
<!-- 别忘了分号 -->
<h2 style= "color : red;">CatPhotoApp</h2>
<!--h2标签所有颜色都变成红色,设置字体大小30,字体设置为:monospace-->
<style>
h2 {
color:red
font-size = 30px;
font-family: monospace;
}
</style>
<!-- class = "red-text" 带有前面的类标签的都会变 -->
.red-text {
color: red;
}
<!--边框颜色，边框宽度，边框样式,边框圆角 -->
.thick-green-border {
border-color:green;
border-width:10px;
border-style:solid;
border-radius:10px
}
<!--内边距padding,外边距 margin -->
.blue-box {
background-color: blue;
color: #fff;
padding-top:40px;
padding-right:20px;
padding-bottom:20px;
padding-left:40px;
}
<!-- 属性选择器 -->
[type='radio'] {
margin: 20px 0px 20px 0px;
}
<!-- 后一个的声明会覆盖前一个声明 -->
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
<!--id选择器会优于类选择器 -->
<!--内联选择器优于id选择器 -->
color: pink !important;最优
<!--:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。
我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。-->
:root {
/* 只修改这一行下面的代码 */
--penguin-belly: pink;
/* 只修改这一行上面的代码 */
}
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
