HTML,CSS详解【24/01/02】

<html>

  <head>
    <meta name="author" value="Tom"/>
    <meta name="wordkeys" value="百度"/>
    <title>标题</title>
  </head>

  <body>
    <!--注释-->

    <h1>页面内容</h1>

  </body>
</html>

二 HTML开发工具

webStrom , vsCode , idea

三 HTML基本标签

1.标题标签: hx(1~6)

 <h3>怀化学院</h3>

2.段落标签: p

<p>怀化学院是最牛逼的</p>

3.加粗: strong

<p><strong>怀化学院</strong>是最牛逼的</p>

4.斜体: em

<p><em>2023-12-25</em></p>

5.删除线：del

<p><del>怀化学院是最牛逼的</del></p>

6.下标:sub

<p>H<sub>2</sub>O</p>

7.上标：sup

 <p>2<sup>3</sup></p>

8.分割线:hr(它是单标签，因为它不是修饰文字的)

<hr>

9.换行标签:br(单标签)

<br>

10.超链接标签:a
href: 链接地址
target: "_self"（会覆盖原来标签）
target: "_blank"（不会覆盖原来标签）

 <a href="www.baidu.com" target="_blank">百度一下</a>

11.图片标签：image
-src:图片路径
-width：图片宽度
-height:图片高度
-title : 标题
-alt:图片无法加载时提示内容

 <img src="D:\feisi\html\day_1226\test\images\images\header.jpg" width="" height="" title="首页" alt="图片加载失败">

12.视频标签：vedio

<!--不同游览器兼容视频格式不一样-->
    <video controls>
        <source src="" type="video/mpeg">
        <source src="" type="video/webm">
    </video>

13.音频标签: audio

 <audio controls>
        <source src="" type="audio/mpeg">
    </audio>

