vue3学习13：html一些基本知识（标签）

自学用，总结可能不够全面。html组成部分：html标签：网页的整体head标签：网页的头部body标签：网页的身体title标签：网页的标题1.h标签文字都有变大，并且从h1 → h6文字逐渐减小，独占一行2.段落标签3.换行标签让文字强制换行显示4.水平线标签分割不同主题内容的水平线显示：5.文本加粗6.下划线7.倾斜8.删除线9.图片标签src：目标图片的路径alt：替换文本，当图片加载失败

Computer@Player

2861人浏览 · 2022-07-12 22:11:16

Computer@Player · 2022-07-12 22:11:16 发布

自学用，总结可能不够全面。

html组成部分：
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

1.h标签
文字都有变大，并且从h1 → h6文字逐渐减小，独占一行

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

在这里插入图片描述

2.段落标签

<p>段落内容</p>

在这里插入图片描述
3.换行标签
让文字强制换行显示<br>

    <p>段落内容</p>
    <br>
    <p>段落内容</p>

在这里插入图片描述

4.水平线标签
分割不同主题内容的水平线

<hr>

显示：
在这里插入图片描述
5.文本加粗

<p><strong>段落内容</strong>段落内容<b>段落内容</b></p>

在这里插入图片描述

6.下划线

<p><u>段落内容</u>段落内容<ins>段落内容</ins></p>`

在这里插入图片描述

7.倾斜

<p><i>段落内容</i>段落内容<em>段落内容</em></p>

在这里插入图片描述

8.删除线

<p><s>段落内容</s>段落内容<del>段落内容</del></p>

在这里插入图片描述

9.图片标签
src：目标图片的路径
alt：替换文本，当图片加载失败时，才显示alt的文本
title：当鼠标悬停时，才显示的文本
width和height：宽度和高度

<img src="images\girl.jpg" alt="这是美女" title="这是title文字, 鼠标悬停的时候显示" width="1080" height="800">

在这里插入图片描述

10.音频标签
autoplay 如果出现该属性，则音频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则每当音频结束时重新开始播放。
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src 要播放的音频的 URL。

<audio src="music.mp3" controls autoplay loop></audio>

在这里插入图片描述

11.视频标签

autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height 设置视频播放器的高度。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted 如果出现该属性，视频的音频输出为静音。
poster 规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src URL 要播放的视频的 URL。
width 设置视频播放器的宽度。

<video src="./video.mp4" controls autoplay muted loop></video>

12.链接标签
标签定义超链接，用于从一张页面链接到另一张页面。
a标签从未点击过，默认文字显示蓝色,a标签点击过之后，文字显示为紫色
href：点击之后跳转去哪一个网页
target：目标网页的打开形式
• 取值1：_self：在当前窗口中跳转
• 取值2：_blank：在新窗口中跳转

<a href="http:xxxxxxx.cn">直接加</a>

13.列表标签
无序列表
ul标签中只允许包含li标签，li标签可以包含任意内容

<ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
</ul>

在这里插入图片描述
有序列表
ol标签中只允许包含li标签，li标签可以包含任意内容

<ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
</ol>

在这里插入图片描述
自定义列表
dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容，dd前会默认显示缩进效果

<dl>
        <dt>english:</dt>
        <dd>a</dd>
        <dd>b</dd>
        <dd>c</dd>
</dl>

在这里插入图片描述

14.表格标签
以行+列的单元格

table标签：表格整体
tr标签：表格每行
td标签：对于主题的每一项内容

border：边框宽度
width属性：表格整体的宽度
height属性：表格整体的高度

caption 标题
th标签书写在tr标签内部（用于替换td标签）会加粗

thead：表格头部
tbody：表格主体
tfoot：表格底部

rowspan：跨行合并→垂直方向合并
colspan：跨列合并→水平方向合并

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jenny</td>
                <td>560</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Danny</td>
                <td>550</td>
                <td>16</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>Li Ming</td>
                <td>666</td>
                <td>1</td>
            </tr>
        </tfoot>
    </table>

在这里插入图片描述

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jenny</td>
                <td rowspan="2">560</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Danny</td>
                <td>16</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>Li Ming</td>
                <td colspan="2">1</td>
            </tr>
        </tfoot>
    </table>

在这里插入图片描述

15：表单标签
value属性：用户输入的内容，提交之后会发送，端服务器， name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义，后端接收到数据的格式是：name的属性值 = value的属性值

<body>
    <!-- 写什么就显示什么 -->
    文本框: <input type="text">
    <br>
    <br>
    <!-- 书写的内容都会变成点点显示 -->
    密码框: <input type="password">

    <br>
    <br>
    单选框: <input type="radio">

    <br>
    <br>

    多选框: <input type="checkbox">

    <br>
    <br>

    上传文件: <input type="file">
</body>

在这里插入图片描述

<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">

在这里插入图片描述
name属性对于单选框有分组功能 • 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
checked为默认选中。

<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女

<form action="">
        用户名: <input type="text">
        <br>
        <br>
        密码: <input type="password">
        <br>
        <br>
        <input type="submit" value="注册">
        <input type="reset">
        <input type="button" value="no">
    </form>

在这里插入图片描述
select下拉菜单标签

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

selected：下拉菜单的默认选中

<select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option selected>d</option>
    </select>

在这里插入图片描述

textarea文本域标签*
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

<textarea cols="10" rows="10">请输入：</textarea>

在这里插入图片描述
label标签
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
for 规定 label 与哪个表单元素绑定。
form 规定 label 字段所属的一个或多个表单。

  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">

在这里插入图片描述

div标签
div标签：一行只显示一个（独占一行
span标签：一行可以显示多个

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^