记录前端学习1持续更新

栋栋sama

已于 2022-08-08 22:08:21 修改

阅读量125

点赞数

分类专栏： html 文章标签：前端学习 javascript

于 2022-07-07 22:16:18 首次发布

本文链接：https://blog.csdn.net/erdongmudong/article/details/125665242

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html部分标签

input标签

输入框标签
常用属性：
type 类型，声明输入框的类别
text：文本输入框，专门用来输入文本的
password:暗文输入，常用于输入密码等隐私数据
date:日期输入框,用来输入日期
datetime-local:用来输入年月日时分
email：当用户提交数据到后台时会检查该输入框是不是邮箱格式
color: 选择颜色
radio：单选框
checkbox:复选框
file:上传文件

    <!-- 输入框标签
    常用属性：
        type 类型，声明输入框的类别
        text：文本输入框，专门用来输入文本的
        password:暗文输入，常用于输入密码等隐私数据
        date:日期输入框,用来输入日期
        datetime-local:用来输入年月日 时分
        email：当用户提交数据到后台时会检查该输入框是不是邮箱格式
        color: 选择颜色
        radio：单选框
        checkbox:复选框 
        file:上传文件-->
   账号：<input type="text"><br>
   密码：<input type="password"><br>
   出生日期: <input type="date"><br>
   时分秒的日期：<input type="datetime-local"><br>
   邮箱: <input type="email"><br>
   喜欢的颜色: <input type="color"><br>
   性别： 男: <input type="radio">  女：<input type="radio"><br>
   职业： 学生: <input type="checkbox">  志愿者 <input type="checkbox">  程序员<input type="checkbox"><br>
   选择头像图片: <input type="file">

input的placeholder可以在输入框里加入提示信息
value属性是相当于在输入框提前写下了某些值
placeholder只是提示信息，不影响用户填写内容

邮箱<input type="email" placeholder="请输入邮箱"><br>
密码<input type="password" placeholder="请输入密码"><br>
验证码<input type="text" value="1234">

radio多选一时是input为同意name
name=“可以随意起名” id="随意起名，不能以数字开头

 性别：  男<input type="radio" name="first">   女<input type="radio" name="first"><br>
 爱情：  初恋<input type="radio" name="second">   热恋<input type="radio" name="second">

textarea标签

多行文本区域标签类似QQ空间留言

<!-- 多行文本区域标签 -->
   <!-- 类似QQ空间留言 -->
   <textarea name="" id="" cols="30" rows="10"></textarea>

label标签

使点击label内的内容可以到for所指定的地方

 <!-- label标签 -->
   <!-- 使点击label内的内容可以到for所指定的地方 -->
   <label for="account">账号：</label><input id="account" type="text"><br>
    <label for="pwd">密码:</label><input id="pwd" type="password">
    <label for="select">男</label><br><br><br><br>
    <input id="select" type="radio">

select标签

select是下拉框标签
option是下拉框的选项标签

<!-- select是下拉框标签 -->
    地址：
    <select>
        <!-- option是下拉框的选项标签 -->
        <option value="">河南</option>
        <option value="">河北</option>
        <option value="">北京</option>
    </select>

button标签

按钮标签设置一个按钮

 <!-- 按钮标签 -->
    <button>登录</button>
    <!-- input也可以作为按钮使用 --> 
    <input type="button">
    <input type="submit">

img标签

图片标签
img是图片标签属性为了描述修饰这个标签 <开始标签属性=“属性值”></结束标签>
src是img标签的一个属性，声明图片的地址
alt是当图片路径错误时图片加载出来出现的提示信息
title是当鼠标移动到图片上时出现的提示信息
width:控制图片的宽度，大多数html标签都有的属性
height: 控制图片的高度,
当图片只设置了高宽的其中一个属性，那么另外一个没有设置的属性也会等比例缩放
img可以引入网络资源图片，也可以引入本地资源图片
网页中的计量单位比较常用的是像素px

引入资源方式

引入图片资源、音乐资源、视频资源、外部css或者js或者html文件资源都有两种方式
1、绝对路径从磁盘开始的路径，直到图片文件名的完整路径
2、相对路径相对于当前这个文件，要引入的图片其所在的路径
绝对路径

 <img src="C:\Users\ASUS\Desktop\mouse.png">

相对路径
…/ 代表是跳到上一级（父级）目录

 <img width="300px" height="100px" src="../mouse.png" alt="你的图片丢了" title="点击一下，了解更多">

还有引入网络资源 src herf里面填资源网址

