【day13】HTML基础知识：head,body,CSS选择器，CSS样式，dom

时间 2019-12-20

标签 day13 html 基础知识 head body css 选择器样式 dom 栏目 HTML 繁體版

原文原文链接

HTML基础知识

1.HTML基础知识：head

以下全部操做都是基于这个文档http://ui.imdsx.cn/menu/ php

参考文档以下：http://www.imdsx.cn/index.php/2017/07/27/html0/css

须要在pycharm中新建一上html Filehtml

 1 <!DOCTYPE html> <!--指定标准的html代码 格式-->
 2 <!--一个标签 经过<> 来定义-->
 3 <html lang="en">
 4 <head>
 5     <!--head标签中大部分的标签都是不可见 前端页面不可见-->
 6     <!--配置html字符集-->
 7     <!--写在标签中的charset="UTF-8" 叫作属性 -->
 8     <meta charset="UTF-8">
 9     <!--每隔一秒钟 刷新一次-->
10     <meta http-equiv="refresh" content="1;http://www.baidu.com">  页面展现一秒钟，而后跳转到百度
11     <!--关键字检索：表示百度要检索的关键字，输入以下content里面的内容，就能找到-->
12     <meta name="keywords" content="xxxx">
13     <!--描述-->
14     <meta name="description" content="xxxx">
15 
16     <!--修改浏览器tab页的名字的-->
17     <title>水瓶座</title>
18     <!--连接标签  rel指定 要展现要连接的功能 href 路径-->
19     <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
20     <!--连接样式表 rel指定 要展现要连接的功能 href 路径 -->
21     <link rel="stylesheet" href="">
22 
23     <!--自闭合标签-->
24         <!--它没有另外一对，本身就是一个总体-->
25     <!--主动闭合标签-->
26         <!--成对出现-->
27 </head>
28 <body>
29 <a>水瓶座</a>
30 </body>
31 </html>

运行结果以下：（须要在代码中，晃动一下鼠标，右侧出一各类浏览器，打开浏览器，就能看到以下结果）前端

展现1秒后，又跳转到百度界面web

2.HTML基础知识：body

