HTML常见标签用法

什么是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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,544评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,430评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,764评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,193评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,216评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,182评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,063评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,917评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,329评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,425评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,019评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2赞 353

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1赞 92
  • HTML学习笔记（完）
    概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时，所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,336评论 0赞 7
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,474评论 1赞 45
  • 学习笔记（一）
    浏览器与服务器的基本概念 浏览器（安装在电脑里面的一个软件） 作用： ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,116评论 0赞 0
  • 【连载】算命（04）：往事
    目录上一章：宅基地 过了好久，村长说，办法也不是没有，就从你家的危房下手。现在回去，西厢房后墙暂时别修了，万一上面...
    茶人老七阅读 855评论 8赞 3