HTML汇总

最新推荐文章于 2023-07-12 21:46:06 发布

小辉吖～

最新推荐文章于 2023-07-12 21:46:06 发布

阅读量489

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_52845451/article/details/127148232

版权

HTML常用标签

标签名	说明
h1~h6	双标签，块级元素，1到6级标题标签 h1一个页面中只能有一个，一般用在logo上
p	双标签，块级元素，段落标签
br	单标签，块级元素，换行标签
div	双标签，块级元素，无语义，相当于一个大盒子
span	双标签，行内元素，无语义，相当于一个小盒子
img	单标签，行内块元素，图像标签，图片居中对齐需要给父元素加text-align: ‘center’。里面的属性有 src(图片路径) alt(图片显示失败，显示的提示文字) title(鼠标停到图片上的提示文字) width height border
a	双标签，行内元素，超链接标签。里面的属性有 href(链接路径) target(链接打开方式，_blank是新网页打开，__self是当前页面打开，默认的)

注：锚点链接

通过id进行关联

<body>
    <h1>目录</h1>
    1 <a href="#ex">早年经历</a>
    <br >
    <h3 id="ex">早年经历</h3>
    <p>
        ......
    </p>
</body>

文本格式化标签

标签名	说明
strong / b	文字加粗
em / i	文字倾斜
del / s	删除线
ins / u	下划线

实体字符

空格：&nbsp;
大于号：&gt;
小于号：&lt;
注册商标：&reg;
版权：&copy;
平方2(上标2)：&sup2;
立方3(上标3)：&sup3;

表格

作用：用来展示数据

标签名	说明
table	表格
thead	表头
tbody	表身
tr	行
th	表头单元格会加粗居中显示)
td	单元格
cellspacing	规定单元格之间的空白，默认2px
cellpadding	规定单元边沿与其内容之间的空白，默认1px

合并单元格(三部曲)

确定是跨行还是跨列

跨行合并：rowspan = “合并单元格的个数”

跨列合并：colspan = “合并单元格的个数”

找到目标单元格，写上合并方式 = 合并的单元格数量
删除多余的单元格

列表

作用：用来布局页面
有序列表ol 无序列表ul 里面只可以放li li里面可以放任何标签 ol>li ul>li
自定义列表dl dl里面只有一个dt，可以有多个dd dl里面只能包含dt和dd dl>dt>dd

表单

作用：收集用户信息每个表单元素按理说都应该有自己的name值，用于区分

<form action="demo.php" method="post" name="name1">
        <table>
            <tbody>
                <tr>
                    <!-- 单行文本框 -->
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="user" id="" maxlength="7" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <!-- 密码文本框 -->
                    <td>密码：</td>
                    <td>
                        <input type="password" name="psd" id="" maxlength="16" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <!-- 单选框 -->
                    <td>性别：</td>
                    <td>
                        <label for="man">
                            <input type="radio" name="sex" id="man" checked="checked">男
                        </label>
                        <label for="woman">
                            <input type="radio" name="sex" id="woman">女
                        </label>
                    </td>
                </tr>
                <tr>
                    <!-- 复选框 -->
                    <td>爱好：</td>
                    <td>
                        <label for="swim">
                            <input type="checkbox" name="hobby" id="swim">游泳
                        </label>
                        <label for="run">
                            <input type="checkbox" name="hobby" id="run">跑步
                        </label>
                        <label for="ball">
                            <input type="checkbox" name="hobby" id="ball">羽毛球
                        </label>
                    </td>
                </tr>
                <tr>
                    <!-- 文件上传 -->
                    <td></td>
                    <td><input type="file" name="" id=""></td>
                </tr>
                <tr>
                    <!-- 普通按钮 -->
                    <td>手机号：</td>
                    <td><button>获取手机验证码</button></td>
                </tr>
                <tr>
                    <!-- 重置按钮 -->
                    <td><input type="reset" value="重置"></td>
                    <td></td>
                </tr>
                <tr>
                    <!-- 提交按钮 -->
                    <td><input type="submit" value="提交"></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
</form>

下拉列表

<form action="" method="POST" name="">
   籍贯：<select name="location" id="">
            <!-- selected="selected"表示默认选中 -->
            <option value="HeNan" selected="selected">河南</option>
            <option value="ShanDong">山东</option>
            <option value="NanJing">南京</option>
        </select>
</form>

文本域

<form action="" method="POST" name="">
        <!-- cols表示一行能写多少字，roes表示能写的字的高度 -->
        <textarea name="" id="" cols="30" rows="10">多用于留言版</textarea>
</form>

H5的语义化标签

标签名	说明
header	头部标签
nav	导航标签
article	内容标签
section	定义文档某个位置,可以理解为大号的div
aside	侧边栏标签
footer	尾部标签