b u等文字标签

b标签是加粗标签，让文字加粗
u是下划线
i em斜体
strong标签是着重语气，在一些朗读软件里用strong修饰的文字会有重音
strong经常作为搜索用的语义标签
标签是可以嵌套使用的

  <b>你好世界</b> 你好世界 <strong>你好世界</strong>
  <i>哈喽</i> 哈喽 <em>哈喽</em>
  <u>添加下划线</u>
  <u><b>添加下划线</b></u><!-- 加粗加下划线 -->

a标签

a标签是超链接
href属性类似于img的src属性，都是用来填写资源路径

 <a href="https://www.baidu.com/">百度网页</a>

span标签

span是一个无语义标签，但是常和样式结合使用

<span>我是一个span标签，但是我的直接功效作用是没有的</span>

br标签

换行标签

世界这么大，
<br>我想去看看
<br> 床前明月光，
<br>疑似地上霜。
<br>举头望明月，
<br>低头思故乡。

p标签

p标签是一个段落标签,用来放一段文字的，类似于小学语文中的自然段
独占一行，自带换行常用于新闻、小说

<p>世界这么大，</p>我想去看看

h标签

h1-h6 标题标签，常用于新闻标题或者文字章节名将文字加粗放大
h系列的标签独占一行

<h1>俄乌战争几时休</h1>
<h2>俄乌战争几时休</h2>
<h3>俄乌战争几时休</h3>
<h4>俄乌战争几时休</h4>
<h5>俄乌战争几时休</h5>
<h6>俄乌战争几时休</h6>

hr标签

hr水平线标签常用于将新闻标题和正文分开

床前明月光，
<hr>
疑似地上霜。

audio标签

audio 音频调用
<audio src="1.mp3" ></audio> 没有controls 音频没有显示
属性等于属性名的时候可以不用写等号后后面的内容

 <audio src="1.mp3" controls="controls"></audio>
 <audio src="1.mp3" controls></audio>

form标签

form标签表单标签，可以向后端发起请求，将请求数据传给后端
action:指定发送的请求地址
method：请求方式

<form action="">
            账号：<input type="text" name="account"> 
            密码：<input type="text" name="password">
    </form>

form是一个表单标签，和前后端对接时常用的一个标签
action是后端接口地址
method是请求方式：
get post put patch delete 等请求
get请求会把用户的填写参数放到url网址上
登录注册一般使用的是post请求，会把参数封装起来传送，不会展示到url上。

<!--boss工作搜索接口-->
  找工作，来boss <br>
    <form action="https://www.zhipin.com/web/geek/job" method="get">
        职位：<input type="text" placeholder="请输入你想找的工作" name="query"><br>
        城市：<select name="city" id="">
              <option value="101030100">天津</option>
              <option value="101010100">北京</option>
              <option value="101020100">上海</option>
        </select>
      
    <button>点我搜索</button>
</form>
<!--智联工作搜索接口-->
找工作，来智联

<form action="https://sou.zhaopin.com/">
   职位: <input type="text" name="kw">
    <input type="submit">
</form>
<br>
<br>
<br>
<form action="https://www.zhipin.com/web/geek/job">
    职位：<input type="text" name="query"><br>
    城市: <select name="city" id="">
            <option value="101010100">北京</option>
            <option value="101020100">上海</option>
            <option value="101280100">广州</option>
            </select><br>
    页数：<input type="hidden" name="page" value="2"><br>
    <button>搜索</button>
</form>
<br><br><br>
<!-- 百度的接口 -->
<form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <button>百度一下</button>

在这里插入图片描述

输入框 name=query
城市 name=city
页数 name=page
点击按钮提交from

复合标签

1、父元素子元素{} 控制父元素里的所有的该子元素
2、父元素 > 子元素{} 控制父元素里所有的一级该子元素的样式
3、标签1,标签2{} 标签1和标签2都使用{}里的样式
如果出现属性冲突就开始比权重
就近原则，当权重相同时根据就近原则
如果是一样的近的标签权重也一样就比先后顺序，最新的指令生效
子元素会继承有些父元素的标签

<style>
        div{
           color: aqua;
        }
        div p{
            font-size: 20px;
        }
        div>p{
            background-color: red;
        }

    <div class="haha  d1">
        哈哈
        <p>你好</p>
        <p>
            hello
            <span>hi
            </span>
        </p>
    </div>

行内元素行,内块元素,块元素

