美文网首页设计师学前端
设计师学习HTML/CSS之路-01

设计师学习HTML/CSS之路-01

作者: HU_Wei | 来源:发表于2018-06-25 19:24 被阅读0次

不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!

第1章 Html介绍

1-1 代码初体验,制作我的第一个网页

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

1-2 Html和CSS的关系

  • HTML是网页内容的载体
  • CSS样式是表现
  • JavaScript用来实现网页上的特效

1-3 html标签

<h1>这是标题标签</h1>
<h1>这是标题标签</h1>

<p>这是段落标签,这是段落标签,这是段落标签,这是段落标签,这是段落标签。</p>
<p>这是段落标签,这是段落标签,这是段落标签,这是段落标签,这是段落标签。</p>

<img src="https://user-gold-cdn.xitu.io/2018/6/24/1642f6b0a5e42d5d?w=280&h=160&f=jpeg&s=4072">
这是图片标签<img src="https://user-gold-cdn.xitu.io/2018/6/24/1642f6b0a5e42d5d?w=280&h=160&f=jpeg&s=4072">

1-4 标签的语法

  • < 和 >括起来,就是一个标签
  • <p> 开始
    </p> 结束
  • 标签与标签之间是可以嵌套的<div><p>这是一段嵌套文字</p></div>
  • HTML标签建议用小写

1-5 html文件基本结构

<html>
  <head>...</head>
  <body>...</body>
<html>

<html></html>称为根标签,所有网页标签都在之中。
<head>标签定义文档头部,它是所有头部元素的容器。其中包括<title> <script> <style> <link> <meta>等。这些内容不会在页面显示。

在<body>和</body>标签之间的内容是网页的主要内容。如<h1> <p> <a> <img>等内容标签,这些内容是会在页面显示的。

1-6 head标签

<head>
  <title>网页标题信息,出现在浏览器标题栏中,帮助搜索引擎搜索,此内容会显示在网页标签上</title> 
  <meta>
  <link>
  <style>...</style>
  <script>...</script>
<head>

1-7 HTML代码注释

代码注释的作用是帮助程序员标注代码用途

语法:

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

相关文章

  • 设计师学习HTML/CSS之路-01

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第1章 Html介...

  • 设计师学习HTML/CSS之路-02

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第2章 认识标签(...

  • 设计师学习HTML/CSS之路-03

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第3章 认识标签(...

  • 设计师学习HTML/CSS之路-04

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第4章 认识标签(...

  • 设计师学习HTML/CSS之路-05

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第5章 与浏览者交...

  • 设计师学习HTML/CSS之路-09

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第9章 CSS的继...

  • 设计师学习HTML/CSS之路-15

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第15章 css样...

  • 设计师学习HTML/CSS之路-06

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第6章 开始学习C...

  • 设计师学习HTML/CSS之路-07

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第7章 CSS样式...

  • 设计师学习HTML/CSS之路-08

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第8章 CSS选择...

网友评论

    本文标题:设计师学习HTML/CSS之路-01

    本文链接:https://www.haomeiwen.com/subject/lapyyftx.html