科技资讯

Document

html碎片化学习

有菜鸟教程能系统学习

1.表格

<table>
        <caption>nowcoder</caption>
        <thead>
            <!-- <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
            </tr> -->
        </thead>
        <tbody>
            <tr>
                <td>第一行，第一列</td>
                <td>第一行，第二列</td>
                <td>第一行，第三列</td>
            </tr>
            <tr>
                <td>第二行，第一列</td>
                <td>第二行，第二列</td>
                <td>第二行，第三列</td>
            </tr>
        </tbody>
    </table>

2.表单

<form name="input" action="html_form_action.php" method="get">
        Username:<input type="text" name="firstname"/><br>
        PassWord:<input type="password" name="password"/><br>
        <!-- 当两个value相同时，他们就被分到了一组，这时候在去点击它，就可以只选择一个了 -->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="male">女
        <br>
        <!-- checked是已经被选中 -->
        <input type="checkbox" name="play" value="baskbll" checked>篮球
        <input type="checkbox" name="play" value="dancy">跳舞
        <input type="checkbox" name="play" value="drank">画画
        <br>
        <input type="submit" value="提交"> 
    </form>

3.a标签

  • href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
  • target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
  • title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
  • rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

4.列表

<!-- 无序列表 -->
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
<!-- 有序列表 -->
    <ol>
        <li>cg</li>
        <li>wea</li>
    </ol>
<!-- 自定义列表 -->
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>

5.头部标签

<header>
    <nav></nav>
   </header>

6.span标签

单独设计一段话内的样式

<p><span>我</span>的家</p>

7.音频标签

audio:

src:媒体文件路径

controls:在网页内显示音频控件

autoplay:打开网页时自动播放媒体文件

loop:循环的英文、就是循环播放

<audio src="" controls></audio>

8.视频标签

1、controls属性：显示控制组件

2、loop属性：循环播放

3、muted属性：静音播放

4、preload属性：页面加载在播放

5、width/heigth属性：视频的宽高

6、autoplay属性：自动播放

7、onerror属性：在错误是会执行这个函数

<video src="" controls onerror="fn()">
        <source src="" type="video/mp4">
        <source src="" type="">
   </video>

9.标签选择

选择列表标签的第二和第四

<head>
    <meta charset="UTF-8">
    <style>
       /* 填写样式 */
       li:nth-child(2){
        background-color:rgb(255, 0, 0);
       }
       li:nth-child(4){
        background-color:rgb(255, 0, 0);
       }
    </style>
</head>

<body>
  <ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
  </ul> 
</body>

10.伪元素

用于添加不同标签的不同状态样式

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

11.内联元素

{display:inline;}

内联元素具有以下特点：

  1. 它们与同类型的元素默认是同一行显示的。
  2. 它们是内容撑开宽度，不支持宽高。
  3. 它们不支持上下的margin和padding。
  4. 它们之间的换行会被解析。

12.section

在CSS中，section是一个语义化的标签，用于将文档的内容分组或区域化。它可以用来定义网页的不同部分，比如章节、段落、侧边栏等。通过使用section标签，可以使页面结构更加清晰，并且可以方便地为不同区域应用样式或布局。section可以配合h1、h2、h3、h4、h5等题目标签一块儿使用，体现布局文档的结构。

    <section class="topbranch"></section>

13.px、rem、em

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素

14.instance

instanceof是Java、php中的一个二元操作符（运算符），它的作用是判断一个引用类型变量所指向的对象是否是一个类（或接口、抽象类、父类）的实例，即它左边的对象是否是它右边的类的实例，该运算符返回boolean类型的数据。

可以用来判断继承中的子类的实例是否为父类的实现，相当于c#中的is操作符。

不可以查看某一个数是否在数组内

function _instanceof(left, right) {
            if(left==right){
                return 1
            }else{
                return 0
            }
        }

15.数学函数Math

JavaScript 的 Math 对象中包含了很多常用的数学函数和常量。以下是一些常见的 Math 对象的方法和常量：

方法：

  1. Math.abs(x)：返回 x 的绝对值。
  2. Math.acos(x)：返回 x 的反余弦弧度值（弧度值）。
  3. Math.asin(x)：返回 x 的反正弦弧度值（弧度值）。
  4. Math.atan(x)：返回 x 的反正切弧度值（弧度值）。
  5. Math.ceil(x)：返回大于等于 x 的最小整数。
  6. Math.cos(x)：返回 x 的余弦值（弧度值）。
  7. Math.exp(x)：返回 e 的 x 次幂。
  8. Math.floor(x)：返回小于等于 x 的最大整数。
  9. Math.log(x)：返回 x 的自然对数。
  10. Math.max(...args)：返回提供的所有参数中的最大值。
  11. Math.min(...args)：返回提供的所有参数中的最小值。
  12. Math.pow(x, y)：返回 x 的 y 次幂。
  13. Math.random()：返回一个伪随机数（在 [0, 1) 之间）。
  14. Math.round(x)：返回 x 四舍五入后的整数。
  15. Math.sin(x)：返回 x 的正弦值（弧度值）。
  16. Math.sqrt(x)：返回 x 的平方根。
  17. Math.tan(x)：返回 x 的正切值（弧度值）。

常量：

  1. Math.PI：π 的近似值（约等于 3.14159265358979323846）。
  2. Math.E：e 的近似值（约等于 2.71828182845904523536）。
  3. Math.SQRT2：2 的平方根的近似值（约等于 1.41421356237309504880）。
  4. Math.SQRT1_2：(1/2) 的平方根的近似值（约等于 0.7071067811865476)。