Web前端 Day 2

元素显示模式

块元素

独占一行 宽、高、内外边距可以设置 eg. div

行内元素

一行可以存在多个 eg. span

行内块元素

一行可以存在多个 宽、高、内外边距可以设置 是否独占一行

表格标签

  表格标题（概括）
 
        
     
     
     
       表头
   表身
                     tr 行
                td 单元格
       
       
       
       
            一行五列（5个单元格）      
   表脚
​

表格标签属性

  设置宽高以及边框和单元格间距   cellspacing  单元格间距  height 仅对单元格进行改变
​
​
border 只控制最外围的大小 
caption 通过css更改
​
​
​
​
 设置高度并对表头作出改变，水平左中右，垂直上中下
​
​
 tbody也是这3个属性
    也是这3个属性
也是这3个属性
​
单元格合并
跨行 rowspan
跨列 colspan
 
例如


        
            
                
                
                
                
                
            
        
        
            
                
                
                
                
                
            
            
                
                
                
                
            
            
                
                
                
                
                
            
            
                
                
                
                
                
            
        
        
            
                
            
​
​
        
​
​
    

 
学生信息
姓名
性别
年龄
民族
政治面貌
王鑫宇
男
18
汉
党员
男
18
汉
党员
王鑫宇
男
18
汉
党员
王鑫宇
男
18
汉
党员
共计:4人

details

详情标签

例如

    达到点击前缀符号后查看详情的效果，summary接的是一个内容相关概括词
    

        
有志青年
        我们这里都是优秀的有志青年
    

效果图

 

tabindex

让本不能tab遍历获取焦点的元素可以获取

    
    
    去百度
    
我是第一个盒子
    
我是第2个盒子
    
我是第3个盒子
    
我是第4个盒子
​

表单的基本结构

网页交互区，收集用户信息

action ：将数据交给谁处理

name 必有属性

method：提交方式

 

 
    

        
        提交   生成一个带有“提交”的按钮
    

常见的表单元素

1.文本框 可显示
用户名：

2.密码 隐藏
密码：

3.单选框
男
女

4.多选框 label标签
 吃榴莲
      吃臭豆腐
      
      吃肥肉
​
​
5.隐藏域

​
6.确认按钮
 
7.重置按钮
 
8.普通按钮

9.文本域
     

10.下拉菜单

            南京
            
            成都
            西安
​
        
​
​
​
        

、

html的全局属性

id身份证号，在一个页面中只能出现一次

class  一类  可以出现多个

例如：四行粉色的文本

 

    

        
        提交
    
​
    
    

html5语义标签

    

    

        

    
    

​

h5表单

    

        
        
        
        tijaio
    

css体验

css更体现在对于页面的优化上

​

    
我是盒子1

css的三种引入方式

css基本结构

选择器{

属性名：属性值

属性名：属性值

…….

}

css书写内容没有“=”

例如
 */
        .box1 {
            width: 300px;
            height: 300px;
            background-color: pink;
        }    .box1 是类选择器   .后加自定义选择器名
    

​

    
我是盒子
    
    

    
我是box2

选择器

基本选择器

选中指定标签进行一些效果上的修改

标签选择器

p{
color：
​
}     标签选择器  选中所有的p标签

类选择器

.box2{
color:
}

ID选择器

#box1 #后加id名

例如
#box1 {
            color: pink;
        }
​
        /* 类选择器 */
        .box2 {
            color: blueviolet;
        }
​

通配符选择器

 /* 通配符选择器
        *{
            
        }
        
        */

属性选择器

效果图

 

包含选择器

复合选择器

​

    
wisjiajsskmx
    
cndklcdsmc
    jnckdsmc
    

        
吃饱穿暖CNBCCDC
    

字体的样式

    

     绝大多数就
    

效果图

 

首行缩进

 

​


    因此，有人说，未来只有两种纸质书不会消亡，第一种是全人类共同的经典，例如《圣经》等。另外一种，就是《欧洲文艺复兴大师》这样的艺术经典。
​
    ◎ 文艺复兴，不仅是美的胜利，更是反抗中世纪黑暗统治的认知觉醒
    说到文艺复兴，许多读者自然会想到“文艺复兴三杰”——达芬奇、拉斐尔、米开朗基罗。
​
    然而，三杰的成就虽然突出，却不能代表整个文艺复兴。除了复兴三杰，还有两位大师，对文艺复兴同样重要，却少为人知，一位是博斯，一位是卡拉瓦乔。
​
    《欧洲文艺复兴大师》推出五位艺术大师，时间上，博斯是文艺复兴早期代表，三杰代表的是文艺复兴盛期，卡拉瓦乔则是晚期巴洛克艺术的奠基人。这样的五个人，能够更好反映欧洲文艺复兴的全貌。