HTML、CSS（牛客）

最新推荐文章于 2024-10-04 06:11:34 发布

O hh

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量70

点赞数

分类专栏：前端文章标签： html css javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_50863341/article/details/128777867

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.HTML

1.表单类型

密码框（默认值）

<input type="password" value="nowcoder">

复选框（选中状态）

<input type="checkbox" checked>

2.表格结构

表格标题

<caption>nowcoder</caption>

行<tr></tr>列<td></td>

<tr>
     <td></td>
     <td></td>
     <td></td>
</tr>

3.图像

img src是其不可缺少的属性，图片地址 title:显示文本，当鼠标停在图片上时，会显示标注的文本内容 alt:代替文本，图片显示不了时，文本就会代替图片

<img src="图片地址" title="标题属性" alt="代替文本属性">

4.新窗口打开文档

<a>为超链接标签，其中target属性可以决定目标网页的打开形式

_self: 默认值，在当前窗口跳转;_blank: 在新窗口跳转

<a href="" target="_blank">新文档</a>

5.自定义列表

自定义列表的结构为dl包裹dt包裹dd

dl是自定义列表的整体，用于包裹dt和dd

dt是表示自定义列表的主题

dd是表示针对自定义列表主题的每一项内容

<dl>       
     <dt>列表项</dt>       
     <dd>列表项内容</dd>
</dl>

6.加粗文字

1）使用<strong>标签

<p><strong>牛客网</strong>程序员必备求职神器</p>

2）使用JS解决

let p = document.getElementsByTagName("p")[0];
// 获取第一个p元素
p.innerHTML = p.innerText.replace("牛客网", "<strong>牛客网</strong>");
// 用加上<strong>标签的文本替换

7.语义化标签（导航）

每个nav是一个导航栏，导航栏内部使用<a>设置具体模块

<header>
    <nav>
        <a>导航1</a>
        <a>导航2</a>
    </nav>
    <nav>
        <a>导航3</a>
        <a>导航4</a>
    </nav>
</header>

8.音频媒体标签

常用属性名：src、controls、autoplay、loop

1.src:媒体文件路径

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

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

4.loop:循环播放

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

9.视频媒体标签

video是控制视频的元素

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

2、loop属性：循环播放

3、muted属性：静音播放

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

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

6、autoplay属性：自动播放

<video width="100px" height="100px" onerror="fn()" controls >
    <source src="movie.mp4" type="video/mp4">
</video>

二.CSS

CSS选择器——标签、类、ID选择器

内置标签前不需要加东西；类名前加‘.’; id前‘#’

div{

}
.green{

}
#black{

}

设置具体标签下的第n个元素的背景颜色（伪类选择器）

标签:nth-child(n){}

li:nth-child(2){
    background-color:rgb(255,0,0);
}

关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

li:nth-child(even) {
    background-color: rgb(255, 0, 0);
}

伪元素

div::after表示在div元素后插入内容。

在元素上，content 的初始值为 ‘normal’。在:before和:after上，如果指定了content 的初始值为 ‘normal’，则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以:before和:after才需要指定一个看似无意义的 content: ""; 来初始化content的值。

题目规定了宽高，为了使宽高设置有效又必须显式定义该伪元素为块级元素，也就是语句 display:block

div::after{

}

画圆

在css中通常将圆的直径设置为某个盒子的宽度和高度，再通过border-radius设置盒子四个边角的弧度。

div{
      width:100px;
      height:100px;
      border-radius:50px;
      border:1px solid black;
}

设置盒子宽高

内间距padding

外间距margin

标签下的某个类<标签>.类{}

div.box{
        padding:20px;//内间距
        margin:10px;//外间距
}

段落标识

<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>

<html>
    <head>
        <meta charset=utf-8>
        <a href="jquery-2.1.4"></a>
    </head>
    <body>
    </body>
    <script>
        let p = document.createElement("p");
        p.innerText = "牛客网是一个专注于程序员的学习和成长的专业平台。";
        document.body.append(p);
    </script>
</html>

<html>
    <head>
        <meta charset=utf-8>
        <a href="jquery-2.1.4"></a>
    </head>
    <body>
        牛客网是一个专注于程序员的学习和成长的专业平台。
    </body>
    <script>
        let body = document.getElementsByTagName("body")[0];
        body.innerHTML = body.innerText.replace("牛客网是一个专注于程序员的学习和成长的专业平台。","<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>");
    </script>
</html>

<html>
    <head>
        <meta charset=utf-8>
        <a href="jquery-2.1.4"></a>
    </head>
    <body>
    </body>
    <script>
        document.write('<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>');
    </script>
</html>