前端（html与css）

用户6578482194454
147 阅读3分钟

HTML

head

1、编码：

 <meta charset="UTF-8">

2、title

 <head>
     <title>我的项目</title>
 </head>

image-20230313223848326

body

1、标题

 <body>
     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>
 </body>

image-20230313224308402

2、div与span

 <div>内容占一整行，称之为块级标签</div>
 <div>测试div</div>
 <span>有多大占用多大，称之为行内标签</span>
 <span>测试span</span>

image-20230313224555893

这两个标签广泛使用（搭配css）。

3、超链接

跳转到别人的网站

 <a href="https://www.bilibili.com/">点击此处使用超链接，跳转到bilibili</a>

image-20230313225345923

跳转到自己的网站

 <a href="/hello">点击此处使用超链接，跳转到hello</a>

4、图片

显示别人的图片

 <img src="https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg"/>

显示自己的图片

需要在自己的目录下创建一个保存静态文件的目录static，图片在该目录下：

 <img src="/static/mywifi.jpg" />

设置图片尺寸

 <img style="height: 90px;width: 160px" src="/static/mywifi.jpg" />

点击图片跳转链接

 <a href="http://bizhi360.com/fengjing/">
     <img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0" style="width: 480px;height: 270px"/>
 </a>

点击图片跳转链接，且创建一个新的标签页

target="_blank"

 <a href="http://bizhi360.com/fengjing/" target="_blank">
     <img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0" style="width: 480px;height: 270px"/>
 </a>

5、列表

不带数字（无序）

 <h2>用户信息</h2>
 <ul>
     <li>id</li>
     <li>name</li>
     <li>passwd</li>
 </ul>

image-20230313233640041

带数字（有序）

 <h2>用户信息</h2>
 <ol>
     <li>id</li>
     <li>name</li>
     <li>passwd</li>
 </ol>

image-20230313233757309

6、表格标签

 <table>
     <thead> <!--表头-->
         <tr> <th> ID </th> <th> NAME </th> <th> PASSWD </th> </tr> <!--tr表示一行，th表示列-->
     </thead>
     <tbody>
         <tr> <td> 1 </td> <td> paradise </td> <td> zyf </td> </tr> <!--td表示数据-->
         <tr> <td> 2 </td> <td> ise </td> <td> yf </td> </tr> <!--td表示数据-->
         <tr> <td> 3 </td> <td> parse </td> <td> zf </td> </tr> <!--td表示数据-->
         <tr> <td> 4 </td> <td> par </td> <td> z </td> </tr> <!--td表示数据-->
     </tbody>
 </table>

image-20230313235846053

加上边框

 <table border="1">
     
 </table>

image-20230314000019167

7、input

 <input type='text'/>          <!--文本输入框-->
 <input type='password'/>      <!--密码输入框-->
 <input type='file'/>          <!--文件上传-->
 ​
 <input type='radio' name='n1'/>正    <!--单选，name值一致时互斥-->
 <input type='radio' name='n1'/>负
 ​
 <input type='checkbox'/>A       <!--多选-->
 <input type='checkbox'/>B
 <input type='checkbox'/>C
 ​
 <input type='button' value='提交'/>   <!--按钮-->
 <input type='submit' value='提交'/>   <!--按钮，提交表单-->

image-20230314002202764

8、下拉框

<select>
    <option>高数</option>
    <option>概率论</option>
    <option>线代</option>
</select>

image-20230314002419629

支持多选

<select multiple>
    <option>高数</option>
    <option>概率论</option>
    <option>线代</option>
</select>

image-20230314002528135

9、多行文本

<textarea></textarea>

image-20230314002656492

默认行数

<textarea row='3'></textarea>

CSS

用于美化html标签

直接在标签使用（style)

<img style="height: 90px;width: 160px" src="/static/mywifi.jpg" />

在head中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .c1
        {
            color:red;
            height:100px;
            width:50px;
        }
    </style>
</head>

 <div>username: <input class=c1 type="text" name="username"></div>

image-20230319143603518

写入到额外的文件中

/*common.css*/

.c1 {
    color: red;
    height: 100px;
    width: 50px;
}
.c2{
    color:blue;
}

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的项目</title>
    <link rel="stylesheet" href="static/common.css">
</head>
<body>

<h1 class="c1">一级标题</h1>
<h2 class="c2">二级标题</h2>

