HTML+CSS学习（二）

ifjia

已于 2022-10-27 13:07:48 修改

阅读量1k

点赞数 2

文章标签： html css 学习

于 2022-10-27 12:16:17 首次发布

本文链接：https://blog.csdn.net/ifjia/article/details/127466496

版权

接上一篇

二、主要内容

1、HTML+CSS之拨云见日

HTML

①、列表标签

注：列表之间可以互相嵌套形成多层列表

例：
<ul>
   <li>
      江苏
      <ul>
          <li>苏州</li>
          <li>无锡</li>
          <li>南京</li>
      </ul>
   </li>
   <li>
       安徽
       <ul>
           <li>淮北</li>
           <li>合肥</li>
           <li>阜阳</li>
       </ul>
   </li>
</ul>

<dl>
    <dt>中国</dt>
    <dd>
        <dl>
            <dt>江苏</dt>
            <dd>苏州</dd>
            <dd>南京</dd>
            <dd>无锡</dd>
        </dl>
        <dl>
            <dt>安徽</dt>
            <dd>合肥</dd>
            <dd>黄山</dd>
            <dd>淮北</dd>
        </dl>
    </dd>
 </dl>

②、表格

1、标签

<table>:表格的最外行容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>:定义表格标题
注：之间有嵌套关系，要符合嵌套规范

 例：<table>
        <caption>专辑</caption>
        <tr>
            <th>无数</th>
            <th>天外来物</th>
            <th>塵</th>
        </tr>
        <tr>
            <td>可</td>
            <td>不爱我</td>
            <td>木偶人</td>
        </tr>
        <tr>
            <td>关于我</td>
            <td>彩券</td>
            <td>慢半拍</td>
        </tr>
    </table>

专辑
无数	天外来物	塵
可	不爱我	木偶人
关于我	彩券	慢半拍

语义化标签：<tHead> <tBody>  <tFood>
注：只代表语义化，并不会给网页带来效果上的影响

 <table>
        <caption>专辑</caption>
        <tHead>
        <tr>
            <th>无数</th>
            <th>天外来物</th>
            <th>塵</th>
        </tr>
        </tHead>
        <tBody>
        <tr>
            <td>可</td>
            <td>不爱我</td>
            <td>木偶人</td>
        </tr>
        <tr>
            <td>关于我</td>
            <td>彩券</td>
            <td>慢半拍</td>
        </tr>
        </tBody>
        <tFood>
            
        </tFood>
    </table>
    注：在一个table中，<tHead> <tFood>只能出现一次，<tBody>可多次出现

2、属性

<border>:表格边框
<cellpadding>：单元格内的空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行
<colspan>：合并列
<align>：左右对齐方式（left,center,right）
<valign>：上下对齐方式(top,middle,bottow)

<table border="2" cellpadding="40" cellspacing="40">
        <caption>专辑</caption>
        <tHead>
        <tr align="right">
            <th colspan="2">无数</th>
            <th>天外来物</th>
            <th>塵</th>
        </tr>
        </tHead>
        <tBody>
        <tr valign="bottow">
            <td rowspan="2">可</td>
            <td>你不是一个人</td>
            <td>不爱我</td>
            <td>木偶人</td>
        </tr>
        <tr>
            <td>关于我</td>
            <td>男二号</td>
            <td>彩券</td>
            <td>慢半拍</td>
        </tr>
        </tBody>
        <tFood>

        </tFood>
    </table>

③、表单标签

input

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

<form action="">    <action>标签后加表单提交的地址

1、 text

例：
    <form>
        <h2>账号：</h2>
        <input typr="text">
        <h2>密码：</h2>
        <input typr="password">
    </form>

输入框中的提示词（placeholder）

        <h2>账号：</h2>
        <input type="text" placeholder="请输入账号"> 
        <h2>密码：</h2>
        <input type="password" placeholder="请输入密码" >

2、 checkbox

<h2>选择</h2>
        <input type="checkbox">周杰伦
        <input type="checkbox">薛之谦
        <input type="checkbox">林俊杰

