web前后端框架

HTML 学习

HTML 常用标签

HTML 初始结构

新建文件时唤出初始化标签：!+Tab 补齐

id、name、class、type、value 的区别

• id：标签的唯一标识，不可重复

• name：标签的名字，可以重复，用来与后端语言进行交互

• value：是 text 的文本值，显示在 input 里面的文字

• class：是样式的名字，设置标签样式的时候用

• type：input 标签的类型

代码示例-1

    
这是居中的标题

    
段落标签
    
这是一段话
    
这是缩进2个空格的一段话，一个空格的像素是 16px

    
块级标签
    
h1-h6、p 块级标签
    
会自动换行，可以直接嵌入CSS

    
内联标签
    span、i、b、u、input 内联标签同行显示，不可以直接嵌入CSS，可以通过display:block将内联标签改为 块级标签

    
超链接标签
    百度不加https://   target="_blank"新页面打开
    

    百度加https://

    
内部地址跳转
    内部跳转至 About 页面

    
a 标签的 href 中执行 js 代码
    a 标签执行 js 代码

    
图像标签
    
    
    

    

    
pre 标签可以正常解析换行符和空格
    



    

    
带 & 的特殊字符
    
nbsp、lt、gt、quot、copy 要加分号
    <h1>标题</h1>

    
xss
    
    <script>alert("hi")</script>

代码示例-2

    
input标签具有如下属性：type、name、value、size、readonly、maxlength、disabled、checked
    
input标签的 type 有如下类型：text、password、radio、checkbox、submit、button、reset、image、file、hidden
    

        
账号：
        
密码：
        

        
城市：
            
                北京
                上海
                广州
                深圳
            
        

        
        
留言：
    

    

        

            
表头：1
            
表头：2
            
表头：3
        
        

            
内容：1
            
内容：2
            
内容：3
        
        

            
内容：1
            
内容：2
            
内容：3
        
    

代码示例-3

login.html

    
    



    

    

        

            
用户登录
            

                
账号：
                
密码：
                

            
            没有账号？去注册！
        
    
    

register.html

    
    



    

    

        

            
用户注册
            

                
账号：
                
密码：
                
确认密码：
                

            
            已有账号？去登录！
        
    
    

CSS 学习

CSS 基本框架

CSS 引入 HTML 的方式

CSS 基本结构

代码示例

index.html

    
    
    
    



    
这是 行内样式，在当前标签里面的 style 写，优先级最高
    
这是 页内样式，在 head 里的 style 写，优先级第二
    
这是 外部样式，在 head 里的 link 写，优先级最低，可以通过 !important 提权
    
这里用了外部样式的 id选择器，id具有唯一性 且 优先级大于 类选择器
    
这里用了外部样式的 类选择器
    

        
这里用了CSS选择器的 包含关系
    

style.css

/* 标签选择器 */

body{
	background-color: rgb(238, 236, 236);
}

h3 {
    color: rgb(255, 145, 0);
    text-align: center;
}

h1 {
    color: rgb(255, 0, 0)!important;
}


/* id 择器 */

#id1 {
    color: green;
    text-align: center;
}


/* 类择器 */

.c1 {
    color: rgb(212, 7, 202);
}

.c2 {
    text-align: center;
}


/* 包含关系 */

h4 p {
    color: rgb(5, 191, 238);
    text-align: center;
}


/* 通配符选择器 */

* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
}

CSS 常用样式