凡人多烦事01

这个屌丝很懒，什么也没留下！

热门标签

HTML基础_如果想设置下列标签的奇数行变色效果,正确选项的是( )。

作者：凡人多烦事01 | 2024-04-15 10:22:30

踩

如果想设置下列标签的奇数行变色效果,正确选项的是( )。

HTML基础

1.基本结构

文档声明（doctype）

基本结构：

zh为中文网站，en是英文网站

!+tab 生成整体结构代码

Ctrl+/ 注释快捷键

2.语法

实体转义字符

& xxx ;

可以上w3shool.com 查看

meta 的一些设置:

meta主要用于设置页面中的一些元数据，元数据不是给用户看

charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
- keywords 表示网站的关键字，可以同时指定多个关键字，关键字用，隔开
- description 用于指定网站的描述：网站的描述会显示在搜索引擎的搜索结果中
- title 标签的内容会作为搜索结果的超链接上的文字显示

<head>
    <meta name="keywords" content="HTML5,前端,CSS3"> 
    <meta name="description" content="这是一个好网站">
</head>
1
2
3
4

将页面重定向到另一个网站

<head>    
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
1
2
3

加粗、斜体：

em标签，strong标签

乱码问题：编译器不同

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZK89cIPg-1620132571338)(C:\Users\86176\AppData\Local\Temp\msohtmlclip1\01\clip_image002.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3pGPx2l-1620132571339)(C:\Users\86176\AppData\Local\Temp\msohtmlclip1\01\clip_image004.jpg)]

修改相同的编译器即可

块/行内元素：

块元素：

在网页中一般通过块元素对页面进行布局

行内元素：

行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。

布局标签：

（结构化语义标签）

header 表示网页的头部
main 表示网页的主体部分（一个页面中只会有一个main）
footer表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文案
section 表示一个独立的区块，上边的标签都不能表示试用section
div 没有语义，就用来表示一个区块，div还我们主要布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字

列表：

ul是无序，ol是有序，用li表示列表项

定义列表：

使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明

超链接：

a标签，属性：href指定跳转的目标路径（外部/内部网站地址）

超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

相对路径：

./表示当前文件所在目录
…/表示当前文件所在目录的上一级目录
都不写则相当于写了./

target属性：

_self 默认值在当前页面中打开超链接
_blank 在一个新的页面中打开超链接

<body>
    <a href="https://www.baidu.com"><strong>百度一下</strong></a>
    <br><br>
    <a href="https://www.bilibili.com" target="_blank"> <em>哔哩哔哩</em></a>
   
</body>
1
2
3
4
5
6

-可以将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置。

-课以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

-可以使用javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生。

<body>
<a href="#bottom">去到底部</a>
<a href="#p1">去到最后一段</a>
<a href="#" id="top">回到顶部</a>
<a href="javascript:;">这是一个新的超链接</a>
</body>
1
2
3
4
5
6

图片标签：

img标签引入外部图片，img标签是一个自结束标签

img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性：

src 属性指定的是外部图片的路径（路径规则和超链接一样）
alt 图片的描述，默认不显示，有些浏览器会因图片无法加载时显示（可不写）
width，height（只修改一个，另一个会等比例缩放）

图片格式：

jpg（jpeg）

支持的颜色毕竟丰富，不支持透明效果，不支持动图
一般用来显示照片

gif

支持的颜色比较少，支持简单透明，支持动图
颜色单一的图片，动图

png

支持的颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片（专为网页而生）

webp

谷歌推出的专门用来表示网页的图片的一种格式
具备其他格式的所有优点，而且文件小
缺点是兼容性不好

base64

将图片使用base64编码，图片转换为字符，通过字符的形式引入图片
一般都说一些需要和网页一起加载的图片才用
base64格式可以直接百度进行图片编码

音视频播放：

audio 标签用来向页面中引入一个外部的音频文件，默认情况下不允许用户自己控制播放停止

属性：

controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay则音乐在打开页面会自动播放，但目前来讲大部分浏览器都不会自动对音乐进行播放
loop音乐是否循环播放

多个source解决兼容问题，能用就选择，不能用就往下选（第三句是老版本写法，适用IE8以下）

video（常用方法）

用法于audio基本一样

从别的服务器拿视频，减少本地网络压力

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8pbRmkCd-1620132571342)(C:\Users\86176\AppData\Local\Temp\msohtmlclip1\01\clip_image002.jpg)]

表格：

在table中使用tr表示表格中的一行，td表示一个单元格

calspan 横向的合并单元（等于几就占几格）

rowspan 纵向合并单元（同上）

<body>
    <table>
        <te>
        	<td></td>
            <td></td>
        </te>
    </table>
</body>
1
2
3
4
5
6
7
8

长表格：

可以将一个表格分为三部分：

头部 thead (th表示头部的单元格)

主体 tbody

底部 tfoot

<body>
   <table>
       <thead>
   		<tr>
           	<th></th>
           </tr>
       </thead>
       <tbody></tbody>
       <tfoot></tfoot>
   </table>
</body>
1
2
3
4
5
6
7
8
9
10
11

表格的样式：

border-spacing 指定边框之间的距离

border-collapse:collapse; //设置边框的合并

如果表格中没有使用tbody而是使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放入tbody中，tr不是table的子元素

（设置奇数行变色）

默认情况下元素在td中是垂直居中的，可以通过vertical-align设置（text-align设置水平）

可以将元素设置为单元格

只有在显示格式化数据才使用表格

表单:

在网页中的表单用于将本地的数据提交给远程的服务器

使用form标签来创建一个表单

action （必须写）表单要提交的服务器地址

<body>
    <form action="target.html">
        <!-- 文本框 
        注意：数据要提交到服务器中，必须要为元素指定一个name
        autocomplete="off"关闭自动补全
        readonly 将表单项设置为只读，数据会提交
        disabled 将表单项设置为禁用，数据不会提交
        autofocus 设置表单项自动获取焦点（光标）
        -->
        文本框<input type="text" name="helloworld">
        <br>
        <!-- 密码框 -->
        密码框<input type="password" name="password">
        <br>
        <!-- 提交按钮 -->
        <input type="submit" value="登录">
        <br>
        <!-- 单选按妞
        注意：必须得有一个相同name；
        -必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
        -checked 可以将单选按钮设置为默认选中
        -->
        单选按妞<input type="radio" name="hello" value="a">
        <input type="radio" name="hello" value="b">
        <input type="radio" name="hello" value="c" checked>
        <br>
        <!-- 多选框 -->
        多选框<input type="checkbox" name="test" value="1">
        <input type="checkbox" name="test" value="2">
        <input type="checkbox" name="test" value="3" checked>
        <br>
        <!-- 下拉列表
        selected 设为默认 -->
        <select name="hello">
            <option value="1">辜垂涛</option>
            <option value="2">王斯</option>
            <option selected value="3">孙梓彬</option>
        </select>
        <!-- 重置按妞 -->
        <input type="reset">
        <!-- 普通按妞 -->
        <input type="button" value="按钮">

    </form>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

selected 设为默认 -->

辜垂涛
王斯
孙梓彬

</form>
1

```

[外链图片转存中…(img-SZzPzSP0-1620132571345)]

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】