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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。

    语法:

    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    举例:

    <img src = "myimage.gif" alt = "My Image" title = "My Image" />

    讲解:

    1、src:标识图像的位置;

    2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    4、图像可以是GIF,PNG,JPEG格式的图像文件。


    查看全部
  • 语法:

    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>

    举例:

    下面是一个热点课程下载排行榜:

    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>

    <ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,


    查看全部
  • 这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

    语法:

    <ul>
      <li>信息</li>
      <li>信息</li>
       ......
    </ul>

    举例:

    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>


    查看全部
  • 语法:

    html4.01版本 <hr>

    xhtml1.0版本 <hr />

    注意:

    1. <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

    2. <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。

    3. 大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。


    查看全部
  • 要想输入空格,必须写入&nbsp;

    语法:

    &nbsp;

    在html代码中输入空格是不起作用的,如下代码。

    在浏览中显示,还是没有空格效果。

    输入空格的正确方法:

    在浏览器中的显示出来的空格效果。如下图所示。


    查看全部
  • 在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

    上节的代码改为:


    语法:

    xhtml1.0写法:

    <br />

    html4.01写法:

    <br>

    大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

          与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br /><hr /><img />

    总结:在html代码中输入回车,空格都是没有作用的。在html文本中输入回车换行,就必须输入<br/>。

    查看全部
  • http://img1.sycdn.imooc.com//600d6d300001a4ea04400382.jpg11111

    查看全部
  • section标签,定义一个区域。

    例如网站中专栏部分


    查看全部
  • footer标签,用来定义底部区域。

    例如慕课网底部部分

     


    查看全部
  • html5新增的语义化标签,首先header标签,用来定义头部区域。

    例如慕课网顶部部分

     


    查看全部
  • <div>标签的作用就相当于一个容器。

    语法:

    <div>…</div>

    确定逻辑部分:

    什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。


    查看全部
  • 文章的段落用<p>标签,在本节我们将使用<hx>标签来制作文章的标题。

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

    语法:
    <hx>标题文本</hx> (x为1-6)
    文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们。

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

    h1-h6标签的默认样式:

    标签代码:

    在浏览器中显示的样式:

    从上面的图片可以看出标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。


    查看全部

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

    例子:

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

    语法:

    <span>文本</span>


    查看全部

  • 语法:

    <p>段落文本</p>

     注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。如下图所示:

    在浏览器中显示的效果:

    <p>标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它,在后面课程中会学习到。


    查看全部

  • 1. 标签由英文尖括号<>括起来,如<html>就是一个标签。

    2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/

    如:

    (1) <p></p>

    (2) <div></div>

    (3) <span></span>

    3. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。如下图所示。

    4. HTML标签不区分大小写,<h1><H1>是一样的,但建议小写,因为大部分程序员都以小写为准。


    查看全部

举报

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

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