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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
最热 最新
  • 慕工程3165275

    <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>header</title>

    </head>


    <body>

        <!--header标签，用来定义头部区域。-->

        <herder>我是头部标签</herder>

    </body>


    </html>


    查看全部
    0 采集 收起 来源：听说开头写的好就能一键三连 - <header>标签定义头部区域

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>div标签</title>

    </head>


    <body>

        <!--网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。-->

        <!--

            语法：


                <div>…</div>

        -->

        <div>

        <h2>热门课程排行榜</h2>

        <ol>

            <li>前端开发面试心法 </li>

            <li>零基础学习html</li>

            <li>javascript全攻略</li>

        </ol>

        </div>

        <div>

        <h2>最新课程排行</h2>

        <ol>

            <li>版本管理工具介绍—Git篇 </li>

            <li>Canvas绘图详解</li>

            <li>QQ5.0侧滑菜单</li>

        </ol>

        </div>

    </body>


    </html>


    查看全部
    0 采集 收起 来源：我还想diy点样式- 使用<div>标签自定义块

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>h1-h6标题标签</title>

    </head>


    <body>

        <!--我们将使用<hx>标签来制作文章的标题。-->

        <!--标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。-->

        <!--语法：

                <hx>标题文本</hx> (x为1-6)-->

                

        <!--注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>-->

        <h1>了不起的比尔盖茨</h1>

        <p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p>

        <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

    </body>


    </html>


    查看全部
    0 采集 收起 来源：做个标题党 - 使用<hx>标签为网页增加标题

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>了不起的盖茨比</title>

        <style>

        /*<span>标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。*/

        /*如果现在我们想把下面的第一段话“美国梦”三个字设置成blue（蓝色），所以这样情况下就可以用到<span>标签了。*/

        span {

            color:blue;

        }

        </style>

    </head>

    <body>

        <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

        <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

    </body>


    </html>


    查看全部
    0 采集 收起 来源：diy一个标签吧 - 使用<span>标签自定义文字样式

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>p标签</title>

    </head>

    <body>

        <!--如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。-->

        <!--<p>段落文本</p>-->

        <!--注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中-->

        <p>我是第一个段落</p>

        <p>我是第二个段落</p>

    </body>


    </html>


    查看全部
    0 采集 收起 来源：开始我们的第一段对话吧- 段落标签

    2020-12-03

  • 慕工程3165275

    标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

    讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

    1. 更容易被搜索引擎收录。

    2. 更容易让屏幕阅读器读出网页内容。


    查看全部
    0 采集 收起 来源：语义化，让你的网页更好的被搜索引擎理解

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE HTML>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            <title>HTML的代码注释</title>

        </head>

        <body>

            <!--在线咨询 begin-->

            <div>

                <p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p>

            </div>

            <!--在线咨询 end-->

        </body>

    </html>

    <!--注释快捷键ctrl+shift+/-->


    查看全部
    0 采集 收起 来源：解释不等于掩饰- html文件注释

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE html>

    <html>


    <head>

        <meta charset="UTF-8">

        <title>了不起的盖茨比</title>

    </head>


    <body>

        <!-- 标题标签h1-6字体从大到小,只作为标题时候使用 -->

        <h1>了不起的盖茨比</h1>

        <!-- 段落标签 -->

        <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

        <!-- 段落标签 -->

        <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

    </body>


    </html>


    查看全部
    0 采集 收起 来源：你就是馋人家的身子 - 认识body标签

    2020-12-03

  • 慕工程3165275

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="UTF-8">       <!--设置当前文件字符编码-->

            <title>认识head标签</title>  <!--<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。-->

        </head>

        <body>

            <h1>欢迎来到慕课网</h1>

        </body>

    </html>


    <!--style标签：双标签中设置当前文件样式-->


    查看全部
    0 采集 收起 来源：小哥,做头么? - 认识head标签

    2020-12-03

  • 慕工程3165275

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

    <!DOCTYPE html>


    <!--<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；-->

    <html>

        

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

        <head>

            <meta charset="UTF-8">

            

            <!--网页标题，显示在网页左上角-->

            <title>认识html文件基本结构</title>

        </head>

        

        <!--<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。-->

        <body>

            <h1>在本小节中，你将学会认识html文件基本结构</h1>

        </body>

        

        <!--</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；-->

    </html>


    查看全部
    0 采集 收起 来源：听说有新版本了? - html5文档结构

    2020-12-03

  • shea_mong

    块级元素：

    1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

    3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。


    查看全部
    0 采集 收起 来源：我要独占一行 - 块级元素

    2020-12-03

  • LeLe呀

    1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

    2、select标签里面只能放option标签，表示下拉列表的选项。

    3、option标签放选项内容，不放置其他标签。


    查看全部
    0 采集 收起 来源：使用select、option标签创建下拉菜单

    2020-12-03

  • weixin_慕运维9562737

    使用<textarea>标签创建文本域

    当用户需要在表单中输入大段文字时，需要用到文本输入域。

    语法：

    <textarea  rows="行数" cols="列数">文本</textarea>

    1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

    2、cols ：多行输入域的列数。

    3、rows ：多行输入域的行数。

    4、在<textarea></textarea>标签之间可以输入默认值。

    举例：

    <form  method="post" action="save.php">         <label>联系我们</label>         <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form>

    注意：代码中的<label>标签在本章5-9中讲解。

    在浏览器中显示结果：

    注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。（这两个css样式在以后的章节会讲解）

     


    查看全部
    0 采集 收起 来源：留下您宝贵的意见 - 使用<textarea>标签创建文本域

    2020-12-03

  • LeLe呀

    注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

    查看全部
    0 采集 收起 来源：填填性别和兴趣爱好 - 单选框、复选框，让用户选择

    2020-12-03

  • weixin_慕运维9562737

     邮箱输入框

    我们来学习input标签中的邮箱框email类型，先来看一下邮箱框长什么样子吧。

    我们要实现一个邮箱输入框，可以输入以下代码：

    技术点的解释：

    1、Input的type属性设置为email,则表示该输入框的类型为邮箱。

    2、数字框的值必须包含@。

    3、数字框的值@之后必须有内容,否则会报错误提示。


    查看全部
    0 采集 收起 来源：留个邮箱,方便通知消息 - 邮箱输入框

    2020-12-03

  • weixin_慕运维9562737

    网址输入框

    我们来学习input标签中的网址框url类型，先来看一下网址框长什么样子吧。

    技术点的解释：

    1、input的type属性设置为url,则表示该输入框的类型为网址。

    2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。


    查看全部
    0 采集 收起 来源：平时都逛论坛么? - 网址输入框

    2020-12-03

首页上一页385386387388389390391下一页尾页

举报

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

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

查看已购买的课程