html加css加js

最新推荐文章于 2023-11-24 11:27:33 发布

姚恒骥

最新推荐文章于 2023-11-24 11:27:33 发布

阅读量424

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_56933482/article/details/116119116

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端

一、html
- 二、css
- - 三、js

一、html

1、基本标签
！+enter生成

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
 </body>
</html>

2、标签
点击a处链接跳转到name处
绝对路径：资源地址
相对路径：文件夹下的文件

  <a name="anchor">锚点定位</a>
    <a href="http://www.baidu.com" target="_blank">baidu</a>
    <a href="http://www.baidu.com" target="_self">baidu</a>
    <a href="http://www.baidu.com" target="_blank"><img 
    src="../image/2.jpeg" alt=""></a>
    <a href="#anchor">定位锚点</a>

表格
tr中增添th
cellpadding：表格里单元格之间的距离
cellspacing：表格里单元格内的空白部分;
rowspan（列）
colspan（行）

 <table border="1" width="50%" height="300" cellpadding="0" cellspacing="0">
        <!--cellspacing=0-->
        <caption>一一二二三三四四</caption>
        <tr bgcolor="red">
            <th rowspan="2">1</th>
            <!--合并列-->
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td colspan="3">4</td>
            <!--合并行-->
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

列表
type：设置样式
去掉样式：list-style:none;（无序）

    <!--有序列表 order list-->
    <ol type="A">
        <li>stress</li>
        <li>pressure</li>
        <li>angre</li>
        <li>tumb</li>
    </ol>
    <!--无序列表 unorder list-->
    <ul type="circle">
        <li>self-discipline</li>
        <li>satistY</li>
        <li>indifferent</li>
        <li>serf-confidence</li>
    </ul>

文本，字体

 <p>我是一个段落</p>
    <h1>我是一个标题</h1>
    <br>
    <!--我是换行标签-->
    <hr color="red" , size="10">
    <!--浏览器可以向下兼容-->
    <!--我是下划线标签-->
    <b>加粗字体</b>
    <i>斜体字体</i>
    <font color="red" , size="10" , face="楷体">我是字体标签</font><br>
    <font color="rgb(0,255,0)" , size="10" , face="楷体">我是字体标签</font><br>
    <font color="#0000FF" , size="10" , face="楷体">我是字体标签</font>
    <!--一个空格-->&nbsp;

表单标签
label覆盖名字与input中的id对应
input 中name提交给服务器，value为对应处显示的文本
type中属性
1、text文本（默认值）
2.password密码（隐藏）
3、radio单选框 checked（默认被选中）
4、checkbox复选框
5、button
下拉列表
select 后加若干option
textarea文本框

  <form action="#" method="POST">
        <!--get请求参数显示不安全-->
        <!--post请求参数不显示-->
        <label for="username">用户名:</label><input type="text" name="username" placeholder="请输入用户名:" id="username"><br> <label for="password">密码:&nbsp;&nbsp;</label>
        <input type="password" name="password" placeholder="请输入密码:" id="password"><br>
        <input type="submit" value="登录">
        <input type="radio" name="gander" value="male" checked> 男
        <input type="radio" name="gander" value="female">女 <br> 爱好
        <input type="checkbox" name="hobby" value="shopping">逛街
        <input type="checkbox" name="hobby" value="java" checked> java
        <input type="checkbox" name="hobby" value="game"> 游戏<br>
        <!--checked默认被选中-->
        <!--name属性相同-->
        省份:<select name="province" id="">
            <option value="">---请选择---</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">河北</option>
        </select><br>
        <textarea name="" id="" cols="30" rows="10">

视频与音频

  <video src="../media/1.mp4" autoplay loop>视频</video>
    <!--autoplay自动播放 loop循环播放-->
    <audio src="../media/2.mp3" autoplay音频></audio>

二、css

选择器
一、
*全体
h1 一类
.a class
#a:id

          *{
                color: green;(选择所有元素)
            }  
            h1{
                text-align: center;（选择所有h1标签）
            }
            .a{
                color: red （选择含有标签的一类，可多次出现）;
            }
            .b{
                color: blue;
            }    
        <p class="a"></p>
        <p class="b"></p>
          #a{
                color: green;（id选择器，只可出现一次）
            }
            #b{
                color: pink;
            }
        <p id="a"></p>
        <p id="b"></p>

