web前端

最新推荐文章于 2024-06-18 18:28:04 发布

tan &

最新推荐文章于 2024-06-18 18:28:04 发布

阅读量797

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_74747565/article/details/131583616

版权

元素显示模式：

块元素：独占一行，宽高内边距可以设置 ——div

行内元素：一行可以存在多个，宽高内边距不可以设置 ——span

行内块元素：一行可以存在多个，宽高内边距可以设置

表格标签：

<table></table> ——表格所有属性和内容写在里

caption ——表格标题（通过css修改）

thead ——表格头部

th——表头

tr——一行的信息

tbody——表格内容

td——单元格，数据(data)

——一行的内容

tfoot——脚注

成品图：

表格标签属性

<table border="1px">——给表格添加边框

<table border="10px">——边框只控制最外围大小

<table width="900px" height="400px">——给表格设置宽高(但是不能改变表头和脚注的高)

<table border="1px" wideth="200px" height="200px" cellspacing="0">——cellspacing单元格与单元格之间的距离

<thead height="600px" align="center" valigne="middle">——height头部的高，align水平方向上center水平居中，valign竖直方向上middle垂直居中

——width、height(tbody 值是底线，只高不低)，只能大于tbody的值

合并单元格：

td 跨行：rowspan

跨列：colspan

合并单元格三部曲：

1.先确定是跨行还是跨列合并

2.找到目标单元格，写上合并方式=合并的单元格数量。<td rowspan="2">

3.删除多余的单元格

跨行合并：

<td rowspan="2">王鑫宇</td> 同时删除下一行的对应单元格

跨列合并：

<td colspan="5">共计:4人</td>——right向右靠齐

details

details：详情标签配合summary使用

tabindex

tabindex：让本不能tab遍历获取焦点的元素可以获取可以为负数(不能用tab键聚焦)，0(可以tab聚焦，顺序为当前处于的dom结构)，正数(可以tab聚焦，顺序按照tabindex的数值递增而滞后,拥有相同的tabindex则按照dom结构顺序决定)

表单：

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

action:将数据交给谁处理

name：必有属性

method：提交方式 ajax

——button为提交按钮,此时可以输入内容但是不知道提交到那个文件

——action为表单数据要提交到哪里去(百度在其地址后面需要加/s) ,但是还不知道数据的具体作用

——name给文本框命名，所有表单都必须有name，(百度name规定为wd)

常见的表单元素

1，文本框

用户名：<input type="text" name="user" value=" “ maxlength="6" placeholder="请输入用户名：">

——value为默认值，maxlength为最大长度

2，密码

密码: <input type="password" name="pwd">

3，单选框——需要给value值

<input type="radio" name="gender" value="nan">男

<input type="radio" name="gender" value="nv">女

——radio为单选的意思，name让他们成为一组(都为gender)，必须要成为一组从可以单选

4，多选框——需要给value值

<input type="checkbox" name="food" value="apple">苹果

<input type="checkbox" name="food" value="bnala">香蕉

<input type="checkbox" name="food" value="lizi">栗子

——checkbox为多选的意思，也需要归为一组

5，隐藏域

<input type="hidden" name="hid" value="nnunu">——防止信息泄露

6，确认按钮

——单选和多选需要给value值，不给默认没有值，选了显示on，没有显示off

7，重置按钮

8，普通按钮

<input type="button">——没有自生功能与含义

9，文本域

10，下拉菜单

<select name="籍贯">

<option value="成都">成都</option>

<option value="西安">西安</option>

<option value="上海">上海</option>

</select>

11，label标签

<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>

<label><input type="checkbox" name="food">吃臭豆腐</label>

——在点字的时候完成选中

12，默认选中

下拉菜单默认选中 ——selected

13，最大长度——maxlength

用户名：<input type="text" name="user" value="" maxlength="3" placeholder="请输入用户名：">

html的全局属性

1，id

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

2，class

class 一类可以出现多个

<head>

<style>

.pink {

color: pink;

}</style>  </head>

<body>

<div class="pink">我是哟个盒子</div>

<div class="pink">我是哟个盒子</div>

<body>

3，accesskey

accesskey 设置快捷键

<form action="#">

<input type="text" name="a" id="">

<button accesskey="s">提交</button>

</form>

——用快捷键s代替点击提交的效果

