HTML笔记2-CSDN博客

HTML-a little+CSS

一.表单标签

在这里插入图片描述

form，input

input(单标签)标签有一个type属性，决定什么控件

<form action="提交的地址"></form>
  <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="chekbox" checked>香蕉
        <input type="chekbox"disabled>葡萄
<input type="radio" name="gender">男
<input type="radio" name="gender">女

<form>
        <h2>输入框</h2>
        <input type="text">
        <h2>密码输入框</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>

在这里插入图片描述

属性：disabled（无法选中） checked（让复选框一开始就被选中） name（把两个单选框变成了一组）

多行文本框

:多行文本框
,:下拉菜单
:辅助表单

      <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option select>请选择</option>
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <select size="3">
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <select multiple>
        <option >北京</option>
        <option >上海</option>
        <option >杭州</option>
    </select>
    <input type="file">
</body>

注：

这里最后的是上传文件，但不能选择多个文件，需要添加一个属性<input type="file" multiple>

lable标签

例如：

 <input type="radio" name="gender">男
    <input type="radio" name="gender">女

此时在这里插入图片描述
在圈圈上可以选择而在字上却不能选择则需要label标签来辅助

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

（for属性与前面的id对应）
这样鼠标在字上面也可以选择了
练习：在这里插入图片描述

这是一个表格+表单的组合实例

二.div和span

div:做一个区域划分的块

span:对文字进行修饰的内联

如：

<div>
<h2><a href="#">  链接   </a></h2>
<p>
</p>
</div>

<div>这是一个块</div>
<span>这是一个内联</span>

三.CSS基础语法

 <style>
        div{ width: 100px;height: 100px;background-color: red;}
    </style>
<body>
    <div>这是一个块</div>

div加{}来映射下面的

产生效果：

格式：

选择器{属性1：值1；属性2：值2}

单位：

px->像素(pixel),%->百分比

基本样式：

width height background-color

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

长度单位：

1.px->像素
2.%->百分比
外容器->600px 当前容器->300px

细节部分：

 <style>
        div{ width: 100px;height: 100px;background-color: red;}
    </style>
<body>
    <div>这是一个块</div>
    <div>这是又一个块</div>

告诉我们div{}选择器可对应多个but

<style>
        div{ width: 100px;height: 100px;background-color: red;}
    </style>
<body>
    <div>这是一个块</div>
    <div>这是又一个块</div>
    <span>这是一个内联</span>
</body>

的表达效果是在这里插入图片描述

则说明div{}并不对应,若要对应则需要在

四.CSS样式的引入方式

1.内联样式

style属性
在这里插入图片描述

2.内部样式

style标签
在

<body>
    <div style="width: 100px;height:100px;background-color: red;">这是一个块</div>
    <div>这是又一个块</div>

</body>

展示效果：在这里插入图片描述
要体现内部样式的优点，可以复用代码

<body>
    <div style="width: 100px;height:100px;background-color: red;">这是一个块</div>
    <div style="width: 100px;height:100px;background-color: red;">这是又一个块</div>

</body>

在这里插入图片描述

3.外部样式：

`<link>`标签

rel href
引入一个单独的css文件,name.css
通过link标签引入外部资源，rel属性指定资源页面的关系，href属性资源的地址
通过@import
方式引入外部样式（这种方式有很多问题，不建议使用）
例：

<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">
   <link rel="stylesheet" href="./#common.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>

在这里插入图片描述

五.CSS中的颜色表示法

1.单词表示法：red blue greeen yellow

在这里插入图片描述

2.十六进制表示法：#000000（黑色） #ffffff（白色）

0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法：rgb(255，255，255)；

取值范围：0~255

六.CSS背景样式

background-color背景色

background-image背景图

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

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

repeat-x x轴平埔
repeat-y y轴平埔
repeat( x，y都进行平铺，默认值）
no-repeat 都不平铺

  <style>
div{ width: 100px;height: 100px;background-color: red;background-image: url(./1.png);}
</style>
</head>
<body>
    <div>这是一个块</div>
</body>

<style>
    div{ width: 300px;height: 300px;background-color: red;background-image: url(./屏幕截图\ 2022-10-27\ 132034.png);
    background-repeat:repeat-x;
    }
    </style>
    </head>
    <body>
        <div>这是一个块</div>
    </body>

展示效果：
（这是控制x轴平铺）：
在这里插入图片描述
（这是控制y轴平铺）：

background-position:背景位置

x y:number（px，%）|
单词：
x:left,center,right
y:top,center,bottom
%：即可以使用50%%50%（填在上面单词对应位置）来表示背景位置

例：

 <style>
        div{ width: 300px;height: 300px;background-color: red;background-image: url(./屏幕截图\ 2022-10-27\ 132034.png);
        background-repeat:no-repeat;
        background-position: center;
        }
        </style>
        </head>
        <body>
            <div>这是一个块</div>
        </body>

在这里插入图片描述

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

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

 <style>
        body{height: 2000px;}/*使浏览器页面有滚动条*/
        div{ width: 300px;height: 300px;background-color: red;background-image: url(./屏幕截图\ 2022-10-27\ 132034.png);
        background-repeat:no-repeat;
        background-position: top;
        background-attachment: scroll;
        }
        </style>
        </head>
        <body>
            <div>这是一个块</div>
        </body>

视觉差

利用背景图固定在浏览器页面，通过上下滑动页面背景的切换来造成视觉差。

此时则需要div{}选择器对下面<body>部分来对应。具体方法见下：

  <style>
        #div1{}
        #div2{}
        #div3{}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

七.CSS边框样式

boeder-style:边框样式

solid:实线

在这里插入图片描述
（莫要慌张忘记下面<body>中的<div></div>容器)

