html-01

css引用的优先级由内到外

JavaScript用法

类的私有型对象必须通过函数来进行

在使用django进行传递参数时候，需要使用re_path

在django下千万不要删除template的文件夹，否则html文件会寻找不到

django项目路径下有settings文件，里面有TEMPLATESbyte流，里面BASE_DIR是动态获取项目文件路径，默认templates文件夹寻找html文件

APP_DIRS默认为ture就是会从app中寻找，但是在insta俺来了的——apps中

优先在DIRS中进行查找

sudo fuser -k 8000/tcp

你在自己定义的staticfiles_dirs里面默认的是同级的话，必须创建同级目录不然，出现查找不到的问题

html语言里面a标签，是一个抛锚点可以定位到目标标签，#id等或者网址，打电话，tel：电话号码，mail to:邮件地址，协议限定符：javascript:while(1){alert(’。。。’)}，

form发送信息：

<form method = "get" action = "">
<input type = "text" name = "">
<input type = "password" name = "">
<input type = "submit">
</form>

• 单选框使用

 1. a<input type="radio" name="第一题" value="A">      
 2. b <input type="radio" name="第一题" value="B">
 通过value来传递选项
 通过name来确定，比如是哪一个题目的选项    

• 对输入框添油加醋，比如焦点的对准

 <p>
           yonghu<input type="text" name="username" value="请输入用户名" style="color: #999" onfocus="if (this.value == '请输入用户名'){ this.value = '';this.style.color = '#424242'}" onblur="if (this.value == '') {this.value = '请输入用户名';this.style.color = '#999'}">
       </p>
       <p>
           mima<input type="password" name="password">
       </p>
#意思是，焦点对准后，清空后输入框，输入的都是黑色，未聚焦时候，框内变灰色

• 使用复选框：

 1. a<input type="checkbox" name="第一题" value="A">
 2. b <input type="checkbox" name="第一题" value="B">

• 在单选框里面加入checked属性就行
  -使用下拉菜单：select

<select name="" id="">
           <option value="">北京</option>
           <option value="">上海</option>
       </select>

css样式

• 负责网站的样式，表单，格式，相当于装修涂料的意思
• 层叠样式表
• 引入方式：

1. 行间样式
<div style="
            width: 100px;
            height:100px;
            background-color: red;
       "></div>
就在标签属性下修改
2. 页面css文件引入
在head标签里面进行表示
<style type="text/css">
        div{
        width: 100px;
        height:100px;
        background-color: red;
        }
    </style>
3. 外部文件引入css
 <link rel="stylesheet" href="./src/tests.css">

• 域名—> dns —>物理地址
• css里面对标签的认识

       1.选择器,id
       <div id="only">123</div> #id
       2.class选择器.only2
       一个class对应多个元素，可以使用相同的，一个class可以对应多个元素，一个元素可以拥有多个class
        <div class="only2"></div>
       3.标签选择器
       直接写标签名，针对所有的同类标签
       4.通配符选择器，近似于正则表达式，*代表全局标签
       5.使用优先级问题，id优先级高，!important>行间样式>id>class(和属性选择器并行)>标签选择器高
       !important inf
       行间样式 1000
       id 100
       class|属性|伪类 10
       标签|伪元素 1
       通配符 0
       是256进制

• css写法

/*div{*/
    /*width:100px ;*/
    /*height: 100px;*/
    /*background-color: aqua;*/
/*}*/
#only{
    background-color: green;
}
.only2{
    background-color: yellow;
}
/*父子选择器/派生选择器*/
div span{
    background-color: red;
}
/*直接子元素选择器*/
div > em {
    background-color: green;
}
/*并列选择器*/
div.only2{

}
/*权重计算*/
div .content{

}
.wrapper .content{

}
/*分组选择器,提高代码复用率*/
em,strong,span{

}

css块

• 各种属性

1. font-size 字体大小，高度
2. font-weight 字体出息，bold加粗
3. font-style 斜体 italic
4. font-famliy 字体，通用字体arial
5. color 字体颜色

6. 纯英文单词，严禁这种写法
7. 颜色代码，#加上六位数字，每两位数字为一种颜色
8. 颜色函数，rgb(0-255,0-255,0-255)

9. border 边框，3个属性，粗细，solid（实体实心），颜色，划分为border-width border-style border-color（transparent透明色）

元素分类

1. 行级元素、内联元素 inline

feature： 内容决定元素所占位置不可以通过css改变宽高
span strong em a del

2. 块级元素 block

feature： 独占一行，可以通过css改变宽高
div p ul li ol form address

3. 行级块元素 inline-block

feature：内容决定大小，但是可以改变宽高
img

4. 但是上诉元素css样式里面有一个属性display，可以进行更改，进而改变元素的特点

• 解决bug（img连续4个标签中间有空隙）

1. 原理，有inline是有文字特性，中间默认有4px的间隙
2. 正常解决方法，去掉空格
3. 错误解决方法，但是有实际作用的是在img的css样式里面更改margin-left属性值大小

• 行级元素只能嵌套行级元素，块级元素能嵌套任何元素，p标签不能套块级元素，a标签不能套用a标签

语法

• 先写html，后写css，小白想法

       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
       <div class="box4"></div>
.box1{
    width: 100px;
    background-color: green;
}
.box2{
    width: 50px;
    background-color: red;
}
.box3{
    width: 100px;
    background-color: red;
}
.box4{
    width: 50px;
    background-color:green ;
}

• 先写css，后写html，先定义功能后定义选配

       <div class="size1 color1"></div>

       <div class="size1 color2"></div>

       <div class="size2 color1"></div>

       <div class="size2 color2"></div>
.size1{
    width: 50px;
    height: 50px;
}
.size2{
    width: 100px;
    height: 100px;
}
.color1{
    background-color: green;
}
.color2{
    background-color: red;
}