初始就有选项被选中

<h2>选择</h2>
        <input type="checkbox" checked>周杰伦
        <input type="checkbox">薛之谦
        <input type="checkbox">林俊杰
        若想初始就有选项被选中可添加<checkeed>标签来完成

禁止选择(disabled)

<h2>选择</h2>
        <input type="checkbox">周杰伦
        <input type="checkbox">薛之谦
        <input type="checkbox" disable>林俊杰

3、radio

<h2>单选</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
注：使用单选时，要加上<name>标签使它们成为一组选项，且<name>标签的值是自定义

4、file

 <h2>上传文件</h2>
 <input type="file">

5、submit reset

        <h2>提交重置</h2>
        <input type="submit">
        <input type="reset">

textarea

<textarea>（双标签）:多行文不能框

 <form>
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
 </form>

select，option

<select>,<option>（双标签）:下拉菜单（组合标签）

<form>
  <h2>下拉菜单</h2>
   <select>
    <option>北京</option>
    <option>江苏</option>
    <option>安徽</option>
   </select>
</form>

1、其他选项为初始项(selected)

<form>
  <h2>下拉菜单</h2>
   <select>
    <option>北京</option>
    <option selected>江苏</option>
    <option>安徽</option>
   </select>
</form>

2、初始显示提示词

<form>
<h2>下拉菜单</h2>
   <select>
    <option selected disabled>请选择</option>
    <option>北京</option>
    <option>江苏</option>
    <option>安徽</option>
   </select>
</form>

3、其他属性

size

<form>
        <h2>下拉菜单</h2>
        <select size="3">
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>江苏</option>
            <option>安徽</option>
        </select>
 </form>

multiple:多选
注：
input标签type属性中的file也可加上muliiple
选择多项文件上传

例 <input type="file" multiple>

<form>
        <h2>下拉菜单</h2>
           <select multiple>
            <option>北京</option>
            <option>江苏</option>
            <option>安徽</option>
           </select>
        </form>

label

<label>:辅助表单（无实际显示效果）

1、扩大点击范围（name,id,for）

注：点击文本也可选择

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

④、表格表单组合

表格表单之间可以互相组合形成数据展示效果
注： (表示空格）

<form>
        <table border="1" cellpadding="30">
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码</td>
                    <td><input typr="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

⑤、div 和 span

div（块）:
div 全称为 division ，“分割、分区”的意思，< div ＞标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即 HTML 中大多数的标签都可以嵌套在＜ div ＞标签中，< div ＞中还可以嵌套多层＜ div >，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联）：
用来修饰文字的。
注：div与span是没有任何默认样式的，需配合CSS才行

CSS

①、基础语法

格式：选择器{属性1：值1；属性2：值2}
单位：
px——>像素（pixel）
%——>百分比
外容器：600px，当前容器：50%—>300px
基本样式：width，height，background-color
CSS注释:/css注释内容/(shift+alt+a)或(ctrl+/)
div

<!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:100px;height:100px;background-color: aquamarine;}
    </style>
</head>
<body>
    <div>薛之谦</div>
</body>
</html>

span

<!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>
        span{width:100px;height: 100px;background-color: antiquewhite;}
    </style>
</head>
<body>
    <span>薛之谦</span>
</body>
</html>

②、内联样式与内部样式

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

内部样式：在< style >标签内添加的样式
注：内部样式的优点：可以复用代码

内联样式：
<div style="width:100px; height:100px;background-color:aliceblue">哈哈哈</div>

内部样式：
<style>
        div{width:100px;height:100px;background-color: aquamarine;}
</style>
    <div>薛之谦</div>

<!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:100px ;height: 100px;background-color: aqua;}
    </style>
</head>
<body>
    <div>哈哈哈</div>
    <div>又是哈哈哈</div>
</body>
</html>

③、外部样式

引入·一个单独的CSS文件——name.css （引入的文件为外部文件）

link

