e 1 year ago
parent
commit
bf90f98c18
3 changed files with 277 additions and 0 deletions
  1. 49 0
      day2/1.复习.html
  2. 166 0
      day2/2.demo.html
  3. 62 0
      day2/3.表单.html

+ 49 - 0
day2/1.复习.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>复习</title>
+    </head>
+    <body>
+        <!-- 页面上所显示的内容都写在body标签中 -->
+        <!-- 
+            标签:
+                1.按是否闭合区分:
+                    闭合标签 => 双标签 
+                    空标签 => 单标签
+                2.按是否换行区分:
+                    块级元素
+                    行内元素
+                    行内块元素
+                3.HTML文档标签(文档流)
+                4.H5新特新(暂时不讲)
+         -->
+         <!-- 块级元素:
+            1.列表
+                a、无序列表 ul li 属性:type:circle disc square
+                b. 有序列表 ol li 属性:type:A a I i 1; start; reverse
+                c. 图文混排列表 dl dt dd 
+            2.div 区分文本块
+            3.h1~h6 标题标签 特点:逐级减小
+            4.p  放置段落
+            5.br 换行标签
+            6.hr 分割线
+        -->
+        <!-- 
+            行内元素:
+            1.span 区分文本块
+            2.u 下划线
+            3.s 删除线
+            4.sub 下标
+            5.sup 上标
+            6.a 超链接
+            7.b/strong 加粗
+            8.i/em 倾斜
+         -->
+         <!-- 
+            行内块元素:中间有空白间隙
+             1.img 引入图片
+             2.input 输入框
+          -->
+    </body>
+</html>

+ 166 - 0
day2/2.demo.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>案例</title>
+    </head>
+    <body>
+        <div>
+            <h1>个人简历</h1>
+            <!-- 个人信息 -->
+            <div>
+                <h3>个人信息</h3>
+                <p>
+                    <span>
+                        姓       名:  韦城城
+                    </span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>
+                        电      话:  186-5106-7589
+                    </span>
+                </p>
+                <p>
+                    <span>
+                        姓       名:  韦城城
+                    </span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>
+                        电      话:  186-5106-7589
+                    </span>
+                </p>
+                <p>
+                    <span>
+                        姓       名:  韦城城
+                    </span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>
+                        电      话:  186-5106-7589
+                    </span>
+                </p>
+            </div>
+            <!-- 求职意向 -->
+            <div>
+                <h3>求职意向</h3>
+                <p>
+                    <span>
+                        工作性质:  全职
+                    </span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>
+                        工作地区:  北京
+                    </span>
+                </p>
+                <p>
+                    <span>
+                        工作性质:  全职
+                    </span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>
+                        工作地区:  北京
+                    </span>
+                </p>
+                <p>
+                    <span>
+                        工作性质:  全职
+                    </span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>
+                        工作地区:  北京
+                    </span>
+                </p>
+            </div>
+            <!-- 个人技能 -->
+            <div>
+                <h3>个人技能</h3>
+                <ul>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                    <li>熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</li>
+                </ul>
+            </div>
+            <!-- 工作经历 -->
+            <div>
+                <h5>北京巨作网络科技有限公司(2017.09 - 至今)</h5>
+                <p>工作描述:</p>
+                <ul>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                </ul>
+                <h5>北京巨作网络科技有限公司(2017.09 - 至今)</h5>
+                <p>工作描述:</p>
+                <ul>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                    <li>根据产品需求进行项目开发和功能实现,以及性能优化</li>
+                </ul>
+            </div>
+            <!-- 项目介绍 -->
+            <div>
+                <h3>项目介绍</h3>
+                <div>
+                    <h4> 巨作网(PC端)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                </div>
+                <div>
+                    <h4> 巨作网(PC端)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                </div>
+                <div>
+                    <h4> 巨作网(PC端)</h4>
+                    <p>- 简介:</p>
+                    <p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                    <p>- 职责:</p>
+                    <p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;巨作网是一家软装服务提供商,致力于提供一款软装解决方案,以装饰公司,设计师、设计公司的需求和市场需要建立软装品牌以及家具、灯具、饰品、窗帘、挂画等的产品库;为用户提供与家具工厂沟通、交易的途径;帮助家具企业传播品牌形象。
+                    </p>
+                </div>
+            </div>
+            <!-- 个人介绍 -->
+            <div>
+                <h3>个人介绍</h3>
+                <ol>
+                    <li>性格稳重、谦虚真诚、责任心强,有良好的沟通能力和团队合作能力</li>
+                    <li>性格稳重、谦虚真诚、责任心强,有良好的沟通能力和团队合作能力</li>
+                    <li>性格稳重、谦虚真诚、责任心强,有良好的沟通能力和团队合作能力</li>
+                </ol>
+            </div>
+            <!-- 教育经历 -->
+            <div>
+                <h3> 教育经历</h3>
+                <p>
+                    <span>2012.09—2016.7</span>&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>阜阳信息工程学院</span>&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span>计算机科学与技术</span>
+                </p>
+            </div>
+        </div>
+    </body>
+</html>

+ 62 - 0
day2/3.表单.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>表单</title>
+    </head>
+    <body>
+        <!-- 
+            规范:万维网联盟组织规定
+            表单:
+            form 
+                action:把表单中的内容提交给别的表单(很少会用)
+                1.input 输入框 placeholder 提示信息 行内块元素
+                    属性: 1.type 
+                              a.text 文本
+                              b.password 密码
+                              c.button 按钮
+                              d.reset 重置按钮
+                              e.submit 提交按钮
+                              f.radio 单选框 注:实现单选框加相同的name属性名称
+                              h.checkbox 多选框 
+                                checked默认选择  disabled禁止选中
+                           2.value 内容/值
+                2.label 信息标签 配合着input标签使用
+
+         -->
+        <form action="">
+            <label>分类</label>
+            <input type="text" placeholder="提示信息">
+            <br>
+            <label>密码</label>
+            <input type="password" placeholder="提示信息">
+            <input type="button" value="123">
+            <input type="reset">
+            <input type="submit">
+            <input type="radio" name="11">男
+            <input type="radio" name="11">女
+            <input type="checkbox" checked>桃子
+            <input type="checkbox" disabled>苹果
+            <input type="checkbox">梨
+            <input type="checkbox">橙子
+            <!-- 下拉框 
+                由select 搭配 option一起构成
+                disabled 禁止选中
+                selected 默认选中
+            -->
+            <select>
+                <option value="桃子">桃子</option>
+                <option value="苹果" selected>苹果</option>
+                <option value="梨" disabled>梨</option>
+                <option value="橙子">橙子</option>
+            </select>
+            <!-- 
+                文本域 textarea
+                cols 列
+                rows 行
+                maxlength 最大长度
+             -->
+<textarea  cols="10" rows="20" placeholder="请输入" maxlength="10"></textarea>
+        </form>
+    </body>
+</html>