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

合并单元格(三部曲)

  1. 确定是跨行还是跨列

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

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

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

列表

  • 作用：用来布局页面
  • 有序列表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标签多用于字体图标
  • 标题标签和段落标签不能互相嵌套使用，并且自身也不能互相嵌套。不推荐

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

最后修改：2023 年 10 月 30 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