HTML+CSS基础知识2

aaa小葵

已于 2022-10-27 16:57:38 修改

阅读量1.6k

点赞数

分类专栏：前端文章标签： html css 前端

于 2022-10-27 16:47:22 首次发布

本文链接：https://blog.csdn.net/m0_74033027/article/details/127551381

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML+CSS基础知识2

1.嵌套列表

列表之间可以互相嵌套形成多层级列表
eg.

<ul>
    <li>江苏省
        <ul>
        <li>南京市</li>
        <li>扬州市</li>
    </li>
    <li>安徽省
        <li>合肥市</li>
        <li>黄山市</li>
    </ul>
    </li>
</ul>

ul/li嵌套

  <dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>江苏省</dt>
                <dd>扬州市</dd>
                <dd>南京市</dd>
            </dl>
            <dl>
                <dt>安徽省</dt>
                <dd>合肥市</dd>
                <dd>黄山市</dd>
            </dl>
        </dd>   
</dl>

dl、dt、dd嵌套列表

<dl>
        <dt><strong>好美味小吃</strong></dt>
        <dd>
            <ul>
                <li>小吃类
                    <ul>
                        <li>煮面干</li>
                        <li>蛋炒饭</li>
                    </ul>
                        </li>
                <li>卤味类
                    <ul>
                        <li>鸭肠</li>
                        <li>鱿鱼</li>
                    </ul>                                      
                </li>
              <li>套餐类
                <ul>
                    <li>猪肉拌饭</li>
                    <li>猪脚拌饭</li>

                </ul>
              </li>
              <li>炖罐类
                <ul>
                    <li>羊肉枸杞</li>
                    <li>猪心莲子</li>
                </ul>
              </li>
                
            </ul>
</dl>

（嵌套列表必须要嵌套完整，内部依旧使用完整的结构体系）

2.表格标签

<table>:表格的最外层容器

<tr>：定义表格行

<th>：定义表头

<td>：定义表格单元

<caption>：定义表格标题

语义化标签:<tHead>``<tBody>``<tFood>

注：在一个table中，<tHead><tFood>只能出现一次，<tBody>可以出现多次

 <table>
        <caption>天气预报</caption>
     <tHead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr> 
     <tHead/>  
     <tBody>    
        <tr>
            <td>2020.01.02</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td>2020.01.03</td>
            <td>雨</td>
            <td>不宜出行</td>
        </tr>
     <tBody/>    
    </table>

3.表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

colspan合并列

rowspan:合并行

align:左右对齐方式（left、center、right）

valign:上下对齐方式（top、middle、bottom）

 <table border="2">

<table border="2" cellpadding="25">

单元格内空间

<table border="2" cellpadding="25" cellspacing="12">

单元格之间的空间
colspan和rowspan

<table border="2" cellpadding="25" cellspacing="12">
        <caption>天气预报</caption>
        <tr>
            <th>日期</th>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr> 
        <tr>
            <td>2020.01.02</td>
            <td>白天</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td>2020.01.03</td>
            <td>白天</td>
            <td>雨</td>
            <td>不宜出行</td>
        </tr>
    </table>

利用colspan后

 <th colspan="2">日期</th>

合并列

<table border="2" cellpadding="25" cellspacing="12">
        <caption>天气预报</caption>
        <tr>
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr> 
        <tr>
            <td>2020.01.02</td>
            <td>白天</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td>2020.01.02</td>
            <td>夜晚</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td>2020.01.03</td>
            <td>白天</td>
            <td>雨</td>
            <td>不宜出行</td>
        </tr>
        <tr>
            <td>2020.01.03</td>
            <td>夜晚</td>
            <td>雨</td>
            <td>不宜出行</td>
        </tr>
    </table>

利用rowspan后

<tr>
            <td rowspan="2">2020.01.02</td>
            <td>白天</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
         <tr>
            <td>夜晚</td>
            <td>晴</td>
            <td>适合出行</td>
        </tr>
        <tr>
            <td rowspan="2">2020.01.03</td>
            <td>白天</td>
            <td>雨</td>
            <td>不宜出行</td>
        </tr>

使用rowspan
合并行
align/valign

<table align="right">

左右对齐
练习：

