当前位置:首页 > 前端技术 > 2、html标签

2、html标签

2022年08月05日 15:24:11前端技术2

一、标题标签<h>

通过<h1><h1><h2><h3><h4><h5><h6>标签可以定义六种级别的标题,其中<h1>用作主标题,以此类推,而且从<h1><h6>字号不断变小

二、段落标签<p>

通过<p>标签,可以使内容分段

1、字符实体

空格&nbsp;(“;”别忘)
“>”或“<”:&gt;&lt;

2、换行标签<br />

换行标签<br />单个出现,在需要换行的地方加入即可

三、块标签<div><span>

1、<div>标签

<div>标签即盒子标签,块元素,它相当于一个小<body>标签,可以在里面嵌套其他标签,文字,图片,视频及又一个<div>标签

2、<span>标签

<span>标签,行内元素,表示一行中的一小段内容

四、含样式和语义的标签

1、<em>标签

<em>标签,行内元素,起强调作用,文档会以斜体表示

2、<i>标签

<i>标签,行内元素,表示专业词汇,文档会以斜体表示

3、<b>标签

<b>标签,行内元素,表示文档中的关键字或产品名,文档会以粗体表示

4、<strong>标签

<strong>标签,行内元素,表示非常重要的内容,文档会以粗体显示

五、图片标签<img>

1、<img>标签两种常用属性

src属性定义图片的引用地址

<img src=" " />是图像标签的用法,其中“ ”里面是图片路径比如<img src="images/001.jpg" />

alt属性定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片,盲人读屏软件会读取这个文字让盲人识别图片

<img src=" " alt=" "/>这是用法,alt“ ”引号里面是图片文字说明,比如<img src="images/001.jpg" alt="水果图片"/>

六、链接标签<a>

<a>标签可以在本网页中插入其他网页的链接

1、常用属性

href属性定义跳转的地址

<a href="#">链接名</a>这是href属性的基本用法,链接名是在本网页中此链接的名字

title属性定义鼠标悬停时弹出的文字提示框

<a href="#" title="鼠标悬停时出现的文字">链接名</a>这是title属性的基本用法

target属性定义链接窗口打开的位置

target属性有两个参数:
target=“self”:缺省值,新页面替换原来的页面
target=“_blank”:新页面在新窗口打开
<a href="#" target="_blank">新窗口打开</a>
2、html标签 _ JavaClub全栈架构师技术笔记

附六、<a>——锚点标签

锚点标签用来表示在同一个web界面里,点击一个链接会跳转到本页面其他位置。
基本用法:
①、<a href="#锚点名称"</a>创建锚点的起始位置;
②、<a name="锚点名称"></a>在目标位置创建链接。

七、列表标签

1、有序标签<ol><li>

2、html标签 _ JavaClub全栈架构师技术笔记
有序列表不常用;
有序标签会自动给内容排序;
快捷方式:ol > li * 3 + tab键(表示在 ol 标签里创建3个 li 标签)。

2、无序标签<ul><li>

2、html标签 _ JavaClub全栈架构师技术笔记
无序列表多用在新闻排版中且用<li><a herf="#">新闻标题名</a></li>方法制作。
快捷方式:ul > li * 3 + tab键(表示在 ul 标签里创建3个 li 标签)。

新闻排版的快捷键

2、html标签 _ JavaClub全栈架构师技术笔记
tab键执行。

3、定义列表<dl><dt><dd>

2、html标签 _ JavaClub全栈架构师技术笔记
<dl>标签表示列表整体;
<dt>标签定义术语的题目;
<dd>标签表示对术语的解释。

八、表格标签

1、<table>标签

<table>标签用来声明一个表格。

<table>标签的常用属性

· border属性:定义表格的标签,设置值是数值。
· cellpadding属性:定义单元格内容与边框的距离,设置值是数值。
· cellspacing属性:定义单元格与单元格的距离,设置值是数值。
· align属性:设置整体表格相对于浏览器窗口的水平对齐方式,设置值是left、center、right。

2、<tr>标签

<tr>标签定义表格中的一行。

3、<td><th>标签

定义一行中的单元格,<td>表示普通单元格,<th>表示头单元格。

<td><th>标签的常用属性

· align属性:设置单元格中内容的水平对齐方式,设置值是left、center、right。
· valign:设置单元格中内容的垂直对齐方式,设置值是top、middle、bottom。
· colspan:设置单元格水平合并,设置值是数值。
· rowspan:设置单元格垂直合并,设置值是数值。
2、html标签 _ JavaClub全栈架构师技术笔记