dashed：虚线

在这里插入图片描述

dotted：点线

border-width:边框大小

px…

border-color:边框颜色

red #f00 …

注：针对某一条边进行单独设置

border-left-style:中间是方向left right top bottom
在这里插入图片描述
观察下面：在容器内不同border交界处

通过上面的方法可以设置出四个不同颜色的三角形，
颜色：透明颜色 transparent
将颜色属性（除了得到的三角形）改为透明颜色即可得到单独三角形：也可以改为页面背景相同颜色

八 .CSS文字样式

font-family:字体类型

英文，中文
在这里插入图片描述

这里的Arial是争对英文的一种字体，所以中文没变化

font-family： (输入的字体有空格时要加引号)

在这里插入图片描述
字体大小一般是偶数

font-style：

设置字体的风格，例如，正常（normal）倾斜、斜体（italic，oblique）等；
italic，oblique区别：
italic带有倾斜属性的字体的才能设置
oblique 没有倾斜属性也能设置

font-weight：

设置字体粗细；

font-size：

设置字体
模式：正常（normal）加粗（bold）
写法：单词（normal bold）|number（100，200…900, 100到500都是正常的,600道900都是加粗的）
设置字体尺寸；默认：16px 写法：number（px）|单词（small larger）

在这里插入图片描述

font-variant：

将小写字母转换为小型大写字母；

font-stretch：

对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；

font：

字体属性的缩写，可以在一个声明中设置多个字体属性。

九.段落样式

text-transform（文本修饰）

可以用来设置文本的大小写

可选值：

  none  默认值  正常显示

  uppercase   字母大写

  lowercase     字母小写

  capitalize   首字母大写

text-decoration

写法：在这里插入图片描述

可以用来设置文本的修饰

可选值：

   none       没有任何修饰线

   underline;   加下划线

   overline     加上划线

   line-through  删除线

letter-spacing

可以指定字符间距

word-spacing

可以设置单词之间的距离

text-align用于设置文本的对齐方式

写法：在这里插入图片描述

可选值：

  left  默认值  左对齐

  right  右对齐

  center  居中对齐

  justify  两端对齐

text-indent 设置首行缩进

写法：在这里插入图片描述

在首行缩进中如果出现了英文会出现对不齐

一般用em为单位,1em永远字体大小相

line-hight：定义行高

行高：line-height，指的是文字占有的实际高度，可以通过line-height设置行高。
行高可以直接指定一个大小，单位可以是px 或者 em，也可以直接设置一个整数，将是字体大小的倍数；
line-height:2;表示行高是字体大小的2倍。
例：

<style>
    p{line-height:2}
</style>
</head>
<body>
    <p>
        任何生命都把保护自己当作至高无上的目的，这是生命世界里的原则。

这个世界上不仅有美艳的皮囊，还有有趣的灵魂，李诞虽然没有帅气的皮囊，但是他凭借着一副普通的皮囊，加上智慧的灵魂，在娱乐圈中混得风生水起，脱口秀的节目上都能够看到他的身影。
  </p>
    </body>

取值：1.number（px）|scale(比例值，跟文字比)

letter-spacing

是CSS的一个属性，其作用是设置字符之间的距离letter意为字符。

{
letter-spacing:normal;
}

word-spacing：

词之间的间距（中文无法使用）
假如现在要在边框中输入一段文字，如果输入的是中文则会自动折行，而如果是英文单词过长，则不会折行。
英文和数字不自动折行

强制折行：（针对英文）

1.word-break:break-all;(非常强烈）
2.word-wrap:break-word;(不是那么强烈，会产生一些空白区)

十.CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

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

1.backgroud背景：red url(./…) repeat 0 0;

2.border边框:1px red solid;

3.font:

注：最少需要两个值：size字体大小 family字体类型
weight style size family
style weight size family
weight style size/line-height family
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。