HTML常用标签_html station标签-CSDN博客

本文链接：https://blog.csdn.net/m0_51318597/article/details/125975702

文章目录

- HTML常用标签

HTML常用标签

HTML和CSS是两种完全不同的语言
我们学的是结构 就只写HTML标签 认识标签就可以了

文字标签

<!-- 注释快捷键 ctrl+/ -->

<!-- 标题标签<h> 一级到六级 
加了标题的文字会变的加粗 字号也会依次变大-->
<h1>一级标题</h1>
<h6>六级标题</h6>

<!-- 设置字体标记 
size设置字体大小 
color设置字体颜色 
face设置字体样式-->
<font size="2" color="red" face="黑体">字体大小、颜色、样式</font>
<b>字体加粗</b>
<i>字体斜体</i>
<u>字体斜体</u>
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
<dfn>用于名词解释 斜体显示</dfn>
2<sup>3 上标</sup>
co<sub>2 下标</sub>
<em>强调</em>
<address>模拟信封上的字体</address>
<strong>加强</strong>
<s>删除线 给字体上加上一条线</s>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<code>
    以等宽字体显示计算机程序代码
    int num = 1;
    System.out.println(num);
</code>

<!-- 水平线标签hr
color颜色
width宽度
size高度大小
noshade阴影
align排版位置
-->
<hr />
<hr color="green" width="200px" size="2" noshade align="left">

<!-- 换行标签 强制换行 -->
<br />

<!-- 段落标签<p> 强制分段 -->
分段前<p>文本内容分段</p>分段后

<!-- 特殊字符 -->
&nbsp; 空格
&lt; <
&gt; >
&amp; &
&quot; "

排版标签(左中右)

<!-- align是一个属性 
可以将内容 置左left 置右right 置中center-->
<font align="left">内容</font>

<!-- <center>将内容置中 -->
<center>
    内容<br>
    内容<br>
    内容<br>
</center>

背景标签

<!-- 背景颜色
bgcolor="blue"
-->
<body bgcolor="blue">
</body>

<!-- 背景图片
background="img/夕阳.jpg"	
--> 
<body background="img/夕阳.jpg">
</body>

列表标签

<font color="red" size="5">我们今天的计划</font>

<!-- 无序列表
type设置无序标记的样式
disk实心圆点
square小正方形
circle空心圆
-->
<ul type="square">
    <li>起床</li>
    <li>吃饭</li>
    <li>睡觉</li>
</ul>

<!-- 有序列表 
type样式 1 A I a i
start开始位置
-->
<ol type="1" start="1">
    <li>起床</li>
    <li>吃饭</li>
    <li>睡觉</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>自定义列表的标题</dt>
    <dd>自定义列表的描述内容</dd>
</dl>

图片标签

<!-- 图片标记
src图片路径
width宽度
height高度
border带边框
title图片提示文本
alt图片替换文本
-->
<img src="img/夕阳.jpg" width="300px" height="200px" 
     border="3" title="这是一幅美丽的夕阳" alt="图片不存在">

超链接标签

<!-- 超链接标签
href指定链接目标的URL地址
target指定链接页面的打开方式
    target="_self"为默认值
    target="_blank"为在新窗口中打开
-->
<a href="https://www.baidu.com" target="_self">进入百度</a>
<a href="https://www.163.com" target="_blank">进入网易</a>

锚点链接标签

<!-- 锚点链接标签
跳转内容-->
目录
<a href="#three">第三章</a>

<a name="one"></a>
<h2>第一章</h2>

<a name="two"></a>
<h2>第二章</h2>

<a name="three"></a>
<h2>第三章</h2>

表格标签

<!-- 表格标签
<table>创建表格
<caption>表格标题
<tr>表格的一行
<td>表格的一列
width宽度
height高度
border边框
bordercolor边框颜色
cellspacing="0"取消边框阴影
align表格位置
bgcolor表格颜色
background表格填充图片
-->
<table width="500px" height="500px" 
       border="1" bordercolor="red" cellspacing="0" 
       align="center" bgcolor="blue" background="img/夕阳.jpg">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

合并单元格

<table width="300px" height="300px" border="1" cellspacing="0">
    <tr>
        <!-- rowspan上下合并 
		合并后需要删除被合并的表格 -->
        <td rowspan="2">aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
    <tr>
        <!-- colspan左右合并 
		合并后需要删除被合并的表格-->
        <td colspan="2">aaa</td>
        <td>ccc</td>
    </tr>