4、表格制作简历例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body topmargin="0">
    <table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
        <tr>
            <td width="260" valign="top" bgcolor="#f2f2f2">
                <table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tr height="100">
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td align="right">人物图片</td>
                    </tr>
                    <tr>
                        <td align="right">名字</td>
                    </tr>
                    <tr>
                        <td align="right">电话号码</td>
                    </tr>
                    <tr>
                        <td align="right">邮箱</td>
                    </tr>
                </table>
            </td>
            <td width="30"></td>
            <td width="480" valign="top">
                <table border="0" width="480" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="80">

                        </td>
                    </tr>
                    <tr>
                        <td align="right">个人简历图片</td>
                    </tr>
                </table>
                <br>
                <hr>
                <br>
                <table border="0" cellspacing="0" cellpadding="0" width="480" height="200">
                    <tr>
                        <td colspan="2"><b>个人基本情况</b></td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>籍贯</td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>身高</td>
                    </tr>
                    <tr>
                        <td>民族</td>
                        <td>体重</td>
                    </tr>
                    <tr>
                        <td>出生日期</td>
                        <td>电话</td>
                    </tr>
                    <tr>
                        <td>专业</td>
                        <td>地址</td>
                    </tr>
                </table>
                <br>
                <br>
                <table border="0" cellspacing="0" cellpadding="0" width="480" height="80">
                    <tr>
                        <td>教育背景及工作经历</td>
                    </tr>
                    <tr>
                        <td>背景</td>
                    </tr>
                    <tr>
                        <td>经历</td>
                    </tr>
                </table>
                <br>
                <br>
                <table border="0" cellspacing="0" cellpadding="0" width="480" height="80">
                    <tr>
                        <td>所获证书</td>
                    </tr>
                    <tr>
                        <td>证书1</td>
                    </tr>
                    <tr>
                        <td>证书2</td>
                    </tr>
                </table>
            </td>
            <td width="30"></td>
        </tr>
    </table>
</body>
</html>

2、html标签 _ JavaClub全栈架构师技术笔记

九、表单标签

1、<form>标签

<form>标签定义整体的表单区域。

<form>标签的常用属性

· action属性:定义表单数据提交地址,如果为空值,表示提交到本地。
· method属性:定义表单提交方式,一般有“get”和“post”方式,默认为 “get”,但如果信息中需要输入密码隐私之类的,会在地址栏显示出来,所以推荐使用 “post”。

2、<label>标签

<label>标签为表单元素定义文字标注。

<label>标签的常用属性

· for属性:点击文字标注也可以进入输入框,前提是需要在<input>标签里添加一个 “id” 属性,“id” 属性名与 “for”属性名相同。
2、html标签 _ JavaClub全栈架构师技术笔记

3、<input>标签

定义通用的表单元素。

<input>标签的常用属性

· type属性:
· type = “text”定义单行文本输入框。
· type = “password”定义密码输入框。
· type = “radio”定义单选框。
· type = “checkbox”定义复选框。
· type = “file”定义上传文件。
· type = “submit”定义提交按钮。
· type = “reset”定义重置按钮。
· type = “image”定义图片作为提交按钮。
· type = “hidden”定义一个隐藏的表单域,用来存储值。
· name属性:表示信息在数据库中以什么字段名进行分类。
· value属性:一般和name一起出现,举例i说明就是在name = 爱好 的分类下,value会出现学习,篮球,游戏等内容。
2、html标签 _ JavaClub全栈架构师技术笔记

4、<textarea>标签

<textarea>标签定义一个大文本输入框。

5、<select>标签

<select>标签定义下拉表单元素。

6、<option>标签

<option>标签与<select>标签配合,定义下拉表单元素的选项。

7、表单标签例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="post">
        <p>
            <label for="username">
                用户名:
            </label>
            <input type="text" name="username" id="username">
        </p>

        <p>
            <label>
                密码:
            </label>
            <input type="password" name="password">
        </p>

        <p>
            <label>
                性别:
            </label>
            <input type="radio" name="gender" value="0" id="male"><label for="male">男</label>
            <input type="radio" name="gender" value="1" id="female"><label for="female">女</label>
        </p>

        <p>
            <label>
                爱好:
            </label>
            <input type="checkbox" name="hobby" value="study">学习
            <input type="checkbox" name="hobby" value="game">游戏
            <input type="checkbox" name="hobby" value="python">python
            <input type="checkbox" name="hobby" value="lang">逛
        </p>

        <p>
            <label>
                照片:
            </label>
            <input type="file">
        </p>

        <p>
            <label>
                个人描述:
            </label>
            <textarea name="introduce"></textarea>
        </p>

        <p>
            <label>
                籍贯:
            </label>
            <select name="site">
                <option value="B">北京</option>
                <option value="S">上海</option>
                <option value="G">广州</option>
                <option value="H">河北</option>
            </select>
        </p>

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

2、html标签 _ JavaClub全栈架构师技术笔记

作者:茶色小键帽
来源链接:https://blog.csdn.net/qq_48773808/article/details/107617772

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17764.html

标签: HTML
分享给朋友:

“2、html标签” 的相关文章

HTML常用标签的用法

HTML常用标签的用法

一、首先要了解一下什么是HTML,HTML(Hyper Text Markup Language,简称:HTML)也叫作超文本标记语言,是一种使用结构化Web网页及其内容的标记语言,HTML文档也叫做Web页面, 下面就来讲讲一些HTML中常用的标签。...

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

script标签的属性

script标签的属性

共六个,language废弃,charset不常用。 async:异步加载脚本,且不保证加载顺序(下载时不影响页面解析,但解析时会暂停页面渲染) defer:立即下载,延迟执行(遇到</html>标签时执行),有顺序 type:默认type='tex...

HTML之框架结构标签的简单使用

框架标签的简单使用 框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。 使用...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

超链接a标签的属性target的可选值有哪些以及区别

超链接a标签的属性target的可选值有哪些以及区别 1、<a target="_blank"></a> 2、<a target="_parent"></a> 3、<a targ...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。