常用的HTML标签及其属性

最新推荐文章于 2024-07-13 14:25:26 发布
最新推荐文章于 2024-07-13 14:25:26 发布
阅读量751 收藏 5
点赞数 15
分类专栏： HTML常用标签 文章标签： html 前端 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62283164/article/details/125748728
版权

目录

HTML基本标签

HTML注释

特殊符号

图像标签

路径

超链接

列表标签

HTML表格的基本语法

HTML表格的表头

HTML表格美化

HTML表单

HTML表单基本结构

表单元素属性

HTML下拉列表

HTML多行文本域

HTML5补充标签

HTML基本标签

基本标签标签写法标签作用

标题标签

<h1>-<h6>

是标明文章、作品等内容的简短语句。

段落标签

<p>

在网页中描述具有一个相对完整的内容

斜体标签

<em>

标签作用：实现的一种倾斜的字体样式

粗体标签

<strong>

实现的一种加粗的字体样式

水平线标签

<hr/>

在网页中加入平行线用来区分上下文

换行标签

<br/>

跳到下一个新行

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登鹳雀楼</title>
</head>
<body>
    <!-- 诗 -->
    <h1>登鹳雀楼</h1>
    <hr/>
    <p>白日依山尽，</p>
    <p>黄河入海流。</p>
    <em>欲穷千里目，</em>
    <br/>
    <strong>更上一层楼。</strong>
</body>
</html>

效果图

HTML注释

<!--注释内容-->

方便代码的阅读,在代码调试中可以暂时注释掉一些不必要的代码,当浏览器遇到注释时会自动忽略注释内容

快捷方式：ctrl+/

特殊符号

键盘中无法输入的内容

页面中特殊含义的符号

页面中输入不间断空格

HTML中相冲突的符号如小于号（<）和大于号（>）

特殊符号源代码

空格

&nbsp;

大于号

&gt;

小于号

&lt;

引号

&quot;

注册商标

&reg;

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <h1>学习&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;&nbsp;&nbsp;&nbsp;中的特殊符号</h1>
 <h2>10&gt;6&nbsp;&nbsp;10&lt;15&nbsp;&nbsp;</h2>
 <h2>&quot;学习&quot;</h2>
 <h2>&reg;学习</h2>
</body>
</html>

效果图

图像标签

<img src="图片" alt="替换文本" title=''提示内容'' width="x" height="y"/>

标签属性

图片路径

src

引用图片的路径

替换文本

alt

在图片不能正常加载时候显示的提示语

提示内容

title

鼠标划上去显示的内容

宽度高度

width/height

设置图片的宽度和高度

路径

相对路径：不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

绝对路径：一般是指带有盘符的路径或完整网络地址。（不常用）

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/1.jpg" alt="" title="图片" height="600px" width="600px">
</body>
</html>

效果图

超链接

HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面

语法

<a href="链接地址" ></a>

其它属性：

  target="目标窗口位置"

属性值：

_self：自身窗口

_blank：新建窗口

源代码：

<a href="./demo2.html" target="_blank">123</a>

列表标签

标签属性
<ul></ul>无序列表。
<li></li>表示列表项。
<ol></ol>有序列表。
<dl></dl>自定义列表。
<dt></dt>列表标题。
<dd></dd>列表内容。

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul type="disc">
        <li>html</li>
        <li>web</li>
        <li>css</li>
        <li>java</li>
        <li>mysql</li>
    </ul>
    <!-- 有序列表 -->
    <ol type="I">
        <li>html</li>
        <li>web</li>
        <li>css</li>
        <li>java</li>
        <li>mysql</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>web前端</dt>
        <dd>html</dd>
        <dd>css</dd>
        <dd>javascrript</dd>
        <dd>wachat</dd>
    </dl>
    <dl>
        <dt>后台服务器</dt>
        <dd>java</dd>
        <dd>php</dd>
        <dd>c#</dd>
        <dd>python</dd>
    </dl>
    <dl>
        <dt>数据库</dt> 
        <dd>mysql</dd>
        <dd>sql server</dd>
        <dd>oracle</dd>
        <dd>DB2</dd>
    </dl>
