html的标签的介绍和使用

发布时间:2020-05-29 13:00:51 作者:Leah
来源:亿速云 阅读:243

这篇文章主要为大家详细介绍了html的标签的介绍和使用,配合代码阅读理解效果更佳,非常适合初学者入门,感兴趣的小伙伴们可以参考一下。

html标签

第一个html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西部开源中心</title>
</head>
<body>
    <h2 >标题 </h2 >
    <h3 >标题 </h3 >
    <h4 >标题 </h4 >
    <h5 >标题 </h5 >
    <h6 >标题 </h6 >
    <h7 >标题 </h7 >
    <!没有h7>
    <h7 >标题 </h7 >
</body>
</html>

文本标签

html的标签的介绍和使用

常用的文本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<i>斜体</i><br/>
<em>斜体</em><br/><hr>
<b>加粗字体</b>
<strong>加粗字体</strong>
<cite>引用</cite>
x<sub>1</sub> = pi*r<sup>2</sup>
原价:<del>¥100</del>
现价:<b >¥10</b>
<br/>

<p>这种东西只有在并发不高的项目,管理系统中用。

<p>如果是面向用户的高并发应用,都不要使用。

触发器和存储过程本身难以开发和维护,不能高效移植。

触发器完全可以用事务替代。
存储过程可以用后端脚本替代。

</body>
</html>

换行标签

html的标签的介绍和使用

文本标签

html的标签的介绍和使用

列表标签

html的标签的介绍和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>无序列表:四大名著</h2>
<ul>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ul>
<h2>有序标签:四大名著</h2>
<ol type="a">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ol>

<h2>自定义列表:</h2>
<dl>
    <dt>四大名著</dt>
    <dd>西游记</dd>
    <dd>三国演艺</dd>
    <dd>水浒传</dd>
    <dd>红楼梦</dd>
    <dt>前端开发</dt>
    <dd>html</dd>
    <dd>css</dd>
    <dd>js</dd>
</dl>
</body>
</html>

div与span标签

html的标签的介绍和使用
html的标签的介绍和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<! 块级元素:一个元素占一整行>
<div >
    div 标签
</div>

<! 行内元素,一个元素站得位置取决标签内容>
<div >
<span>
    span 标签
</span>

</body>
</html>

图片标签img

<img> 标签定义 HTML 页面中的图像。有两个必需的属性:src 和 alt。
title:文字提示属性
属性:src: 图片名及url地址
alt: 图片加载失败时的提示信息
width/height: 图片宽度/高度
<a href=" ">...</a> 超级链接标签
属性:
href: 必须,指的是链接跳转地址;
target: 表示链接的打开方式。
_blank 新窗口 ,
_self 本窗口(默认)
title:文字提示属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! src:指定的时间图片的位置,可以通过绝对路径和相对路径表示,但大多数情况使用相对路径
   alt:当图片不能被加载出来时,显示的文字信息 >
<img src="./img/baidu.gif" alt="百度图片" width="500px"height="500px">

</body>
</html>

超链接标签

锚点链接:

  1. 定义一个锚点:
    <a id="a1"></a> 百度一下 <a name="a1"></a>
  2. 使用锚点:
    <a href="#a1">跳到a1处</a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>文字标签</h2>
<a href="http://www.baidu.com">百度一下</a><br>
<a href="http://www.baidu.com" target="_blank" title="text"> 百度一下</a>

<h2>图片搜索</h2><br/>
<hr>
<a href="http://www/baidu.com">
    <img src="baidu.gif" alt="baidu" title="baidu">
</a>

</body>
</html>

锚点的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>锚点</h2>
<a href="#a1">跳到a处</a>
<a href="#a2">跳到a2处</a>

<h3 id="a1">标题一</h3>
<p>
一、存储过程优点

存储过程是一组预先创建并用指定的名称存储在数据库服务器上的 SQL 语句,将使用比较频繁或者比较复杂的操作,预先用 SQL 语句写好并存储起来,以后当需要数据库提供相同的服务时,只需再次执行该存储过程。

1.具有更好的性能

存储过程是预编译的,只在创建时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编译一次,因此使用存储过程可以提高数据库执行速度。

2.功能实现更加灵活

存储过程中可以应用条件判断和游标等语句,有很强的灵活性,可以直接调用数据库的一些内置函数,完成复杂的判断和较复杂的运算。

3.减少网络传输

复杂的业务逻辑需要多条 SQL 语句,当客户机和服务器之间的操作很多时,将产生大量的网络传输。如果将这些操作放在一个存储过程中,那么客户机和服务器之间的网络传输就会减少,降低了网络负载。



<h3 id="a2">标题二</h3>
<p>
一、存储过程优点

存储过程是一组预先创建并用指定的名称存储在数据库服务器上的 SQL 语句,将使用比较频繁或者比较复杂的操作,预先用 SQL 语句写好并存储起来,以后当需要数据库提供相同的服务时,只需再次执行该存储过程。

1.具有更好的性能

存储过程是预编译的,只在创建时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编译一次,因此使用存储过程可以提高数据库执行速度。

2.功能实现更加灵活
</p>

</body>
</html>

表格标签

html的标签的介绍和使用

标签:                                                          
•表格标签:table
•行标签:tr
•单元格(表示列的概念):td
•表头:th :加粗并且居中    
•表格标题:caption            
html的标签的介绍和使用              
•标签合并:
行合并:rowspan
列合并:colspan
•标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
center,left,right
html的标签的介绍和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1px"align="center" width="500px" >
    <caption>表格标题</caption>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>

</table>

</body>
</html>

from表格标签

常用属性:
• action属性:提交的目标地址(URL)
• method属性:提交方式:get(默认)和post
get方式:
URL地址栏可见
长度受限制
相对不安全.
post方式:
URL地址不可见
长度不受限制
相对安全.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<hr/>
<form action="sucess.html" method="get">

    <!--创建三行两列的表格-->
    <table width="20%" align="center" >
        <tr>
            <td colspan="2" ><h4>用户登录</h4></td>
        </tr>
        <tr>
            <td >用户名</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td >密码</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td colspan="2" > <input type="submit" value="登录"></td>
        </tr>
    </table>

</form>

</body>
</html>

表单项标签

<input> 表单项标签input定义输入字段,用户可在其中输入数据。
在 HTML 5 中,type 属性有很多新的值。
html的标签的介绍和使用

下拉列表标签

<select>...</select> 标签创建下拉列表。
• name属性:定义名称,用于存储下拉值的
• size:定义菜单中可见项目的数目,html5不支持
• disabled 当该属性为 true 时,会禁用该菜单。
• multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
value属性:下拉项的值
selected属性:默认下拉指定项.

文本域标签

<textarea>...</textarea> 多行的文本输入区域
• name :定义名称,用于存储文本区域中的值。
• cols :规定文本区内可见的列数。
• rows :规定文本区内可见的行数。
• disabled: 是否禁用
• readonly: 只读

按钮标签

<button>...</button> 标签定义按钮。
<fieldset> --fieldset 元素可将表单内的相关元素分组。
html的标签的介绍和使用

html内嵌框架

<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),
src属性来定义另一个html文件的引用地址
frameborder属性定义边框,
scrolling属性定义是否有滚动条,
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

内嵌框架与a标签配合使用

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,代码如下:
html的标签的介绍和使用

关于html的标签就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果喜欢这篇文章,不如把它分享出去让更多的人看到。

推荐阅读:
  1. HTML中canvas标签的定义和使用
  2. HTML中progress标签的定义和使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html 标签

上一篇:jumpserver的安装和使用教程

下一篇:Hadoop学习--通过API得到文件系统状态--day04

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》