菜单 搜索
首页 前端知识 HTML,CSS详解【24/01/02】

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

2024-03-10 11:03:25 前端知识 前端哥 680 768 我要收藏

目录

HTML

一 HTML基本结构

二 HTML开发工具

三 HTML基本标签

四 表单

CSS

一 样式的使用

   1.行内样式

 2.内部样式

3.外部样式

 4.优先级

二 基本选择器

1.标签选择器

2.类选择器

3.ID选择器

--Day_1227

4.通配选择器

5.优先级

三 层次选择器

1.E F

2.E>F 

3.E+F  

4.E~F

四.结构伪类选择器

1.E:first-child

2.E:nth-child

3.E: last-child

4.E：first-of-type

五.超链接伪类选择器

1.  a:ink

2.  a:visited

3.  a:hover(重要)

4.  a:active

六.css常用样式属性

1.背景属性

2.文本属性

3.字体属性

4.列表属性

5.元素分类

--Day_1228 

七. 网页布局

1.盒子模型+浮动

2.定位

3.浮动

HTML

一 HTML基本结构
<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>标签的子类 ， 而且时<p>标签只有1，2，3 ， 而5，6，7虽然是<p>标签，但不是直接子类 ， 而是孙子类. 

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.块元素: <p> <hx> <div> <ul> <li>...

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

2.内联元素: <strong> <em> <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 ， 祝大家新年快乐，万事顺遂！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3514.html
标签
dubbo
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

Jquery——基础

2024-04-03 12:04:28

数据请求axios，Ajax，jQuery ajax，axios和fetch的区别

2024-04-03 12:04:28

利用jquery的ajax实现文件上传

2024-04-03 12:04:28

前端提高篇(八十八)：jQuery的DOM的筛选遍历

2024-04-03 12:04:47

JavaScript和jQuery的各标签选取方式？

2024-04-03 12:04:38

2、事件机制、DOM操作、jquery对尺寸操作、jquery添加和删除

2024-04-03 12:04:32

地区经济名镇-乌镇 旅游景点 10页面 带设计说明 jquery图片轮播特效 滚动文字 注册登录留言表单 旅游网页成品 HTML旅游景点网页设计制作 前端旅游网页开发 热门旅游景点网页制作

2024-04-03 12:04:30

html jquery地图点位点击变色

2024-04-03 12:04:29

成功解决：jQuery is not defined

2024-04-03 12:04:22

Css & JavaScript & jquery 实现选项卡的制作

2024-04-03 12:04:18

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！