</body>
</html>

image-20230319143532937

选择器

类选择器

.c1 {
    color: red;
    height: 100px;
    width: 50px;
}

<h1 class="c1">hello</h1>

image-20230319145209459

id选择器

#c2 {
	color: blue;
}

<h2 id="c2"> world </h2>

image-20230319145217943

标签选择器

对所有这类的标签都进行美化

li {
	color: green;
}
/*对所有li标签进行美化*/

<ul>
    <li>
        laji
    </li>
    <li>
        jhuiadwja
    </li>
</ul>

image-20230319145238225

属性选择器

input[type="text"] {
	color: green;
}
/*对所有type="text"的input标签进行美化*/

<input type="text">

image-20230319145651241

#c3[xx='xxx'] {
	border: 5px solid red;
}
/*对所有xx属性为xxx的标签美化*/

<input type="text" class="c3" xx="xxx">

image-20230319150025084

后代选择器

.yy h3 {
    color: #ffc384
}

<div class="yy">
    <h3>测试</h3>
    <div>
        <h3>子测试</h3>
    </div>
</div>

image-20230319153623523

只有子代进行美化

.yy > h3 {
    color: #ffc384
}

image-20230319153809265

css 覆盖

在标签使用多个css样式的时候，如果有一个样式有多个表述，默认会应用下面的那个样式：

.xx {
	color: red;
}

.zz {
	color: blue;
}

<div class="xx zz">
    <h5>应该是蓝色的</h5>
</div>

image-20230319155259722

不被覆盖的方法：

.xx {
	color: red !important;
}

.zz {
	color: blue;
}

image-20230319155620503

具体应用

1、高度和宽度

.c1 {
	height: 300px;
	width: 500px;
}

image-20230319160313702

宽度支持百分比

.c1 {
	height: 300px;
	width: 500px;
}

image-20230319160359773

行内标签默认无效，块级标签有效。

2、块级标签和行内标签结合

 .c1 {
	display: inline-block;
	border: solid red;
	height: 300px;
	width: 50%;
}

image-20230319161249892

行内标签和块级标签可以相互转换

3、字体和颜色

.c1 {
    color: red;
    font-size: 60px; /*字体大小*/
    font-weight: 400; /*加粗*/
    font-family: "黑体";
}

image-20230319162125313

4、文字居中

.c1 {
    height: 300px;
    width: 50%;
    border: 1px solid red;
    text-align: center; /*水平居中*/
    line-height: 300px; /*垂直方向居中*/
}

image-20230319162453970

5、浮动

.c1 {
    height: 300px;
    width: 50%;
    border: 1px solid red;
    text-align: center;
    line-height: 300px;
    float: right;
}

<body>
<span>网络</span>
<span class="c1">安全</span>
</body>

image-20230319162756811

6、边距

  • 内边距

距离所有内边距都是20个像素。

padding: 20px;

距离上，右，下，左的距离。

padding: 20px 30px 40px 50px;

与第一个例子一个意思。

padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
  • 外边距

与上面内边距类似

margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;

特殊用法

1、鼠标放上去换色：

我们先设置其本来的颜色

.character{
    color:grey;
    font-size:18px;
    font-family: "Arial Rounded MT Bold";
}

再添加鼠标放上去的颜色

.character:hover{
	color:green;
}

整体如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .character{
            color:grey;
            font-size:18px;
            font-family: "Arial Rounded MT Bold";
        }
        .character:hover{
            color:green;
        }
    </style>
</head>
<body>
<span class="character" >这些是测试的字体</span>
</body>
</html>

image-20230320163427044

image-20230320163508457

2、填充横向的所有内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .character{
            width: 1226px;
            background-color: #0dcaf0;
        }

    </style>
</head>
<body>
<div class="character">111</div>
<div style="clear: both"></div>
</body>
</html>

image-20230320164656633

存在未填满状况

使用css

        body{
            margin: 0;
        }

image-20230320164751925

3、图像居中，可以使用边距的方法

4、a标签的内容存在下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .character{
            width: 1226px;
            color:red;
        }
        body{
            margin: 0;
        }

    </style>
</head>
<body>
<a class="character" href="https://www.baidu.com">111</a>
<div style="clear: both"></div>
</body>
</html>
avatar
文章
阅读
粉丝