美文网首页
HTML常见标签用法

HTML常见标签用法

作者: TryCatch菌 | 来源:发表于2018-10-03 00:25 被阅读0次

什么是HTML
HTML是用来描述网页的一种语言

* HTML是超文本标记语言，不是一种编程语言，而是一种标记语言
* 标记语言是一条标记标签
* HTML是使用标记标签来描述网页

HTML标签
HTML标签通常被称为HTML标签

* HTM标签由尖括号扩起来的   例如 <htlm>
* 标签通常是成对出现<b></b>
* 标签第一个是开始标签，第二个是结束标签
* 开始和结束标签称为开放标签和闭合标签
* 自动换行的叫做块级标签，不自动换行的叫做行级标签

web游览器的作用是读取HTML，并以网页的形式显示他们
资源全部用相对路径，资源全部存放在工程中

乱码解决方案，title属性设置

<html>
    <head>

        <title>
                网站的标题
        </title>
        <meta charset="UTF-8">    <!--运行过程中出现乱码 HTML5.0解决方案-->

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">   <!--运行过程中出现乱码 HTML4.0解决方案-->
        <meta http-equiv="refresh" content="5;url=http://www.baidu.comm">  <!--5秒后刷新到某个指定页面，如果不写url 5秒刷新当前页-->

        <meta name="keywords" content="java,c#,net,php">    <!--属性,设置网页关键字-->
        <meta name="description" content="网页的描述">

        <!--    ../表示返回上一级文件，资源全部用相对路径，资源全部存放在工程中    -->
    </head>

    <body>
            网站的内容
    </body>
</html>

常用的文本图片属性标签

* <h1></h1> 标题标签
* <p></p> 换行标签
* &nbsp空格符号
* &copy 版权所有标签
* <ul><li></li></ul>无序列表
* <ol><li></li></ol>有序列表
* <strong>加粗</strong>
*  <b>加粗</b><br>
*  <em>斜体</em><i>斜体</i><br>
* <dl><dt></dt><dl>定义列表
* <img src="images/2.jpg" width="40" height="40" title="这个是图片,鼠标悬停时显示" alt="图片无法显示时显示"/>
* <pre>段落标签<pre>
* <hr/>分隔符

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<>
<head>
    <title>标签练习</title>
</head>
<>
    <!--标题标签-->
    <h1>标签一</h1>
    <h2>标签二</h2>
    <h3>标签三</h3>
    <h4>标签室</h4>
    <h5>标签五</h5>
    <h6>标签六</h6>

    <!--控制字体属性-->
    <font color="aqua" size="100">测试字体</font>
        <!--换行标签-->
        <p>自动换行，表示一个段落</p>
        <p>自动换行，具有行间距</p>
        换行书写，表示一个段落，不具有行间距<br>
        一个新的段落<br>

    <!--空格符号-->
    有好多的空格&nbsp;&nbsp;&nbsp;有三个空格<br>

    <!--大于小于符号-->
    a&lt;b&nbsp;a&gt;b<br>

    XXXX版权所有&copy;

    <!--无序列表 如果type值等于null则去掉项目符号<ul type="">-->
    <ul>
        <!-- li 排序列表 -->
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>

    </ul>
    <!--无序列表嵌套书写-->
    <ul>
        <li>吃饭</li>
        <ul>
            <li>吃肉</li>
            <li>吃菜</li>
            <li>吃面条</li>
        </ul>
    </ul>

    <!--有序排序-->
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ol>
    <!--y有序排序，修改项目符号-->
    <ol type="A">
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ol>
    <!--字体加粗，斜体字体-->
    <strong>加粗</strong>
    <b>加粗</b><br>
    <em>斜体</em><i>斜体</i><br>

    <!--定义列表-->
    <dl>
    <dt>咖啡</dt>    <!--这是标题-->
    <dd>这是一杯咖啡</dd>    <!--这是内容-->
    </dl>

    <!--图片标签，自带结束,也可以只设置宽度px自动调整高度，设置宽度百分百，是游览器所占屏幕的半分比。高度只能用像素控制，无百分百-->
    <img src="images/2.jpg" width="40" height="40" title="这个是图片,鼠标悬停时显示" alt="图片无法显示时显示"/>

    <!--pre标签，标签区域里的内容不会编译-->
    <pre>
    a < b a > b
    </pre>
     
     <!--分割线-->
     <hr/>


</body>
</html>

<a>锚点定位超链接，表格