4,style

style——给元素加样式

<div type="text" style="font-size:40px">yeyey</div>——修改字体的大小

5，data-* 自定义属性

h5表单

number：<input type="number">——只能输入数字

color

time

提示词：placeholder

用户名:<input type="text"name="user" value="yes" maxlength="3"placeholder="请输入" ><br>

css的三种引入方式

1，内部样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          div{
              width: 300px;
              height:300px;
              background-color:aquamarine;
          }
    </style>
</head>
<body>
    <div>我是合在</div>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          .box1 {
              width: 300px;
              height:300px;
              background-color:blueviolet;
          }
    </style>
</head>
<body>
    <div class="box1">我是盒子</div>
</body>
</html>

2，行内样式：不推荐

<div style="width:200px; height:200px; background-color:cornsilk;"></div>

3，外部样式

css基本结构

选择器{

属性名：属性值；

}

基本选择器

1，标签选择器 ——选中所有所选择的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     p{
         color: aqua;
     }
    </style>
</head>
<body>
<p>使得</p>    
</body>
</html>

——color是字体颜色，backgroundcolor是背景颜色

2，id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box1{
        color:blue;
    }
    </style>
</head>
<body>
    <div id="box1">yesyes</div>
    
</body>
</html>

——id选择器要在前面加#

3，类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box2{
        color:black; 
    }
    </style>
</head>
<body>
  <div class="box2">nonon</div>  
</body>
</html>

——类选择器前面要加" . "

4，通配符选择器——选中所有标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        color:blueviolet; 
    }
    </style>
</head>
<body>
  <div>nonon</div>
  <div>mmmmm</div>
  <div>okkkk</div>  
</body>
</html>

包含选择器

1，子代选择器——选中亲儿子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .a>li{
        color:brown;
    }
    </style>
</head>
<body>
 <ul class="a">
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <ul>
            <li>2</li>
            <li>3</li>
            <li>1</li>
     </ul>
 </ul>   
</body>
</html>

——子代选择器 .a>li

2，后代选择器——找到后代所有要找的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .a li{
        color: blue;
    }
    </style>
</head>
<body>
    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>1</li>
         </ul>
    </ul>   
</body>
</html>

——后代选择器.a li

字体的样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            cursor: pointer;

            /* 字体大小 */
            /* font-size: 40px; */
            /* 字体粗细 */
            /* font-weight: bold; */
            /* font-weight: 900; */
            /* 100-900 400===normal  800===bold  100-900越来越粗           font-weight: 400;*/
            /* 字体是否倾斜 */
            /* font-style: italic/normal; */
            /* font-family: "微软雅黑"; */

            /* italic 900可省略，字体大小，font-family必须存在 */
            font: italic 900 70px "微软雅黑"

        }
    </style>
</head>

<body>
    <div>
        我是图图小淘气，面对世界很好奇
    </div>
</body>

</html>

<style>

<div>{

字体大小：font-size:40px;

字体粗细：font-weight: bold;——加粗

font-weight: 900;——字体加粗

——100-900px 400==normal 800==bold 100-900越来越粗

字体风格：（倾斜）font-style: italic/normal;——normal为默认

font-family: "微软雅黑"

复合写法：1，风格 2，粗细 3，大小 4，风格

font: italic 900 70px "微软雅黑"

——italic 900可省略，字体大小，font-family必须存在

}</div>

<style>

复合选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            color: pink;
        }

        p {
            color: pink;
        }

        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>wisjiajsskmx</div>
    <p>cndklcdsmc</p>
    <span>jnckdsmc</span>
    <ul>
        <li>吃饱穿暖CNBCCDC</li>
    </ul>
</body>

</html>

——把多个元素选择出来加相同的样式

div,

span{

color:red;}

属性选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aquamarine;
        }

        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }

        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />

    <div id="aquamarine">1</div>
    <div>2</div>


</body>

</html>

1，

input[type="password"]{

属性:属性名;

}——选择该属性为此的

2，

div[id] {
width: 300px;
height: 300px;
background-color: blue;
}——选择含有该属性的

3，

input[type^="te"] {
background-color: red;
}——以te开头的^

4，

input[type$="l"] {
background-color: green;
}——以i结尾$

input[type*="e"] {
background-color: chartreuse;
}——包含e*

首行缩进