• web前端之 HTML标签详细介绍

    html标签的分类

    点我查看完整的html标签介绍

    在html中，标签一般分为块级标签和行内标签

    • 块级标签：块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签"p"、"div"、"form"这个块元素比较特殊，它只能用来容纳其他块元素。
    例如：div、h1、p form 等
    • 行内标签：又称为内联标签，内联元素只能容纳文本或者其他内联元素
    例如：a、span、select 等

    看下代码和效果图就知道了

    • html代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="background-color: #aa614f">我是内联标签</span>
    <div style="background-color: red">我是块级标签</div>
</body>
</html>
    • 效果图

    DOCTYPE标签

    该标签告诉浏览器使用什么样的规范来解析html文档

    <!-- 推荐使用html规范进行解析 -->
<!DOCTYPE html>

    点我查看有关Doctype的规范

    head标签的子标签

    1、meta标签 (metadata information)

    meta标签为自闭和标签，该标签提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

    • 页面编码（告诉浏览器是什么编码）
    <!-- 下面这两种写法是一个意思，使用其中一种就可以了 -->
<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
<meta charset="UTF-8" />
    • 刷新和跳转
    <!-- 每隔30秒刷新一次页面 -->
<meta http-equiv=“Refresh” Content=“30″>

<!-- 打开页面5秒后跳转到百度的连接上 -->
<meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ />
    • 关键词（SEO相关）
    <!-- 该关键词取自博客园的首页 -->
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" />
    • 描述（SEO相关）
    <!-- 该描述取自博客园的首页 -->
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />
    • X-UA-Compatible 主要用来解决ie6兼容性的问题
    <!-- 如果使用ie6浏览器打开，则使用ie最新的工业版处理html，而不是用原生的ie6的模式来处理html -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

    2、title标签

    该标签主要显示网页的标题

    <!-- 该标题显示在浏览器标签页，显示效果如下图所示 -->
<title>web前端学习</title>

    3、link标签

    该标签主要用来引入css样式和引入浏览器标签页标题左侧的小图标

    • 引入css
    < link rel="stylesheet" type="text/css" href="css/common.css" >
    • 引入图标icon
    < link rel="shortcut icon" href="image/favicon.ico">

    4、style标签

    该标签主要用来在html文件中写css样式, 更多的样式会在CSS博文中详细介绍

    < style type="text/css" >
    .bb{
        background-color: red;
    }
< /style>

    5、script标签

    该标签主要用来在html文件中写js代码或者引入js文件，有关JS的操作会在JS的博文中详细介绍

    • 引入文件
    <script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
    • 写js代码
    <script type="text/javascript">
    var num = 10;
    ...
</script>

    body标签中常用的子标签

    1、html特殊符号的表示方式

    例如要在html页面上显示一个大于号和小于号

    使用 &gt; 来表示大于号
使用 &lt; 来表示小于号

    点我查看网页特殊符号HTML代码大全

    2、p标签

    p标签表示一个段落，默认段落之间是有间隔的，例如

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>这里是第一个段落</p>
    <p>这里是第二个段落</p>
</body>
</html>

    3、br标签

    br标签是一个换行标签

    • 没有br标签的代码和效果图
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>第一个span标签</span>
    <span>第二个span标签</span>
</body>
</html>

    • 加了br标签的代码和效果图
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>第一个span标签</span>
    <br />
    <span>第二个span标签</span>
</body>
</html>

    4、a标签

    a标签主要用来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

    默认情况下，链接将以以下形式出现在浏览器中：

    • 一个未访问过的链接显示为蓝色字体并带有下划线
    • 访问过的链接显示为紫色并带上下划线
    • 点击链接时，链接显示为红色并带上下划线

    代码如下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    使用 href 属性可以指定点击该文字跳转到哪里去
        href="url"    href可以指定跳转的url
        href="#aaa"    表示跳转到当前页面中id为aaa的标签处，并将该标签置顶显示，href可以跳转至指定页面中标签的id值
    使用 target 属性，你可以定义被链接的文档在何处显示。
        target="_self"     默认不写target就是这个属性,在当前页面打开百度页面
        target="_parent"   在当前页面中打开百度的页面,感觉和_self是一样的
        target="_top"      这个好像也是跟上面两个是一样的效果
        target="_blank"    在新的浏览器页面中打开

    -->
    <a href="http://www.baidu.com" target="_blank">点我打开百度首页</a>
</body>
</html>

    效果图

    5、H标签

    标题（Heading）是通过<h1>到<h6>标签进行定义的，<h1>定义最大的标题。<h6> 定义最小的标题

    代码如下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
</body>
</html>

    效果图

    6、select标签

    select标签是一个下拉列表

    代码如下

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

    <!--在option属性中加selected="selected" 表示默认选择该option标签-->
    <select>
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option selected="selected" value="3">广州</option>
    </select>

    <!--在select标签中加size属性表示默认显示2个option,不表示选中-->
    <select size="2">
        <option>上海</option>
        <option>北京</option>
        <option>广州</option>
        <option>广州</option>
    </select>

    <!--在select标签中加multiple属性表示同时可以选择多个option,可按住ctrl多选,或者按住shift多选-->
    <select size="2" multiple="multiple">
        <option>上海</option>
        <option>北京</option>
        <option>广州</option>
        <option>广州</option>
    </select>


    <!--optgroup表示组的概念,可以实现一个层级效果-->
    <select>
        <optgroup label="河北省">
            <option>石家庄</option>
            <option>邯郸</option>
        </optgroup>
        <optgroup label="山西省">
            <option>太原</option>
            <option>平遥</option>
        </optgroup>
    </select>