<table border="3" cellpadding="5">
        <tr>
            <th>班次名称</th>
            <th>科目</th>
            <th>授课内容</th>
            <th>增值服务</th>
            <th>课时</th>
            <th>价格</th>
        </tr>
        <tr valign="middle">
            <td rowspan="3">真题解析班</td>
            <td>行测+申论</td>
            <td>全科历年真题</td>
            <td rowspan="3">课后模拟案卷</td>
            <td>48</td>
            <td>1280</td>
        </tr>
        <tr>
          <td>行测</td>
          <td>行测真题</td>
          <td>32</td>
          <td>1520</td>
        </tr>
        <tr>
            <td>申论</td>
            <td>申论真题</td>
            <td>25</td>
            <td>3620</td>
        </tr>
        <tr valign="midddle">
            <td rowspan="3">高分技巧班</td>
            <td>行测+申论</td>
            <td>全技巧</td>
            <td rowspan="3">入学测评</td>
            <td>48</td>
            <td>1235</td>
        </tr>
        <tr>
            <td>行测</td>
            <td>技巧强化</td>
            <td>20</td>
            <td>5210</td>
        </tr>
        <tr>
            <td>申论</td>
            <td>理论强化</td>
            <td>62</td>
            <td>3620</td>
        </tr>
    </table>

表格标签的应用

4.表单标签

<form>:表单的最外层容器

<input>（单标签）:标签用于手机用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框…（无嵌套规范）

<form action="./html/list.html">
    /*action作为下述文件的上传地址,提供了一个地址的作用*/
    <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="gender">是
    <input type="radio" name="gender">否
    /*利用name来告诉系统这两者是一个属性*/
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交和重置按钮</h2>
    <input type="submit">
    <input type="reset">
  </form>

表单标签

textarea:多行文本框

 <h2>多行文本框</h2>
    <textarea cols="20" rows="20"></textarea>

textarea

<select>/<option>:下拉菜单

<select>
    <option selected disabled>请选择</option>
    <option>巧克力</option>
    <option>菠萝蜜</option>
    <option>苹果派</option>
</select>
<select size="2">
    <option>巧克力</option>
    <option>菠萝蜜</option>
    <option>苹果派</option>
</select>
<select multiple>
    <option>巧克力</option>
    <option>菠萝蜜</option>
    <option>苹果派</option>
</select>

select/option

<lable>:辅助表单

<h2>单选框</h2>
<input type="radio" name="gender" id="yes"><label for="yes">是</label>

  <input type="radio" name="gender" id="no"><label for="no">否</label>

label
练习：

<h4>设置密码：</h4> <input type="password">
<h4>真实姓名：</h4><input type="text">
<h4>性别：</h4> 
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h4>生日：</h4>
<select>
    <option selected disabled>请选择</option>年
    <option>2020.01.23</option>
</select>
<select>
    <option selected disabled>--</option>月
</select>
<select>
    <option selected disabled>--</option>日
</select>
<h4>我现在：</h4>
<select>
    <option selected disabled>请选择身份</option>(非常重要)
</select>
<h4>验证码：</h4> <input type="text">

5.表格与表单的组合

示例：

<form action="">
        <table border="2" cellpadding="5">
            <tr>
                <td rowspan="4">总体信息</td>
                <td colspan="2" align="center">用户注册</td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" placeholder="请输入用户名">
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" placeholder="请输入密码">
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="submit">
                    <input type="reset">
                </td>
                  
            </tr>
        </table>
    </form>

(表格一般写在表单内部，因为表单无嵌套要求，但表格有)

6.`<div>`与`<span>`

<div>（块）
div全称为division，用来划分区域，类似于一个盒子，可以装段落、标题、图像等各种构成网页的元素。HTML中多数标签都可以嵌套在div中，div也可以嵌套多层div，将网页分割为不同的规划布局
<span>(内联)
用来修饰文字，<div>和<span>都是没有默认样式的，需要css配合才行

<div>
        <h2> <a href="#">HTML 教程</a></h2>
        <a href="#"><img src="images/1.png.PNG" alt="" weight="80" height="80"></a>
         <p>
            现在开始学习 HTML!HTML 实例 学习100 个实例!使用我们的编辑器,HTML 测验!HTML...
        </p>
        <a href="#">www.w3school.com.cn/html/ind.....</a>

    </div>

7.css的基础语法

格式：div{属性1：值1；属性2：值2} span{属性1：值1；属性2：值2}
同时对多个不同块进行不同的样式修饰可以利用id属性<div id="">

单位：px–像素pixel、%–百分比（外容器–600px 当前容器50%–300px）

基本样式：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>Document</title>
    <style>
        div{width: 50px;height: 90px;background-color: rgb(174, 174, 227);}
        span{background: rgb(55, 225, 152);}
    </style>
</head>
<body>
    <div>俄罗斯方块</div>
    <span>乐高玩具</span>
</body>
</html>

css
在这里插入图片描述

8.css样式的引入方式

内联（行间、行内）样式：在html标签上添加<style>属性来实现
内部样式：在<style>标签内添加的样式

注：内部样式的优点，可以复用代码，符合w3c的规范标准，进行结构和样式分开处理
外部样式：引入一个单独的css文件 name.css

方法一：通过标签引入外部资源，link标签中的rel属性指定资源跟页面的关系；herf属性指定资源地址，
rel属性规定当前文档与被链接文档间的关系
（只有rel属性的stylesheet：【外部样式表】得到所有浏览器的支持，其他值只得到部分的支持）