</body>
</html>

效果图

HTML表格的基本语法

<table> 标签

定义表格

<tr> 标签

表格均有若干行组成使用tr定义

<td> 标签

每行被分割为若干单元格使用td定义

跨行跨列

rowspan跨行colspan跨列

HTML表格的表头

<th> 标签：定义 HTML 表格中的表头单元格

HTML表格美化

borde

设置边框

bgcolor

设置背景颜色

align

设置表格在网页中的对齐方式

cellspacing

设置单元格与单元格之间的距离

cellpadding

设置文字与单元格之间的距离

width/height

表格的宽度/表格高度

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table cellspacing="0" border="1" bgcolor="green" align="center" height="500px" width="500px">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
            <th>学校</th>
        </tr>
        <tr bgcolor="rgb(255,234,123)">
           <td rowspan="2" bgcolor="#dhr345">111</td>
           <td colspan="2">111</td>
           <td>111</td>
           <td>111</td> 
        </tr>
        <tr bgcolor="#D35230">
            <td>222</td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>444</td>
            <td>444</td>
            <td rowspan="2" colspan="2">444</td>
        </tr>
        <tr>       
            <td>555</td>
            <td>555</td>
            <td>555</td>
        </tr>

    </table>
</body>
</html>

效果图

HTML表单

什么是表单？

表单在网页中主要负责数据采集，定义采集数据的范围

HTML表单的分类

1.文本域

2.按钮

3.单选框

4.复选框

5.选项菜单

HTML表单基本结构

<form  method="post" action="xxx.html"></form>

发送表单数据的方式：标签属性：method常用值：get  | post

        <input type="submit" value="注册" >
        <input type="button" value="按钮">
        <input type="reset" value="取消">
        <input type="file" name="files"><br>
        <input type="image" src="../day6/img/电影封面/2.jpg"
         height="50px" width="50px"><br>

向何处发送表单数据：标签属性：action

表单需求属性值作    用

文本输入

text,password

text,表单中键入字母、数字等内容

password，输入密码字段。

文件选择

file

file,定义了文件选择

按钮

button

button,定义了普通按钮。

选择

checkboxes,radio

checkboxes,表单复选框。

radio,表单单选框。

提交按钮

submit，image

submit,定义了提交按钮。

image,定义了图片提交按钮

重置按钮

reset

reset,定义了重置按钮。

表单元素属性

size属性

元素的宽度，当 type 为 text 或 password时。

maxlength

type为text 或 password 时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否是被选中

源代码·：

   账号：<input id="username" type="text" name="username" 
            size="20" maxlength="5" ><br/>
   <input type="checkbox" name="aihao" value="wangqiu" checked>网球<br>

HTML下拉列表

<select> 标签

select 标签用于声明下拉列表

option 标签用于声明列表项

源代码：

    所在城市：
    <select name="province">
        <option value="陕西">陕西省</option>
        <option value="广东">广东省</option>
        <option value="河北">河北省</option>
        <option value="甘肃">甘肃省</option>
        <option value="山东">山东省</option>
    </select>

HTML多行文本域

<textarea rows="3" cols="20" maxlength="50" name="demo"></textarea>

标签属性：rows                           rows 属性规定 textarea 的可见高度。

标签属性：col                              cols 属性规定 textarea 的可见宽度。

标签属性：maxlength                  maxlength 属性规定文本区域的最大长度（以字符计）。

标签属性：name                          name 属性为文本区规定名称。

源代码：

<textarea cols="30" rows="10" name="text" maxlength="10000"></textarea>

