1 年之前 · eb3e4bb06a
--- a/html+css+js快速入门/02HTML属性.html
+++ b/html+css+js快速入门/02HTML属性.html
@@ -0,0 +1,19 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+<a href="https://doc.grd.net.cn" target="_blank">这是一个超链接</a>
			
 
				+<hr>
			
 
				+<a href="https://doc.grd.net.cn" target="_blank">这是一个超链接</a>
			
 
				+
			
 
				+<img src="" alt="" width="100" height="200">
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/html+css+js快速入门/03块元素与行内元素.html
+++ b/html+css+js快速入门/03块元素与行内元素.html
@@ -0,0 +1,37 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+
			
 
				+块元素
			
 
				+<!--
			
 
				+块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。
			
 
				+块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
			
 
				+可以包含其他块级元素和行内元素。
			
 
				+常见的块级元素包括`div>，<p>，<h1>`到`<o>`,`<li>`,`<table>,`<form>`等`<h6>`,`<ul>`,
			
 
				+-->
			
 
				+<hr>
			
 
				+
			
 
				+
			
 
				+行内元素
			
 
				+<!--
			
 
				+行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接.
			
 
				+强调文本等。
			
 
				+行内元素通常在同一行内呈现，，不会独占一行。
			
 
				+它们只占据其内容所需的宽度，而不是整行的宽度。
			
 
				+面
			
 
				+行内元素不能包含块级元素，但可以包含其他行内元素。
			
 
				+常见的行内元素包括`span>`,`<a>`,`<strong>`,`<em>`,`<img>`,`<br>`',`<input>`等
			
 
				+-->
			
 
				+
			
 
				+<div id="nav"></div>
			
 
				+<span>这是一个span标签</span>
			
 
				+<span>这是一个span标签</span>
			
 
				+<span>这是一个span标签</span>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/html+css+js快速入门/04表单.html
+++ b/html+css+js快速入门/04表单.html
@@ -0,0 +1,52 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+from容器
			
 
				+<hr>
			
 
				+<!--单行输入-->
			
 
				+<form>
			
 
				+    <label for="username">账号</label>
			
 
				+    <input type="text" id="username" placeholder="请输入内容"><br><br>
			
 
				+    <label>密码</label>
			
 
				+    <input type="password" id="password" value="请输入内容">
			
 
				+</form>
			
 
				+<br><br>
			
 
				+<hr>
			
 
				+
			
 
				+<!--单选（radio）-->
			
 
				+<form>
			
 
				+    <label for="">性别：</label>
			
 
				+    <input type="radio" name="1">男
			
 
				+    <input type="radio" name="1">女
			
 
				+    <input type="radio" name="1">其他
			
 
				+</form>
			
 
				+
			
 
				+<br><br>
			
 
				+<hr>
			
 
				+<!--多选（checkbox）-->
			
 
				+<!--
			
 
				+action=""向何处提交信息
			
 
				+
			
 
				+-->
			
 
				+<form action="#">
			
 
				+    <label for="">爱好：</label>
			
 
				+    <input type="checkbox" name="爱好">唱歌
			
 
				+    <input type="checkbox" name="爱好">跳舞
			
 
				+    <input type="checkbox" name="爱好">画画
			
 
				+    <input type="checkbox" name="爱好">足球 <br>
			
 
				+    <input type="submit" value="提交">
			
 
				+</form>
			
 
				+<br><br>
			
 
				+<hr>
			
 
				+
			
 
				+<!---->
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/html+css+js快速入门/05css导入方式.html
+++ b/html+css+js快速入门/05css导入方式.html
@@ -0,0 +1,41 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+<!--（内部css样式）-->
			
 
				+    <style>
			
 
				+        p {
			
 
				+            color: #1b00ff;
			
 
				+            font-size: 16px;
			
 
				+        }
			
 
				+    </style>
			
 
				+    <!--（导入外部样式）-->
			
 
				+    <link rel="stylesheet" href="05css导入方式（外部css样式）.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+
			
 
				+<!-- 优先级
			
 
				+三种导入方式的优先级:内联样式`>`内部样式表`>`外部样式表
			
 
				+
			
 
				+-->
			
 
				+
			
 
				+
			
 
				+
			
 
				+<!--  内联css样式  -->
			
 
				+<p style="color: #c011ff;font-size: 20px">
			
 
				+    这是一个自定义p标签的样式
			
 
				+</p>
			
 
				+
			
 
				+
			
 
				+<!--  内部css样式  -->
			
 
				+<p>这是一个添加了样式的p标签</p>
			
 
				+
			
 
				+
			
 
				+<!--外部样式-->
			
 
				+<h2>这个h2标签使用了外部样式</h2>
			
 
				+
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/html+css+js快速入门/05css导入方式（外部css样式）.css
+++ b/html+css+js快速入门/05css导入方式（外部css样式）.css
@@ -0,0 +1,4 @@
 
				+h2{
			
 
				+    color: coral;
			
 
				+    font-size: 30px;
			
 
				+}
			
--- a/html+css+js快速入门/06css选择器.html
+++ b/html+css+js快速入门/06css选择器.html
@@ -0,0 +1,14 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Title</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <h1>不同类型的CSS选择器</h1>
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>