为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
手把手带你前端快速入门_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

手把手带你前端快速入门

李游Leo Web前端工程师
难度入门
时长 2小时50分
  • <span>标签被用来组合文档中的行内元素

    查看全部
  • P标签


    P标签里不可以放占位的标签,例如:input、buttom、div等。

    p标签里可以放文字、图片、a标签。


    https://img1.sycdn.imooc.com/66c348860001c71d05440079.jpg

    查看全部
  • 1.html中作为按钮标签有两种,一种是input、另一种是button标签。

    2.最基本的区别为前者为单标签,后者为闭合的标签。



    <input type="button" value="按钮">      <!-- 单标签 -->

    <button>按钮</button>                   <!-- 闭合标签 -->

    <button>

    <img src="img/1.gif">

    </button>

    查看全部
  • <input value="慕课网">         <!-- input框里的实打实的文字 -->

    <input value="abc">

    <input 

    maxlength="5"                  

    value="abcdefg">               <!-- 限制input框的长度,不会限制value的长度 -->

    <input value="请输入密码">

    <input placeholder="请输入密码">     <!-- 提示内容 -->

    查看全部
    1. input标签是网页中最常见的输入文字的标签

    2. input有很多种类型,例如:密码、文字、数字、颜色、复选等。


    <input type="text"/>        <!-- 文本 -->

    <input type="password"/>    <!-- 密码 -->

    <input type="number"/>      <!-- 数字 -->

    <input type="color"/>       <!-- 颜色 -->

    <input type="checkbox"/>    <!-- 复选框 -->

    <input type="date">         <!-- 日期 -->

    查看全部
  • 1.前端网页的有序列表ol(英文ordered List)

    2.列表里的项目用<li>(英文list item)标签记述

    3.默认状态宽度是一整行

    查看全部
  • <a href="https://www.imooc.com/u/index/allcourses">

    慕课网

    </a>

    跳转页面


    <a target="_blank" href="https://www.imooc.com/">

    <img src="https://www.imooc.com/static/img/index/logo2020.png" width="20" height="20"/>

    </a>

    新开页面


    <a href="index-one.html">

    index_one页面

    </a>

    跳转到同级目录页面


    <a href="New Folder/index-oo.html">

    index_oo第二页面

    </a>

    跳转到不同级目录页面


    ../(返回上级目录)

    查看全部
  • herf  超文本引用


    https://img1.sycdn.imooc.com/66bb5b440001ac6411980174.jpg

    查看全部
  • <ul> 标签定义无序(带项目符号)列表。

    请使用 <ul> 标签和 <li> 标签来创建无序列表。

    提示:请使用 CSS 来设置列表样式。

    提示:对于有序列表,请使用 <ol> 标签。

    查看全部
  • <ol> 标签定义有序列表。有序列表可以是数字或字母顺序。

    <li> 标签用于定义每个列表项。

    提示:请使用 CSS 来设置列表样式。

    提示:对于无序列表,请使用 <ul> 标签。

    查看全部
  • <div> 标签定义 HTML 文档中的分割或部分(分区或小节,division/section)。

    <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    任何类型的内容都可以放在 <div> 标签内!<div> 标签可用作 HTML 元素的容器,然后使用 CSS 设置样式或使用 JavaScript 进行操作。

    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。通过使用 class 或 id 属性,可以轻松地对 <div> 标签设置样式。

    注意:默认情况下,浏览器总是在 <div> 元素前后放置一个换行符。

    用法

    <div> 是块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

    不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

    可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    查看全部
  • <title> 标签定义文档的标题。标题必须是纯文本的,显示在浏览器的标题栏或页面的选项卡中。

    <title> 标签在 HTML 文档中是必需的!

    页面标题的内容对于搜索引擎优化 (SEO) 非常重要!搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。

    <title> 元素:

    定义浏览器工具栏中的标题

    添加到收藏夹时为页面提供标题

    在搜索引擎结果中显示页面的标题

    以下是创建好的标题的一些建议:

    选择较长且具有描述性的标题(避免使用仅包含一个或两个单词的标题)

    搜索引擎将显示大约 50-60 个字符的标题,因此请尽量避免标题过长

    不要仅将标题设为一组单词的列表(这可能会降低页面在搜索结果中的排名)

    因此,尽量使标题准确且有意义!

    注意:一个 HTML 文档中不能包含多个 <title> 元素。


    <meta> 标签定义关于 HTML 文档的元数据。元数据是关于数据的数据(信息)。

    <meta> 标签始终位于 <head> 元素 内,通常用于指定字符集、页面描述、关键词、文档作者和视口设置:

    元数据不会显示在页面上,但可以被机器解析。

    浏览器(如何显示内容或重新加载页面)、搜索引擎(关键词)和其他网络服务会用到元数据。

    提示:meta 元素有多种不同用法,而且一个 HTML 文档中可以多个 meta 元素。

    提示:通过 <meta> 标签,有一种方法让网页设计师控制视口(即用户在网页中可见的区域)(请参见下面的"设置视口"实例)。

    注意:每个 meta 元素只能用于一种用途。如果想要使用的特性不止一个,那就应该在 head 元素中添加多个 meta 元素。

    查看全部
  • <a></a>
    a标签定义超链接,用于从一个页面链接到另一个页面。
    a元素最重要的属性是 href 属性,它指定链接的目标。
    查看全部
  • <span>标签:组合文档中的行内元素

    <span>abc</span>

    <span>123</span>

    效果就是在一行显示:

    abc123


    同一个div中的input会从左到右的排序,不会换到下一行

    查看全部
  • P标签自成一行,且会自动在其后创建一些空白;

    div里面可以放P,P不能放div

    p标签里面不能放div,不能放ul,ol,li

    但是P标签里面放文字、图片<img>、链接<a>是可以的

    查看全部
首页上一页12下一页尾页

举报

0/150
提交
取消
课程须知
1.具备电脑基础使用 2.课程学习多动手练
老师告诉你能学到什么?
1.了解前端是什么,以及发展 2.学会前端开发环境搭建 3.学会基础的HTML标签 4.实战两个案例HTML骨架搭建
友情提示:

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