s1.htmlajax

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8 
  9 <span>span标签是html中的 白版标签（没有任何css的样式）,行内标签（内联标签）,本身有多大 就占多大</span>
 10 
 11 <div>它是html中出场率最高的标签,伪白版标签,块级标签,不管本身有多大 都占一整行</div>
 12 
 13 <p>上下换行 段落标签</p>
 14 
 15 标题标签 一共有6个
 16 <h1>我是标题标签h1</h1>
 17 <h2>我是标题标签h2</h2>
 18 <h3>我是标题标签h3</h3>
 19 <h4>我是标题标签h4</h4>
 20 <h5>我是标题标签h5</h5>
 21 <h6>我是标题标签h6</h6>
 22 
 23 <!--多行文本-->
 24 <textarea>行内标签（内联标签）块级标签(文本框能够随意拖动它的大小)</textarea>
 25 
 26 <div>
 27     <!--特殊符号-->
 28     &ltp&gt
 29     <span>浏览器只识别一个空格:百&nbsp&nbsp&nbsp&nbsp测</span>
 30 </div>
 31 
 32 <!--单行文本框 也叫 input框-->
 33 <!--name表明传递给后端JSON的key 输入的字符串就是传递给后端的value-->
 34 <!--placeholder 提示文案   type表明当前input的类型 默认是text-->
 35 <input name="user" value="123456" placeholder="请输入用户名" type="text">
 36 <input name="password" placeholder="请输入密码" type="password">
 37 
 38 <!--{"user":"abdce","password":"123456"}-->
 39 <!--是思考下 前端和后端如何交互？-->
 40 
 41 <!--checkbox 多选框 checked表明默认勾选-->
 42 <input type="checkbox" name="sex" value="1" checked="checked">
 43 <input type="checkbox" name="sex" value="2">
 44 <input type="checkbox" name="sex" value="3">
 45 <!--radio 单选 name相同则互斥-->
 46 <input type="radio" name="sex" value="1">
 47 <input type="radio" name="sex" value="2">
 48 
 49 <!--上传文件-->
 50 <!-- *****对于ui自动化来讲 若是你须要上传文件的操做时，若是是input的方式实现的文件上传则能够经过sendkey直接搞-->
 51 <input type="file" name="file">
 52 <!--button只是一个单纯的按钮 须要和js联动绑定事件来才能够进行动做操做-->
 53 <input type="button" value="登陆1">
 54 <input type="submit" value="登陆2">
 55 
 56 <p>=======================================【表单标签】=======================================================</p>
 57 <!--【表单标签】 理解为一张白纸 他是一个载体 承载的数据-->
 58 <form action="http://www.baidu.com" method="get">
 59     <div>
 60         <!--label扩展input可点击的范围,，点击用户名文本也能够定位到输入框-->
 61         <label for="i1">用户名：</label>
 62         <input id="i1" type="text" name="username" placeholder="请输入用户名">
 63     </div>
 64 
 65     <div>
 66         <label for="i2">密码：</label>
 67         <input id="i2" type="password" placeholder="请输入密码" name="passwd">
 68     </div>
 69     <!--若是submit和form连用，则点击时自动触发action请求-->
 70     <div>
 71         <input type="submit" value="登陆Submit">  <!--form和submit一块儿用。点击submit时，会跳转到百度-->
 72     </div>
 73 
 74     <!--button必须和js连用-->
 75     <div>
 76         <input type="button" value="登陆button"></div>  <!--form和button一块儿用。点击button时，界面没有反映-->
 77     <!--若是reset不和form表单连用 那将毫无做用 重置form中全部input变为默认模式-->
 78     <input type="reset">
 79 </form>
 80 
 81 <!--像后端发送请求的方式-->
 82 <!--一、经过ajax进行异步请求-->
 83 <!--每次提交不会刷新页面 若是验证经过才会跳转-->
 84 <!--二、经过form表单进行请求-->
 85 <!--提交时整个页面进行刷新提交-->
 86 <!--会致使用户填写的数据被清空-->
 87 
 88 <p>=======================================下拉框=======================================================</p>
 89 <!--select先写框 在写value 具备层级关系 selected默认选择那一项-->
 90 <select name="area">
 91 <option value="1">北京</option>
 92 <option value="2">上海</option>
 93 <option value="3" selected="selected">深圳</option>
 94 </select>
 95 <!--{“area”：“3”}-->
 96 
 97 <select>
 98 <!--label分组名-->
 99 <optgroup label="黑龙江">
100 <option value="1">牡丹江</option>
101 <option value="2">哈尔滨</option>
102 </optgroup>
103 <optgroup label="河北">
104 <option value="3">秦皇岛</option>
105 <option value="4">石家庄</option>
106 </optgroup>
107 </select>
108 
109 <p>=======================================超连接=======================================================</p>
110 <!--超连接标签 href 链接地址 target新建 一个tab再打开 -->
111 <a href="http://www.besttest.cn" target="_blank">跳转besttest官网</a>
112 <!--图片标签 alt 当图片加载失败后显示的文字 title 鼠标悬浮到图片时显示的文字 -->
113 <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg1" alt="这是加载失败的文案" title="这是鼠标炫悬浮式显示文字">
114 
115 <p>=======================================表格=======================================================</p>
116 <table border="1">
117     <thead>  <!--表格横向字段-->
118     <tr> <!--行-->
119         <th>id</th>   <!---列--->
120         <th>name</th>
121         <th>method</th>
122         <th colspan="2">操做</th> <!--表格字段：2个合并成一个-->
123     </tr> <!--行-->
124     </thead>
125     <tbody>
126     <tr>  <!--行-->
127         <td>1</td>
128         <td rowspan="4">dsx</td>  <!--第1行，第2列中全部数据合并-->
129         <td>post</td>
130         <td>执行</td>
131         <td>修改</td>
132     </tr>
133     <tr>
134         <td>1</td>
135         <td>post</td>
136         <td>执行</td>
137         <td>修改</td>
138     </tr>
139     <tr>
140         <td>1</td>
141         <td>post</td>
142         <td>执行</td>
143         <td>修改</td>
144     </tr>
145     <tr>
146         <td>1</td>
147         <td>post</td>
148         <td><a href="s.html">执行</a></td>
149         <td>修改</td>
150     </tr>
151     </tbody>
152 </table>
153 </body>
154 </html>