rel属性可完成的功能

方法二：@import引入外部链接

  <style>
        @import url("./comment.css")
    </style>

9.css中的颜色表示法

单词表示法：red、blue
十六进制表示法：#00000
rgb表示法：rgb（255,255,255）
取值范围0~255
获取颜色的工具：

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

photoshop工具

10.css背景样式

<background-color>：背景颜色

<background-image>：背景图片（css作用的区域的背景图，出了css作用区域则不显示）
<url>（背景默认地址）
默认都会水平垂直均铺满
<background-repeat>：背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 不平铺
repeat （默认值，全都平铺）

<background-position>：背景图片的位置
x y：number（px、%）
单词： x：left、center、right
y：top、center、bottom

<background-attachment>：背景图随滚动条的移动方式
scroll：默认值（背景位置按照当前元素进行偏移）背景动
fiexd：背景位置按照浏览器进行偏移，（覆盖）背景不动

<style>
        div{width: 200px;height: 200px;background-color: rgb(243, 150, 150);
        background-image:url(./QQ图片20221026145944.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: scroll;
        }
        </style>

在这里插入图片描述

视觉差的实现:通过background-attachment来实现

scroll图片跟随滚动条滚动在这里插入图片描述
fixed图片不动

11.css背景样式

<border-style>：边框样式
solid：实线
dashed：虚线
dotted：点线
<border-width>：边框粗细
px…
<border-color>：边框颜色
red、#0000…
边框也可以针对某一条边特定设置：border-left/right/top/bottom-

<style>
        div{width: 200px;height: 200px;background-color: rgb(240, 174, 174);
            border-width: 30px;
            border-bottom-style: dashed;
            border-bottom-color: aqua;
            border-right-style: dotted;
            border-right-color: aquamarine;
            border-top-style: solid;
            border-top-color: blue;
        }
        

    </style>

在这里插入图片描述
利用border属性实现三角形

<style>
        div{width: 0px;height: 0px;
           border-top-color: aliceblue;
           border-top-width: 30px;
           border-top-style: solid;
           border-bottom-color: aliceblue;
           border-bottom-width: 30px;
           border-bottom-style: solid;
           border-left-color: rgb(242, 136, 159);
           border-left-width: 30px;
           border-left-style: solid;
           border-right-color: aliceblue;
           border-right-width: 30px;
           border-right-style: solid;
        }
    </style>

在这里插入图片描述

12.css文字样式

<font-family>：字体类型
英文字体：Arial，‘Time New Roman’
中文字体：微软雅黑，宋体

中文字体的英文名称：微软雅黑’Microsoft YaHei’
宋体：SimSun
英文字体只针对英文，但中文样式可以中英文字体两者都对应
衬线体、非衬线体
(设置多个字体：防止计算机没有部分字体;
字体中出现空格时要用’'单引号引起来)

 <style>
        #div1{font-family: Arial;}
        #div2{font-family: 'Times New Roman';}
    </style>
</head>
<body>
    <div id="div1">我爱阅读</div>
    <p>我爱阅读</p>
    <div id="div1">I like reading</div>
    <p>I like reading</p>
    <div id="div2">我爱阅读</div>
    <p>我爱阅读</p>
    <div id="div2">I like reading</div>
    <p>I like reading</p>
</body>

在这里插入图片描述
<fond-size>：字体大小
默认写法：px

单词写法：在这里插入图片描述
注：字体大小一般为偶数
<fond-weight>：字体粗细

模式：正常–normal

加粗–bold

利用number（px）100_{500都是普通，600}900加粗

<fond-style>：字体样式

正常：normal

斜体：italic带有倾斜属性的字体可以设置

oblique没有倾斜属性的也可以设置倾斜操作

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: 宋体;font-weight: 700;font-size: 18px;color: brown;}
        #div2{font-size: 16px;color: blueviolet;font-style: italic;}
        #div3{font-weight: bold;color: aqua;}
    </style>
</head>
<body>
    <div id="div1">
        <h1>喜羊羊与灰太狼</h1>
    </div>
    <div id="div2">
        <h2>主题介绍</h2>
        <p>《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，
            以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，
            讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。</p>
    </div>
    <div id="div3">
        <h2>内容梗概</h2>
        <p>
        截至2022年7月,《喜羊羊与灰太狼》共播出作品37部2719集主线25部2042集、
        网络短剧12部677集、电影10部、舞台剧5部</p>
    </div>

</body>
</html>

在这里插入图片描述

13.css段落样式

<text-decoration>：文本装饰

取值：下划线underline、删除线line-through、上划线overline、不添加任何装饰none
添加多个：通过空格添加

<text-transform>：文本大小写（仅针对英文）

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

<text-indent>：文本缩进

首行缩进
em单位：相对单位

<text-align>：文本对齐方式

left、right、center、justify（两端点对齐）

<line-height>：定义行高
在这里插入图片描述

定义：一行文字的高度，上边距和下边距相等
默认：默认行高不是固定值，根据当前字体大小不断变化
取值：number（px）|比例值跟文字大小成比例

<letter-spacing>：字之间的间距

<word-spacing>：词之间的间距（针对英文）

强行折行：针对英文和数字
<word-break：break-all>（非常强烈的折行）
<work-warp：break-word>（没有那么强烈的折行，会产生一些空白区域）

eg.

<!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>
        h2{font-size: 20px;font-weight: bold;color: brown;text-align: center;}
        #div1{font-size: 18px;color: aqua;font-style: italic;text-indent: 2em;}
        #p1{color: blueviolet;text-align: justify;text-indent: 2em;line-height: 10px;}
        #p2{color: blue;text-decoration: underline;text-transform: capitalize;text-align: center;}
        #p3{text-indent:1em;text-align: left;text-transform: lowercase;
            color: rgb(236, 142, 27);text-decoration: line-through;}
        #div2{width: 200px;px;height: 200px; word-break:break-all;
            border-color: brown;border-width: 5px;border-style: solid;}

    </style>
