2.标签

文章目录

• 一、img标签
• • 1.img标签格式
  • 2.注意点
  • 3、属性
• 二、a标签
• • 1.a标签格式
  • 2.属性
  • 3.假链接
  • 4.锚点
• 三、base标签
• • 1.base标签格式
  • 2.注意点
• 四、列表
• • 1.列表格式
• 五、表格
• • 1.table标签格式
  • 2.属性
• 六、表单
• • 1.input标签格式
  • 2.常用表单元素
  • 3.datalist标签
  • 4.HTML5（了解）
  • 5.非input标签
• 七、video
• • 1. video标签格式
  • 2. 属性
• 八、audio
• • 1.audio标签格式
• 九、详情和概要
• 1.格式
• 十、marquee
• • 1.格式
  • 2.属性
• 十、marquee
• • 1.格式
  • 2.属性

一、img标签

1.img标签格式

2.注意点

• img标签不会独占一行。

3、属性

• height：高度，不设置为默认原图片高度。
• width：宽度，不设置为默认原图片宽度。
• alt：图片无法显示时所显示的文本内容。
• title：鼠标悬停在图片上时显示的内容。

二、a标签

1.a标签格式

<a href="指定需要跳转的目标页面">需要展现给用户的内容</a>

//点击文字跳转
<a href="images/10.jpg">你好</a>

//点击图片跳转
<a href="images/10.jpg"><img src="images/2.jpg" alt=""></a>
           

2.属性

• target：跳转的形式。
  • _self：在当前页面中跳转，默认值。
  • _blank：在新建页面跳转。
• title：鼠标悬停在显示内容上时显示的内容。

3.假链接

//点击后会刷新页面
<a href="#"></a>

//点击后不会刷新页面
<a href="Javascript:"></a>
           

4.锚点

• 通过使用a标签跳转到所指定的id名称的位置。
• 即可以跳转到本页面指定位置，也可以跳转到其他页面的指定的位置。

<h2>顶部</h2>
<a href="#center">跳转到中部</a>
<br>
<br>
<br>
<h2 id="center">中部</h2>
<a href="2.html#center">跳转到测试页面的中部</a>
           

三、base标签

1.base标签格式

<base href="_blank" target="_blank" rel="external nofollow" >
           

• 统一当前页面所有超链接的跳转形式。

2.注意点

• base标签必须写在head标签对中。

四、列表

1.列表格式

• 无序列表

<ul>
    <li>无序列表条目</li>
</ul>
           

• 有序列表

<ol>
    <li>有序列表条目</li>
</ol>
           

• 定义列表

<dl>
    <dt>标题</dt>
    <dd>标题描述</dd>
</dl>
           

五、表格

1.table标签格式

• tr表示表格中的一行。
• td表示表格中的一个单元格。

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

caption标签：表格的标题。

2.属性

• border：边框属性，默认没有边框，只能给table标签使用。
• width：表格宽度，可以给table和td标签使用。
• height：表格高度，可以给table和td标签使用。
• align：水平对齐，可以给table、tr和td标签使用，如果同时tr和td都设定了水平对齐的方向，显示td的。
• valign：垂直对齐，只能给tr和td标签使用。
• cellspacing：外边距，单元格之间的距离，默认为2px。
• cellpadding：内边距，单元格边框与单元格内容的距离，默认为1px。
• colspan：水平合并单元格，可以给td标签使用。
• rowspan：垂直合并单元格，可以给td标签使用。

六、表单

1.input标签格式

<form action="">
     <表单元素>
</form>
           

2.常用表单元素

• label：label标签能实现文字和输入框的绑定，当点击文字时会聚焦到for属性指定的输入框

<form action="">
    <label for="username"> 用户名：</label><input type="text" id="username"><br>
    <label for="pwd">密码：</label><input type="password" id="pwd"><br>
    性别：<input type="radio" name="sex">男
    <input type="radio" name="sex" checked='checked'>女<br>
    爱好：<input type="checkbox" checked='checked'>音乐
    <input type="checkbox">运动
    <input type="checkbox" checked='checked'>阅读<br>
    <input type="button" value="按钮" onclick="alert('你好')">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
           

3.datalist标签

• datalist：为输入框增加可选的数据，兼容性差。

请输入你的本命：<input type="text" list="exo">
<datalist id="exo">
    <option>XIUMIN</option>
    <option>LAY</option>
    <option>SUHO</option>
    <option>BAEKHYUN</option>
    <option>CHEN</option>
    <option>CHANYEOL</option>
    <option>D.O.</option>
    <option>KAI</option>
    <option>SEHUN</option>
</datalist>
           

4.HTML5（了解）

• 自动校验类型是否为邮件或者域名等，但兼容性差。

邮箱：<input type="email"><br>
域名：<input type="url"><br>
           

5.非input标签

• select：下拉列表标签。

<select>
    <optgroup label="M队">
        <option selected='selected'>XIUMIN</option>
        <option>LAY</option>
        <option>CHEN</option>
    </optgroup>
    <optgroup label="K队">
        <option>SUHO</option>
        <option>BAEKHYUN</option>
        <option>CHANYEOL</option>
        <option>D.O.</option>
        <option>KAI</option>
        <option>SEHUN</option>
    </optgroup>
</select>
           

• textarea：多文本输入框，可自定行列，可手动拉伸大小。
  • cols：列数。
  • rows：行数。

七、video

1. video标签格式

<video src=""></video>

<video>
    <source src="" type="video/webm"></source>
    <source src="" type="video/ogg"></source>
    <source src="" type="video/mp4"></source>
</video>
           

2. 属性

• src：视频地址。
• autoplay：是否自动播放。
• controls：是否显示控制条。
• poster：视频为播放前的占位图片。
• loop：是否需要重复播放。
• preload：预加载视频，与autoplay冲突，优先级autoplay更高。
• muted：是否静音。

八、audio

1.audio标签格式

• 属性基本与video相同，除了poster/height/width。

<audio src=""></audio>

    <audio>
        <source src="" type="audio/mp3">
    </audio>
           

九、详情和概要

1.格式

<details>
    <summary>概要</summary>
    详情
</details>
           

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kz70vJ7q-1619533435576)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20210427215342485.png)]

十、marquee

1.格式

• 实现跑马灯效果。

2.属性

• direction：滚动方向。
• behavior：滚动类型。
  • slide：到边界停止。
  • alternate：到边界反弹。

• scrollamount：滚动速度。

  o>

# 九、详情和概要

# 1.格式

```html
<details>
    <summary>概要</summary>
    详情
</details>
           

十、marquee

1.格式

• 实现跑马灯效果。

2.属性

• direction：滚动方向。
• behavior：滚动类型。
  • slide：到边界停止。
  • alternate：到边界反弹。
• scrollamount：滚动速度。
• loop：滚动次数，默认-1，无限播放。