运行结果以下：ubuntu

通常用到的注释有如下几种：==============================================后端

html：；sublime-text

css:/* */
js://注释单行
/*注释多行*/数组

====================================================================

3.HTML基础知识：CSS选择器

参考文档：http://www.imdsx.cn/index.php/2017/07/27/html1/

s2.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <!--选择器 定位body中的标签-->
  7     <!--在style标签中添加CSS样式 写在head中-->
  8     <style>
  9          /*******1.*id选择器 关键符号是#    */
 10         #i1{
 11             /*高度   <!--#i1表示：已经定位到body体中，id是i1的属性 --> */
 12             height: 100px;
 13             /*!*宽度*!*/
 14             width: 100px;
 15             /*!*背景色*!*/
 16             background-color: red;
 17         }
 18         /*2. id组合选择器*/
 19         #i1,#i2,#i3{
 20             /*高度*/
 21             height: 100px;
 22             /*宽度*/
 23             width: 100px;
 24             /*背景色*/
 25             background-color: red;
 26         }
 27 
 28         /*3. class选择器  <!--  .c1表示：已经定位到body体中，class是c1的属性 --> */
 29         .c1{
 30             height: 100px;
 31             width: 100px;
 32             background-color: black;
 33         }
 34          /*4. class组合选择器*/
 35         .c2,.c3,.c4{
 36             /*高度*/
 37             height: 100px;
 38             /*宽度*/
 39             width: 100px;
 40             /*背景色*/
 41             background-color: red;
 42             margin-top: 10px;
 43         }
 44 
 45         /* 5. 标签选择器*/
 46         div{
 47             height: 100px;
 48             width: 100px;
 49             background-color: black;
 50         }
 51 
 52         /*!* 6.  id层级选择器*!*/
 53         #i31 span{
 54             background-color: red;
 55         }
 56         /*!* 7.  class层级选择器*!*/
 57         .c33 span{
 58             background-color: red;
 59         }
 60         /* 8.  属性选择器*/
 61         div[dsx="dsx"]{
 62             height: 100px;
 63             width: 100px;
 64             background-color: blue;
 65         }
 66     </style>
 67 </head>
 68 <body>
 69 
 70     <!--1和2. id的属性随意写 可是一个html标签中只容许出现一个id 不能重复-->
 71     <div id="i1"></div>
 72     <div id="i2"></div>
 73     <div id="i3"></div>
 74     <!--3. class也能够随意写，一个html标签中能够存在多个相同的class属性-->
 75     <!--css样式中 class 应用的最频繁-->
 76     <div class="c1"></div>
 77     <div class="c1"></div>
 78     <div class="c1"></div>
 79 
 80     <!--4. class组合选择器 知道就行 不要用-->
 81     <div class="c2"></div>
 82     <div class="c3"></div>
 83     <div class="c4"></div>
 84 
 85     <!--5. 标签选择器是以"标签的名字来定位" 应用于全部div标签-->
 86     <div></div>
 87 
 88     <!--6.  id层次选择器-->
 89     <div id="i31">
 90         <span>id选择器</span>
 91     </div>
 92     <span>id选择外</span>
 93 
 94     <!-- 7.  class层次选择器-->
 95     <div class="c33">
 96         <span>class选择器</span>
 97     </div>
 98     <span>class选择外</span>
 99 