</head>
<body>
    <h2>海蒂与爷爷</h2>
    <div id="div1">基本信息</div>
    <p id="p1">《海蒂和爷爷》是映欧嘉纳影业公司出品德国剧情电影，由阿兰·葛斯彭纳执导，
        佩特拉·比翁迪娜·沃尔普编剧，阿努克·斯特芬、伊莎贝尔·奥特曼、安娜·申斯等主演，
        该片于2015年12月10日在德国上映于2019年5月16日在中国内地上映
    </p>
    <div id="div1">角色介绍</div>
    <p id="p2">
        海蒂是个聪明伶俐，且具有乐观开朗的性情，心地善良的孩子。一岁时即失去双亲，
        因此到五岁之前都是由姨母照顾。由于姨母必须出外工作，
        便把她带至居于阿尔卑斯山的爷爷那里。
        在山上的生活让海蒂自由奔放的性格彻底散发，并和牧羊少年成了好朋友
    </p>
    <div>影片评价</div>
    <p id="p3">影片《海蒂和爷爷》中的故事在不同的空间场景中上演，
        阿尔卑斯山和法兰克福这两座不同的城市，分割成主人公所经历的两段不同的故事，
        而每一阶段发生的故事对应了年复一年的时光。
        空间与时间的循环不仅仅是小海蒂成长的标志，
     </p>
     <div id="div2">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
     </div>
    </body>
</html>

在这里插入图片描述

14.css复合样式

一个css属性只控制一种样式----单一样式

一个css属性控制多种样式----复合样式

（注意两者尽量不要混写，如果非要混写，一定要先写复合样式再写单一样式）

复合写法是通过空格实现的，有的无关顺序，如background、border；有的有关顺序，如font（至少要有两个值size family ，顺序不可调换）

size family必须按顺序放在最后

weight style size family √

style weight size family √

weight style/line-height family √

<style>
        div{width: 300px;height: 300px;
        background: rgb(223, 178, 178) url(./QQ图片20221026145944.jpg) no-repeat center center;
        border:darkblue dotted 4px ;
        font:bold italic  20px 宋体;
        text-align: center;
        }
    </style>

在这里插入图片描述

15.css选择器

idx选择器

css：#elem{} ---- html：id=“elem”

注：一个页面中，id值是唯一的；
在这里插入图片描述
命名规范：字母 _ - 数字（命名的第一位不能是数字）

<div id="word">  (√)
<div id="wor_d"> (√)
<div id="wor-d"> (√)
<div id="word1"> (√)
<div id="2word"> (×)

写法：

驼峰写法：searchButton(小驼峰) SerchButton(大驼峰)searchSmallButton

短线写法：search-small-button

下划线写法：search_smaal_button

class选择器

css: .elem{}----html: class=“elem”

注：1.claas选择器可以复用

2.可以添加多个class样式

3. 多个样式的时候，样式的优先根据css中的顺序决定，而不是class属性中的顺序

4.标签+类的写法<p.box>等

aaa小葵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础知识2

HTML和css的基础知识
复制链接

扫一扫

专栏目录

HTML+CSS基础知识2

HTML+CSS基础知识2

1.嵌套列表

2.表格标签

3.表格属性

4.表单标签

5.表格与表单的组合

6.<div>与<span>

7.css的基础语法

8.css样式的引入方式

9.css中的颜色表示法

10.css背景样式

11.css背景样式

12.css文字样式

13.css段落样式

14.css复合样式

15.css选择器

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

6.`<div>`与`<span>`