练习源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="./demo1.html" method="get">
        <input type="hidden" name="id" value="1111111" >
       <label for="username">账号：</label> <input id="username" type="text" name="username" size="20" maxlength="5" ><br/>
        <label for="pwd">密码：</label> <input id="pwd" type="password" name="pwd" ><br/>
        <input type="submit" value="注册" >
        <input type="button" value="按钮">
        <input type="reset" value="取消">
        <input type="file" name="files"><br>
        <input type="image" src="../day6/img/电影封面/2.jpg" height="50px" width="50px"><br>
        性别：<input type="radio" name="gender" value="nan" id="nan"> <label for="nan">男</label> 
            <input type="radio" name="gender" value="nv" id="nv"><label for="nv">女</label>
            <input type="radio" name="gender" value="other" id="other"><label for="other">性别不限</label> <br>
        爱好：<input type="checkbox" name="aihao" value="lanqiu">篮球
        <input type="checkbox" name="aihao" value="zuqiu">足球
        <input type="checkbox" name="aihao" value="yumaoqiu">羽毛球
        <input type="checkbox" name="aihao" value="pingpangqiu">乒乓球
        <input type="checkbox" name="aihao" value="wangqiu" checked>网球<br>
    所在城市：
    <select name="province">
        <option value="陕西">陕西省</option>
        <option value="广东">广东省</option>
        <option value="河北">河北省</option>
        <option value="甘肃">甘肃省</option>
        <option value="山东">山东省</option>
    </select>
    <select name="city">
        <option value="西安">西安市</option>
        <option value="宝鸡">宝鸡市</option>
        <option value="渭南">渭南市</option>
        <option value="咸阳">咸阳市</option>
        <option value="汉中">汉中市</option>
    </select> <br>
    <textarea cols="30" rows="10" name="text" maxlength="10000"></textarea>
</form>
</body>
</html>

HTML5补充标签

避免使用大量的<div>标签

元素

描述

<address>

HTML <address> 元素  表示其中的 HTML 提供了某个人或某个组织（等等）的联系

信息。

<article>

HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或

可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、

交互式组件，或者其他独立的内容项目。

<aside>

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分

并且可以被单独的拆分出来而不会使整体受影响。  

<footer>

HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页

脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。  

<header>

HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它

可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。 

<main>

HTML <main> 元素呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩

展于文档的中心主题、应用的主要功能部分的内容组成。

<nav>

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部

分的常见示例是菜单，目录和索引。

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <address>
        联系人：***
        联系电话:123456
    </address>
    <article>
        <p>大段文章</p>
    </article>
    <aside>
        <h1>与网页无关内容</h1>
    </aside>
    <footer>
        <ul>
            <li>网站底部</li>
        </ul>
    </footer>
    <header>
        <ul>
            <li>网站顶部</li>
        </ul>
    </header>
    <main>
        <p>网站中部</p>
    </main>
    <nav>
        <ul>
            <li>导航</li>
        </ul>
    </nav>
</body>
</html>

效果图