14.列表标签：ul ， ol ， dl

 <!--无序列表-->
    <ul type="circle">
        <li>刘德华</li>
        <li>张学友</li>
    </ul>
    <!--有序列表-->
    <ol>
        <li>孤勇者</li>
        <li>冰雨</li>`
    </ol>
    <!--自定义列表-->
    <dl>
        <dt>衣服</dt>
        <dd>衬衣  夹克  背心</dd>
        <dt>裤子</dt>
        <dd>七分裤  蓝裤子  白裤子</dd>
    </dl>

15.表格标签:table

<table border="1" cellspacing="0" >
        <caption>学生信息表</caption>
        <tr bgcolor="pink">
            <td>ID</td>
            <td>NAME</td>
            <td>AGE</td>
        </tr>
    </table>

四表单

1.表单基本结构

<form action="服务器地址" method="GET||POST">
      <input type="" name="" value="">
</form>

type: text , password , radio , chechbox , button , submit , reset , image ， tel(这个大部分游览器不兼容)

name: 控件名称，数据提交的key

value: 控件的值，数据提交的value

2.常用输入限制

CSS

一样式的使用

1.行内样式

 <!-- 行内样式 -->
    <h3 style="color: blue; font-size: 16px;">怀化学院</h3>

2.内部样式

<style type="text/css">
        h3{
            color: blue;
            font-size: 16px;
        }
    </style>

3.外部样式

首先定义一个css文件

再引入这个css文件

<!-- 推荐使用 -->
<link rel="stylesheet" href="css/value.css" type="text/css">

4.优先级

就近原则 。即那个样式离它最近哪个样式的优先级就越高，因为html时边解释边执行，所以后面执行的会覆盖掉前面以及执行的。

二基本选择器

选择器：选择对应的元素设置对应的效果

1.标签选择器

/* 标签选择器 */
        p{
            color: blue;
        }
 <body>
    <p>HEllo , World</p>
    <p>HEllo , World</p>
</body>

2.类选择器

----可以被多个标签使用，一个标签也可以使用多个类选择器

/* 类选择器 */
        .box{
            color: red;
            font-size: 14px;
        }
        .bd{
            font-style: italic;
        }
<body>
    <p class="box bd">HEllo , World</p>
    <h3 class="box">怀化学院</h3>
</body>

3.ID选择器

----id是唯一标识，一个标签只能有一个id选择器，一个id选择器也只能被一个标签使用。

 /* ID选择器 */
        #card{
            /* 字体粗细:100-900 */
            font-weight: 100;
        }
<body>
    <h3 id="card">怀化学院</h3>
</body>

--Day_1227

4.通配选择器

/* 通配选择器， 优先级很低 */
        *{
            margin: 0px;

        }

5.优先级

选择器之间存在样式冲突: 是根据选择器之间的权值来获取优先级:

id选择器>类选择器>标签选择器>通配选择器

三层次选择器

1.E F

选择E元素后代F元素设定样式【后代选择器】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 选择body元素的后代p 及1，2，3，5，6，，7都会受影响*/
        body p{
              color: red;
        }
       
    </style>
</head>
<body>
    <h2>4</h2>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li><p>5</p></li>
        <li><p>6</p></li>
        <li><p>7</p></li>
    </ul>
</body>
</html>

2.E>F

选择E元素的子代F设定样式【子类选择器】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        
        /*  1，2，3会受影响*/
        body>p{
            color: red;
        }
       
    </style>
</head>
<body>
    <h2>4</h2>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li><p>5</p></li>
        <li><p>6</p></li>
        <li><p>7</p></li>
    </ul>
</body>
</html>

因为时<body>标签的子类，而且时标签只有1，2，3 ，而5，6，7虽然是标签，但不是直接子类，而是孙子类.

3.E+F

选择E元素相邻的兄弟F设定样式【相邻兄弟选择器】

4.E~F

选择E元素的所有兄弟元素F设定样式【通用兄弟选择器】

四.结构伪类选择器

1.E:first-child

如果某个标签的第一个儿子是E标签，那么就作用这个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 5,6,7受影响 , 因为body标签第一个儿子是h2标签 ， ul标签第一个儿子是li标签 ， 只有li标签的第一个儿子都是p标签 */
        p:first-child{
            color: red;
        }
    </style>
</head>
<body>
    <h2>4</h2>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li><p>5</p></li>
        <li><p>6</p></li>
        <li><p>7</p></li>
    </ul>
</body>
</html>

2.E:nth-child

3.E: last-child

4.E：first-of-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      
        /* 第一个类型为p的儿子，1，5 ,6,7受影响 */
         p:first-of-type{
            color: red ;
        } 
    </style>
</head>
<body>
    <h2>4</h2>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
        <li><p>5</p></li>
        <li><p>6</p></li>
        <li><p>7</p></li>
    </ul>
</body>
</html>

五.超链接伪类选择器

1. a:ink

点击之前

2. a:visited

点击之后

3. a:hover(重要)

鼠标悬浮于链接之上时的样式

 /* 鼠标悬浮于链接之上时的样式 */
        a:hover{
            color: red;
            font-size: 24px;
            text-decoration: overline;
        }

4. a:active

鼠标点击未释放时的样式


        /* 鼠标点击未释放时的样式 */
        a:active{

            color: blue;
            font-size: 18px;
        }

六.css常用样式属性

1.背景属性

backGround-color :背景颜色

background-image:背景图片

background-repeat:背景平铺

background-position:背景定位

background-size: 背景尺寸

background：背景

box{
            width: 400px;
            height: 400px;
            /* 边框:粗细 边框类型 颜色 */
            border: 1px solid red;
            /* 背景颜色 */
            background-color:pink;
            /* 背景图片 */
            background-image: url("test/练习素材/练习3：制作开心餐厅页面/图片素材/game01.jpg") ;
             /*背景平埔帮  */
             background-repeat: no-repeat;  
             /* 背景定位 */
             background-position: 0px 0px;
             /* 背景尺寸 */
             background-size: 100%;

             /* background:  chartreuse 100px 100px  url("test/练习素材/练习3：制作开心餐厅页面/图片素材/game01.jpg") no-repeat; */
        }

2.文本属性

color :颜色

text-indent: 文本缩进

text-decoration: 文本装饰

text-align: 文本水平对齐方式

line-height: 设置行高

text-shadow: 文本阴影（颜色 x偏移 y偏移模糊半径）

 /* 文本属性 */
        .box  p{
            /* 文本颜色 */
            color: blue;
            /* 文本缩进 */
            text-indent: 2em;
            /* 文本装饰 */
            text-decoration: line-through;
            /* 文本对齐方式 */
            /*文本水平对齐 */
            text-align: center;
            /* 设置行高 */
            line-height: 40;
            /* 文本阴影 */
            text-shadow:red 10px 10px 5px;
        }

3.字体属性

font-size: 字体大小

font-family: 字体系列

font-weight：字体粗细

font: 字体(有先后顺序:风格粗细大小系列)

/* 字体属性 */
        p{
            /* 字体大小 */
            font-size: 18px;
            /* 字体系列 */
            font-family: Arial, Helvetica, sans-serif;
            /* 字体粗细 */
            font-weight: 200;

        }

4.列表属性

1.list-style-type: 设置列表风格形状

2.list-style-image:列表风格图片

3.list-style-position:列表标志定位

 ul{
            
            /* 设置列表风格形状 */
            list-style-type: square;
            /* 列表风格图片 */
            list-style-image: url(test/练习素材/练习3：制作开心餐厅页面/图片素材/game03.jpg);
            /* 列表标志定位 */
            list-style-position: inside;
        }

5.元素分类

1.块元素: <hx> <div> <ul> <li>...

特点: 独占一行，有宽度和高度

2.内联元素: <img>...

特点: 不独占一行，没有宽度和高度表

元素类型转换：display：--

--block:块元素

--inline：行元素

--inline-block: 行块元素（即不独占一行又保留行和高）

--none: 不显示

--Day_1228

七. 网页布局

1.盒子模型+浮动

盒子模型：

1.盒子构成：内容+内边距+边框+外边距

内边距：内容与边框之间的距离

书写方式：padding-【top ， bottom ， left ， right】设置指定位置边框

padding-上下，左右(两个值)

padding-上，左右，下（三个值）

padding-上，右，下，左（四个值）

外边距: 边框以外的距离

margin：【和上面的内边距书写方式一样】

2.块元素居中(必须是块元素而且明确边界大小)：

margin: 0px  auto ;

3.内容居中：如何让一个文本在块元素中居中呢？上面的那个是块元素在这个游览器页面中居中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .number{

        /*先让span标签变成有边距的行元素  */
    display: inline-block;
    /* 设置他的宽 */
    width: 20px;
    /* 设置它的高 */
    height: 20px;
    /* 设置边框可见 */
    border: 1px solid red;
    /* 先让它水平居中 */
    text-align: center;
    /* 再设置它的行距和宽一样 */
    line-height: 20px;
    /* 再设置它垂直居中 */
    vertical-align: middle;
    /* 设置边框形状为圆形 */
    border-radius: 50%;
    /* 设置圆形边框的背景颜色 */
    background-color: #e9185a;
    /* 设置字体颜色 */
    color: aliceblue;
        }
    </style>
</head>
<body>
    <p><span class="number">1</span>怀化学院</p>
</body>
</html>

页面效果展示:

上图可见：这个1已经位于这个圆形图标的正中间位置

2.定位

posistion属性

--absolute:绝对定位

1.脱离文档流，对周边元素产生影响

2.当祖先元素有定位(绝对定位/相对定位/固定定位 ) ，则相对于最近的祖先元素定位【即祖先移动，它会相对祖先移动】

当祖先元素没有定位，则相对于游览器进行定位。

--relative：相对定位

1.不脱离文档流，对周边元素的位置不会产生影响

2.相对于本身原来的位置定位

--fixed：固定定位

1.脱离文档流，对周边元素的位置会产生影响

2.永远是相对于游览器定位

3.浮动

float：1.left 2.right 3.none(默认)

什么是浮动？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .father{
            width: 900px;
            border: 1px solid red;
        }
        .box{
            width: 400px;
            height: 200px;
           
        }
        .b1{
            /* 浮动   这个效果是蓝色看不见了 。 过程是因为当黄色浮起来后 ， 下面的蓝色和青色会替补上空出来的位置
                然后浮起来的黄色会往左边浮动，从而遮住了替补上来在下面的蓝色。     
            */
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box b1" style="background-color: yellow;">1</div>
        <div class="box" style="background-color: blue;">2</div>
        <div class="box" style="background-color: aqua;">3</div>
    </div>
</body>
</html>

父级塌陷：

因为我们最外面的父级盒子的高是自适应的，也就是说父级盒子的高是根据你里面有多少内容来自适应的。而我们用浮动导致里面所有的内容浮起来了，而内容就空了，导致父级盒子的高坍陷了，也就是没高了。

clear：清除浮动影响

解决方案：

/* 清除父元素塌陷给父元素的最后加上这个 */
        .father:after{
            /* 给父元素最后加上一个块元素 */
            display: block;
            /* 让它的内容为空 */
            content: '';
            /* 清除右浮动对它的影响 */
            clear: right;
        }

本周笔记就到这了，新年第一篇bk ，祝大家新年快乐，万事顺遂！

凌晨去看海

关注

18
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML,CSS详解【24/01/02】

而我们用浮动导致里面所有的内容浮起来了，而内容就空了，导致父级盒子的高坍陷了，也就是没高了。因为时<body>标签的子类，而且时标签只有1，2，3 ，而5，6，7虽然是标签，但不是直接子类，而是孙子类.2.当祖先元素有定位(绝对定位/相对定位/固定定位 ) ，则相对于最近的祖先元素定位【即祖先移动，它会相对祖先移动】----id是唯一标识，一个标签只能有一个id选择器，一个id选择器也只能被一个标签使用。----可以被多个标签使用，一个标签也可以使用多个类选择器。
复制链接

扫一扫