</body>
</html>

    效果图

    7、input标签系列

    代码如下

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

</head>
<body>

    <h1>input系列</h1>

    <h2>文本框和密码框</h2>
    username: <input type="text" />
    <br/>
    password: <input type="password" />

    <br/>
    <h2>单选框redio</h2>
    请选择性别:<br/>
    <!--通过使用name属性来对类型为radio的input标签进行约束,可以理解为相同name的radio标签是一个组,
    可以使用属性checked="checked"设置默认勾选的单选框
    radio标签只有一个能够被选中,value属性值用在使用form表单进行数据提交的时候,具体看form标签-->
    男 <input type="radio" name="gender" value="man"/>
    女 <input type="radio" name="gender" value="woman"/>
    保密 <input type="radio" name="gender" value="no" checked="checked"/>

    <h2>复选框checkbox</h2>
    请选择兴趣爱好:<br/>
    <!--通过使用name属性来对类型为checkbox的input标签进行约束,可以理解为相同name的checkbox标签是一个组,
    可以使用属性checked="checked"设置默认勾选的复选框
    checkbox标签可以同时选中多个,value属性值用在提交form表单的时候,具体看form标签-->
    篮球 <input type="checkbox" name="hobbies" value="basketball" />
    足球 <input type="checkbox" name="hobbies" value="football" checked="checked"/>
    羽毛球 <input type="checkbox" name="hobbies" value="badminton" checked="checked"/>
    <br/>

    <!--上传文件需要from表单的配合并在form标签中进行特殊的设置，才可以进行上传文件，否则后台只能够获取到文件的名称
    enctype="multipart/form-data"     在form标签中设置该属性才能够提交文件，例如：    -->
    <form action="xxx" method="post" enctype="multipart/form-data">
        <h2>上传文件</h2>
        <input type="file" />
    </form>

    <h2>按钮</h2>
    <!--可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序-->
    <input type="button" value="button"/>

    <!--提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。-->
    <input type="submit" value="submit"/>

    <!--重置按钮。重置按钮会初始化当前input标签所在的form表单中的所有input系列标签的数据-->
    <input type="reset" value="reset">



</body>
</html>

    效果图如下

    8、textarea标签 多行文本输入控件

    代码如下

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

    <h2>textarea</h2>
    <textarea></textarea>
    
    <!--可以使用样式控制该文本框的宽度和高度-->
    <textarea style="500px;height: 200px;"></textarea>

</body>
</html>

    效果图

    9、label标签

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

<form>
    <!--把label标签中的for属性的值跟input标签中的id值绑定到一起了,通过点击label中的文字,就可以选中于该label标签绑定的标签,文本框就是将光标挪动至文本框中-->
    <label for="man">男</label>
    <input type="radio" name="sex" id="man" />
    <br />
    <label for="woman">女</label>
    <input type="radio" name="sex" id="woman" />
</form>

</body>
</html>

    效果图

    10、列表标签

    列表分为无序列表、有序列表、层级列表

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

    <!--无需列表-->
    <ul>
      <li>北京</li>
      <li>上海</li>
      <li>广州</li>
    </ul>

    <!--有序列表-->
    <ol>
      <li>北京</li>
      <li>上海</li>
      <li>广州</li>
    </ol>

    <!--层级列表-->
    <dl>
        <dt>河北省</dt>
        <dd>邯郸</dd>
        <dd>石家庄</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遥</dd>
    </dl>
</body>
</html>

    效果图

    11、table标签

    table标签在html中定义表格

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

    <h2>table</h2>
    <!--broder指定表格的边框-->
    <table border="1">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>

    <table border="1">
        <thead>     <!-- <thead> 标签表示table标签的头部-->
            <tr>
                <!--合并行,colspan="3" 表示合并3行-->
                <th colspan="3">1</th>
            </tr>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>     <!-- <tbody> 标签表示table标签的身体部分-->
            <tr>    <!-- <tr>标签表示行 -->
                <td>1</td>   <!-- <td>标签表示列 -->
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <!--合并列, rowspan="3" 表示合并3列-->
                <td rowspan="3">1</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

    效果图

    12、fieldset标签

    个人感觉就是做出登录框的效果，看代码和效果图

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <!-- fieldset标签需要配合着legend标签来使用 -->
    <fieldset>
        <legend>登录</legend>
        <p>用户名：</p>
        <p>密码：</p>
    </fieldset>

</body>
</html>

    效果图

    13、form标签

    form表单主要用来做一些数据的提交,例如向百度提交一个搜索的关键词

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

    <form action="https://www.baidu.com/s" method="get">

        请输入要搜索的关键词: <input type="text" name="wd" />
        <input type="submit" value="提交" />

    </form>

</body>
</html>

    提交前

    提交后

    14、div标签

    div标签主要用来比较方便的进行网页布局

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

    <div style="background-color:red; color:white">
        <h3>This is a header</h3>
        <p>This is a paragraph.</p>
    </div>

    fdafd

</body>
</html>

    效果图
  • 相关阅读:
    Linux中的计算器（bc）
    在Linux中显示日历（cal）
    在Linux中显示日期（date）
    Linux中的注销当前用户
    Linux中的提示符
    在Linux中启动X Window
    硬盘知识
    划分Linux分区
    Linux中的关机
    hdu4424 Conquer a New Region 并查集/类似最小生成树
  • 原文地址：https://www.cnblogs.com/CongZhang/p/5771333.html
Copyright © 2020-2023  润新知