标签元素大致分三种(三种类型可以相互转换，使用display)：
1、行内元素(inline): 允许与其它元素在同一行显示。
行内元素的宽高默认是内容的宽高，如果没有内容就是0*0
行元素一般是不能设置宽高的
不能使用margin-top
例子：<span> <a> <b> <u> <i>
行元素都能放同一行，除非这一行放满了
2、行内块元素(inline-block)：允许与其它元素在同一行显示
行内块元素的宽高默认是初始大小宽高
行内块是能设置宽高的
行内块可以使用margin值
例如 input button textarea
3、块元素(block)：不允许与其它元素在同一行展示
默认高度是0，可以被内容撑开
默认宽度是父元素的宽度
如果块元素的宽度被设置不是一行的宽度，也是不允许其它元素放置在一行的
块元素可以设置宽高
块元素可以使用margin值
例如： div p h1~h6 hr
img其实是一个行内元素，但是比较特殊，可以设置宽高

css样式

颜色

1、英文单词表示颜色
2、用rgb光学三原色红绿蓝
每种颜色可以调配一定的比例，比例范围是0~255
3、用十六进制表示颜色 #000000 #FFFFFF
123456789ABCDEF

 #world{
            /* 1、英文单词表示颜色 */
            color: blue;
        }
        #my{
            /* 2、用rgb光学三原色  红绿蓝
              每种颜色可以调配一定的比例，比例范围是0~255 */
            color: rgb(255, 0, 0);
        }
        #news{
            /* 3、用十六进制表示颜色  #000000     #FFFFFF*/
            /* 123456789ABCDEF */
            color: #F0069A;
        }

margin属性

外边距叫做margin A标签与B标签之间的距离叫做外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .d1{
           height: 200px;
           width: 200px;
           background-color: red;
           /* 距离左边另外一个元素的外边距 */
           margin-left: 100px;
       }
       .d2{
           background-color: blue;
           height: 100px;
           width: 100px;
           margin-left: 100px;
           /* 的距离上边的外边距 */
           margin-top: 20px;
           margin-bottom: 30px;
       }
       span{
           margin-left: 100px;
           background-color: yellow;
 
       }
    </style>
</head>
<body>
    <!-- 外边距叫做margin  A标签与B标签之间的距离叫做外边距 -->
    <div class="d1">你好</div>
    <div class="d2"></div>
    <span>世界很多大</span><span>世界很好</span>
</body>
</html>

body自带距离浏览器窗口上下左右8px的外边距margin
p自带上下12px margin

水平对齐方式

针对文字和图片的对齐方式，是左对齐还是居中还是右对齐呢
该样式属性在父元素使用，是让文字或图片在父元素的宽度里水平对齐方式

text-align: 位置;
center right left（默认）等

垂直对齐方式

主要让图片和文字垂直方向的对齐

 vertical-align: 位置;
 baseline（默认） bottom top middile 等

行高line-height:当行高和盒子的高度一样时文本垂直居中

字体样式

font-family 规定文本的字体系列（字体—宋体等）
font-size 规定文本的字体尺寸（字体大小）
font-style 规定文本的字体样式（字体类型斜体下划线等）
font-weight 规定字体的粗细（400正常）

块行内块

宽

width:10px;

高

height:100px;

背景颜色

background-color: red;

transparent:颜色是父元素的背景色
不让背景图片重复 background-repeat: no-repeat;
背景图设置背景图默认会铺满整个屏幕，如果图片小铺不满就重复显示
如果图片大就展示一部分
背景图片大小可以写值可以写百分比可以写覆盖形式

background-size: 300px 300px;
 background-size: 60% 60%; 
 background-size: 100% 100%;

contain是图片的高度刚好是标签元素的宽度
高宽其中一个方向变化的时候，另外一个也在等比例缩放
cover

background-size: cover;

调整图片位置水平方向垂直方向
这个属性精灵图比较常用

 background-position: left top;

图片两种引入方式

1、img标签引入
      img标签如果不设置大小，默认的图片大小
      可以控制宽高，是通过通过img标签大小控制宽高的width,height,可以使用百分比
      img标签的图片会占用位置
2、背景图片引入
      背景图片如果不设置大小，默认将背景图片填满放背景图片的标签元素
       可以控制宽高，是通过在放背景图片的标签样式里写background-size属性控制，可以使用百分比
      背景图片只会占用背景空间，不会影响放入的内容

a标签的文字样式需要a标签去控制，不能让他的父标签去控制

边框

基本所有的标签都有border边框，有margin外边距
border：四个边框的宽度    边框线的类型，solid是实现  边框线的颜色