<link>:通过link标签引入外部资源
rel属性：指定资源跟页面的关系
href属性：资源地址

例：
<link rel="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./commom.css">
    <title>Document</title>

@import

注:该方式有很多问题，不建议使用

<title>Document</title>
    <style>
        @import url(./common.css);
    </style>

link和@import的区别

④、CSS中的颜色表示方法

提取颜色方法：FB ，Photoshop工具

单词表示法

十六进制表示法

（0—9，a—f）
例：#000000 #ffffff #ff0000

 <style>
       div{background-color: #000000;}
    </style>
</head>
<body>
    <div>哈哈哈</div>
    <div>又是哈哈哈</div>
</body>
</html>

RGB三元色表示法

取值范围：0—255
例：rgb（0,0,0; rgb(255,255,255);

<style>
        div{background-color: rgb(255,255,255);}
    </style>
</head>
<body>
    <div>哈哈哈</div>
    <div>又是哈哈哈</div>
</body>
</html>

⑤、CSS背景样式

background-color:背景颜色
background-image：背景图片

<style>
div{background-image:url(./img/dog.jpg);}
</style>
默认：水平垂直都铺满背景图

background-repeat：背景图片的平铺方式
repeat-x（x轴平铺）
repeat-y（y轴平铺）
repeat (x,y都平铺)
no-repeat （都不平铺）

<style>
div{background-repeat:repeat-x;}
div{background-repeat:repeat-y;}
div{background-repeat:no-repeat;}
</style>

background-position：背景图片的位置

x y(number:px或%）

<style>
div{background-position:100px 50px;}
</style>

x轴：left center right
y轴：top center bottom(单词）

<style>
div{background-position:left top;}
</style>

background-attachment：背景图随滚动条的方式
scroll:默认值（背景位置按照当前元素进行偏移）
fixed（背景位置按照浏览器进行偏移）

<style>
        body{height: 2000px;} （滚动条）
        div{background: attachment scroll ;}
    </style>

⑥、背景实现视觉差效果

#号 id属性

 <style>
        #div1{width:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;}
        #div2{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;}
        #div3{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>

⑦、CSS边框样式

border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框的大小（px）
border-color:边框的颜色（red #ff0000）
注：针对某一条边进行单独设置

边框：
<style>
       div{width:300px;height:300px;border-style: solid/dashed/dotted;border-color: antiquewhite;border-width: 1px;}
    </style>

注针对某一条边进行单独设置
<style>
   div{width:300px;height:300px;border-right-style:dotted;border-right-color: antiquewhite;border-right-width: 1px;}
    </style>

三角形：
   <style>
       div{width:0px;height:0px;
        border-top-style:solid;
        border-top-color: white;
        border-top-width: 30px;
        border-right-style:solid;
        border-right-color: red;
        border-right-width: 30px;
        border-bottom-style:solid;
        border-bottom-color: white;
        border-bottom-width: 30px;
        border-left-style:solid;
        border-left-color: white;
        border-left-width: 30px;
    }
    </style>

透明颜色 transparent

<style>
       div{width:0px;height:0px;
        border-top-style:solid;
        border-top-color: transparent;
        border-top-width: 30px;
        border-right-style:solid;
        border-right-color: red;
        border-right-width: 30px;
        border-bottom-style:solid;
        border-bottom-color: transparent;
        border-bottom-width: 30px;
        border-left-style:solid;
        border-left-color: transparent;
        border-left-width: 30px;
    }
    </style>

⑧CSS文字样式

font-family:字体类型
英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑（‘Microsoft Yahei’），宋体(SimSun)

英文：<style>
        div{font-family: Arial;}
    </style>
</head>
<body>
    <div>hahaha</div>
中文： <style>
        div{font-family: 宋体;}
    </style>
</head>
<body>
    <div>哈哈哈</div>

衬线体与非衬线体
注意事项：
1、设置多字体方式 (按照系统拥有的优先显示）
2、引号问题（字体类型中含有空格时需要加单引号）
font-size：字体大小
默认：16px

 div{font-size: 39px;}

写法：number（px）单词
注：字体大小一般为偶数

font-weight：字体粗细
两种模式：正常（normal）加粗（bold）

<style>
        div{font-weight:bold;}
    </style>

写法：
单词（normal bold）
number（100-900）（100-500为正常，600-900为加粗）

font-style：字体样式
两种模式：正常（normal）斜体（italic/oblique)
注：oblique用的较少
italic和oblique的区别：
1、italic所有带有倾斜属性字体的才可设置
2、oblique没有倾斜属性的字体也可设置

<style>
        div{font-style:italic;}
    </style>

color：字体颜色

<style>
        div{color: blue;}
    </style>

⑨、CSS段落样式

text-decoration：文本装饰
下划线:nderline
删除线:line-through
上划线:overline
不添加任何装饰：none
可添加多个文本修饰，通过空格隔开

例：
<style>
 p{width:300pc;text-decoration:underline ;}
 </style>

text-transform：文本大小写（针对英文）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

例：
<style>
    p{text-transform: lowercase;}
   </style>

text-indent：文本缩进（首行）
em单位：相对单位，1em永远与字体大小相同

例：
<style>
    p{text-indent:2em;}
   </style>

text-align：文本对齐方式
对齐方式：left，right，center，justify（两端点对齐）

例：
 <style>
    p{text-align:left;}
   </style>

line-height：定义行高
行高为一行文字的高度，上边距和下边距等价关系
默认行高：随字体大小变化而变化
取值：number（px） scale（比例值，与文字大小）

例：
number:
 <style>
      p{line-height :20px;}
    </style>
scale:
 <style>
        p{line-height :1/2/3/4......;}
    </style>

letter-spacing:定义字间距

<style>
     p{letter-spacing :20px;}
  </style>

word-spacing：定义词间距（针对英文）

<style>
        p{word-spacing :20px;}
    </style>

强制折行
1、word-break:break-all;
（非常强烈的折行）
2、word-wrap:break-word;
(不是那么强烈的折行，会产生一些空白区域）

 <style>
        p{word-break :break-all;}
    </style>

⑩、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式
一个CSS属性控制多种样式，叫做复合样式
复合的写法：通过空格的方式实现的
(部分不需要注意顺序例：background border
部分需要注意顺序例：font)
1、background：red url() repeat 0 0

 <style>
    div{width: 400px;height: 300px;
        background: red url(./img/dog.jpg)no-repeat center center;}
    </style>

2、border:1px red soild;

   <style>
        div{border: 2px black solid;}
    </style>

3、font：最少要有两个值(size family)
顺序：
weight style size family
style weight size family
weight style size/line-height family

<style>
        div{font:bold italic 30px/40px 宋体;}
    </style>

注：
尽量不要混写，若要混写
一定要先写复合样式再写单一样式
这样样式才不会被覆盖掉

⑪、CSS选择器

1、ID选择器
css：#elem{}
html：id=“elem”
注：
1、在一个页面中，ID值是唯一的，出现多次不符合规范

错误写法：
<style>
        #div1{font:bold italic 30px/40px 宋体;}
    </style>
</head>
<body>
   <div id="div1">hahaha</div>
   <div id="div1">hahaha</div>

2、命名规范，字母_-数字（命名的第一位不能是数字）
3、命名方式
驼峰式：searchButton（小驼峰）SearchButton（大驼峰）
下划线式：search_small_button
短线式：search-small-button

2、class选择器
css：.elem{}
html：class=“elem”

例：
<style>
        .box{background: red;}
    </style>
</head>
<body>
   <div classd="box">hahaha</div>
</body>
</html>

注：
1、class选择器是可以复用
2、可以添加多个class样式
3、多个样式的时候，样式的优先级根据CSS决定而不是class属性中的顺序（即：style标签中的顺序）

4、标签+类的写法

例：
<style>
        p.box{background: red;}
    </style>
</head>
<body>
   <p class="box">hahha</p>