100     <!--8. 属性选择器-->
101     <div dsx="dsx"></div>
102 
103 
104 </body>
105 </html>

运行结果以下：

4.HTML基础知识：CSS样式1

1.新建一个stylesheet

2. 按ctrl + 鼠标，进入c.css

.c1{
           height: 100px;
           width: 100px;
           background-color: black;
       }

s3.html代码以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--一、head中添加一个style标签能够写css样式-->
 7     <style>
 8         .c1 {
 9             height: 100px;
10             width: 100px;
11             background-color: pink;
12         }
13     </style>
14     <!--三、经过link标签导入的css样式表 rel表明类型 href路径-->
15     <link rel="stylesheet" href="c.css">
16 
17 </head>
18 <body>
19 <!--那些位置能够写css样式 如何修改css样式-->
20 <!--二、在标签中增长style属性 也能够写css样式-->
21 <div class="c1" style="height: 100px;width: 100px;background-color: red"></div>
22 <!--优先级
23 一、标签上引用的css样式优先级最高
24 以标签为基准 由内 而外 由下到上 依次应用-->
25 </body>
26 </html>

运行结果以下：

5.HTML基础知识：CSS样式2

s4.html代码以下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .active{
  8             display: none;
  9         }
 10         .c1{
 11             height: 100px;
 12             width: 100px;
 13             background-color: blue;
 14         }
 15 
 16         .c11{
 17             height: 100px;
 18             /*宽度能够写百分比的 高度不能够*/
 19             width: 100%;
 20             background-color: blue;
 21         }
 22         .c2{
 23             /*字体加大加粗*/
 24             font-size: xx-large;
 25             font-weight: bolder;
 26         }
 27 
 28         .c21{
 29             width: 100%;
 30             height: 48px;
 31             background-color: blue;
 32             /*水平居中*/
 33             text-align: center;
 34             /*垂直居中*/
 35             line-height: 48px;
 36         }
 37 
 38         .c12{
 39             height: 48px;
 40             width: 100px;
 41             /*边框 1像素 红色 实线*/
 42             border: 1px red solid;
 43         }
 44 
 45         .c6{
 46             height: 100px;
 47             width: 100px;
 48             display: inline-block;
 49             border: 1px red solid
 50         }
 51 
 52 
 53     .c9{
 54         height: 100px;
 55         width: 100%;
 56         border: 1px red solid;
 57     }
 58 
 59     .c0{
 60         height: 50px;
 61         width: 100%;
 62         background-color: blue;
 63     }
 64         .head{
 65             height: 48px;
 66             background-color: green;
 67             position: fixed;
 68             top: 0;
 69             right: 0;
 70             left: 0
 71         }
 72         .go-top{
 73             height: 48px;
 74             width: 100px;
 75             position: fixed;
 76             right: 0;
 77             bottom: 0;
 78         }
 79     </style>
 80 </head>
 81 <body style="margin: 0">
 82 
 83     <!--外边距-->
 84     <div class="head"></div>
 85     <div id="i1"></div>
 86     <div style="height: 10000px;width: 100%;margin-top: 48px"></div>
 87     <div class="go-top">
 88         <!--a标签能够用做锚点-->
 89         <a href="#i1">返回顶部</a>
 90     </div>
 91 
 92     <!--<div class="c9">-->
 93         <!--&lt;!&ndash;外边距margin  top表明距离外层上边10px&ndash;&gt;-->
 94         <!--&lt;!&ndash;外边距本身自己不作变化而相对于外层作移动&ndash;&gt;-->
 95         <!--<div class="c0" style="margin-top: 10px"></div>-->
 96     <!--</div>-->
 97 
 98     内边距
 99     <div class="c9">