</table>

表单标签

<!-- 表单标签
用于和后台进行数据的交换 
GET:请求 请求的参数会拼接在url后面 格式?username=zhangsan&password=123456
-->
<form action="#" method="GET">
<!-- type分为: 
text-文本框 button-按钮 submit-提交
reset-重置 password-密码 checkbox-多选
radio-单选 file-上传文件 date-选取日,月,年
month-选取月,年 week-选取周和年 time-选取时间(小时和分钟)
datetime-选取时间,日,月,年(UTC 时间)
datetime-local -选取时间,日,月,年(本地时间) -->

     <!-- name定义input元素的名称
        value规定input元素的值
        placeholder提示信息
        required="required" 必填选项 不能为空
        maxlength="10" 最大字符数
        minlength="3"  最小字符数
        style="margin-left: 86px; 表单位置
               height:50px; 表单高度
               width:100px; 表单宽度
               color:white; 表单字体颜色
               background-color: red; 表单背景颜色
               border: 0ch;" 表单边框
    -->
    用户名:<input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10" minlength="3" />
    <br>
    密码:<input type="password" name="password" value="" placeholder="请输入密码" />
    <br>
    邮箱:<input type="email" name="user_email" placeholder="请输入邮箱" />
    <br>
    <!-- checked首次加载被选中
        <label>标签为input定义标注 
        label标签的for属性 与相关元素的id属性相同-->
    性别:<input type="radio" name="sex" value="1" id="men" checked="checked" /><label for="men">男</label>
    <input type="radio" name="sex" value="0" id="women" checked="checked" /><label for="women">女</label>
    <br>	
    爱好:<input type="checkbox" name="hobby" id="lq" value="lq" /><label for="lq">篮球</label>
    <input type="checkbox" name="hobby" id="zq" value="zq" /><label for="zq">足球</label>
    <input type="checkbox" name="hobby" id="pq" value="pq" /><label for="pq">排球</label>
    <br>
    <!-- 下拉标签 
		selected="selected"当前为默认选中项
	-->
    学历:<select name="xueli">
            <option value="" selected="selected">请选择你的学历</option>
            <option value="xx">小学</option>
            <option value="zx">中学</option>
            <option value="dx">大学</option>
        </select>
    <br>
    生日:<input type="date" name="birthday" value="" />
    <br>
    <!-- min最小值
		max最大值-->
    你有几个女朋友:<input type="number" name="girlfriend" value="0" min="0" max="10"/>
    <br>
    你喜欢的颜色:<input type="color" name="color" value="" />

    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

框架标签

frameset标签

<!-- <frameset>
rows垂直方向将浏览器窗口分割
cols水平方向将浏览器窗口分割
border设置子窗口是否显示边框
onload设置框架被载入时引发的事件
onunload设置框架被卸载时引发的事件
-->

<!-- <frame> 
src设置该窗口要显示的HTML文件地址 或URL地址
noresize指定窗口不能调整大小
scrolling指定子窗口是否显示滚动条
-->	

<frameset rows="20%,80%">
    <frame src="http://www.163.com" noresize>
    <frameset cols="25%,75%">
        <frame src="http://www.163.com" noresize>
        <frame src="http://www.163.com" noresize>
    </frameset>
</frameset>

<!-- <noframes>
该标签的内容显示在不支持框架的浏览器上
-->
<noframes>对不起 你的浏览器版本过低</noframes>

iframe标签

<!-- <iframe>
scrolling是否显示滚动条
frameborder是否显示周围边框
framespacing相邻间距
allowfullscreen是否允许全屏
-->

<iframe src="//player.bilibili.com/player.html?aid=299466669&bvid=BV1MF41157V9&cid=732175662&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe src="http://www.163.com" scrolling="yes" border="0" frameborder="no" framespacing="0"
        allowfullscreen="true"> </iframe>

视频音频标签

<!-- viedo标签
controls实现视频播放控件-->
<video src="mp4/元芳-五杀时刻.mp4" height="300px" width="500px" controls="controls"></video>

<!-- audio标签
controls实现音频播放控件-->
<audio src="mp3/李荣浩 - 自拍 (Live).mp3" controls></audio>