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

初识HTML(5)+CSS(3)-升级版

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  •  标签的语法

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

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

    如:

    (1) <p></p>

    (2) <div></div>

    (3) <span></span>


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


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


    1、结束标签别忘了加/。

      <开始标签>...</结束标签>

    2、别忘了,在html中的标签代码可都是成对出现的并且要正确嵌套。

      如:

      <div><p>...</p></div>

    查看全部
  • head标签

    下面这些标签可用在 head 部分:

    1、head标签为双标签,有尾标签,<head></head>。

    2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。

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

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

    5、style标签:双标签中设置当前文件样式

    查看全部
  • body标签

    在网页上要展示出来的页面内容一定要放在body标签中

    查看全部
  • html文件注释

    代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

    语法:

    <!--注释文字 -->



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


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

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

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

    在后面的章节会带领大家学习了解html中每个标签的语义(用途)

    查看全部
  • 段落标签

    把文章的段落放到<p>标签中。

    语法:

    <p>段落文本</p>

    查看全部
  • 使用<span>标签自定义文字样式

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

    语法:

    <span>文本</span>

    查看全部
  • 使用<hx>标签为网页增加标题

    文章的段落用<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标签的字号最小。

    查看全部
  • 使用<div>标签自定义块

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

    语法:

    <div>…</div>

    确定逻辑部分:

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

    查看全部
  •  <header>标签定义头部区域

    查看全部
  • <footer>标签定义底部区域

    查看全部
  • <section>定义区段


    查看全部
  • <aside>定义侧边栏区域


    查看全部
  • 使用<br>标签实现换行效果

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

    语法:

    xhtml1.0写法:

    <br />

    html4.01写法:

    <br>

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

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

    查看全部
  • 使用特殊字符&nbsp;实现空格标签

    语法:

    &nbsp;

    查看全部

举报

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

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