HTML+CSS系列教程笔记 (2)

于 2022-10-28 18:07:52 发布
阅读量396 收藏
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73842669/article/details/127471007
版权

第二十一课 嵌套列表

列表之前互相嵌套形成多层级列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22</title>
</head><h1>好美食小吃</h1>
<body>
    <ul>
        <li> 小吃类
            <ul> 
       
    <li>煮干粉</li>
    <li>拌青菜</li>
    <li>蛋炒饭</li>
    <li>煎蛋</li>
    <li>米饭</li></li></ul></ul>
    <ul>
        <li> 卤味类
            <ul> 
       
    <li>鸭肠</li>
    <li>面筋</li>
    <li>牛肚</li>
    <li>猪耳朵</li>
    <li>猪头肉</li>
    <li>大肠</li>
    <li>鱿鱼</li></li></ul></ul>
    <ul>
        <li> 套餐类
            <ul> 
       
    <li>卤面筋饭</li>
    <li>猪头肉饭</li>
    <li>猪耳朵饭</li>
    <li>卤猪脚饭</li>
    <li>卤珠舌头饭</li>
    </li></ul></ul>
    <ul>
        <li> 炖罐类
            <ul> 
       
    <li>猪蹄黄豆</li>
    <li>猪肚莲子</li>
    <li>猪心枸杞</li>
    <li>羊肉枸杞</li>
    <li>牛肉枸杞</li>
    </li></ul></ul>
</ul>  
</ul>
</body>
</html>

第二十二课 表格标签

表格标签

