HTML5 标签知识

转载自:https://blog.csdn.net/beichen0518/article/details/79699631

HTML 超文本标记语言

  • Hyper-Text Markup Language
  • 后缀名.htm / .html

-查找错误,开发者工具,找到Console 控制台可以看到报错只有js报错可以看到报错

<!--所有的代码都写在html标签下 它是最顶级标签-->
<!--标签基本上都有开始标签和结束标签,标签还可以有属性-->
<!--1.标签(tag/element- 承载内容-->
<!--2.层叠样式表(CSS) - 显示/渲染页面-->
<!--3.JavaScript - 交互式行为 -->
<!doctype html> <!--文档类型声明,说明页面使用的HTML5的规范-->
<html> <!--标签,用<>,这是一个开始标签-->
    <head> <!--放一些和网页相关的元数据信息,但不会显示在浏览器的主窗口中-->
        <meta charset="utf-8"> <!--源数据标签,标签的属性,如果一个标签中间没有内容,就不需要结束标签-->
        <title>某某的个人空间</title> <!--网页的标题-->
        <!--样式表-->
        <style type="text/css"> 
            h1 {
                color: red;
                font-size:3cm;
            }

        </style> <!--red 和 #ff0000效果是一样的,这是16进制的数等于255,0,0-->
    </head>
    <body> <!--body标签内的内容就是要显示在浏览器窗口中的信息-->
        <h1 title="这是一个提示信息">hello, world</h1>  <!--一级标题, 一共有六级标题,title 属性效果是,鼠标放在标题文字上时,浮出信息--> 
        <h2>你好,世界</h2> <!--二级标题-->
        <button onclick="foo()">OK</button> <!--按钮标签-->
        <script>
            function foo() {
                window.alert('大家好');

            }
        </script> <!--js需要在这里写-->
    </body>
</html>
<!--代码都写在标签了里面,而浏览器就是这个语言的执行环境
    它执行HTML书写的代码将结果渲染到浏览器窗口中-->

HTML标签参考手册

  • www
  • World Wide Web - 万维网
  • 规范标准
  • W3C -
  • 学习HTML5去runoob,或W3school

列表小技巧 在sublime中,装了emmet插件的情况下输ul>li*5 再按Tab键会自动生成5个列表

<!DOCTYPE html>
<!--
    html/head/body
    文本 - h1-h6/p/br/hr/sub/sup/strong/em/del/ins/q
    列表 - ul/ol(li)/dl(dt/dd)
    图像 - img/figure/figcaption
    链接 - a(页面链接/锚链接/功能链接)
    表格 - table/tr/td/th/thread/tbody/tfoot
    表单 - form / input / select / textarea
    音视频 - audio / video(source)
-->
<html lang="en">
<head>
    <a id="top"></a> <!--设置锚点-->
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--音频-->
    <audio controls autoplay loop>
        <!--controls 播放控件, autoplay 自动播放 ,loop循环播放-->
        <source src="./resources/bgmusic.mp3" type="audio/mp3" >
    </audio>
    <!--视频-->
    <video controls>
        <source src="./resources/movie.mp4" type="video/mp4">       
    </video>
    <h1>Hello, world!</h1>
    <hr> <!--水平标尺,一个水平的分割线-->
    <ins>床前</ins>明月光<sup>1</sup><br>
    疑是地上霜<sub>2</sub><br>
    <p>举头望明月<del>明月</del></p>
    <p>低头思故乡<strong></strong><em>故乡</em></strong></p>
    <q>其实地上本没有路,走的人多了也便成了路</q>
    <h3>某某的个人爱好</h3>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul><!--无序列表-->
    <ol>
        <li>a1</li>
        <li>a2</li>
        <li>a3</li>
        <li>a4</li>
        <li>a5</li>
    </ol><!--有序列表-->
    <dl>
        <dt>阅读</dt>
        <dd>每天晚上阅读</dd>
        <dd>阅读科幻小说</dd>
        <dt>
            <figure>
            <img src="./images/卡卡西.ico" alt="卡卡西" width="30"> <!--在这种情况下最好选用相对路径,有图片显示图片,没图片显示替换文字, 可以指定宽高,但一般不建议用这种方法,让美工切好图片,不然浪费流量-->
            <figcaption>这是一个什么图</figcaption>
            </figure>
        </dt><!--放图片-->
        <dd>每天晚上阅读</dd>
        <dd>阅读科幻小说</dd>
    </dl><!-- 定义列表-->
    <!--列表-->
    <table>
        <!--列表行-->
        <tr>
            <!--列表列-->
            <td>

            </td>

        </tr>
    </table>
    <table border="1">
        <caption>学生成绩表</caption><!--标题,自动居中-->
        <thead>
                <tr>
                    <th>姓名</th>
                    <th>Python</th><!--th表示表头里的列-->
                </tr>
        </thead>
        <tbody>
                <tr>
                    <td rowspan="3"></td> <!--跨行,合并单元格-->
                    <td>王大锤</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>小明</td>
                    <td>60</td>
                </tr>
                <tr>
                    <td colspan="2"></td> <!--跨列-->                    
                </tr>
                <tr>
                    <td></td>
                    <td>小强</td>
                    <td>75</td>
                </tr>
        </tbody>
        <tfoot>
                <tr>
                    <td colspan="2" align="right">平均分</td> <!--虽然可以直接用属性来对齐,但都应该由样式表来做-->
                    <td></td>
                </tr>
        </tfoot>
    </table>
    <!--表单-->
    <form action="" method="post" enctype="multipart/form-data">
        <!--action 给url,对应某个服务器的某个功能 method="post" 如果要上传文件必须写post ,enctype="multipart/form-data"这个表示编程语言,上传文件时也需要写-->
        <fieldset>
        <legend>必填信息</legend>
        <p><input type="text" name="username" placeholder="请输入用户名" required></p>
        <!--可输入的文本框, value表示默认值,placeholder表示占位信息, required表示必填-->
        <p><input type="password" name="password" placeholder="请设置密码"></p>
        <!--密码框-->
        <!--单选框-->
        <p>
        <input type="radio" name="gender" checked><input type="radio" name="gender" ></p>
        <!--单选按钮 ,如果name相同,只能选择一个,如果name不同就都可以选,checked表默认选中-->
        <!--复选框-->
        <p>
            <input type="checkbox" name="fav">阅读
            <input type="checkbox" name="fav">健身
            <input type="checkbox" name="fav">游戏
            <input type="checkbox" name="fav"><!--可同时勾选多项-->
        </p>
        <!--日历框-->
        <p>
            <input type="date" name="birthday">生日
        </p>
        <!--输邮箱的框-->
        <p>
            <input type="email" name="email" placeholder="请输入您的邮箱">
        </p>
        </fieldset>
        <!--下拉列表-->
        <fieldset>
        <legend>可选信息</legend>
        <p>
            <select name="prov">
                <option value="北京">北京</option>
                <option value="tj">天津</option>
                <!--value中的值是传给服务器的,可以不和后面的值一样-->
                <option value="成都" selected>成都</option>

            </select>

        </p>
        <!--文本区-->
        <p>
            <textarea rows="5" cols="30" name="intro"></textarea>
        </p>
        <!--文件选择器-->
        <p>
            <input type="file" name="file">
        </p>
        </fieldset>
        <p>
            <input type="submit" value="立即注册">
            <!--提交-->
            <input type="reset" value="重新填写">
            <!--重置-->
        </p>

    </form>

    <!--前三个是页面链接-->
    <a href="http://www.baidu.com">百度一下</a><!--超链接标签,在当前窗口打开-->
    <a href="http://www.baidu.com" target="_blank">百度两下</a><!--在新窗口打开-->
    <a href="index.html">我的首页</a><!--打开自己网站-->
    <a href="#top">回顶部</a> <!--回到锚点位置, 锚链接-->
    <!--功能链接,链接到qq,或发邮件-->
    <a href="mailto:qustwxz@163.com">联系站长</a><!--不好用是因为没有邮件客户端-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin= 

{{544619417}}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3153717369:52 " alt="点击这里给我发消息" title="点击这里给我发消息"/></a>


</body>
</html>
<!--<br>折行标签, <p>内容</p>段落标签,<ins>加下滑线<sup>上标<sub>下标<del>删除线<strong>加粗<em>斜体 <q>引用-->

table技巧 table>tr*5>td*2>{项目$}可生成5行2列的表格

常用图片格式选择

  • svg矢量图 无损
  • gif 动图
  • png 少色彩
  • jpg 多色彩的图
阅读更多
个人分类: 学习
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