border: 1px solid red;

      border是一个复合属性，将多个属性整合到一起了

   border-width: 1px;
  border-color: red;
  border-style: solid;

     边框有上下左右四个边框

  border-left: 100px solid blue;
  border-left-color: red;
  border-left-style: solid;
  border-left-width: 1px; 
  border-top: 100px solid black;
  border-right: 100px solid red;
  border-bottom: 100px solid aqua;

边框弧度使用百分比: 取长宽的百分之50作为半径画弧度

border-radius: 50%;

边框弧度使用具体值，如果一条边的该数值做半径，如果值已经是宽高中最小哪个值的一半了，就画半圆，值再大也不会改变了

 border-radius: 150px; 
 border-radius: 150px; 
 border-radius: 50%;

字体间距

字体间距单位可以是em，也可以是px
letter-spacing: 2em;会把每个字母当成一个字
单词间隔word-spacing:

         /* 字体间距 单位可以是em，也可以是px */
         /* letter-spacing: 2em;会把每个字母当成一个字 */
         letter-spacing: 10px; 
         /* 单词间隔 */
         word-spacing: 10px;

渐变色

linear-gradient()线性渐变函数
渐变默认是从上往下

 /* background:linear-gradient(blue,red); */
 background: linear-gradient(to right bottom,blue,red);
 /* background: linear-gradient(to right bottom,blue,red,yellow); */
 /* background: linear-gradient(45deg,blue,red,yellow); */
 /*  */
 /* background: radial-gradient(circle,blue,aqua,red); */

deg是倾斜角度
to 是渐变方向 to right bottom,blue,red由蓝色向红色渐变方向右下

阴影

盒子阴影 box-shadow
该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
字体阴影text-shadow

伪类伪元素

伪类
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类就是开头为冒号的关键字：
一些例子：

 <a href="#">点击登录</a>

/* 超链接的四个伪类选择器。遵循顺序 “否则可能会导致hover样式失效” */
        /* :link 超链接未被访问的状态*/
        a:link{
            color: red;
        }
        /* :visited 超链接被访问后的状态 */
        a:visited{
            color: blue;
        }
        /*  :hover 鼠标移入的状态*/
        a:hover{
            color: pink;
        }
        /* :active 用于活动链接，跳转状态“鼠标按下与释放之间” */
        a:active{
            color: yellow;
        }

<!-- 锚点活跃元素
    :target 锚点活跃元素
    作用：当点击a标签，与之绑定的块元素发生改变。 -->
    <a href="#box1">open</a>
    <section id="box1">弹出块
        <a href="#">close</a>
    </section>

#box1{
            display: none;
            position: absolute;
            top: 0;left: 0;right: 0;bottom: 0;
            margin: auto;
            width: 300px;
            height: 300px;
            background-color: brown;
        }
        #box1:target{
            display: block;
        }

<input type="checkbox" id="check">
    <input type="text" id="ipt1" disabled>
    <input type="text" id="ipt2" >

/* input的操作 */
        /* :checked 适用于单选或复选框*/
        #check:checked{
            outline: 2px solid red;
        }
        /* 禁用状态 */
        #ipt1:disabled{
            background-color: red;
        }
        /* 启用状态 */
        #ipt2:enabled{
            background-color: blue;
        }
        /* 获取输入焦点的状态 */
        #ipt2:focus{
            background-color: #ccc;
        }

伪元素
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
例子：

<p class="pl">，周一</p>
    <input type="text" placeholder="请输入内容" id="ipt3">
    <p class="p2">
        第一行<br>
        第二行
    </p>

    .pl::before{
        content: "你好";
        color: blue;
    }
    .pl::after{
        content: "后缀";
        color: blue;
    }
    /* ::-webkit-input-placeholder 设置input内的placeholder属性 */
    #ipt3::-webkit-input-placeholder{
        font-size: 12px;
        color: red;
    }
    /* 第一行的第一个字 */
    .p2::first-letter{
        font-size: 20px;
    }
    /* 第一行 */
    .p2::first-line{
        background-color: rosybrown;
    }
    /* 用户选中文本效果 */
    .p2::selection{
        background-color: yellow;
    }

布局语义化

<nav>导航条</nav>
<header>页面的头部，包含logo，搜索框，主导航等……</header>
<main>核心内容，展示页面的主体内容，只能使用一次</main>
<aside>侧边栏</aside>
<section>块，一部分，代替div使用</section>
<footer>底部，父元素为body，代表整个页面的底部信息</footer>