<head>	
	<style>
        header,
        nav {
            width: 800px;
            height: 100px;
            background-color: blanchedalmond;
            margin: 15px auto;
            border-radius: 15px;
        }

        div {
            width: 1050px;
            height: 300px;
            margin: 0 auto;
            background-color: cyan;
        }

        aside {
            width: 500px;
            height: 300px;
            background-color: pink;
        }

        .left {
            float: left;
        }

        .left section {
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }

        .right {
            float: right;
        }

        footer {
            width: 800px;
            height: 150px;
            margin: 15px auto;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <header>头部</header>
    <nav>nav导航</nav>
    <div>
        <aside class="left">
            aside侧边栏
            <section>section定义文档某个位置</section>
        </aside>
        <aside class="right">aside侧边栏</aside>
    </div>
    <footer>footer</footer>
</body>

视频标签

视频格式：MP4(都支持) WebM(苹果浏览器不支持) Ogg(也是苹果不支持)

<video src="./media/mi.mp4"></video>

video里面常用属性：

属性	说明
autoplay	布尔属性，视频是否自动播放(谷歌浏览器需要添加muted(静音)来解决自动播放问题)
controls	布尔属性，是否想用户显示播放控件
width	设置播放器宽度
height	设置播放器高度
loop	布尔属性，是否循环播放
src	视频url地址
preload	取值有auto/none 是否预先加载视频(如果有了autoplay，就忽略此属性)
poster	加载等待的画面图片
muted	布尔属性，静音播放

<head>	
	<style>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <video src="./media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="./media/mi9.jpg">
    </video>
</body>

音频标签

音频格式：MP3(都支持) Wav(都支持) Ogg(苹果不支持)

<audio src="./media/music.mp3"></audio>

audio里面常用属性：

属性	说明
controls	布尔属性，是否想用户显示播放控件
autoplay	布尔属性，音频是否自动播放(谷歌浏览器把音频禁用了)
loop	布尔属性，是否循环播放
src	音频url地址

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

input新增类型

属性键值对	说明
type = “email”	限制用户输入必须为Email类型
type = “url”	限制用户输入必须为URL类型
type = “date”	限制用户输入必须为日期类型
type = “time”	限制用户输入必须为时间类型
type = “month”	限制用户输入必须为月类型
type = “week”	限制用户输入必须为周类型
type = “number”	限制用户输入必须为数字类型
type = “tel”	限制用户输入必须为手机号码
type = “search”	搜索框
type = “color”	生成一个颜色表单

<form action="demo.php" method="POST" name="name1">
        <ul>
            <li>
                <!-- 用户输入必须为Email类型 -->
                Email:<input type="email" name="" id="">
            </li>
            <li>
                <!-- 用户输入必须为url类型 -->
                URL:<input type="url" name="" id="">
            </li>
            <li>
                <!-- 用户输入必须为日期类型 -->
                日期:<input type="date" name="" id="">
            </li>
            <li>
                <!-- 用户输入必须为时间类型 -->
                时间:<input type="time" name="" id="">
            </li>
            <li>
                <!-- 用户输入必须为数字类型 -->
                数字:<input type="number" name="" id="">
            </li>
            <li>
                <!-- 用户输入必须为电话号 -->
                电话号:<input type="tel" name="" id="">
            </li>
            <li>
                <!-- 搜索框 -->
                搜索框:<input type="search" name="" id="">
            </li>
            <li>
                <!-- 生成一个颜色选择表单 -->
                颜色选择表单:<input type="color" name="" id="">
            </li>
            <li>
                <input type="submit" value="提交">
            </li>
        </ul>
</form>

input新增表单属性

属性	说明
required	布尔属性，表单用户该属性表示其内容不能为空，必填
placeholder	表单的提示信息，存在默认值将不显示
autofocus	布尔属性，自动聚焦属性，页面加载完成自动聚焦到指定表单
multiple	布尔属性，可以多选文件提交
autocomplete	属性值有off/on。默认为on。当用户输入过值以后，下次再进去，搜索框上就会显示上次搜索的内容。但是要求表单必须有name属性，并且成功提交。为了安全性，一般都关掉

<head>	
	<style>
		/* 可以通过这个方式修改placeholder里面字体的颜色 */
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <form action="" method="POST" name="name1">
        <input type="search" name="search" id="" required="required" placeholder="pink老师" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>

补充

f12状态下，橙色的是外边距
em是个相对单位，1em就是父类文字的1倍
浏览器默认字体是16px
浏览器默认有8px的外边距
vs快捷键：shift + alt + ⬆/⬇ 快速复制这行代码向上/向下
选中图片，f2，快速重命名
行内块元素，中间有间隙。是因为标签之间有空格，如果不想有空格，直接紧挨着
ctrl + / 注释 ctrl + d 批量选中修改 ctrl + s 保存 ctrl + z 撤回 ctrl + a 全选 ctrl + f 搜索 alt + tab 切应用
logo其实是用h1包裹的。h1>a>img h1里面写上介绍文字(font-size：0)
i标签多用于字体图标
标题标签和段落标签不能互相嵌套使用，并且自身也不能互相嵌套。不推荐