* <a href="常用的标签01.html" target="_blank">超链接</a>
* <table><tr><td></td></tr><table> 表格标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
<!--超链接标签 href表示需要跳转的连接，#表示本页，target表示打开方式， blank表示新窗口打开，self表示当前窗体打开-->
<a href="常用的标签01.html" target="_blank">超链接</a>

<!--锚点定位,快速跳转-->
<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <!--定位超链接去向，#表示本页的four-->
    <li><a href="#four">第四章</a></li>
    <!--跳转其他页面的快速定位，#表示需跳转的页面的five-->
    <li><a href="常用的标签01.html#five">第五章</a></li>
</ol>
<!--定义超链接名字-->
<h1><a name="four">第四章</a></h1>

<!--表格标签 ，border属性代表边框属性，align表示表格位置，wideth是相对游览器，tr代表行,td代表列-->
<!--rules 表示边框规则-->
<table border="1" align="center" width="100%" style="height: 500px;">
    <!--tr中的align表示文本居中，水平位置;valign表示垂直位置-->
    <tr align="center" >
        <td>第一行第一列</td>
        <td>第一行第二列</td>

    </tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    <tr>

    </tr>

</table>

</body>
</html>

去掉表格的间隙 border

<table align="center" style="border-collapse:collapse;">

table表格垮行垮列合并

* 行合并使用rowspan
* 列合使用colspan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>

<!--表格标签 ，border属性代表边框属性，align表示表格位置，wideth是相对游览器，tr代表行,td代表列-->
<!--rules 表示边框规则-->
<table border="1" align="center" width="100%" style="height: 500px;">
    <!--tr中的align表示文本居中，水平位置;valign表示垂直位置-->

    <tr align="center" >
        <td>姓名</td>
        <td>科目</td>
        <td>分数</td>
        <td>总分</td>

    </tr>
    <!--单元格合并 rowspan 垮行三行，垮的行数需要删除不书写-->
    <tr align="center" >
        <td rowspan="3">张三</td>
        <td>语文</td>
        <td>80</td>
        <td rowspan="3">xxxx</td>
    </tr>
    <tr align="center" >

        <td>数学</td>
        <td>90</td>

    </tr>
    <tr align="center" >

        <td>英语</td>
        <td>70</td>

    </tr>
    <tr align="center" >
        <td rowspan="3">李四</td>
        <td>第5行第二列</td>
        <td>第5行第三列</td>
        <td>第5行第四列</td>
    </tr>
    <tr align="center">

        <td>第6行第二列</td>
        <td>第6行第三列</td>
        <td>第6行第四列</td>
    </tr>
    <tr align="center" >

        <td>第7行第二列</td>
        <td>第7行第三列</td>
        <td>第7行第四列</td>
    </tr>
    <!--垮列合并，用colspan，垮列也需删除-->
    <tr>
        <td colspan="4">总结：xxxxxxxxxxxxxxxx</td>

    </tr>

</table>

</body>
</html>

form表单标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>表单标签</title>
</head>
<body>
    <!--表单标签 还有method属性有get和post方法，get网页会跟上内容，post提交网页不会跟内容-->
    <form action="registerSuc.html">
        <!--input标签为行级标签文本框属性  readonly="readonly"表示文本框只读  disabled=“disabled”表示禁用，用到按钮表示按钮无法触发-->
        用户名:<input type="text" value="请输入用户名"/><br>
        <!--maxlength表示最大长度-->
        密码:<input type="password" maxlength="8"/>
        <!--网页实现互斥效果，名字相同就为一组,checkde为设置为默认选择-->
        性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        <!--input标签提交按钮 disabled=“disabled”表示禁用，用到按钮表示按钮无法触发-->
        <input type="submit" value="注册">

        <!--为了达到自动对其效果可以使用表格-->
        <table align="center">
            <tr>
                <td align="left">用户名：</td>
                <td><input type="text" value="请输入用户名"></td>
            </tr>
            <tr>
                <td align="left">密码：</td>
                <td><input type="password" ></td>
            </tr>
            <tr>
                <td align="left">性别:：</td>
                <td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</td>
            </tr>
            <tr>
                <td align="left">婚姻状况:：</td>
                <td><input type="radio" name="marriage" checked="checked">已婚<input type="radio" name="sex">未婚</td>
            </tr>
            <tr>
                <td align="left">兴趣爱好：</td>
                <td >
                    <!--复选框-->
                    <input type="checkbox">吃饭
                    <input type="checkbox">睡觉
                    <input type="checkbox">打豆豆
                </td>

            </tr>
            <tr>
                <td>上传图片</td>
                <!--选择文件属性，按钮提交-->
                <td><input type="file"/></td>
            </tr>
            <tr>
                <!--图片标签-->
                <td ></td>
                <td><input type="image" src="1.jpg"/></td>
            </tr>

            <tr>

                <td><input type="reset" value="清空"/></td>
                <td><input type="button" value="按钮"/></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="email"/></td>
            </tr>

            <tr>
                <td>请选择地址</td>
                <td>
                    <!--下拉框-->
                    <select>
                        <option>--请选择--</option>
                        <option>四川</option>
                        <option>云南</option>
                        <option>贵州</option>

                    </select>
                    <select>
                        <option>--请选择--</option>
                        <option>四川</option>
                        <option>云南</option>
                        <option>贵州</option>

                    </select>
                </td>

            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <!--文本域 row设置初始行数 cols控制宽度-->
                    <textarea rows="10" cols="30">XXXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
                </td>
            </tr>

            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>

    </form>
