current position:Home>Axiba HTML

Axiba HTML

2023-01-25 11:16:23Little shy ultraman

<!-- 
网页是网站中的一页(网页是网站的基本元素),通常是html格式的文件.It is read through the browser

html指的是超文本标记语言(html不是一种编程语言,It's a markup language)

Hypertext has two meanings(1.He can add pictures,声音,动画,多媒体内容,超越了文本限制
              2.它可以从一个文件跳转到另一个文件,超级链接文本)

 Used by the browser kernel to display the page
 
 Web标准主要包括结构(主要html),表现(The look and feel of the web page,主要指的是CSS),行为(主要写javascript)三个方面
 结构写到html    表现写到css   行为写到javascript

html标签是由尖括号包围的关键词,例如<html>  html标签通常是成对出现的,例如<html>  </html>我们称为双标签  第一个标签是开始标签 第二个标签是结束标签

Some special tags must be a single tag,例如<br/>,我们称为单标签    

Double labels fall into two categories 
包含关系   <head>
            <title></title>
          </head>

并列关系  <head></head>
          <body></body>

<html></html>页面中最大的标签,我们称为根标签
<head></head>文档的头部,The tags we have to set
<title></title>文档的标题,Let your webpage have a title of your own
<body></body>文档的主题,The content of the page is basically placedbody里面的
         
 -->
 
<!DOCTYPE html>
<!--    !DOCTYPE不是一个HTML标签,而是文档类型声明标签     这句话意思:当前页面采用的是HTML5版本来显示网页-->
<html lang="en">
<!--  langUsed to define the language in which the current document is displayed  "en"定义语言为英语  "zh-CN"定义语言为中文 -->
<head>
    <meta charset="UTF-8">
    <!--  <meta charset="UTF-8">必须写,否则会出现乱码的情况  字符集:以便计算机能够识别和存储各种文字  其中"UTF-8"也被称为万国码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML网页</title>

    <!-- Tables are used for display,展示数据
 <table></table>用于定义表格的标签
 <tr></tr>Tags used to define the table rows,必须嵌套在<table></table>标签中
 <th></th>一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示
 <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中 

align(属性名)  属性值 left center right 规定表格相对周围元素的对齐方式
border 1或"" 规定表格单元是否拥有边框,默认为"",表示没有边框
cellpadding 规定单元边沿与其内容之间的空白,默认1像素
cellspacing 规定单元格之间的空白,默认2像素
width 规定表格的宽度  heightSpecifies the length of the form

因为表格可能很长,为了更好表示表格的语义,Tables can be split into table headers,The table subject has two parts
<thead></thead>用于定义表格头部   <thead>内部必须拥有<tr>标签,一般位于第一行
<tbody></tbody>用于定义表格主体,Mainly used for data storage
All the above tags are placed<table></table>标签中

合并单元格  
跨行合并 rowspan="合并单元格的个数"   最上测单元格为目标单元格
跨列合并colspan="合并单元格个数"      最左侧单元格为目标单元格

The biggest feature of the list label is neat and orderly,His layout will be more free and convenient
无序列表 各个列表项之间没有顺序级别之分,是并列的
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
</ul>

 有序列表
 <o1>
    <li>列表项1</li>
    <li>列表项2</li>
    ...
 </o1>
 
 自定义列表
在html标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
dt和dd里面可以放任何标签  

-->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
        <tr><th>姓名</th>  <th>性别</th></tr>
        <tr><td>刘德华</td> <td>18</td></tr>
        <tr><td>郭富城</td> <td>19</td></tr>
        <tr><td>张学友</td> <td>20</td></tr>
        <tr><td>黎明</td> <td>18</td></tr> 
    </table>

</head>
<body>
    键盘敲烂,月入过万<br/>
    <!-- 
    在html中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息3个部分组成
<from></from> 表单域是一个包含表单元素的区域 
<form action ="url地址" method="提交方式" name="表单域名称">
 action用于指定接受并处理表单数据的服务器程序的url地址
 method(get/post)用于设置表单数据的提交方式
 name用于指定表单名称,以区分同一个页面中的多个表单域  
 -->
 <from action="xxx.php" method="get">
    <!-- text文本框 用户可以输入任意文字 -->
    用户名:<input type="text" name="username" value="请输入用户名"><br/>
    <!-- password密码框 用户看不见输入的密码 -->
    密码:<input type="password" name="psd"><br/>
    <!-- radio 单选按钮 这里性别单选按钮必须有相同的名字name  -->
    性别: 男 <input type="radio" name="sex"  id="sex"> 女 <input type="radio" name="sex"><br/>
    <label for="sex">男</label><br/>
    <!-- 
        当点击<label>标签内文本时,浏览器就会自动将光标转到或者选择对应的表单元素上,用来增加用户体验
            <label> 标签的for属性应当与相关元素的id相同
      -->
    <!-- checkbox 复选框 可以实现多选 -->
    爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打怪兽<input type="checkbox" name="hobby"><br/>
    <input type="submit" value="免费注册">
    <!-- 
        type属性值  button定义可以点击的按钮(多数情况下,用于通过javaScript启动脚本)
                    fileDefine fields and browse buttons,供文件上传
                    image定义图像形式的提交按钮
                    reset定义重置按钮,Pressing the button will clear the form's data
                    hidden定义隐藏的输入字段

        除type外,<input>标签还有很多属性
        name 用户自定义  定义input元素的名称   name要求单选按钮和复选框要有相同的name值
        value  用户自定义  规定input元素的值
        checked(checked) 规定input元素首次加载时应当被选中  主要针对单选按钮和复选框,The main page is opened,To select a form element by default
        maxlength(属性值:正整数) 规定输入字段中的字符的最大长度          
     -->
     <!-- 
        <select>表单元素(There are multiple options for the user to choose from)   <select>contains at least one pair of<option>  在<option>定义selected="selected"时,当前选项为默认选中项
      -->
      位置<select >
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>深圳</option>
        <option>广州</option>
        </select><br/>
    <!-- <textarea>标签可以轻松地创建多行文本输入框
        cols="每行中的字符数"   rows="显示的行数"    
    -->
    自我介绍<textarea rows="3" cols="20">
作者很懒,什么都没有留下
        </textarea>
      
 </from>

</body>
</html>

<!-- HTML常用标签

 标题标签 <h1> - <h6> Use as title,并且依据重要性递减  The text with the title will become bigger and bolder,字号也会依次变大  一个标题独占一行

<p>标签用于定义段落,可以把HTML文档分割成若干个段落  Text wraps automatically within a paragraph according to the size of the browser,keep airstrikes between paragraphs and paragraphs

文本格式化标签  加粗<strong></strong>或者<b></b>  推荐使用<strong>语义更强烈   
               倾斜<em></em>或者<i></i>  推荐使用<em>语义更强烈
                删除线<del></del>或者<s></s>  推荐使用<del>语义更强烈
                下划线<ins></ins>或者<u></u>  推荐使用<ins>语义更强烈
 
<div>和<span>是没有语义的,他们就是一个盒子,for content and layout   <div>一行只能放一个 大盒子 ; <span>一行可以放很多个 小盒子
    
<img src = "图像url" > 图像标签     src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
alt替换文本,图像不能显示的文字  title提示文本,鼠标放到图像上,显示文字
width 设置图像高度   height设置图像高度   border设置图像的边框粗细

目录文件夹:就是普通的文件夹,There are materials related to our page
根目录:打开目录文件夹的第一层就是根目录
相对路径 图片相对于html页面的位置  
如果图片和HTMLFiles are at the same level  <img src="xxx.jpg"/>   下一级目录 <img src="images/xxx.jpg"/>  上一级目录 <img src=" ../xxx.jpg"/>

链接的语法格式 <a href="跳转目标"  target="目标窗口的弹出方式">文本或图像</a>
href  用于指定链接目标的url地址   ;  target指定链接页面的打开方式  _self为默认值  _blank在新窗口的打开方式
外部链接 a href="http://"    内部链接:网站内部页面之间的链接,Just connect directly to the internal page  <a href="index.html">首页</a>
空链接 如果当时没有确定链接目标时,  <a href="#">首页</a>     下载链接:如果hrefPut a file or compressed package inside the address,会下载这个文件
网页元素链接:网页中各种网页元素,如文本,图像,音频等都可以添加超链接
锚点链接:点击这个链接,快速定位到页面的某个位置   在href属性中,设置属性值为#name form 如<a href="one">第一</a>  找到目标位置标签,里面添加一个id属性 <h3 id="one">First introduction</one>
 
 html页面中,一些特殊的符号不方便直接使用,At this point we can use the following characters instead
 &nbsp;(空格符)    &lt(<小于号)    &gt(>大于号)
 

 -->
<!-- 
    CSS网页美容师  Sometimes we call itCSS样式表或级联样式表
    CSS主要设置HTML页面中的文本内容(字体 大小 对齐方式等),图片的外形(宽度,边距),以及版面的布局和外观显示样式

    h1(选择器) { color(属性):red(值) ; font-size:25px}

    CSS规则由两个主要的部分构成:选择器以及一条或多条声明
    选择器是用于指定HTML标签,花括号是对该对象设置的具体样式
    属性和属性值以键值对形式出现,属性和属性之间用英文 : 分开,Multiple key-value pairs in English ; 进行区分

    The label selector can select a certain type of label,比如<div>标签和所有的<span>标签  优点:能快速为页面中同类型的标签统一设置样式   缺点:Unable to color trace differentiation style
     
      类选择器  .类名{属性1:属性值1  ; 属性2:属性值2}   在标签class属性写多个类名 Each class name must be separated by spaces
            <title>第二页面</title>
        <style>
        .red{
            color:red;
        }
        .ziti{
            font-size :25px;
        }
        </style>
        <body>
        <div class="red ziti">亚瑟</div>

        </body>
      Multi-class name development application scenarios:You can extract the same tag elements into a class,These tags can first call the public class,Then call your own class

      id选择器:  #id{ 属性:属性值}   HTML元素以id属性来设置,CSS中id选择器以"#"来定义   id属性只能在HTMLDocumentation can only be called once

      id选择器和类选择器区别  idSelectors are like people and ID numbers   Class selection goes like person and person's salutation

      通配符选择器 *定义,他表示选取页面中所有元素(标签)  *{属性: 属性值}  通配符不需要调用,自动给所有元素使用样式
      特殊情况下使用,Clear the inner and outer margins of all element tags *{ margin : 0 ; padding : 0 ; }


CSS字体系列   div{font-family:"微软雅黑",Arial}  

        Each font must be related with English commas   一般情况下,If there are multiple words separated by spaces,加引号
        font-size : 20px   px像素  谷歌浏览器16px  可以给bodySpecifies the overall page text size
        font-weight :normal(正常的字体,相当于number为400) | bold(粗体 相当于number为700) | bolder(特粗体)| 100(直接赋值)
        font-family 规定元素的字体系列. 'Microsoft yahei'
        font-style:normal;  normal默认值,浏览器会显示标准的字体样式    italic浏览器会显示斜体的样式

        复合属性(简写方式,简约代码) font: font-style font-weight font-size/line-height font-family 必须按顺序写,不能更改顺序,各个属性空格隔开
        不需要设置的属性可以省略,但必须保留font-size和font-family属性,Otherwise it has no effect

        文本颜色 div{color : red}   预定义的颜色值red green blue  ; 十六进制#ff0000 ; RGB代码  rgb(255,0,0)或rgb(100%,0%,0%)
        文本对齐  text-align: center;  left左对齐  right右对齐  center居中对齐
        装饰文本  text-decoration:underline; underline下划线  ; none默认没有装饰线;overline上划线;line-through删除线;
        文本缩进  text-indent属性用来指定文本第一行缩进  text-indent:10px;   text-indent:2em;  em是相对单位,为当前元素1个文字的大小
        行间距(row-to-row distance) line-height:26px;
 
CSS引入方式

内部样式表;This is also often called an embedded reference
<style></style>Label theory can be placed anywhere,But generally put<head>标签中;In this way can control the current setting of the elements of style for the entire page;代码结构清晰,But it doesn't achieve complete separation of structure and style

Row style sheet 在元素标签内部的style定义CSS样式
<div style="color:red;font-size:12px;">A wise man is not as good as a river of love,寡王一路硕博</div>

外部样式表,通常也被称为外链式或链接式引入
新建一个.CSS的样式文件,把CSSThe code is written in this file   在HTML页面中,使用<link>标签引入这个文件  
<link rel="stylesheet" href="css文件路径">  rel定义当前文档与链接文档之间的关系  stylesheet表示被链接的文档是一个样式表文件  hrefstylesheet filesurl

内xxx  行xxx 外xxx 三者区别  
缺点  结构样式混写  没有彻底分离  需要引入
控制范围  控制一个标签  控制一个页面  控制多个页面 

调试工具(chrome)
Ctrl+Scroll wheel to zoom in and out of the developer tools
左边是HTML元素结构,右边是CSS样式(In this way, you can change the value and view the color)
Ctrl + 0 复原浏览器大小

快速生成HTML结构语法
生成标签 直接输入标签名,按下tab键即可  比如div然后tab键,就可以生成<div></div>
If you want to generate multiple identical tags,加上*就可以了, 比如div*3就可以生成3个div
If there is a label for the parent-child relationship,可以用>   比如ul>li就可以了
如果有兄弟关系的标签 用+就可以了 不如div+p
If the class name is generated orid名字的,直接写.demo或者#two tab键就可以了
如果生成divClasses are sequential,可以用自增符号$

快速生成CSS样式的语法(Use the short form)
比如 w200 就可以生成   width:200
比如 lh26 就可以生成  line-height:26px

在CSS中,Selector types are divided into basic selectors and compound selectors,复合选择器是建立在基础选择器之上的
后代选择器  元素1(ul) 元素2(li) {样式声明}  元素1和元素2中间用空格隔开  元素2可以是儿子,也可以是孙子,只要是元素1的后代即可

子选择器 元素一>元素二{样式声明}  Element Two must be his own son,

并集选择器 元素一(ul),元素二(div){样式声明}  Element one and element two commas(逗号可以理解为和的意思)隔开

伪类选择器  用于向某些选择器添加特殊效果; The biggest feature of the pseudo-class selector is the use of colons:表示
链接伪类选择器  a:link 选择所有未被访问的链接   a:visited 选择所有已被访问的链接  a:hover 选择鼠标指针位于其上的标签  a:active鼠标按下未弹起的链接
chaining pseudo-class selector order declarations :link - :visited - :hover - :active(记忆法 lv包包 hao)
:focus伪类选择器用于获取焦点(焦点就是光标)的表单元素  input:focus{background:red}

元素显示模式,HTML元素一般分为块元素(<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>)和行内元素(<a>,<strong>,<b,i,u>,<del,s,ins,u>,<span>)两种类型
Block elements are more domineering,自己独占一行;Height, width, margins and inner margins can be controlled container can contain any tag Elements of the text class cannot use express elements,<p><h1-h6>标签主要用于存放文字,    
Inline elements can display multiple,高宽直接设置是无效的,行内元素只能容纳文本和其他行内元素  链接<a>Can no longer post links

行内块元素<img/> <input/> <td>  他们同时具有块元素和行内元素的特点
on a single line with adjacent inline-block elements there is a blank space between them  一行可以放多个  High line high margin and padding can be controlled

元素显示模式转换  转换为块元素 display:block;  转换为行内元素 display:inline;  转换为行内块元素 display:inline-block;

一个小工具的使用 snipaste   F1截图   F3Displayed on top of the desktop   点击图片,alt可以取色(shift切换取色模式)  esc取消图片显示

 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The all-rounder sidebar</title>
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;

        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">上单 剑魔</a>
    <a href="#">打野 人马</a>
    <a href="#">中路 沙皇</a>
    <a href="#">下路 女警</a>
    <a href="#">辅助 巴德</a>


</body>

</html> -->

<!-- 
Single-line text vertical centering principle Line-height top-gap and bottom-strike squeeze text into the middle 如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,文字会偏下

background-color:颜色值  In general, the element background color default valuetransparent(透明色)
背景图片  background-image: none | url     none无背景图,默认的   urlAbsolute or relative address for the background image
背景平铺  background-repeat: repeat|no-repeat|repeat-x|repeat-y  repeatThe background image is tiled vertically and horizontally  repeat-xThe background is tiled vertically

背景图像位置  background-position: x y; 参数代表x坐标  y坐标  可以使用方位名词或者精确单位
length  百分数|由浮点数字和单位标识符组成的长度值  参数是精确单位 如果只指定一个数值,则该数值一定是x坐标,另一个默认垂直居中
position top|center|botton|left|center|right  参数是方位名词,这两个值前后顺序无关  比如left top 和top left效果一致 ;如果只指定一个方位名词,另一个值省略,则第二个值默认居中对齐
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值y坐标

The image background is fixed  background-attachment 后期可以制作视差滚动效果  background-attachment:scroll | fixed  scroll背景图像是随对象内容滚动 fixed背景固定
背景复合写法 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置  简写属性时,There is no fixed writing order
背景半透明色 background: rgba(0,0,0,0.3);  最后一个参数alpha透明度,取值范围在0-1之间   The background translucent color refers to the translucent color of the box background,The content inside is not affected

The same selector sets the same style conflict(遵循就近原则),样式不冲突,不会层叠
CSS继承:子标签会继承父标签的某些样式,如文本的颜色和字号,text-,font-,line-
body{font:12px/1.5 Microsoft YaHei}行高可以跟单位也可以不跟单位 The child element does not have a line height set,则会继承父元素行高的1.5 此时子元素的行高是:当前子元素的文字大小*1.5

选择器的优先级  继承或者(*) 0000  元素选择器0001  类选择器,伪类选择器0010    ID选择器0100  行内选择器style="" 1000  !importantThe selector weight is infinite
继承的权重是0,The element is not directly selected,不管父元素权重多高,Child elements have weights of zero   aLinks have a style by default,蓝色的+下划线
Compound selector weight can stack,但永远不会有进位  ul li 权重 0001+0001=0002  .nav a -> 0,0,1,0

CSSThe box model is essentially a box,封装了HTML元素,It includes borders,外边框,Inner border and actual content
border(边框)   border : border-width(边框粗细,一般单位px) || border-style(边框样式) || border-color(边框颜色)
border-style(边框样式)   solid边框实线  dashed虚线边框  dotted点线边框
border : 1px solid red; Border shorthands have no order  也可以分开写  border-top:1px solid red
border-collapse:collapse;Indicates that adjacent borders are joined together   collapse合并的意思

padding(内边框)The direct distance between the border and the content  padding-left(左内边框)  padding-right(右内边框)  padding-top(上内边框)   padding-bottom(Bottom inner border)
padding:5px;  1Each value represents up, down, left, and right5The inner border in pixels    padding:5px,10px;Represents the upper and lower inner borders are5,The left and right inner borders are10  
padding:5px 10px 20px 3各值,Indicates that the upper inner border is5,The left and right borders are10,The bottom border is20  padding:5px 10px 20px 30px 上右下左顺时针
如果盒子已经有了高度和宽度,Then specify the inner border to support the big box,If you ensure that the box is the same size as the rendering,则让width/height减去多出来的内边距大小

-->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            height: 41px;
            padding: 0 20;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">移动客户端</a>
        <a href="#">手机新浪</a>
        <a href="#">微博</a>
        <a href="#">联系我们</a>

    </div>

</body>

</html> -->

<!-- 
margin(外边框 盒子和盒子之间的距离)
margin-leftLeft outer border  margin-rightright outer border  margin-top上外边框  margin-bottom下外边框
The outer border can center the box horizontally but two conditions must be met(盒子必须有宽度,The left and right outer borders of the box are set toauto) margin-left:auto;  margin-right:ayto; margin:auto;margion:0 auto
The above method is to center the block-level elements horizontally,行内元素或者行内块元素水平居中给父元素添加text-align:center即可

对于两个嵌套关系(父子关系)的块元素 父元素和子元素都有上外边距(margin-top) 此时父元素会塌陷较大的外边距值
解决方法 You can define the top border on the parent element(border-top) / You can also define the top padding on the parent element / Can be added in the parent elementoverflow:hidden

Many web elements have inner and outer margins by default,And different browsers have different defaults 消除内外边距 *{ padding:0; margin:0;} 
行内元素为了照顾兼容性,尽量只设置左右内外边距,If you have to set it, you need to convert it to block-level and inline-block elements.
 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ah Wei failed works</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #f5f5f5;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .box {
            width: 298px;
            height: 350px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
            height: 240px;
        }

        .review {
            height: 35px;
            font-size: 14px;
            padding: 0 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 10px;
            padding: 0 28px;

        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>

</head>

<body>
    <div class="box">
        <img src="computer.webp" alt="">
        <p class="review">Pro 14 增强版 i5 独显 - Win11</p>
        <div class="appraise">来自117384232 的评价</div>
        <div class="info">
            <h4><a href="#">小米自营 Windows11</a></h4>
            <em>|</em>
            <span>4799元</span>
        </div>
    </div>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻快报</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 420px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }

        li {
            list-style: none;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>人民日报</h3>
        <ul>
            <li><a href="#">【8点见】Jilin Changchun ushered in the first heavy snowfall this winter</a></li>
            <li><a href="#">【8点见】An employee of Shenzhen University fell to his death?校方:Department of logistics restaurant staff 不是刑事案件</a></li>
            <li><a href="#">【8点见】Try Active Retirement</a></li>
            <li><a href="#">【8点见】Xi'an has urban management to collect protection fees from merchants?官方回应</a></li>
            <li><a href="#">【8点见】Large mysterious pattern found at the bottom of Dongting Lake 官方:Non-tomb ancient city ruins</a></li>
        </ul>
    </div>

</body>

</html> -->

<!-- 
    去掉li前面的项目符号(小圆点) list-style:none;
    border-radius:length;属性用于设置元素的外边框圆角 ;Parameters can be in the form of parameter values ​​or percentages;radiusThe intersection of the ellipse and the border forms a rounded corner effect ;
    如果是正方形,want to set a value,Change the value to half the height or width,或者直接写50%  如果是个矩形,Set to half the height 
    该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角  
    也可以分开写:border-top-left-radius  border-top-right-radius  border-botton-left-radius border-botton-right-radius

    给盒子添加阴影box-shadow:h-shadow v-shadow blur spread color inset;  Sunspot shadows do not take up space,不会影响其他盒子排列
    h-shadow必须,The value of the horizontal shadow,允许负值  v-shadow必须,The value of the vertical shadow,允许负值  blur可选,模糊距离  spread可选,阴影的尺寸
    color可选,阴影的颜色 inset可选,Outer shadows converted to inner shadows  默认是外部阴影(outset),but can't write the word,否则导致阴影无效  

    标准流(普通流/文档流) 就是标签按照规定好默认方式排列
    浮动流:可以改变元素标签默认的排列方式 应用:可以让多个块级元素一行内排列显示
    网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
    选择器{float:属性值;}  属性值 none元素不浮动(默认值)  left(元素向左浮动)  right(元素向右浮动)
    浮动的特性:1.脱离标准流的控制(浮)移动到指定位置(动),俗称脱标;2.浮动盒子不再保留原先的位置3.浮动的元素具有行内块元素特性
    浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
    浮动布局注意点1.浮动和标准流的父盒子搭配2.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

    Why do you need to remove the float? The child box float does not occupy the position,脱标,父盒子没有高度就为0,不会被撑开盒子
    清除浮动的本质是清除浮动元素脱离标准流造成的影响  清除浮动策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
    选择器{clear:属性值;}  属性值:left不允许左侧有浮动  right不允许右侧有浮动  bothAt the same time, the influence of floating on the left and right sides is clear  

    额外标签法也称隔墙法,会在浮动元素末尾添加一个空的标签(缺点:添加许多无意义的标签,结构化较差) <div style="clear.both"></div>

    清除浮动---父级添加overflow属性,Set its property value to hidden ,auto或 scroll (缺点:无法显示溢出部分)

    伪元素清除浮动  :after 方式是额外标签法的升级版,也是给父元素添加  由于IE6、7不支持after 兼容性问题
    <style>
        .clearfix:after{
            content:"";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .clearfix{
            *zoom:1;  注释:IE6、7专有  兼容性
        }
    </style>

    双伪元素清除浮动,也是给父元素添加  由于IE6、7不支持after 兼容性问题
    <style>
        .clearfix:before , .clearfix:after{
            content:"";
            display:table;

        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            *zoom:1;  注释:IE6,7专有  兼容性
        }
    </style>
    

 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局案例1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局案例2</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">Left big box</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        .prev,
        .next {
            position: absolute;

            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;

        }

        .prev {

            left: 0;

            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {

            right: 0;

            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background: rgba(255, 255, 255, .3);
            border-radius: 7px;
        }

        li {
            list-style: none;
        }

        .promo-nav li {
            width: 8px;
            height: 8px;
            float: left;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }

        .promo-nav .selected {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="tb.jpg" alt="">
        <a href="#" class="prev"> &lt; </a>
        <a href="#" class="next"> &gt; </a>
        <ul class="promo-nav">
            <li></li>
            <li></li>
            <li class="selected"></li>
            <li></li>
            <li></li>

        </ul>
    </div>
</body>

</html> -->

<!-- CSS书写的顺序 
布局定位属性 dispaly/position/float/clear属性规定元素的哪一侧不允许其他浮动元素/visbility属性规定元素是否可见/overflow属性规定当内容溢出元素框时发生的事情
自身属性 width/height/margin/padding/border/background
文本属性color/font/txet-decorationThe text set a certain effect,如加下划线/text-align规定元素中的文本的水平对齐方式./vertical-align属性设置元素的垂直对齐方式/white-space属性设置如何处理元素内的空白/break-word规定自动换行的处理方法
其他属性 content来插入生成内容/cursor规定要显示的光标的类型(形状)/border-radius/box-shadow/text-shadow/

浮动的盒子不会有外边距合并

定位也是在摆放盒子  定位=定位模式(用于指定一个元素在文档中的定位方式)+边偏移(决定元素的最终位置)
定位模式:static静态定位  relative相对定位  absolute绝对定位 fixed固定定位

边偏移:top :80px 顶端偏移量,定义元素相对其父元素上边线的距离
    bottom :80px 底部偏移量,定义元素相对其父元素下边线的距离
    left :80px 左侧偏移量,定义元素相对其父元素左边线的距离
    right :80px 右侧偏移量,定义元素相对其父元素右边线的距离

    静态定位static是元素的默认定位方式,无定位的意思  选择器{position:static;}   Static positioning changes position according to standard stream properties,他没有边偏移
    Relative positioning is when an element moves position,Is relative to his original position 选择器{position:relative;}  原来在标准流的位置继续占用,后面的盒子仍然以标准流的方式对待他(不脱标,Continue to maintain the original position)

    Absolute positioning when moving the position,is relative to its ancestor element  选择器{position:absolute;} 如果没有祖先元素或者祖先元素没有定位,browser standards
    如果祖先元素有定位(相对 绝对 固定定位),则以最近一级有定位祖先元素为参考点移动位置 绝对定位不在占有原先的位置(脱标)

    子绝父相   Subset Absolutely Positioned Words,The parent must use relative positioning
    Subset absolute position,不会占有位置,Can be placed anywhere in the box,不会影响其他的兄弟盒子  父盒子需要加定位限制子盒子在父盒子内显示
    父盒子布局时,需要占有位置,因此父亲只能是相对定位

    Fixed positioning means that the element is fixed at the position of the viewable area of ​​the browser  选择器{position:fixed;}  以浏览器的可视窗口为参照点移动元素(跟父元素没有任何关系 不随滚动条滚动)
    The fixed position no longer occupies the original position(脱标) In fact, the fixed position can also be regarded as a special absolute positioning

    固定在版心右侧位置  让固定定位的盒子left:50% 走到浏览器可视区(也可以看作版心)的一半位置
    让固定定位的盒子margin-left:版心宽度的一半距离

    sticky粘性定位 Can be thought of as a mix of relative and fixed positioning  选择器{position:sticky;top:10px}
    以浏览器的可视窗口为参照点移动元素(Fixed point features)  粘性定位占有原先的位置(相对定位特点)  必须添加top、left、right、bottom其中一个才有效

    Static positioning and sticky positioning are not off-label  
    Boxes may overlap when using positioning 选择器{z-index:1;} 数值可以是正整数,负数或0,默认是auto,The value is huge,盒子越靠上  If the box attribute values ​​are the same,则按照书写顺序,后来居上
    数字后面不能加单位,只有定位的盒子才有z-index属性

    加了绝对定位的盒子不能通过margin:0 auto水平居中, 但可以 left:50%; 让盒子的左侧移动到父级元素的水平中心位置  margin-left:-100px;让盒子向左移动自身宽度一半
    行内元素添加绝对或固定定位,可以直接设置高度和宽度  块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
    绝对定位(固定定位)会压住下面标准流的所有内容 浮动元素只会压住下面标准流的盒子,It will not suppress the text and pictures of the standard flow below,Because the floating text originally produced in order to do the surround effect

    让一个元素在页面中隐藏或者显示出来
    display:none;隐藏对象  blockIn addition to transforming block-level elements,It also shows the meaning of the elements  display隐藏元素后,不在占有原来的位置
    visibility:visible;元素可视  hidden元素隐藏  visbilityAfter the element is hidden,继续占有原来位置
    overflow:visible;元素可视  hidden元素隐藏 scrollScrollbars are displayed on overflow or not  auto溢出的时候才显示滚动条,No overflow is not displayed

    为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites  / CSS雪碧)
    核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
    使用精灵图核心:The sprite map is mainly for the use of background pictures,It is to integrate multiple small background images into one large image(This big picture is also calledsprites精灵图或者雪碧图)中
    移动背景图片位置,此时可以使用background-position Moving distance is the target imagex和y坐标(x轴右边走是正值,左边走是负值,yTake negative values ​​on the axis,Going down is a positive value) background:url(图片位置)no-repeat -110px -120px;
    精灵图缺点:图片文件还是比较大的,图片本身放大缩小会失真,Once the image is created it is very complicated to replace This is the font icon(Expand is icon,本质是字体)
    字体图标优点 轻量级(An icon font is smaller than a series of images 一旦字体加载,The icon will be rendered immediately) 灵活性(本质是文字,可以随意改变颜色,produce shadows etc) 兼容性(almost all browsers)
    如果遇到一些结构和样式比较简单的小图标,就用字体图标  如果遇到一些结构和样式复杂一点的小图片,就用精灵图
    font text format(.ttf .woff .eot .svg)不同浏览器所支持的字体格式是不一样的,The reason why the font format is compatible,就是因为包含了主流浏览器支持的字体文件


-->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标使用</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?4clnsm');
            src: url('fonts/icomoon.eot?4clnsm#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?4clnsm') format('truetype'),
                url('fonts/icomoon.woff?4clnsm') format('woff'),
                url('fonts/icomoon.svg?4clnsm#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: skyblue;
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html> -->

<!-- 鼠标样式cursor  li{cursor:point;} Sets or checks which system-predefined cursor shape the mouse pointer uses when moving over an object
    属性值 default小白默认   pointer小手  move移动  text文本  not-allowed禁止  

    vertical-align用于设置一个元素的垂直对齐方式
    vertical-align:baseline(默认,元素放置在父元素基线上); top()把元素的顶端与行中最高元素的顶端对齐  middle()Place this element in the middle of the parent element bottom()把元素的顶端与行中最低的元素顶端对齐
    By default text and images are baseline aligned
 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单轮廓和防止拖拽文本域</title>
    <style>
        input,
        textarea {
            outline: none;
        }

        textarea {
            resize: none;
        }
    </>
</head>

<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>

</body>

</html> -->
<!-- CSS三角  
div{
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border:50px solid transparent;
    border-left-color:pink;
} -->

<!-- 
    解决图片底部默认空白缝隙问题(图片底层会有一个空白缝隙,原因是行内块元素会和文字基线对齐)
    解决问题:给图片添加vertical-align:middle|top|botton等  /  把图片转换为块级元素display:block;

    单行文本溢出显示省略号--必须满足三个条件
    white-space : nowrap ; (默认normal自动换行) 先强制一行内显示文本
    overflow:hidden;超出的部分隐藏
    text-overflow:ellipsis;The text replaces the excess with an ellipsis

    多行文本溢出显示省略号  有较大的兼容性问题
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box; 弹性伸缩盒子模型显示
    -webkit-line-clamp: 2; 限制在一个块元素显示文本的行数
    -webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式

    margin负值运用
    让每个盒子margin往左侧移动-1px正好压住相邻盒子边框  When the mouse passes through the box, the level of the box can be increased(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)

 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin负值的巧妙运用</title>
    <style>
        /* ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        ul li:hover {
            如果盒子没有定位,则鼠标经过添加相对定位即可
            position: relative;
            border: 1px solid blue;
        } */
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        ul li:hover {
            /* 如果li有定位,则利用z-index提高层级 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>

</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>
<!-- 
    HTML5新增的语义化标签
    <header>头部标签  <nav>导航标签 <article>内容标签  <section>定义文档某个区域  <aside>侧边栏标签  <footer>尾部标签
    This semantic standard is mainly aimed at search engine,These new tab pages can be used multiple times  在IE9中需要把这些元素转换为块级元素

    HTML新增的多媒体标签
    <vedio>元素支持三种视频格式:mp4 webm ogg 尽量使用MP4格式
    常见属性  autoplay(autoplay)视频自动播放,谷歌浏览器需要添加muted来解决自动播放的问题  controls(controls)向用户显示播放插件 width(Values ​​are pixels)设置播放器宽度
    height(设置播放器高度 值像素)   loop(loop)循环播放    src(url)  视频url的地址    poster(lmgurl)加载等待的画面图片  muted(muted)静音播放
    preload 值auto预先加载视频 none不应加载视频   规定是否预加载视频,如果有autoplay则忽略该属性 
 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增视频标签</title>
    <style>
        video {
            width: 500px;
            height: 500px;
        }
    </style>

</head>

<body>
    <video src="美女.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="熊宝宝.jpg"></video>
</body>

</html> -->

<!-- 
    当前<audio>元素支持三种音频格式  mp3 wav ogg
    属性 autoplay(autoplay)音频就绪后马上播放  controls(controls)播放插件  loop(loop)循环播放   src(url)The address to play the audio from
    谷歌浏览器把音频和视频自动播放禁止了
 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐标签</title>
</head>

<body>
    <audio src="你是人间四月天.mp3" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></audio>
</body>

</html> -->

<!-- 
    HTML新增的input类型
    type="email" 限制用户输入email类型
    type="url"   限制用户输入url类型
    type="date"  Limit the user to enter the date type
    type="time"  Restrict user input time type
    type="month" Limit user input to month type
    type="week"  Limit user input to week type
    type="number" Limit user input to numeric types
    type="tel"  手机号码
    type="search" 搜索框
    type="color"  生成一个颜色选择表单

    required(required) 表单拥有该属性表示内容不能为空,必填
    placeholder 提示文本 表单的提示信息,存在默认值将不显示
    autofocus Autofocus property,页面加载完成自动聚焦到指定表单
    autocomplete off/on  默认已经打开,The browser records the previously entered value
    multiple Can submit multiple files
 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增input表单</title>
    <style>
        input::placeholder {
            color: green;
        }
    </style>

</head>

<body>
    <form action="">
        <ul>
            <li>邮箱:<input type="email" /></li>
            <li>网址:<input type="url" /></li>
            <li>日期:<input type="date" /></li>
            <li>日期:<input type="time" /></li>
            <li>数量:<input type="number" /></li>
            <li>手机号码:<input type="tel" /></li>
            <li>搜索:<input type="search" /></li>
            <li>颜色:<input type="color" /></li>
            <li>日期:<input type="submit" values="提交"></li>
        </ul>
        <input type="search" name="sear" id="" required="required" placeholder="阿伟已经死了" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .todou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }

        .todou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
        }

        .todou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="todou">
        <div class="mask"></div>
        <image src="tudou.jpg" alt=""></image>
    </div>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Magical Use of Text Floating Elements</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 326px;
            height: 89px;
            background-color: pink;
            margin: 100px auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 158px;
            height: 89px;
            margin-right: 5px;
        }

        .pic img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="game.webp" alt="">
        </div>
        <p>超级QQShow Creates a New Experience of Virtual Social Networking:Journey to the new dimension of the king</p>
    </div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块的巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第几
        <input type="text">
        页
        <button>确定</button>
    </div>

</body>

</html> -->


<!--    只保留右边的边框有颜色
    border-color:transparent red transparent transparent;
    样式都是solid
        border-style:solid;
        上边框宽度要大 右边框宽度稍小 其余边框为0
        border-width:100px 50px 0 0; -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSTriangle magic</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }

        .prev {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        .prev one {
            position: absolute;
            width: 0;
            height: 0;
            right: 0;
            top: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .next {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>

</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="prev">¥5689
            <one></one>
        </span>
        <span class="next">¥4568</span>
    </div>
</body>

</html> -->

<!-- 
    不同浏览器对有些标签默认值是不同的,为了消除不同浏览器对HTMLText differences,照顾浏览器兼容,我们需要对CSS进行初始化
    Every page mustCSS初始化
    把中文字体的名称用相应的Unicode编码来代替,This effectively avoids the garbled problem of the browser interpreting the code
    黑体 \9ED1\4F53       宋体 \5B8B\4F53        微软雅黑  \5FAE\8F6F\96C5\9ED1

    CSS新特性  新增的cssFeatures have compatibility issuesie9才支持

    属性选择器可以根据元素特定的属性来选择元素.In this way, without resorting to classes orid选择器
    E[att] 在EElement selection hasatt属性
    E[att="val"] 在EElement selection hasatt属性且属性值等于val的E元素
    E[att^="val"] 在EElement selection hasatt属性且属性值等于val的E元素
    E[att$="val"] 在EElement selection hasatt属性且属性值以val开头的E元素
    E[att*="val"] 在EElement selection hasatt属性且属性值以val结尾的E元素
    属性选择器,类选择器,伪类选择器,权重为0

    结构伪类选择器主要根据文档结构来选择元素  常用于根据父级选择器里面的子元素
    E:first-child  匹配父元素中的第一个子元素
    E:last-child  匹配父元素中的最后一个子元素
    E:nth-child()  匹配父元素中的第n个子元素
    E:nth-of-child()  选择类型E的第n个
    E:first-of-child()  选择类型E的第一个
    E:last-of-child()  选择类型E的最后一个

    Choose a pseudo-class selector  nth-child(n) Select one or more specific child elements of a parent element(里面必须是n,不能是其他字母,Choose the inside all child elements)
    n可以是数字,就是选择第n个子元素,里面数字从1开始   n可以是关键字:even偶数  odd奇数
    n可以是公式(如果n是公式,从零开始计算)  2n偶数   2n+1奇数  5n五的倍数   n+5从第五个开始  -n+5前五个

    section div:nth-child(1){background-color:red}   nth-child会把所有的盒子都排列序号,执行的时候首先看 nth-child(1) 再看前面的div
    Sort and select all children in the parent class(序号是固定的)先找到第n个孩子 Then see if she agreesE匹配

    section div:nth-of-child(1){background-color:red}   nth-of-child会把所有的盒子都排列序号,执行的时候首先看div指定的元素  之后再看nth-of-child(1)
    对父元素里面指定子元素进行排序选择,先去匹配E,然后根据E找第n个孩子

    伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签
    ::before  在元素内部的前面插入内容    ::after在元素内部的后面插入内容
    before和after创建一个元素,但是属于行内元素   新创建的这个元素在文档树中是找不到的,我们称为伪元素
    before和after必须有content属性   伪元素选择器和标签选择器一样,权重为1   
 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div::before {
            display: inline-block;
            content: '我';
            width: 30px;
            height: 40px;
            background-color: skyblue;
        }

        div::after {
            content: '你';

        }
    </style>
</head>

<body>
    <div>爱</div>
</body>

</html> -->

<!-- 
    CSS盒子模型
    box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
    box-sizing:border-box 盒子大小为width  padding和borderWon't stretch our box(前提是padding和border不会超过width宽度)

    CSS模糊  filter:blur(5px);  blur模糊处理  数值越大越模糊
    
    width:calc(100%-50px);   括号里面可以使用+-*/

    CSS过渡 When an element changes from one style to another  经常和hover一起搭配使用  Excessive formula:Whoever makes the transition is for whom
    语法  transition:要过渡的属性  花费时间  运动曲线  何时开始;  何时开始(Unit is the second must write unit can set the trigger delay time  The default is zero and can be omitted)
    如果想要所有的属性都变化过渡,写一个all就可以  The time unit is seconds(必须写单位)  运动曲线(默认是ease 可以省略) 
  
 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: width .5s, height .5s, background-color 0.5s;

        }

        div:hover {
            background-color: skyblue;
            width: 400px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?qtit0l');
            src: url('fonts/icomoon.eot?qtit0l#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?qtit0l') format('truetype'),
                url('fonts/icomoon.woff?qtit0l') format('woff'),
                url('fonts/icomoon.svg?qtit0l#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }


        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            content: '\e901';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆</title>
    <style>
        .todou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }

        .todou img {
            width: 100%;
            height: 100%;
        }

        .todou::before {
            content: '';
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
        }

        .todou:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="todou">

        <image src="tudou.jpg" alt=""></image>
    </div>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡练习</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 90%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html> -->

<!-- 

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";    伪元素必须写的属性
   display: block;  插入的元素必须是块级
   height: 0;       不要看见这个元素
   clear:both;      核心代码清除浮动
   visibility: hidden;  不要看见这个元素
}

    .clearfix:after,.clearfix:before{
        content: "";
        display: table;  转换为块级元素并一行显示
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

    Some website initialization is not recommended  *{margin:0;padding:0;}

    favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上

    网站SEOTranslates to search engine optimization,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
    SEO的目的是对网站进行深度优化,Get free traffic from your website,Improve your website's ranking in search engines,提高网站的知名度
    title网站标签 Suggest a website name-网站的介绍  京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!

    description网站说明  简要说明网站主要做什么
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验.
    商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求.">

    keywords页面关键字  是搜索引擎的关注点之一 
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">

    常用模块类名命名 shortcut快捷导航栏     header头部  logo标志  shopcar购物车  search搜索   hotwrods热点词
    nav导航  dropdown包含.dd .dt  navitems导航右侧   footer页面底部  mod_service页面底部服务模块
    mod_help页面底部帮助模块  mod_copyright页面底部版权模块

    logoSEO  logo里面先放一个h1标签,The purpose is to withdraw the right,Tell search engines this is important  h1Put another link,可以返回首页
    Put in the link1文字(网站名称),但文字不要显示出来  方法1:text-indentMove out of the box(text-indent:-9999px),然后overhidden,淘宝做法
    方法二 直接给font-size:0;就看不到文字了,京东的做法
    最后给链接一个title属性,这样鼠标放到logoYou can see the prompt text on the

    服务器,He is also a computer,Depending on the type of service,服务器又分为文件服务器,数据库服务器,应用程序服务器和Web服务器等
    WebThe server can be divided into local server and remote server
    本地服务器主要在局域网中访问,If accessed on the Internet,You can upload Youpingou to the remote server
    远程服务器,任何人都可以利用域名访问我们的网站了
   
    广义的HTML5是HTML5本身+CSS3+JavaScript -->
<!-- 
    转换是CSS中具有颠覆性的特征之一  You can understand it as deformation

    translate移动  对行内标签没有效果
  语法  transform:translate(x,y);或者分开写;    transform:translateX(n);  transform:translateY(n);
  translate最大的优点:不会影响到其他元素的位置  translate中的百分比单位是相对于自身元素的translate(50%,50%);
   
    rotate让元素在二维平面内顺时针或者逆时针旋转  transform:rotate(度数)
    rotate里面跟度数,单位是deg  角度为正时,顺时针;负为逆时针 默认旋转的中心点是元素的中心点

    设置元素转换中心点  transform-origin:x y;  注意x和yMust be separated by commas   x和y默认转换的中心点是元素的中心点(50%,50%)
    还可以给x和y设置像素或者方位名词( top  bottom  left  right center )
  -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转效果</title>
  <style>
    img {
      width: 300px;
      border-radius: 50%;
      border: 5px solid #d64143;
      transition: all 0.9s;
      margin-left: 500px;
    }

    img:hover {
      transform: rotate(300deg);
    }
  </style>

</head>

<body>
  <img src="xuanzhuan.jfif" alt="">
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotate case one</title>
  <style>
    div {
      position: relative;
      width: 250px;
      height: 35px;
      border: 1px solid #000;
    }

    div::after {
      content: '';
      position: absolute;
      top: 8px;
      right: 15px;
      width: 10px;
      height: 10px;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      transform: rotate(45deg);
      transition: all 0.9s;
    }

    div:hover::after {
      transform: rotate(225deg);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotate case two</title>
  <style>
    div {
      overflow: hidden;
      width: 200px;
      height: 200px;
      border: 1px solid pink;
      margin: 100px auto;
    }

    div::before {
      content: "黑马";
      display: block;
      width: 100%;
      height: 100%;
      background-color: hotpink;
      transform: rotate(180deg);
      transform-origin: left bottom;
      transition: all 0.5s;
    }

    div:hover::before {
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html> -->

<!-- 
  2D转换之缩放   transform:scale(x,y);不跟单位  设置元素转换中心点  transform-origin:x y;
  Pay attention to the ones in itx和y用逗号分隔  如果只写一个参数(等比例缩放),则相当于scale(x,x)   
  scaleThe biggest advantage of scaling:可以设置转换中心点缩放,The default is center zoom,而不影响其他盒子

转换综合写法  transform:translate() rotate() scale() 等 ;Their order affects the transition(Rotate first will change the direction of the coordinate axis) when we have displacement and other properties,记得要将位移放到最前

 -->
<!-- 
  动画是CSS中具有颠覆性的特征之一  相比较过渡,Animation can do more

  动画的基本使用,1.先定义动画  @keyframes 动画名称{
                                              0%{width:100px;}
                                              100%{width:200px;}
                                              }

    0%是动画的开始,100%是动画的完成,这样的规则就是动画序列   @keyframes中规定某项CSS样式,You can create an animation effect with the current style gradually changing to the new style
    from和to等价于0%和100%   里面的百分比就是总的时间  Such as the case total10s  则25%相当于0.25*10=2.5s
    2.元素使用动画 div{
                      abimation-name:动画名称;
                      animation-duration:持续时间;
                      }

  动画常用属性①animation-name动画的名称 ②animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是零
  ③animation-timing-function 规定动画的速度曲线,默认是"ease"④animation-delay规定动画何时开始
  ⑤animation-iteration-count规定动画的播放次数,默认1还有infinite⑥animation-direction规定动画是否在下一周期逆向播放,默认normal,alternate逆播放
  ⑦animation-fill-mode规定动画结束后的状态,保持forwards回到起始backwards⑧animation-play-stateSpecifies whether the animation should run normally or be paused,默认runing还有paused

  动画简写 animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
  简写属性不包括animation-play-state(暂停动画 Often used in conjunction with the mouse through other)
  想要动画走回来,rather than coming back directly  animation-direction:alternate   The box animation ends,停在结束位置 animation-fill-mode:forwards

  速度曲线  animation-timing-function:规定动画的速度曲线,默认ease  linear匀速  ease默认,动画低速开始,然后加快,在结束前变慢
  ease-in动画以低速开始  ease-out动画以低速结束  ease-in-outAnimation starts and ends with cheesy   steps()指定了时间函数中的间隔数量(步长)
  steps(5)就是分5step to complete our animation,有了steps就不要再写ease或者linear了
  
  3D转换  特点:近大远小  物体后面遮挡不可见  xPositive values ​​to the right of the axis,y下面是正值,zVertical screen outward is a positive value
  translform:translateX(100px):仅仅在x轴上移动 translform:translayeY(100px):仅仅在Y轴移动  translform:translayeZ(100px):仅仅在Z轴移动
   translform:translate3d(x,y,z)其中xyzRespectively refer to the distance to move the axis direction  xyz是不能省略,如果没有就写0
   
  透视perspective If generated on a web page3D效果需要透视 Perspective we can also call sight distance(Viewing distance is the distance from the human eye to the screen),The perspective unit is pixels,近大远小
  Perspective now observed the parent box
  
  3D旋转rotate3的  transform:rotateX(45deg)沿着x轴正方向旋转45度  
  transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg角度 xyz表示旋转轴的矢量 transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45度
  Use the left-handed criterion to determine the direction of element rotation(左手拇指指向x轴的正方向 其余手指的弯曲方向就是该元素沿着x轴旋转的方向)

  transfrom-style(控制子元素是否开启三维立体环境):flat子元素不开启3d立体空间,默认的  preserve-3d开启立体空间  代码写给父级,影响的是子盒子

  浏览器私有前缀(It is to take care of the old version,Newer versions do not need to add)  -moz-border-radius:10px; -moz-代表firefox浏览器私有属性  -ms-代表ie浏览器私有属性
  -webkit-代表safari和chrome私有属性   -o-代表Opera私有属性

  -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片放大案例</title>
  <style>
    img {
      width: 300px;
      transition: all 0.4s;
    }

    div {
      float: left;
      margin: 10px;
      overflow: hidden;
    }

    div img:hover {
      transform: scale(1.5);
    }
  </style>
</head>

<body>
  <div><a href="#"><img src="xuanzhuan.jfif" alt=""></a></div>
  <div><a href="#"><img src="xuanzhuan.jfif" alt=""></a></div>
  <div><a href="#"><img src="xuanzhuan.jfif" alt=""></a></div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大数据热点图</title>
  <style>
    body {
      background-color: #333;
    }

    .map {
      width: 747px;
      height: 617px;
      background: url(map.png) no-repeat;
      margin: 0 auto;
      position: relative;
    }

    .beijing {
      position: absolute;
      top: 228px;
      right: 193px;
      color: #fff;
    }

    .dotted {
      width: 8px;
      height: 8px;
      background-color: #09f;
      border-radius: 50%;
    }

    .beijing div[class^="pulse"] {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      transform: translate(-50%, -50%);
      height: 8px;
      box-shadow: 0 0 12px #009dfd;
      border-radius: 50%;
      animation: pulse 1.2s linear infinite;
    }

    @keyframes pulse {
      0% {}

      70% {
        width: 40px;
        height: 40px;
        opacity: 1;
      }

      100% {
        width: 70px;
        height: 70px;
        opacity: 0;
      }
    }

    .beijing div.pulse2 {
      animation-delay: 0.4s;
    }

    .beijing div.pulse3 {
      animation-delay: 0.8s;
    }

    .tb {
      top: 500px;
      right: 80px;
    }

    .gz {
      top: 539px;
      right: 189px;
    }
  </style>
</head>

<body>
  <div class="map">
    <div class="beijing">
      <div class="dotted"></div>
      <div class="pulse1"></div>
      <div class="pulse2"></div>
      <div class="pulse3"></div>
    </div>
    <div class="beijing  tb">
      <div class="dotted"></div>
      <div class="pulse1"></div>
      <div class="pulse2"></div>
      <div class="pulse3"></div>
    </div>
    <div class="beijing gz">
      <div class="dotted"></div>
      <div class="pulse1"></div>
      <div class="pulse2"></div>
      <div class="pulse3"></div>
    </div>
  </div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奔跑的小熊</title>
  <style>
    body {
      background-color: #000;
    }

    div {
      position: absolute;
      width: 200px;
      height: 100px;
      background: url(benpao.png) no-repeat;
      animation: bear 0.8s steps(8) infinite, move 3s forwards;
    }

    @keyframes bear {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1600px 0;
      }
    }

    @keyframes move {
      0% {
        left: 0;
      }

      100% {
        left: 50%;
        transform: translateX(-50%);
      }
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html> -->

<!-- backface-visibility 属性定义当元素不面向屏幕时是否可见 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The case of failure is reversed on both sides</title>
  <style>
    body {
      perspective: 400px;

    }

    .box {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      transition: all .4s;
      transform-style: preserve-3d;
    }

    .box:hover {
      transform: rotateY(180deg);
    }

    .box div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      font-size: 20px;
      color: #fff;
      text-align: center;
      line-height: 300px;
    }

    .front {
      background-color: pink;
      z-index: 1;
      backface-visibility: hidden;
    }

    .back {
      background-color: purple;
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="front">what kind of ending</div>
    <div class="back">Only worthy of the ups and downs along the way</div>
  </div>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D导航栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      margin: 100px;
    }

    ul li {
      width: 120px;
      height: 35px;
      list-style: none;
      perspective: 500px;
    }

    .box {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all .4s;
    }

    .front,
    .bottom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 16px;
      font-size: 400;
      text-align: center;

    }

    .front {
      background-color: pink;
      z-index: 1;
      transform: translateZ(17.5px);

    }

    .bottom {
      background-color: purple;
      transform: translateY(17.5px) rotateX(-90deg);
    }

    .box:hover {
      transform: rotateX(90deg);
    }
  </style>
</head>

<body>
  <ul>
    <li>
      <div class="box">
        <div class="front">腾讯</div>
        <div class="bottom">欢迎你</div>
      </div>
    </li>
  </ul>
</body>

</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>旋转木马</title>
  <style>
    body {
      perspective: 1000px;
    }

    section {
      position: relative;
      width: 300px;
      height: 200px;
      margin: 150px auto;
      transform-style: preserve-3d;
      /*添加动画效果*/
      animation: rotate 10s linear infinite;
      background: url("xaiocaoshen.png") no-repeat;
    }


    section:hover {
      /*鼠标放入section暂停*/
      animation-play-state: paused;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }

    section div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("xaiocaoshen.png") no-repeat;
    }

    section div:nth-child(1) {
      transform: translateZ(300px);
    }

    section div:nth-child(2) {
      /*Rotate first,再移动距离,因为旋转会改变坐标轴的方向
            */
      transform: rotateY(60deg) translateZ(300px);
    }

    section div:nth-child(3) {
      transform: rotateY(120deg) translateZ(300px);
    }

    section div:nth-child(4) {
      transform: rotateY(180deg) translateZ(300px);
    }

    section div:nth-child(5) {
      transform: rotateY(240deg) translateZ(300px);
    }

    section div:nth-child(6) {
      transform: rotateY(300deg) translateZ(300px);
    }
  </style>
</head>

<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

</html>
<!-- 
    A computer program is a series of instruction sets and  
    编程语言有机器语言 汇编语言 高级语言(高级语言需要一个翻译器转换为计算机识别的机器语言) 
    Programming languages ​​are active and highly logical 
    计算机组成(硬件(输入输出设备,cpu,硬盘和内存)和软件(系统软件和应用软件))
    Input device camera mouse keyboard etc.   Output devices: monitors, printers, projectors, etc.  cpuResponsible for processing data and computing
    All data, including files and images, will eventually be stored in the hard disk in binary form.,The software we usually install,其实就是把程序文件复制到硬盘中
    Binary files are stored in hard disk memory  Open a program,First load the code of the program from the hard disk into the memory,CPU执行内存中的代码
    The important reason why there is memory,是因为CPUMovement is too fast,如果只从硬盘中读取数据,会浪费CPU性能(Memory uses electricity,Hard drives are mechanical)

    JavaScript是一种运行在客户端的脚本语言(Script是脚本的意思)
    脚本语言不需要编译,运行过程由js解释器逐行进行解释并执行
    渲染引擎用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版的webkit
    JSEngine is also calledJS解释器,用来读取网页中JavaScript代码,比如chrome浏览器的v8
    ECMAScripy规定了JS编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准

    JS有三种书写位置,分别为行内,内嵌和外部

    行内 <input type="button" value="唐伯虎" onclick="alert('Qiuxiang Qiuxiang')">
    Can be single line and a small amountJS代码写在HTML标签的事件属性中(以on开头的属性)
    单双引号的使用:在HTML中我们推荐使用双引号,JSWe recommend using single quotes
    可读性差,在htmlWhen there is a lot of code,不方便阅读

    外部JS引用 <scirpt src="xxx.js"></script>
    适合JS代码量较大的情况 引用外部JS文件中的srcipt标签中间不可以写代码

    变量用于存放数据的容器  本质:变量是程序在内存中申请一块用来存放数据的空间
    var(variable变量)是一个JS关键字,可以同时声明多个变量,Multiple variable names are directly separated by commas var age=10,name='awei';

    变量名的命名规范 由字母a(A)-z(Z),Numbers and underscores and $组成;严格区分大小写,不能以数字开头,不能是关键字,保留字,驼峰命名法

    JavaScirpt是一种弱类型或者说动态语言(这意味着不用提前声明变量的类型,在程序的运行中,类型会被自动确定)
    js引擎根据=右边变量值的数据类型来判断   js拥有动态类型,Means that the same variable can effect of different types

    基本数据类型
    Number数字型,Contains integer and floating point values,默认是0     Boolean布尔类型,默认false  String字符串类型,在js里面,字符串都带引号,默认""
    Undefined ; var a;声明了a但是没有给值,此时a=undefined   Null ;var a=null;声明变量a为空值

    String has special characters,我们称为转义字符,  \n换行符(n是newline的意思) \\斜杠\   \'单引号   \"双引号  \t(tab缩进)  \b空格(b是blank的意思)

    字符串+任意类型=拼接之后的新字符串  +号总结口诀:数值相加,字符相连
    
    数据类型转换为字符串  toString()转换成字符串   var num=1;  num.toString()
    String()强制转换成字符串     var num=1;  String(num)
    和字符串拼接的结果都是字符串(隐式转换)     var num=1;  num+" "

    The data is converted to a numeric type parseInt(string)函数  将string类型转换成整数数值型  parseInt("78")
    parseFloat(string)  将stringType conversion to a floating-point numeric type   parseFloat("78.12")
    Number()强制转换函数  Number("12")
    js隐式转换( - / * )  '12'-0
    Implicit conversion is when we perform arithmetic operations,JS自动转换了数据类型

    Boolean()其他类型转换为布尔值   代表空,否定的值会被转换为false,如 '' / 0 / NaN / null / undefined  The rest of the values ​​are converted totrue

    计算机不能直接理解任何除机器语言以外的语言,Therefore, the programming language written by the programmer must be translated into machine language to execute the program.A program language is translated into a language tool called a translator
    翻译器翻译的方式有两种,一种是编译,一种是解释.The direct difference between the two methods lies in the time point of translation
    The compiler compiles the code before it is executed,生成中间代码文件  The interpreter interprets at runtime,并立即执行

    算术运算符 + - * / %
    浮点数的最高精度是17位,但在进行算术计算时其精确度远远不如整数  所以不要直接判断两个浮点数是否相等
    console.log(0.07 * 100)结果不是7,而是7.000000000000001
    If a number its remainder is0就说明这个数能被整除,这就是%取余运算符的主要用途
    Arithmetic operators precedence* / % 后 + -

    比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较后会返回一个布尔值 >,<,>=,<=,==,!=, ===和!==全等要求值和数据类型都一致

    逻辑运算符是用来进行布尔值运算的运算符  表达式1&&表达式2(如果第一个表达式为真,返回表达式2;如果第一个表达式的值为假,则返回表达式1)
    表达式1||表达式2(如果第一个表达式的值为真,则返回表达式1;如果第一个表达式为假,则返回表达式2)    !
    logical operator precedence && 后 ||

    赋值运算符 =    +=   -=   *=    /=   %=

    if的语句和elseThe statement can only have one statement to execute in the end  else后面跟大括号
    switch(num) 中的num 的值和 case The latter values ​​are congruent when they match  Must value and data type

    switch语句和if else if语句的区别  一般情况下,他们两个语句可以相互替换
    switch...case语句通常处理case为比较确定值的情况,而if..else...语句更加灵活,常用于范围判断
    switch语句进行条件判断后直接执行到程序的条件语句,效率更高;而if...elseThe statement has several conditions,Just judge how many times
    Branches are rarely usedif..else   Branches are more usefulswitch

    断点调试可以帮助我们观察程序的运行过程  浏览器按F12->sources->Find the debug file->Set a breakpoint in the program  
    Watch可以监视变量值的变化  F11Make program step by step

    JSIn many cases, the three loops can replace each other;If used to count,和数字相关,我们更喜欢用for
    while和do...whileCan do more complex judgment conditions,比for灵活一些


 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法</title>
    <script>
        // 浏览器弹出输入框  用户可输入  
        //prompt('请输入你的年龄');

        //alert浏览器 弹出警告框
        //alert('I wish you forever young');

        //console 控制台输出,给程序员测试用的
        //console.log('程序员能看到的');

        //var number;
        //console.log(number);
        //只声明  不赋值  控制台结果undefined

        //var myname = prompt('请输入你的大名');
        //alert(myname);

        var number1 = 010;// 数字前面加0表示八进制  十六进制前面加 0x
        console.log(number1);// 010八进制转换为10进制就是8

        console.log(Number.MAX_VALUE);//js中数值的最大值
        console.log(Number.MIN_VALUE);//js中数值的最小值

        console.log(Number.MAX_VALUE * 2);//  Infinity无穷大
        console.log(-Number.MAX_VALUE * 2);//   -Infinity无穷小

        console.log('你好' - 100); //NaN(Not a number)代表一个非数值

        console.log(isNaN(12)); //isNaN()这个方法用来判断非数字,并且返回一个值  如果是数字返回的是false 如果不是数字返回true

        var str = "Handsome fly";
        console.log(str.length);//通过字符串的length属性获取整个字符串的长度

        var flag1 = true;
        var flag2 = false;
        console.log(flag1 + 1);//trueParticipate in operations1来看
        console.log(flag2 + 1);//falseParticipate in operations0来看 ; 

        var variable;
        console.log(variable + 1);//未赋值的variable(会有一个默认的undefined) NaN  undefined和数字相加最后的结果是NaN 

        var vari1 = null;
        console.log(11 + vari1);
        console.log(true + vari1);

        console.log(typeof vari1);//获取变量数据类型

        console.log(18 == '18');//true
        console.log(18 === '18');// false 两侧的值还有数据类型完全一致才可以

        console.log(18 && 12);//12
        console.log(0 && 12);
        console.log(undefined && 12);//  0  ''  null  undefined  NaN  These are all false 


    </script>
</head>

<body>
    <input type="button" value="唐伯虎" onclick="alert('Qiuxiang Qiuxiang')">
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字小于0,Then fill the previous number with zeros</title>
    <script>
        var number = prompt('请输入一个0-59之间的数字');
        var result = number < 10 ? '0' + number : number;
        alert(result);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行打印n个星星</title>
    <script>
        var frequency = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= frequency; i++) {
            str = str + '*';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印n行n列星星</title>
    <script>
        var rows = prompt('请输入星星行数');
        var cols = prompt('Please enter the number of star columns');
        var str = '';
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= cols; j++) {
                str = str + '*';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印倒三角案例</title>
    <script>
        var str = '';
        for (var i = 1; i <= 10; i++) {//外层控制行数
            for (var j = i; j <= 10; j++) {//里层循环打印的个数不一样
                str = str + '*';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
    <script>
        var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += i + 'x' + j + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while案例</title>
    <script>
        var say = prompt('开卷开卷,卷死他们');
        while (say !== '好') {
            say = prompt('输入"好"Let's get started');
        }
    </script>
</head>

<body>

</body>

</html> -->
<!-- 
        创建数组两种方式  var 数组名=[]; 利用数组字面量创建数组 /  var 数组名=new Array();用new来创建数组
    console.log(sum,average);Want to output multiple values,用逗号分隔即可

    函数就是封装了一段可以被重复执行的代码块,A large amount of code can be reused through code blocks  函数名一般是动词   function声明函数的关键字,全部小写

 -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组添加元素</title>
    <script>
        var array = ['red', 'yellow', 'green', 5];
        array.length = 5;//可以通过修改lengthThe length to achieve the purpose of array expansion  length属性是可读写的
        console.log(array[4]);//索引4的空间没有给值 默认是undefined
        array[5] = 'pink';//修改索引号,追加数组元素  You cannot directly assign values ​​to new elements,否则会覆盖掉以前的数据
        console.log(array);
        array[0]='myRed';//
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iterate through the array to find the greater than10的元素,sequentially append to a new array 方法一</title>
    <script>
        var array = [2, 5, 6, 9, 8, 21, 4, 11, 23];
        var newArr = [];//空数组
        var j = 0;
        for (var i = 0; i < array.length; i++) {
            if (array[i] > 10) {
                newArr[j] = array[i];
                j++;
            }
        }
        console.log(newArr);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iterate through the array to find the greater than10的元素,sequentially append to a new array 方法二</title>
    <script>
        var array = [2, 5, 6, 9, 8, 21, 4, 11, 23];
        var newArr = [];//空数组
        //刚开始newArr.length就是0
        for (var i = 0; i < array.length; i++) {
            if (array[i] >= 10) {
                newArr[newArr.length] = array[i];
            }
        }
        console.log(newArr);
    </script>
</head>

<body>

</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script>
        // function getSum(num1, num2) {
        //     console.log(num1 + num2);
        // }
        // //实参个数和形参个数一致,则正常输出结果   
        // getSum(1, 2);
        // //如果实参的个数多于形参个数,会取到形参的个数
        // getSum(2, 2, 2);
        // //实参个数小于形参个数,形参可以看作是不用声明的变量 num2But didn't accept is a variable value,默认就是undefined
        // getSum(2);//结果NaN    在Js中,形参默认是undefined

        // function fun() {

        // }
        // console.log(fun());// 有return则返回return后的值  如果函数没有return则返回undefined

        // function fn() {
        //     console.log(arguments);//里面存储了所有传递过来的参数
        //     console.log(arguments.length);
        //     console.log(arguments[2]);
        //     //伪数组(并不是真正意义上的数组)  具有数组length属性  按照索引的方式进行存储   它没有真正数组的一些方法pop()  push()等
        // }
        // fn(1, 2, 3, 4);

        //函数声明的两种方式  
        function fu1() {
            console.log('第一种方式:利用函数关键字自定义函数');
        }
        fu1();
        // var 变量名=function(){};  fu2是变量名,不是函数名
        //函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
        var fu2 = function () {
            console.log('第二种方式:函数表达式(匿名函数)');
        }
        fu2();
    </script>
</head>

<body>

</body>

</html> -->

<!-- 
    JavaScript作用域:就是代码名字(变量)在某个范围内起作用和效果,The purpose is to improve the reliability of the program and more importantly, to reduce naming conflicts
    全局作用域:整个script标签或者一个单独的js文件
    局部作用域(函数作用域)在函数内部就是局部作用域
 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大杂烩</title>
    <script>

        //我们js也是在es6的时候新增的块级作用域  块级作用域{} if{} for{}
        if (3 < 5) {
            var number = 10;
        }
        console.log(number);

        //我们js引擎运行分为两步:预解析 代码执行
        //(1)预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面  (2)代码执行  按照代码书写的顺序从上往下执行
        // 预解析分为变量预解析(变量提升)和函数预解析(函数提升) 
        //变量提升(函数提升)Just declare all variables(函数声明)提升到当前作用域的最前面 不提升赋值操作(不调用函数)

        //To save a value you can use a variable,Arrays can be used to save multiple values,What about keeping a person's full profile?? JSThe object expression structure is clearer,更强大
        //利用对象字面量创建对象  var obj={};创建一个空对象
        var obj1 = {
            myName: '哈哈哈',
            age: 18,
            say: function () {
                console.log('hi');
            }
            //The properties and methods in it are in the form of key-value pairs  键:属性名  值:属性值   Separate multiple properties or methods with commas  method followed by an anonymous function
        }
        console.log(obj1.age);//调用对象属性1   对象名.属性名    .This small point can be understood as"的"
        console.log(obj1['myName']);//调用对象属性2  对象名['属性名']
        obj1.say();//调用对象方法  对象名.方法名

        //变量单独声明并赋值,使用时直接写变量名,单独存在   /   属性在对象里面的不需要声明,The object name when used.属性名
        //函数是单独声明 并且调用  函数名() 单独存在的    / 方法在对象里面  调用的时候  对象.方法()

        //利用 new Object 创建对象
        var obj2 = new Object();//创建了一个空的对象
        obj2.you_name = '呵呵呵';
        obj2.age = 19;
        obj2.say = function () { console.log('hello') };
        console.log(obj2.you_name);
        obj2.say();

        //构造函数  It is to extract some of the same properties and methods in our objects and encapsulate them into functions 构造函数名字首字母要大写
        //构造函数(抽象的,泛指某一大类) 他类似于java中的类  
        function Star(uname, age) {
            this.name = uname;
            this.age = age;
            this.sing = function (sang) {
                console.log('大家好我是' + uname + '我要唱' + sang);
            }
        }//构造函数不需要return就可以返回结果
        var one = new Star('刘德华', 18);//调用构造函数  必须使用new  对象是一个具体的实例
        //new 在内存中创建一个新的空对象,让this指向这个新对象,执行构造函数里面的代码,给这个新的对象添加属性和方法,返回这个新对象
        console.log(typeof one);//构造函数返回一个对象
        one.sing('冰雨');
        var two = new Star('张学友', 19);
        console.log(two.name);
        //for in遍历我们的对象  for(变量 in 对象){}
        for (var k in obj1) {
            console.log(k);// k 变量 输出  得到的是属性名
            console.log(obj1[k]);
        }

        //JavaScript对象分为3类:自定义对象  内置对象 浏览器对象   ; 前两种是JS的基础内容,属于ECMAScript;The third browser object is ourJS独有的
        //内置对象就是JS语言自带的一些对象,And provides some commonly used or the most basic and necessary functions

        //Math数学对象 不是一个构造函数 我们不需要new来调用 而是直接使用里面的属性和方法
        // Math.floor();向下取整   Math.ceil();向上取整  Math.round();四舍五入  Math.abs();绝对值  Math.min();最小值
        console.log(Math.PI);// 圆周率
        console.log(Math.max(1, 2, 3));//最大值
        console.log(Math.max());//Infinitesimal without parameters -Infinity
        console.log(Math.max(1, 3, 'e'));// 无法识别NaN

        console.log(Math.abs('-1'));//会隐式转换  把字符串-1转换成字符型
        console.log(Math.abs('e'));//无法识别  NaN

        console.log(Math.round(-1.5));//其他数字都是四舍五入,但是  .5特殊 He took the big one 所以结果是-1

        //Math对象随机数方法  random()返回一个随机的小数 0<=x<1  This method cannot follow parameters
        console.log(Math.random());
        //We want random integers between two numbers 并且包含这两个整数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));

        //随机点名
        var array = ['刘德华', '张学友', '郭富城', '黎明'];
        console.log(array[getRandom(0, array.length - 1)]);

        //Date对象跟Math对象不一样,他是一个构造函数,需要实例化才能使用
        var date = new Date();//如果没有参数 返回当前系统的时间
        console.log(date);

        var date1 = new Date(2022, 3, 23);//参数有两种写法 数字型/字符串型 '2022-3-23 12:12:12'
        console.log(date1);//返回的是4月,instead of March  Reason index is zero-based

        var date2 = new Date('2022-3-23 12:12:12');
        console.log(date2);

        console.log(date2.getFullYear());//返回当前的年 
        // getMonth()+1;  A month in return is small 记得加一     getDate();返回的是几号  getDay();周日返回0,Return from Monday to Saturday1-6
        // getHours();获取当前小时  getMinutes();获取当前分钟  getSeconds();获取秒
        //封装一个对象 返回当前的时分秒
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());

        console.log(date.valueOf());//returns our current time to1970.1.1总的毫秒数  方法一
        console.log(date.getTime());//方法二

        var haomiao = +new Date();
        console.log(haomiao);//方法三
        console.log(Date.now());// H5新增的  获得总的毫秒数

        //倒计时效果
        function countDown(time) {
            var nowTime = +new Date();//获取当前时间毫秒数
            var inputTime = +new Date(time);//Returns the number of milliseconds entered by the user
            var times = (inputTime - nowTime) / 1000;//times是剩余时间总的毫秒数
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 24);//分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 24);//秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-1-1 24:00:00'));

        //创建数组的两种方式
        var array1 = [1, 2, 3, 4];//利用数组字面量
        var array2 = new Array();//创建了一个空数组
        var array3 = new Array(3);//This three means that the length of the array is3 里面有两个空的数组元素
        var array4 = new Array(1, 2, 3);//Written like this, it means that there are three array elements in it.1,2,3

        // instanceof运算符 检测是否为数组
        console.log(array1 instanceof Array);//方法一
        console.log(Array.isArray(array1));// Array.isArray(参数); 方法二
        //当检测Array实例时,Array.isArray优于instanceof,因为Array.isArray能检测iframes

        //push()在数组末尾 添加一个或者多个数组元素
        var array5 = [1, 2, 3];
        console.log(array5.push(4, '你好'));//push完毕之后,返回的结果是新数组的长度
        console.log(array5);
        // unshift at the beginning of our array,添加一个或者多个数组元素
        console.log(array5.unshift('red', 'yello', 'green'));//unshift完毕之后,返回的结果是新数组的长度
        console.log(array5);
        //pop()It can delete the last element of the array(一次只能删除一个)
        console.log(array5.pop());//pop()没有参数  The result returned after deletion is the deleted element
        //shift可以删除数组第一个元素 一次只能删除一个  shift()没有参数  The result returned after deletion is the deleted element

        var array6 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        array6.reverse();//反转数组
        console.log(array6);

        //数组排序 冒泡排序
        array6.sort(function (a, b) {
            // return a - b;//升序
            return b - a;//降序
        });
        console.log(array6);

        console.log(array6.indexOf(8));//Returns the index number of the first array element that satisfies 找不到元素返回-1
        //lastIndeOf() 从后往前找 

        //去重
        function unique(array) {
            var newArr = [];
            for (var i = 0; i < array.length; i++) {
                if (newArr.indexOf(array[i]) === -1) {
                    newArr.push(array[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['a', 'b', 'c', 'c']);
        console.log(demo);

        var array7 = [1, 2, 3];
        console.log(array7.toString());//数组转换为字符串
        // join(分隔符)
        console.log(array7.join());//Print the result by default 1,2,3
        console.log(array7.join('-'));//打印结果  1-2-3

        //concat() 连接两个或多个数组,不影响原数组,返回一个新的数组   slice(begin,end)数组截取,返回被截取的新数组  splice(第几个开始,要删除的个数)返回被删除的新数组
        // const letters = ["a", "b", "c"];
        // const numbers = [1, 2, 3];

        // const alphaNumeric = letters.concat(numbers);
        // console.log(alphaNumeric);

        //
        var str = 'angle';
        console.log(str.length);//复杂数据类型才有属性和方法,Why are the basic data typeslength属性呢? This is the packaging of basic data types into complex data types
        //  var temp=new String('angle'); 把临时变量给str  str=temp; 销毁这个临时变量 temp=null

        //Because strings are immutable, don't splice strings in large numbers,字符串的所有方法,Will not modify the string itself,After the operation is completed, a new string will be formed

        var str = '改革春风吹满地,The people of Spring Country';
        console.log(str.indexOf('春'));//根据字符返回位置   lastIndexOf();从后往前找
        console.log(str.indexOf('春', 3));//从索引3的位置开始往后查找  

        console.log(str.charAt(3));//根据位置返回字符
        console.log(str.charCodeAt(3));//返回相应索引号的字符ASCII值 Purpose is to figure out which one the user pressed the button
        console.log(str[3]);///H5新增的

        //统计出现最多字符和次数
        var str = 'abcdefgabcai';
        var kong = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);// chars是字符串的每一个字符
            if (kong[chars]) {
                kong[chars]++;
            } else {
                kong[chars] = 1;
            }
        }
        console.log(kong);
        //遍历对象
        var max = 0;
        var charr = '';
        for (var k in kong) {
            if (kong[k] > max) {
                max = kong[k];
                charr = k;
            }
        }
        console.log('最多的字符是' + charr + '出现次数为' + max);

        console.log(str.concat('你好'));//字符串追加  等效于+,+更常用
        console.log(str.substr(2, 2));// substr('截取的位置','截取的字符')

        //substring(start,end)基本和slice(start,end)相同,从start位置开始截取end位置(他们俩都是索引号)

        var str2 = 'red,yellow';
        console.log(str2.split(','));//字符转换为数组  solit('分隔符')
        console.log(str.replace('a', 'b'));//替换字符,replace('被替换的字符','替换为的字符'),He will only replace the first character

        //toUpperCase()转换成大写  toLowerCase()转换成小写   
        //const sentence = 'The quick brown fox jumps over the lazy dog.';
        //console.log(sentence.toUpperCase());

        //Simple types are also called basic data types and value types(string number boolean undefined  null),复杂类型又叫引用类型(通过newThe keywords created Object Array Date等)
        //栈:Primitive data types are stored on the stack The operating system automatically allocates and frees     堆:Complex data types are placed on the heap  一般由程序员分配释放,若不释放,由垃圾回收机制回收
        //JSThere is no concept of heap and stack  Complex data types put addresses on the stack,16进制表示,Then point to the data in the heap   简单数据类型:Create space in the stack for assignment
        var nuller = null;
        console.log(typeof nuller);//Simple data types return an empty object
    </script>
</head>

<body>

</body>

</html>
<!-- 
    JS的组成:ECMAScript语法(JavaScript基础),DOMPage document type object,BOM浏览器对象模型
    DOM和BOM统称为Web APIs(JS所独有的部分 )是W3C组织的标准
    API是给程序员提供的一种工具,以便轻松的实现想要完成的功能
    Web API一般都有输入和输出(函数的传参和返回值),Many of these are methods(函数)

    W3C已经定义了一系列DOM接口,通过这些接口可以改变网页的内容,结构和样式

    DOM树,一个页面就是一个文档,DOM中使用document表示;页面中所有的标签都是元素,DOM中使用element表示
    节点:页面中所有的内容都是节点(标签,属性,文本,注释),DOM用node表示
    DOM把以上内容都看作是对象
    DOM如何获取页面元素:1.ID获取 2.根据标签名获取 3.通过HTML5新增的方法获取  4.Special element acquisition
-->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The page gets the element</title>
</head>

<body>
    <div id="time">2022-11-24</div>、

    <ul>
        <li>知否知否,应是绿肥红瘦1</li>
        <li>知否知否,应是绿肥红瘦2</li>
        <li>知否知否,应是绿肥红瘦3</li>
    </ul>


    <div class="box">盒子1</div>
    <div class="box">盒子2</div>

    <script>
        //因为我们文档页面从上往下加载,所以先得有标签,所以我们scriptWrite below the expression
        //  getElementById--get获得--element元素--by通过  驼峰命名法
        // 参数id是大小写敏感的字符串   Returns an element object
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象  更好的查看里面的属性和方法
        console.dir(timer);

        //返回的是 获取过来元素对象的集合 以伪数组的形式存储(如果页面中没有这个元素,Returns the empty form of pseudo array)
        //因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
        //Get element is dynamic,It changes with the content  
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //还可以获取某个元素(父元素)内部所有指定标签名的子元素
        //父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
        var ul = document.getElementsByTagName('ul');
        console.log(ul[0].getElementsByTagName('li'));

        // H5 新增元素的方法  1.Get a collection of certain elements based on the class name
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //2. 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var time1 = document.querySelector('#time');
        console.log(time1);
        var li = document.querySelector('li');
        console.log(li);
        //3.返回指定选择器所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);

        //获取特殊元素   
        console.log(document.body);//document.body获取body元素对象
        console.log(document.documentElement); //document.documentElement获取HTML元素对象

    </script>
</body>

</html> -->

<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件三要素</title>
</head>

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //事件是由三部分组成  事件源(事件被触发的对象)  事件类型  事件处理程序  我们称为事件三要素
        //(1)事件源(事件被触发的对象)  谁? 按钮
        var btn = document.getElementById('btn');
        //(2)事件类型 如何触发  什么事件  比如鼠标点击(onclike) 还是鼠标经过 还是键盘按下
        //(3)事件处理程序 通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('点秋香');
        }

        // onclick 鼠标点击左键触发     onmouseover 鼠标经过触发  onmouseout鼠标离开触发  onfocus 获得鼠标焦点触发  onblur 失去鼠标焦点触发
        //onmousemove The mouse moves off    onmouseup鼠标弹起触发  onmousedown鼠标按下触发

    </script>
</body>

</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素</title>
    <style>
        div {
            height: 30px;
            width: 300px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统的时间</button>
    <div>某个时间</div>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册事件

        btn.onclick = function () {
            // div.innerText = '2022-12-12';
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = data.getMonth() + 1;
            var dates = data.getDate();
            var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + array[day];
        }
    </script>



</body>

</html>

copyright notice
author[Little shy ultraman],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2023/025/202301251036516591.html

Random recommended