猿究◎小飞
关注
  • 15
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常用HTML标签属性
weixin_42597880的博客
07-29 390
跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee&...
HTML常用标签与CSS属性
weixin_56555617的博客
07-22 1002
HTML CSS总结HTML HTML
HTML 元素中的name 属性
suimingbo的博客
08-10 3050
用户名：美国
HTML中各个标签的name属性的作用
CurtainOfNight的博客
01-14 3592
前言  我们在刚开始学习HTML时很少回家name属性，即使加了也不会用到，也不是很清楚它是干什么的！ name属性的作用  name属性就是我们Django中处理post请求时get/getlist函数的键（以Django为例） ...
前端编程之路一一HTML的常用标签大全
最新发布
2401_84433974的博客
07-13 963
等;2.html标签通常是成对出现，如：,第一个是开始，第二个有斜线的是结束；3.有些标签是单独呈现的，如：;4.标签里面带有若干属性，也有不带的；标签语法：内容部分
html标签中属性name和属性id的主要区别
frankzcy的专栏
05-08 7861
编程这么久，细想了一下，发现这个问题还不是很清楚，汗！看了几篇文章，整理了一下，分享下！      一个朋友如是的说到“ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的”我感觉很贴切！【但是太笼统哦，下面细细讲一下！】具体的将“ID是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完
html属性name属性的值,HTML中name属性和id的区别
weixin_42511990的博客
06-08 610
1,name常用于form表单在网页做Post提交时，是以Form(即表单域)为单位进行提交的，一个Form里有若干个表单对象(如)，同一个页面里可以为多个Form(Asp.net不同，它只允许有一个，且名字必须为Form1)，在表单表提交到服务器端后，可以直接通过Name属性取到表单域的值，却无法通过ID直接取到该表表单对象的值。另外，同一个Form里不能有多个name属性相同的HTML标记，但...
html标签中id和name的区别
半亩方塘
07-27 6107
id与name的作用,作为标签的标识符,基本上是一样的.name是老方法,id是在name基础上发明的,后来才有的,"现代化"一点,用的范围广一点. 中的name原来(刚发明时)就是用于本页揿一下转向过去用的. 除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 标签外,id 都可用. name只用于APPLET,SELECT,FORM,FRAME,IF
HTML标签分类及其属性.pdf
10-05
HTML标签分类及其属性 HTML标签是构建网页的基础，了解HTML标签的分类及其属性是学习Web开发的第一步。本文将对HTML标签进行分类，并详细介绍每种标签的属性和用法。 窗体标签 标签用于定义窗体，用户可以通过...
html 标签 及其 属性 大全
01-05
HTML标签大全 HTML（HyperText Markup Language）是用于创建网页的标记语言，以下是HTML标签的大全，包括基本标签、字体效果标签、图片标签、表格标签等。 基本标签 * `<!>`：HTML文档的开始标签 * `<marquee>`：...
学习HTML标签分类及其属性.pdf
10-05
在学习HTML时，了解标签的分类及其属性至关重要，因为这将直接影响到网页的布局、交互性和功能。 首先，`<form>`标签用于创建用户交互的表单，它可以收集用户输入的数据并将其发送到服务器。`<form>`标签有几个关键...
HTML语言name,HTML <a> 标签的 name 属性
weixin_35340730的博客
05-30 446
延伸阅读：使用 name 属性还是 id 属性？在 HTML 4.0 之前的版本中，只有使用 标签的 name 属性才能创建片段标识符。随着 HTML 4.0 中 id 属性的出现，所有 HTML 或 XHTML 元素都可以是片段标识符。这是因为 id 标识符几乎可以用在所有的标签中。 标签为了能够和以前的版本相兼容而保留了 name 属性，同时也可以使用 id 属性。这些属性可以相互交换使用，...
常见的 HTML＜meta＞ 标签的 name 属性及其作用
昊虹AI笔记
08-26 1786
常见的 HTML 标签的 name 属性及其作用
jsp自适应设备屏幕
sinat_29571715的博客
07-13 2164
在header中加入以下标签： width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
HTML中的meta标签详解
qq_55659160的博客
04-09 7514
<meta>标签的运用
【HTML5】2.语法入门总结（第二部分）
qq_44078824的博客
04-17 866
0.思维导图 1.HTML5基本框架 HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。 第一个程序，基本框架。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
HTML中name和class，id的区别和联系
m0_74293254的博客
09-15 1919
name属性用于标识表单元素；class属性用于为一个或多个元素指定类名，以便共享样式和脚本；id属性用于唯一标识一个特定的元素，方便选择和操作。在HTML中，name、class和id是用于标识和选择元素的属性。
类似通过NAME属性获得TD对象数组的功能
天使与海豚
04-04 296
function $Attr(sattribute,svalue,stagname,obody){ var r_eles = []; obody=!!obody ? obody : document.body; // 限制范围且在此容器内寻找 var objs = obody.getElementsByTagName(stagname); for(var pos=0, s=[], ...
HTML标签属性详解与示例
以下是一些常见的HTML标签及其属性： 1. `<marquee>` - 这个标签用于创建滚动或滑动的文字或图像效果。它的属性包括： - `behavior`：控制滚动方式，可设置为`slide`（滑动一次）、`scroll`（持续滚动）或`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猿究◎小飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值