</body>
</html>

杂项标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <!--对元素进行分组-->
    <fieldset>
        <legend>必填选项</legend>
        <table>
            <tr>
                <td>姓名</td>
                <td><input type="text"/></td>
            </tr>
        </table>

    </fieldset>
    <fieldset>
        <legend>选填选项</legend>
        <table>
            <tr>
                <td>电话</td>
                <td><input type="text"/></td>
            </tr>
        </table>
    </fieldset>

    <!--范围标签-->
    价格：<span style="color: red;font-size: 24px">99元</span>

    <!--lable标签可以用for属性选择服务位置 ,id为唯一的不可重复的-->
    <label for="userName">姓名：</label><input type="text" id="userName"  />

    <!--滚动标签  direction属性控制方向-->
    <marquee>系统公告：xxxxx活动开始</marquee>

</body>
</html>

简单的注册页面练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>注册页面</title>
</head>
<body>
    <form action="../../Project/registerSuc.html">
        <table align="center">
            <tr>
                <td>账号：</td>
                <td><input type="text" value="请输入用户名"/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"/></td>

            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>用户昵称：</td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td>头像：</td>
                <td><input type="file" value="选择头像"/></td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>保密</td>
            </tr>
            <tr>
                <td>手机号码：</td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td><input type="email"/></td>
            </tr>
            <tr>
                <td>安全提题：</td>
                <td>
                    <select>
                        <option>--请选择提示问题--</option>
                        <option>你第一次坐飞机去什么地方</option>
                        <option>你读的小学交什么名字</option>
                        <option>你最喜欢的歌曲是什么</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>问题回答</td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td>会员协议</td>
                <td><textarea rows="5" cols="20">W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。
                当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。赞助商：上海赢科投资有限公司。 蒙ICP备06004630号</textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="center">我已经同意此协议<input type="checkbox"/></td>

            </tr>
            <tr>
                <td align="center" colspan="2"><input type="submit" value="注册"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重写填写"/></td>
            </tr>

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

相关文章

  • HTML常见标签用法

    什么是HTMLHTML是用来描述网页的一种语言 HTML标签HTML标签通常被称为HTML标签 web游览器的作用...

  • 《HTML常用标签》

    这篇博客将包含HTML中常见且重要的a标签、table标签以及img标签的用法和作用。 a标签的用法 首先a标签是...

  • Html常用标签

    今天我们来简单介绍一下HTML常见的标签，开启HTML的大门 a 标签的用法 a标签的作用 跳转到外部页面 跳转到...

  • CSS课程1

    HTML常见标签 HTML常用标签的重要属性

  • HTML入门2：html常用的标签

    本文为HTML中常用标签的用法。其中包括a标签，img标签，table标签，from标签 一、a 标签的用法 1....

  • HTML标签的权重

    大纲 1、HTML权重标签2、常见的权重标签3、常见的权重标签的使用 1、HTML权重标签 SEOer(SEO从业...

  • web前端

    1. 2.标签 3.定义和用法 ...

  • ## HTML基础-常见标签

    ## HTML基础-常见标签 # hr标签 # --> # img标签 # br标签 # p标签 # a标签 # ...

  • HTML常见标签

    如果说最常用的标签， 绝对是毫无异义的一位选手。 关键词块级元素 定义和用法在 标签定义的划分或HTM...

  • HTML常见标签

    一、常见特殊类别的元素1、空元素：不可能存在子节点（例如内嵌的元素或者元素内的文本）的元素，如 、 、 等。2、可...

网友评论

      本文标题：HTML常见标签用法

      本文链接：https://www.haomeiwen.com/subject/hwsvoftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|HTML常见标签用法|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！