100         <!--内边距padding  top表明距自身增长10px-->
101         <!--内边距改变自身-->
102         <div class="c0" style="padding-top: 10px"></div>
103     </div>
104 
105 
106 
107 <!--标签中的class属性是能够同时引用多个选择器-->
108 <div class="c1 active"></div>
109 <div class="c11"></div>
110 
111 <div class="c2">水瓶座</div>
112 <div class="c21">HTML</div>
113 <!--浮动:能够左漂，也能够右飘-->
114 <div class="c12" style="float: right"></div>
115 <div class="c12" style="float: left"></div>
116 <div class="c12" style="float: left"></div>
117 <div class="c12" style="float: left"></div>
118 
119 
120 <span>span标签是html中的 白版标签（没有任何css的样式）,【**行内标签***】（内联标签）,本身有多大 就占多大</span>
121 <div>它是html中出场率最高的标签,伪白版标签,【**块级标签***】,不管本身有多大 都占一整行</div>
122 
123 <!--display属性-->
124 <!--行内标签 不能够应用宽、高、外边距、内边距等css样式-->
125 <!--行内标签转块级标签 经过display block-->
126 <!--<span style="height: 100px;width: 100px;display: block">行内标签转块级标签block</span>-->
127 <!--块转行内 经过display的inline-->
128 <div style="height: 100px;width: 100px;display: inline">块转行内inline</div>
129 <!--即便行内 也是 块级-->
130 <span class="c6">水瓶座</span>
131 <!--display: none 隐藏当前元素-->
132 <div style="height: 100px;width: 100px;background-color: blue;display: none"></div>
133 
134 
135     <!--postion分层-->
136     <!--postion fixed 绝对定位 写完后永远都在哪个地方-->
137     <!--<div style="height: 48px;background-color: green;position: fixed;top: 0;right: 0;left: 0"></div>-->
138     <!--<div style="height: 1000px;width: 100%"></div>-->
139     <!--<div style="height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;background-color: blue"></div>-->
140 
141 </body>
142 </html>

运行结果以下：

6.HTML基础知识：CSS样式3

s5.html代码以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .out {
 9             height: 400px;
10             width: 400px;
11             border: 6px red solid;
12             position: relative;
13         }
14 /*postion：absolute与relative是成对出现的，不能单独使用*/
15         .inner {
16             height: 100px;
17             width: 100px;
18             position: absolute;
19         }
20 
21         .out-zindex {
22             height: 100px;
23             width: 100px;
24             border: 6px red solid;
25             position: relative;
26         }
27 
28         .inner-zindex {
29             height: 100px;
30             width: 100px;
31             position: absolute;
32         }
33         .image{
34             height:100px;width:100px;border: 1px pink solid;
35             background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');
36             /*当图片小于外层时不作堆叠操做*/
37             /*background-repeat: no-repeat;*/
38             /*横向堆叠*/
39             /*background-repeat: repeat-x;*/
40             /*纵向堆叠*/
41             background-repeat: repeat-y;
42 
43         }
44 
45     </style>
46 </head>
47 <body>
48 <!--相对定位-->
49 <div class="out">
50 <div class="inner" style="background-color: blue;right: 0;bottom: 0"></div>
51 <div class="inner" style="background-color: red;right: 0;top: 0"></div>
52 <div class="inner" style="background-color: black;left: 0;bottom: 0"></div>
53 <div class="inner" style="background-color: pink;left: 0;top:0"></div>
54 </div>
55 
56 <!--z-index的例子：z-index:10的值越高，它就越在最前面，以下部分颜色重叠了-->
57 <div class="out-zindex">
58     <div class="inner-zindex" style="background-color: blue;z-index:10"></div>
59     <div class="inner" style="background-color: red;z-index: 11"></div>
60     <div class="inner" style="background-color: black;"></div>
61     <div class="inner" style="background-color: pink;"></div>
62 </div>
63 <!--鼠标悬浮的样式-->
64 <input type="button" value="小手" style="cursor: pointer">
65 <!--滚动条-->
66 <!--当图片或内容超过外层div的宽和高时，overflow auto将自动添加滚动条-->
67 <div style="height: 100px;width: 100px;border: 1px red solid;overflow: auto">
68     <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
69 </div>
70 <!--当图片或内容超过外层div的宽和高时，overflow scroll将自动添加滚动条. 区别于auto: 若是父类大于图片或内容大小
71 则，scroll依旧展现滚动条 而auto是自动识别的 -->
72 <div style="height: 100px;width: 100px;border: 1px red solid;overflow: scroll">
73     <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
74 </div>
75 <!--overflow hidden 当父类小于内部的图片或内容时，自动裁剪 以左上角为基准-->
76 <div style="height: 100px;width: 100px;border: 1px red solid;overflow: hidden">
77     <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
78 </div>
79 
80 <div class="image" style=""></div>
81 <!--background-position:0 0 表示调整它的x,y值后，能够取到图片中不一样的值 -->
82 <div style="height: 20px;width: 20px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/icon.png');background-position: 0 0"></div>
83 
84 </body>
85 </html>

