HTML常见标签

R࿆ebirth Fire

于 2024-07-28 10:02:01 发布

阅读量891

点赞数 36

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_77193348/article/details/140746467

版权

1.标题标签

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

2.段落标签

<body>
    <p>记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。</p>
    <p>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过
1000EB（1万亿GB）。</p>
    <p>近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显
著提升。</p>
</body>

3.换行标签

单纯实现݅换行的是 br ，如果想添加分隔线，可以使用 hr标签：

<body>
      关于最新中美外长会 外交部通稿很是意味深长
<br>
      全国9省区市有暴雨到大暴雨 湖南局地有特大暴雨。<hr>
       特朗普又吹上了：若我输了，会引发三战
</body>

4.列表标签

1有序列表：

<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</ol>

2无序列表：

<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>

5.超链接标签：

点击后跳转链接标签，也叫做a标签：

href 属性用于定义链接地址：

href中可以使用绝对路径，以/开头，始终以一个固定路径作为基准路径作为出发点；

href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点，./开头表示当前路径../表示上一层路径；
href中也可以使用完整的URL；

target 用于定义链接打开的方式：

_blank 在新窗口中打开目标资源；

_self 在当前窗口中打开目标资源；

<body>
   <ahref="01html的基本结构.html"target="_blank">相对路径本地资源连接</a><br>
   <ahref="/day01-html/01html的基本结构.html"target="_self">绝对路径本地资源连接</a><br>   <ahref="http://www.atguigu.com"target="_blank">外部资源链接</a><br>
</body>

6. 多媒体标签

img(重点) 图片标签，用于在页面上引入图片：

src属性用于定义图片的连接。
title属性用于定义鼠标悬停时显示的文字。
alt属性用于定义图片加载失败时显示的提示文字。

<imgsrc="img/logo.png"  title="火焰"alt="firelogo"/>

audio 用于在页面上引入一段声音， video 用于在页面上引入一段视频：

src属性用于定义目标声音资源。
autoplay属性用于控制打开页面时是否自动播放。
controls属性用于控制是否展示控制面板。
loop属性用于控制是否进行循环播放。

<audiosrc="img/music.mp3"autoplay="autoplay"controls="controls"loop="loop"/>

<videosrc="img/movie.mp4"autoplay="autoplay"controls="controls"loop="loop"
width="400px"/>

7.表格标签(重点)

常规表格：

table标签代表表格；
thead标签代表表头，可以省略不写；
tbody标签代表表体，可以省略不写，浏览器解析DOM时会自动添加；
tfoot标签代表表尾，可以省略不写；
tr标签代表一行；
td标签代表行内的一格；
th标签自带加粗和居中效果的td；

通过td的colspan属性实现左右的跨列：

通过td的rowspan属性实现上下的跨列

<table  border="1px"style="width: 400px; margin: 0px auto;">
        <tr>
            <th>排名</th>        <th>姓名</th>              <th>分数</th>       <th>备注</th>
        </tr>
        <tr>
            <td>1</td>          <td>张三</td>             <td>99</td>        <td
rowspan="6">前三名升职加薪</td>
        </tr>
        <tr>
            <td>2</td>          <td>李四</td>             <td>96</td>
        </tr>
        <tr>
            <td>3</td>          <td>王五</td>             <td>90</td>
        </tr>
        <tr>
            <td>总人数</td>      <tdcolspan="2">2000</td>
        </tr>
        <tr>
            <td>平均分</td>      <tdcolspan="2">90</td>
        </tr>
        <tr>
            <td>及格率</td>      <tdcolspan="2">80%</td>
        </tr>
    </table>

8 表单标签(重点)

表单标签，可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要

的方式之一：

form 标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签。

action属性：用于定义信息提交的服务器的地址。
method属性：用于定义信息的提交方式。

get值： get方式提交，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔开。

post值： post方式提交，数据会通过请求体发送，不会在缀到url后。

input 标签：主要的表单项标签，可以用于定义表单项。

name属性：用于定义提交的参数名。
type属性：用于定义表单项类型。

text 文本框
password 密码框
submit 提交按钮
reset 重置按钮

 <formaction="http://www.atguigu.com"method="get">
        用户名<inputtype="text"name="username"/><br>
        密码<inputtype="password"name="password"/><br>        <inputtype="submit"  value="登录"/>
        <inputtype="reset"  value="重置"/>
   </form>

9.常见表单项标签(重点)

单行文本框：

个性签名：<inputtype="text"name="signal"/><br/>

密码框：

密码：<inputtype="password"name="secret"/><br/>

单选框：

你的性别是：
<inputtype="radio"name="sex"value="boy"/>男
<inputtype="radio"name="sex"value="girl"checked="checked"/>女

name属性相同的radio为一组，组内互斥；
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器；
设置checked="checked"属性设置默认被选中的radio，如果属性名和属性值一样的话，可以省略属性值，只写checked即可；

复选框：

你喜欢的球队是：
<inputtype="checkbox"name="team"value="Brazil"/>巴西
<inputtype="checkbox"name="team"value="German"checked/>德国
<inputtype="checkbox"name="team"value="France"/>法国
<inputtype="checkbox"name="team"value="China"checked="checked"/>中国<inputtype="checkbox"name="team"value="Italian"/>意大利

下拉框：

你喜欢的运动是：
<selectname="sport">
    <optionvalue="swimming">游泳</option>
    <optionvalue="running">跑步</option>
    <optionvalue="shooting"selected="selected">射击</option>    <optionvalue="skating">溜冰</option>
</select>

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项；
name属性在select标签中设置，value属性在option标签中设置；
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值；
通过在option标签中设置selected="selected"属性实现默认选中的效果；

按钮：

<buttontype="button">普通按钮</button>或    <inputtype="button"value="普通按钮"/>
<buttontype="reset">重置按钮</button>   或    <inputtype="reset"value="重置按钮"/>
<buttontype="submit">提交按钮</button>或    <inputtype="submit"value="提交按钮"/>

普通按钮：点击后无效果，需要通过JavaScript绑定单击响应函数；
重置按钮：点击后将表单内的所有表单项都恢复为默认值；
提交按钮：点击后提交表单；

隐藏域：

<inputtype="hidden"name="userId"value="2233"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id 等等。

多行文本框：

自我介绍：<textareaname="desc"></textarea>

textarea 没有 value 属性，如果要设置默认值需要写在开始和结束标签之间。

文件标签：

头像:<inputtype="file"name="file"/>

10 布局相关标签

div标签：俗称"块"，主要用于划分页面结构，做页面布局。

span标签：俗称"层"，可以用于划分元素范围，配合CSS做页面元素样式的修饰。

    <divstyle="width: 500px; height: 400px;background-color: cadetblue;">
        <divstyle="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <spanstyle="color: blueviolet;">页面开头部分</span>
        </div>
        <divstyle="width: 400px; height: 100px;background-color: 
blanchedalmond;margin: 10px auto;">
            <spanstyle="color: blueviolet;">页面中间部分</span>
        </div>
        <divstyle="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <spanstyle="color: blueviolet;">页面结尾部分</span>
        </div>
    </div>