二、
p#b p中的id
p.a p中的class
body p 包括p及其下标签
body>p只包括p
.a~.b包括class中的a，b可以不相邻

           （交集选择器由两个选择器直接连接构成，
                第一个选择器必须是元素选择器，第二个选择器必须是类选
                择器或id选择器）
           p#b{
                color:yellow;
            }
            p.a{
                color:pink;
            }
        <p class="a"></p>
        <p id="b"></p>
        <p id="b"></p>
        （并集选择器，所设置的样式对参与的每
                个选择器都有效）
                h1,p{           
                color:green;
            }
        <h1></h1>
        <p class="a"></p>
        （后代选择器使用空格进行分隔）
              body  p{
                color:red;
            }
        <p>
            hahaha
            <div>
                nimei
                <p>
                    3
                </p>
            </div>
        </p>
        （子元素选择器只选择匹配元素中的直接子元素）
            body > p{
                color:red;
            }
        <p>
            hahaha
            <div>
                nimei
                <p>
                    3
                </p>
            </div>
        </p>
         （通用兄弟选择器）
            .a~.b{
                color:red;
            }
        <p class="a">第一行</p>
        <p class="c">第三行</p>
        <p class="b">第二行</p>

三、伪类选择器(顺序不可变)

a{
text-decoration: none;(取消下划线)
}
a:link {color:#FF0000;} /* 未访问的链接 */（）
a:visited {color:#00FF00;} /* 已访问的链接 */（）
a:hover {color:#FF00FF;} /* 鼠标划过链接 */（）
a:active {color:#0000FF;} /* 已选中的链接 */（）

导航栏(先插入列表再加上浮动，基本全部都要插在li之中)

li
{
    float:left;
}
**```
行内块元素**
```css
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

浮动原理
让div标签并排显示，浮动不占空间
清除浮动
1 display:block 使生成的元素以块级元素显示,占满剩余空间;
2、clear

   		clear : none | left | right | both
     取值：
      none  :  默认值。允许两边都可以有浮动对象
      left   :  不允许左边有浮动对象
      right  :  不允许右边有浮动对象
      both  :  不允许有浮动对象

3、overflow

隐藏溢出
div.ex1 {
    overflow: scroll;（内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容）
}
div.ex2 {
    overflow: hidden;（	内容会被修剪，并且其余内容是不可见的。）
} 
div.ex3 {
    overflow: auto;（如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容）
}
div.ex4 {
    overflow: visible;（内容不会被修剪，会呈现在元素框之外）
}

浮动与行内块元素
浮动：一浮全浮
父元素有高度，无需清除浮动
都可以撑大盒子，一行显示div
背景

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
（简写）
body {background:#ffffff url('img_tree.png') no-repeat right top;}
过渡
div{
    transition: width 1s linear 2s;
    -webkit-transition:width 1s linear 2s;
}

文本属性

div{
color:
text-align:cente;
text-indent:2em;
text-decoration:underline;
line_height:20px;
}

css引入方式
内部样式表在style内（嵌入式）
行内样式表在行内div标签内加入style
外部链接表link
chrome调试工具
F12 ，检查中elements
盒子模型

div{
	 height:100px;
     width: 300px;
     border: 25px solid green;（边框）
	 margin:20px;（外边距）
	 padding:10px;（内边距）
	 box-sizing: content-box;(防止盒子被撑大)
}

清除内外边距
*{
margin：0;
padding：0；

}
在这里插入图片描述
总结
盒子总宽度=定义宽度+边框宽度+左右内边距
简言之 padding可以撑大盒子 box-sizing: content-box;防止
阴影

（水平阴影，垂直阴影，模糊的距离，以及阴影的颜色:）
div { box-shadow：10 px 10 px 5 px ＃888888;
}
div { font-shadow：10 px 10 px 5 px ＃888888;
}

定位方式position
（浮动与绝对定位不能混用，优先于float）
css中简单写法及属性书写顺序
.nav 等于 div中包裹class=nav
li>ol5 等于 li中加入五个ol
同理 table>tr3>td*3等价于三行三列表格
在这里插入图片描述例如

三、js

姚恒骥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html加css加js

前端一、html二、css三、js一、html1、基本标签html基本标签！加enter 自动生成<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title></title> </head><body> </body></html>2、文本标签二、css三、js...
复制链接

扫一扫