运行结果以下：

7.HTML基础知识：dom

参考文档以下：http://www.imdsx.cn/index.php/2017/07/27/html2/

练习网址http://ui.imdsx.cn/js/

DOM（Document Object Model 文档对象模型）

一个web页面的展现，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。能够经过dom对象中js提供的方法，找到html的各个标签。经过找到标签就能够操做标签使页面动起来，让页面动起来。

获取标签

 1 // 直接获取标签
 2  
 3 document.getElementById('i1'); //获取id为i1的标签
 4  
 5 document.getElementsByTagName('div'); //根据标签名称得到标签数组
 6  
 7 document.getElementsByClassName('c1'); //根据class属性获取标签的数组
 8  
 9 document.getElementsByName('dsx'); //根据name属性获取标签数组
10  
11 // 间接获取标签
12  
13 var tmp=document.getElementById('h-test');
14  
15 tmp.parentElement; // 父节点标签元素
16  
17 tmp.children; //全部子标签
18  
19 tmp.firstElementChild; //第一个子标签元素
20  
21 tmp.lastElementChild; // 最后一个子标签元素
22  
23 tmp.nextElementSibling; //下一个兄弟标签元素
24  
25 tmp.previousElementSibling; //上一个兄弟标签元素

１.　以下如何找到这个inner1

２.　在Console目录下，输入命令：document.getElementById('inner1')

3 .　取inner1的输入框：　document.getElementById('inner1').children[1]

４.　操做这个inner1的属性值: document.getElementById('inner1').children[1].value='123123'

5. 经过inner1为坐标，找到inner4对应的input值

document.getElementById('inner1').parentElement.nextElementSibling.children[2].children[1].value='111111111'

6.经过inner1找到 innner5的值：　

document.getElementById('inner1').parentElement.nextElementSibling.children[4].children[1].value='222222'

7. 经过 inner1 为基准，找inner7 :

document.getElementById('inner1').parentElement.nextElementSibling.children[7].children[1].value='3333'

【day13】HTML基础知识：head,body,CSS选择器，CSS样式，dom

HTML基础知识

1.HTML基础知识：head

2.HTML基础知识：body

3.HTML基础知识：CSS选择器

4.HTML基础知识：CSS样式1

5.HTML基础知识：CSS样式2

6.HTML基础知识：CSS样式3

7.HTML基础知识：dom

１. 以下如何找到这个inner1

２. 在Console目录下，输入命令：document.getElementById('inner1')

3 . 取inner1的输入框： document.getElementById('inner1').children[1]

４. 操做这个inner1的属性值: document.getElementById('inner1').children[1].value='123123'

5. 经过inner1为坐标，找到inner4对应的input值

6.经过inner1找到 innner5的值 ：

7. 经过 inner1 为基准，找inner7 :

１.　以下如何找到这个inner1

２.　在Console目录下，输入命令：document.getElementById('inner1')

3 .　取inner1的输入框：　document.getElementById('inner1').children[1]

４.　操做这个inner1的属性值: document.getElementById('inner1').children[1].value='123123'

6.经过inner1找到 innner5的值：　