为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • (1) <p></p>

    (2) <div></div>

    (3) <span></span>
    三个标签。
    查看全部
  • hello world
    查看全部
  • hello world
    查看全部
  • 讲解:

    1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    3.method : 数据传送的方式(get/post)。
    (注意:

    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki,里面有详细介绍。)
    查看全部
  • 1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

    2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

    3、<tfoot> 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

    4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
    查看全部
  • 技术点的解释:

    1. <!DOCTYPE html>:文档类型声明,表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前

    2. <html></html>标签对:<html>标签位于HTML文档的最前面,用来标识HTML文档的开始;</html>标签位于HTML文档的最后面,用来标识HTML 文档的结束;这两个标签对成对存在,中间的部分是文档的头部和主题。

    3.<head></head>标签对:标签包含有关HTML文档的信息,可以包含一些辅助性标签。如<title></title>,<link /><meta />,<style></style>,<script></script>等,但是浏览器除了会在标题栏显示<title>元素的内容外,不会向用户显示head元素内的其他任何内容。

    4.<body></body>标签对:它是HTML文档的主体部分,在此标签中可以包含<p><h1><br>等众多标签,<body>标签出现在</head>标签之后,且必须在闭标签</html>之前闭合。
    查看全部
  • <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>input-placeholder</title>

    </head>


    <body>

        <input type="text" placeholder="请输入关键字">

        <br />

        <input type="password" placeholder="请输入关键字">

        <br/>

        <input type="text" value="请输入关键字">

        <br />

        <input type="password" value="请输入关键字">

        

    </body>


    </html>

    查看全部
  • <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>表单标签</title>

    </head>


    <body>

        <form methot="post" action="save.php">

            <label for="username">用户名:</label>

            <input type="text" name="username" id="username" value="" />

            <label for="pass">密码:</label>

            <input type="password" name="pass" id="pass" value="" />

            <input type="submit" value="确定" name="submit" />

            <input type="reset" value="重置" name="reset" />

        </form>

    </body>


    </html>

    查看全部
  • <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>学习表格标签</title>

    </head>


    <body>

        <table border="1">

            <caption>前端三剑客</caption>

                <tr>

                   <th>知识点</th>

                   <th>重要程度</th>

                   <th>难度</th>

                   <th>学习周期</th>

                </tr>

                <tr>

                    <td>html</td>

                    <td>5星</td>

                    <td>3星</td>

                    <td>7天</td>

                </tr>

                <tr>

                    <td>css</td>

                    <td>5星</td>

                    <td>4星</td>

                    <td>10天</td>

                </tr>

                <tr>

                    <td>js</td>

                    <td>5星</td>

                    <td>5星</td>

                    <td>20天</td>

                </tr>

            </table>

    </body>


    </html>

    查看全部
  • <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>使用thead、tbody、tfoot标签</title>

    </head>


    <body>

        <h3 align="center">成绩表</h3><hr />

       <table border="1" align="center">

           <thead>

           <tr>

               <th>科目</th>

               <th>分数</th>

           </tr>

           </thead>

           <tbody>

           <tr>

               <td>语文</td>

               <td>99</td>

           </tr>

           <tr>

               <td>数学</td>

               <td>60</td>

           </tr>

           </tbody>

           <tfoot>

           <tr>

               <td>总分</td>

               <td>159</td>

           </tr>

           </tfoot>

       </table> 

    </body>


    </html>

    查看全部
  • 完成学习第二阶段:全盘回顾,脚踏实地跟随学习,做笔记实操。

    查看全部
  • 完成学习第一阶段:快速获取认知。

    完成学习第二阶段:全盘回顾,脚踏实地跟随学习,做笔记实操。

    查看全部
  • https://blog.csdn.net/zhuyu__com/article/details/52022684


    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。


    label标签

    label标签不会向用户呈现任何特殊的效果,它的作用是为鼠标用户改进了可用性,如果你在label标签内点击文本,就会触发此控件,也就是说,当用户单击选中该label标签时,浏览器会自动将焦点转到和 标签相关的表单控件上(就自动选中和该label标签相关联的表单控件上);

    语法:

    <label  for = "控件id 的名称" >

    注意:标签中for 属性的值应该与相关控件的id属性值一定要相同;

    查看全部
  •  font: italic small-caps bold 12px/30px Georgia, serif;

    查看全部
  • <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>学习表格标签</title>
        <style>
        table,th,td{
            border:solid 1px;
        }
        caption{
            font-size:30px;
            font-weight: bold;
        }
        </style>
       
    </head>

    <body>
         <table>
               <caption>前端三剑客</caption>
           <tr>
           <th>知识点</th>
           <th>重要程度</th>
           <th>难度</th>
           <th>学习周期</th>
           </tr>
            <tr>
           <td>HTML</td>
           <td>5星</td>
           <td>3星</td>
           <td>7天</td>
           </tr>
            <tr>
           <td>CSS</td>
           <td>5星</td>
           <td>4星</td>
           <td>10天</td>
           </tr>
            <tr>
           <td>JS</td>
           <td>5星</td>
           <td>5星</td>
           <td>20天</td>
           </tr>
          
       </table>
    </body>

    </html>

    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!