超文本标记语言

KKAming

已于 2024-01-05 00:21:12 修改

阅读量325

点赞数 6

文章标签： html 前端

于 2023-12-02 01:46:49 首次发布

本文链接：https://blog.csdn.net/2301_78263022/article/details/134746042

版权

初学时做的一些笔记 html运行一遍就知道什么意思了供我复习与get到新知识的笔记需要评论相关知识点不出第二天我秒更有个设计兼前端的梦给的动力

常用标签

<center></center> 很好用的html标签可以直接套在其他标签外让其居中

换行

文本标签

加粗字体

<bm> 加粗字体

表示字体倾斜

<s> 删除线

<del> 删除线

上解释

下解释

<h1> 标题标签1~5 1是最大的以此类推

<hr> 可以理解为一条线

  笨方法空格

&emsp; 笨方法空格

<hr color="red" width="500" align="center" noshade>
<--noshade表示五阴影 方法可以看到-->

<a> 超链接标签万物皆可跳

<a href="链接" target="_blank" title="鼠标悬停提示">自定义链接名</a>

<--href表示链接  target默认表示在原有网站上刷新  title表示当鼠标悬浮上去的时候有提示-->

img 图片标签

<img src="位置" alt="666" title="悬停提示" width="300px" height="300px">

表格标签

结构

<table>
    <tr>
        <td>
           第一行第一列    
        </td>
    </tr>
    <tr>
        <td>
            第二列第一行
        </td>
    </tr>
</table>

<tr> 表示一列

<td> 表示一行

密码标签

结构

<form action="" target="_blank" method="post">
    用户名<input type="text" name="dada" id="" placeholder="请输入您的用户名"> 
    密码<input type="password" name="dada" id="" placeholder="请输入您的密码">
    <input type="submit" value="登录">
    <button type="reset">请在输入一边</button>
    <input type="button" value="aaaa">
    <!--提交框submit 按钮框button 文本text 重置框resrt-->
</form>

特殊符号收集

&COPY;        © 

&reg;             ®

&trade;          ™

音视频标签

音频标签 audio

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>音频</title>
</head>
<body>
    <h1>音频</h1>
    <!-- 音频标签 -->
    <audio src="./晴天.mp3" controls loop aotoplay></audio>
    <!-- controls    控制台 -->
    <!-- loop    循环播放 -->
    <!-- aotoplay    自动播放 -->
    <!-- muted   静音播放 -->
</body>
</html>

视频标签 video

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>视频</title>
</head>
<body>
    <!-- <h1>视频</h1> -->
    <!-- 视频标签 -->
    <video src="./001.mp4" controls loop></video>
    <!-- controls    控制台 -->
    <!-- loop    自动持续播放 -->
    <!-- autoplay    自动播放 -->
    <!-- muted   静音播放 -->
    <!-- poster  海报 -->
</body>
</html>

增强表单input

标签 input type = " "	解释
emaill	邮箱标签加name返回值给后端
tel	手机电话号
range	滑块效果 min max可以控制数值大小 step表示从那开始
number	数字类型 min max可以控制数值大小 step表示从那开始
search	搜索框
date	日期框
month	月份框
week	周选择框
datatime-local	精确到时间选择框

案例

下拉框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>datalist</title>
</head>
<body>
    <input type="text" list="mylist">
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手镯"></option>
    </datalist>
</body>
</html>

表单优化

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签优化</title>
</head>
<body>
    <form action="">
        用户名<input type="text" autofocus required pattern="[0-9][A-Z]{3}">
        邮箱<input type="email" required multiple>
        登录<input type="submit">
    </form>
    <!-- autofocus   表示自动跳到输入框 -->
    <!-- required    表示必填项 不能为空 -->
    <!-- multiple    历史下拉框 -->
    <!-- pattern     正则表达式[0-9][A-Z]{3}第一个表示0到9选一个数字 第二个表示A到Z 第三个表示重复三次 -->
</body>
</html>