<table>:表格的最外层标签
<tr>:定义表格行
<th>:定义表头
<td>：定义表格单元
<caption>:定义表格标题
语义化标签<tHead><tBody><tFood>
在一个table中，tBody是可以多次出现的，但是tHead，tFood只能出现一次
`

表格
天气预报
日期 天气情况 出行情况
2022年10月21日晴转多云适合出行
2022年10月2日阴可能有雨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table>
        <caption>天气预报</caption>
        <thead>
            <tr>
                <th>
                    日期
                </th>
                <th>
                    天气情况
                </th>
                <th>
                    出行情况
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2022年10月21日</td>
                <td>晴转多云</td>
                <td>适合出行</td>
            </tr>
                <td>2022年10月2日</td>
                <td>阴</td>
                <td>可能有雨</td>
        </tbody>
    </table>
    
</body>
</html>

第二十三课 表格属性

border:表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan‘：合并行
colspan：合并列
align：左右对齐方式
valign’：上下对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="3">
        <thead>
        <tr>
        <th>班次名称</th>
        <th>科目</th>
        <th>授课内容</th>
        <th>增值服务</th>
        <th>课时</th>
        
    </tr>
        </thead>
    <tbody><tr>
        <td rowspan="3">真题精讲班</td>
        <td>行测申论</td>
        <td>全科历年真题精讲</td>
        <td rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
        <td>48</td>
    </tr>
    <tr>
     <td>行测</td>
     <td>行测历年整体真题精解</td>
     <td>32</td>
    </tr>
    <tr>  
        <th>申论</th>
        <th>申论历年真题精讲</th>
        <th>16</th>
    </tr>
    </tbody>   
    <tr>
        <td rowspan="3">高分技巧班</td>
        <td>行测申论</td>
        <td>全科技巧强化</td>
        <td rowspan="3">入学试卷测评24小时内管理</td>
        <td>32</td>
    </tr> 
    <tr>
        <td>行测</td>
        <td>行测速解技巧强化</td>
        <td>18</td>
    </tr>
<tr>
      <td>申论</td>
      <td>申论速解技巧强化</td>
      <td>14</td>
    </tr>
    </table>
</body>
</html>

在这里插入图片描述

第二十四课 表单标签{一}

<form>:表单的最外层容器
<input>：标签用于搜集用户信息，input标签有一个type属性，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。input标签是一个单标签

1，表单编辑方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form>
    <h2>普通文本输入框</h2>
    <input type="text">
    <h2>密码框</h2>
    <input type="password">
    <h2>复选框</h2>
    <input type="checkbox">苹果    
    <input type="checkbox">香蕉   
    <input type="checkbox">葡萄    
    <h2>单选框</h2>
    <input type="radio" name="232">男
    <input type="radio" name="232">女
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交与重置</h2>
    <input type="submit">
    <input type="reset">
</form>
</body>
</html>

在这里插入图片描述
以提交到百度为例，当上图收集到的信息想要上传到百度时按照下图操作

2，表单编辑

a，如果想让上面代码中苹果与香蕉默认被选中，葡萄不能被选中，可以进行如下操作

 <input type="checkbox" checked>苹果    
    <input type="checkbox" checked>香蕉   
    <input type="checkbox" disabled>葡萄

在这里插入图片描述

b，如果想达到下面效果

在这里插入图片描述
在这里插入图片描述

<input type="text" placeholder="请输入用户名">
    <h2>密码框</h2>
    <input type="password"placeholder="请输入密码">
    <h2>复选框</h2>

第二十五课 表单标签{二}

其他的表单标签

<textarea>:多行文本框
<select>,<option>:下拉菜单
<lable>:辅助菜单

1，select与option

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select size="3" multiple>
        <option selected disabled>请选择</option>
        <option>盐城</option>
        <option>扬州</option>
        <option>南京</option>
        <option>淮安</option>
        <option>徐州</option>
    </select>
</body>
</html>

在这里插入图片描述
<option selected disabled>请选择</option>中，<selected>表示默认选中
disabled不能选中
综合意思即如图，网页打开默认是“请选择”
之后选则其他的就不能再次选择“请选择”

2，lable标签的用法

<input type="radio" name="gender"  id="man"><label for="man">男</label>
    <input type="radio" name="gender"   id="woman"><label for="woman">女</label>

在这里插入图片描述
如图所示，通过上面的lable标签，当用户将鼠标直接放在”男“或”女”这个字上面时，用户依然可以直接选中该项目

3，常见的一些属性

<checked> <disabled> <name> <for>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com/">
    <h2>电子邮箱</h2>
    <input type="text" placeholder="请输入邮箱">
    <h2>密码</h2>
    <input type="passpord" placeholder="请输入密码">
    <h2>姓名</h2>
    <input type="text" placeholder="请输入姓名">
    <性别>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
    <h2>请输入生日</h2>
    <select>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
        <option>1999</option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option><h2>年</h2></select>
        <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option><h2>月</h2>
    </select>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
    </select>
    <h2>
    <img src="C:\Users\Lenovo\Desktop\新建文件夹 (2)\新建文件夹 (2)Screenshot_20221015_002035_com.Shooter.ModernWars.jpg" alt="" title="" wight="100" height="60">
</h2>
</form>
<h2>提交文件</h2>
<input type="file">
</body>
</html>

结果如下展示
在这里插入图片描述

第二十六课 表格表单重要语言总结

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

2,<td rowspan=""></td>

3,

<input type="radio" name="gender"   id="woman"><label for="woman">女</label>
<input type="radio" name="gender"  id="man"><label for="man">男</label>

4，<checked> <disabled>

第二十七课 <div>与<span>

1，

<div>:全称division，分割分区的意思。 <div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落，标题，表格，图像等各种网页元素。即html中大多数的标签都可以嵌套在 <div>标签中， <div>还可以嵌套多层 <div>，用来将网页分割成独立的不同的部分，来实现网页的规划和布局

2，

<span>：用来修饰文字的，

3，

<div>与<span>都是没有任何默认样式的，需要CSS配合

第二十八课 CSS基础语法

1，格式：

选择器{ 属性1:值1;属性2:值2}

2，单位

px→像素(pixel) %→百分比

3，基本样式

width:宽
height：高
background-color：背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        div{ width: 40%; height: 460px;background-color: rgb(137, 193, 133);}
    span{ background-color: aqua;}
    </style>
</head>
<body>
    <div>
    <table border="1" cellpadding="30">
        <caption>天气预报</caption>
        <thead>
            <tr>
          <th>
                    日期
                </th>
                <th>
                    天气情况
                </th>
                <th>
                    出行情况
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2022年10月21日</td>
                <td>晴转多云</td>
                <td>适合出行</td>
            </tr>
                <td>2022年10月2日</td>
                <td>阴</td>
                <td>可能有雨</td>
        </tbody>
    </table>
<span>
这是天气预报表格
</span>
</div>
</body>
</html>

效果如下
在这里插入图片描述

第二十九课 CSS的引入方式

1，内联样式

style属性

 <div style= ></div>

2，内部样式

style标签
在html源文件下插入style标签使得文档内的<div>标签与之匹配

内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理.

第三十课 CSS的引入方式-外部样式

1，引入一个单独的CSS文件

css文件→文件名.css

2，link引入法

link在html源文件头中meat标签与title标签的中间

<link rel="stylesheet" href="./文件名.css">

其中，rel="stylesheet"代表引入文档的外部样式

3，@import引入法

在源代码的最后加入 <style> </style>标签形如

<style>@import url('./文件名.css'); </style>

@import引入法一般不使用

第三十一课 css颜色表示法

1，单词表示法：red blue green yellow

2，十六进制表示法

background-color: #ff0000;

3，rgb表示法

rgb（0,0,0）;
取值范围0~255

4，提取颜色工具

提取颜色工具下载地址：https://www.baidufe.com/fehelper

5,示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:100px ; height: 100px;background-color: #ff0000;" >红色</div>
    <div style="width:200px;height: 150px;background-color: blue;">蓝色</div>
</body>
</html>

在这里插入图片描述

第三十二课 CSS背景样式

background-color→背景颜色
background-image→背景图片

url(背景地址
默认：会水平垂直都铺满背景图

background-repeat→背景图片的平铺方式

repeat-x:x平铺
repeat-y:y平铺

background-position→背景图片的位置

xy使用方法

1，

用number+px表示图片大小

2，

用%表示图片所占背景的百分比
###3,
用单词表示图片位置
对于x：left,center,right
对于y：top,center,bottom

background-attachment→背景图随滚动条的移动方式

scroll:默认值（背景位置是安装当前元素进行偏移的）
fixed:（背景位置是按照浏览器进行偏移的）

第三十三课 利用滚动条移动方式实现视觉差网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document </title>
    <style>
      #div1{width: 800px;height: 499px; background-position:800px 499px; background-image:url(./95951.jpg) ;background-attachment: fixed;}
      #div2{width: 800px;height: 499px;  background-position:800px 499px;background-image:url(./95952\(1\).png) ;background-attachment: fixed;}
      #div3{width: 800px;height: 499px; background-position:800px 499px;background-image:url(./95953\(1\).png) ;}
      </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

第三十四课 CSS边框样式

1，主要语言

border-style:边框样式

solid:实线
dashed：虚线
dotted：点线

border-width:边框大小

px…

border-color:边框颜色

red #f00

div{width: 300px;height: 300px; border-style: dashed; border-color: red;border-width: 5px;}

2，边框也可以针对某一条边进行单独设置

div2{width: 600px;height: 900px; border-right-style: dashed; border-color: red;border-width: 5px;}

形如 border-right-style即表示容器的右边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div{width: 300px;height: 300px; border-style: dashed; border-color: red;border-width: 5px;}
        #div2{width: 600px;height: 900px; border-right-style: dashed; border-color: red;border-width: 5px;}
    </style>
</head>
<body>   
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

效果如下
在这里插入图片描述

第三十五课 用CSS框架实现三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width: 0px;height: 0px;border-bottom-style: solid;border-bottom-color:red ;border-bottom-width: 60px; border-right-style: solid;border-right-color:transparent ;border-right-width: 60px;border-left-style: solid;border-left-color:transparent ;border-left-width: 60px;border-top-style: solid;border-top-color:transparent;border-top-width: 60px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下
在这里插入图片描述

第三十六课 CSS文字样式

1，基本语言

font-family:字体类型

英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun

2，使用注意

a,设置多个备选字体类型以防止用户电脑没有相应的字体与网页匹配

b,在类似于Microsoft YaHei类型语言中，语言名称间存在空格，需要加上引号

第三十七课 字体大小粗细样式

1，基本语言

a，font-size 字体大小

默认大小：16px
写法：number（px）| 单词
在这里插入图片描述

b，font-weight 字体粗细

模式：正常（normal）加粗(bold)
写法：单词（normal，bold）
number（100，200，300…900）

其中100到500都是正常的，600到九百都是加粗的

c，font-style 字体样式

模式：正常（normal）斜体(italic)
写法：单词（normal，italic）

注：oblique也是表是斜体，用的比较少，了解即可

区别
1，italic带有倾斜属性的字体才可以设置倾斜操作
2，oblique没有倾斜属性的字体也可以设置倾斜操作

d，color 字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{font-family:SimSun,微软雅黑,'Times New Roman';}
       #div2{font-size: larger;}
       #div3{font-size:60px;}
       #div4{font-weight: 100;}
       #div5{font-weight: 500;}
       #div6{font-weight: 600;}
       #div7{font-weight: 900;}
       #div8{font-style: normal;}
       #div9{font-style: italic;}
       #div10{color: red;}

    </style>
</head>
<body>
    <p>一——这是第一段，以下为示例</p>
    <div id="div1">二——这是字体类型，宋体，微软雅黑，'Times New Roman'</div>
    <div id="div2">三——这是用单词larger表示的字体大小</div>
    <div id="div3">四——这是用number表示的字体大小，为60px</div>
    <div id="div4">五——这是用number表示的字体粗细，此时number为100</div>
    <div id="div5">六——这是用number表示的字体粗细，此时number为500</div>
    <div id="div6">这是用number表示的字体粗细，此时number为600</div>
    <div id="div7">这是用number表示的字体粗细，此时number为900</div>
    <div id="div8">这是正常的字体样式</div>
    <div id="div9">这是用italic表示的倾斜体</div>
    <div id="div10">这是红色的字体</div>
    <div id="div11"></div>
    <div id="div12"></div>
</body>
</html>

效果如下在这里插入图片描述

第三十八课 css段落样式

1，text-decoration：文本装饰

a，下划线：underline

b，删除线:line-through

c，上划线:overline

d,不添加任何装饰：none

注：添加多个文本修饰，各个修饰词之间不加逗号

e,文本大小写 text-transform

针对英文段落

小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p1{text-decoration: underline; text-transform:uppercase ;}
        #p2{text-decoration: line-through;  text-transform:lowercase;}
        #p3{text-decoration:overline ;
        text-transform: capitalize;}
    </style>
</head>
<body>
    <p id="p1">abcDEF</p>
    <p id="p2">abcDEF</p>
    <p id="p3">abcDEF</p>
</body>
</html>

效果如下
在这里插入图片描述

第三十九课 段落样式 文本缩进与对齐

1，主要语言

a,text-indent:文本缩进

首行缩进
em单位：相对单位，1em永远跟字体大小相同

b，text-align:对齐

方式：left,right,center,justify(justify是两端对齐)

第四十课 段落样式 行高

基本语言

line-height：定义行高

默认行高不是固定的，而是随着字体的大小在不断的变化

取值

a，number（px）

b，scale（比例值，跟文字大小成比例）

第四十一课 段落样式

1，基本语言

letter-spacing：字之间的间距
word-spacing：词之间的间距→针对英文段落

2，英文和数字不自动折行的问题

a，word-break:break-all;(非常强烈的折行

b，word-wrap：break-word；（不是那么强烈 的折行，会产生一些空白区域）

第四十三课 css复合样式

一个css属性控制多种样式，叫做复合样式

复合样式

a，background：
在这里插入代码片
b,border
c,font

复合样式的写法是通过空格的方式实现的，有的不需要关心顺序，例如background，border；有的需要关心顺序，例如font

a, background

`        div{background: red url(./) repeat center center}`

b,border

div{ border: 30px blue dashed}

c,font

最少要两个值 size family
font复合型css需要依照这样的顺序weight style size /line height family

其中，weight与style位置可以对调
font复合型不能设置字体颜色

 div{ font: 30px/40px 宋体;}

注

尽量不要将复合样式与单一样式混写，如果一定要混写，那么一定要先写复合样式再写单一样式，这样才不会被覆盖掉

第四十四课 css选择器 ID选择器

ID选择器

css中：#名称{}
html中：id="名称"

注：
1，id是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的
2，命名的规范，由字母，下划线，中划线，数字（并且第一个不能是数字）
3，命名方式：驼峰式

驼峰式：小驼峰：searchButton第一个单词字母是小写，第二个单词字母是大写
大驼峰：SearchButton两个单词首字母都是大写

短线写法：search-small-button
下划线写法：search_small_button

第四十五课 CLASS选择器

CLASS选择器

css中：.名称{}
html中：class="名称"

注：
1， class选择器是可以复用的。
2，可以添加多个class样式
3，多个样式的时候，样式的优先级是根据css决定，而不是class中的属性
4，标签+类的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box{ background-color: red;}
    p.content{font-size: 90px;}
    </style>
</head>
<body>
    <div class="box content" >第一个块</div>
    <div class="box">第二个块</div>
    <p class="box content">第三个块</p>
    <h2 class="box">第四个块</h2>

</body>
</html>

在这里插入图片描述

注意
观察课发现“第一个块”与“第三个块”的选择器都是class="box content"；而只有“第三个块”字体是90px。这是class选择器的特性，因为在css语言中表达是 p.content{font-size: 90px;}，标签前面有一个“p”，此时只有p标签可以显示此class标签的效果

氢生锈了
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
「HTML和CSS入门指南」option 标签详解
a451319296的博客
06-04 4965
option 标签是一个重要的标签，在 HTML 中用于创建下拉列表中的选项。使用 option 标签可以帮助您定义和呈现下拉列表中的各个选项。在使用 option 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能、验证表单数据，并避免大量选项问题。
html option的css,Option css
weixin_34044446的博客
06-18 277
Option cssvar myCombo, myCombo2, myCombo3;function doOnLoad() {// from scriptmyCombo = new dhtmlXCombo("combo_zone");myCombo.addOption("1", "Walking through the city", "color:red;", null, true);myComb...
html option的css,option60
weixin_34696080的博客
06-18 533
路由器中的缺省域名，option 60，opotion 138分别路由器中的缺省域名，option 60，opotion 138分别是什么意思？干嘛用的缺省域名含义： nslookup可以指定查询的类型，可以查到DNS记录的生存时间还可以指定使用哪个DNS服务器进行解释。在已安装TCP/IP协议的电脑上面均可以使用这个命令。主要用来诊断域名系统 (DNS) 基础结构的信息。Nslookup(nam...
css基础用法及选择器
qh075的博客
09-29 912
background-repeat:no-repeat(图像不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/repeat(平铺)背景平铺。background-repeat:no-repeat(图像不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/repeat(平铺)背景平铺。新建css一个文件，通过在图像下方做标识，如下图。
Web前端 | HTML引入CSS样式的三种方式
m0_61933976的博客
10-04 1万+
HTML引入CSS样式的三种方式
html+css基础.md
02-25
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是...
韩顺平html+css+javascript笔记完整版
01-30
提供的压缩包文件中包含了`javascript学习笔记.docx`、`html+css+javascript学习笔记.docx`等文档，这些都是宝贵的自学资料。它们可能详细记录了HTML标签的使用、CSS选择器及样式规则、JavaScript语法和常见函数，...
B站笔记-HTML+CSS.rar
04-15
1. **HTML元素**：HTML由一系列的元素组成，每个元素都有其特定的标签，如`<p>`代表段落，`<img>`用于插入图像，`<a>`定义超链接等。 2. **HTML属性**：元素可以有属性，例如`src`用于指定图片或视频的源路径，`href...
史上最经典的HTML+CSS笔记.rar
04-24
综上所述，这份"史上最经典的HTML+CSS笔记"应包含了从基础语法到高级特性的全面教程，无论是初学者还是有一定经验的开发者，都能从中受益。通过markdown格式阅读，可以清晰地查看和理解代码示例，方便学习和参考。
HTML和CSS的学习笔记
最新发布
02-09
HTML（HyperText Markup ...通过实践这些笔记和教程，你可以逐步掌握创建美观、响应式的网页所需的技能。同时，不断探索新的前端技术，如JavaScript、jQuery、Vue.js或React.js，将使你在网页开发领域更加得心应手。
前端小白的html+css入门笔记
weixin_43403543的博客
03-16 1251
mata标签规定字符集 ！！规定的字符集和编辑软件保存发类型要一致（utf-8/gbk） Utf-8：包含所有语言，不包含加载速度。 Gbk：大量中文/要求速度
select中的option有selected属性但是没有选中_你可能还不知的 7 个 CSS 好用的属性...
weixin_39633102的博客
01-19 592
学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。因此，在这篇文章中，向你介绍7个 比较少见且好用的 CSS 属性，希望对你有所帮助。1. vertical-alignCSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（tab...
select中的option有selected属性但是没有选中_这五个有用的 CSS 属性完全被我忽视了...
weixin_33960655的博客
01-19 791
作者 | Desiré译者 | 苏本如，责编 | 郭芮头图 | CSDN 下载自视觉中国出品 | CSDN(ID：CSDNnews)以下为译文：各位网友，大家好！?今天，我想在这里和大家分享一些我很晚时候才知道的一些CSS属性，在此之前，没有人告诉我这些属性的存在。也许你们和我不一样，已经了解了这些属性。闲话少说，让我们进入正题吧：?禁用用户选中一个元素(element)的文本使用属性user-s...
HTML+CSS学习（二）
ifjia的博客
10-27 1060
接上一篇 专辑 无数 天外来物 塵 可 不爱我 木偶人 关于我 彩券 慢半拍 2、属性 ③、表单标签 inp
html select css美化
passport_daizi的博客
09-25 1万+
html： ---请选择-- 男 女   css:   .shortselect{ background:#fafdfe; height:28px; width:180px; line-height:28
CSS：改变select、option标签的默认样式
golden_wheat
03-27 5万+
CSS：select标签、option标签 select标签和option标签是自带有CSS样式的 1、用纯CSS方式去除默认的select标签 方法一：
HTML中select下拉框默认样式修改
热门推荐
薛小强Forever
12-07 5万+
本方法只修改下拉框样式，不修改option样式，修改后的样式： 思路： 1.先去掉select本身原有的样式。 2.用一个元素（div/lebal等）作为select的父元素。 3.在select父元素后面用：after做一个新的样式。代码如下：<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <html> <title>HTML+CSS+JavaScript笔记 <link rel="stylesheet" href="demo.css"> /* 在demo.css中定义的样式 */ div { color:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值