zoukankan      html  css  js  c++  java
  • Web前端开发基础 第一天(Html和CSS)

      学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

    1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

    2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

    1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

    2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script>、 <style><link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。

    3. 在<body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

    <head>
        <title>...</title> /*会出现在浏览器的标题栏*/
        <meta>            <!--代码的用途-->
        <link>
        <style>...</style>
        <script>...</script>
    </head>

    语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)

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

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

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

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

     网页上要凸显出来的页面内容一定要放在span标签中

    <body>
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    </body>

    <em>尼克•卡拉威</em>/*斜体*/

    <strong>美国梦</strong>/*突出*/

    1. <em><strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。

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

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>了不起的盖茨比</title>
    <style>
        span{
            color:blue;
        }
    </style>
    </head>
    <body>
        <p>
            <span>梦想家</span>的气质亦为那个奢靡年代的不二注解。
        </p>
    </body>
    </html>

    <q>引用文本</q>

    浏览器会对q标签自动添加双引号,这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

    <blockquote>引用文本</blockquote>

    長文本引用

    xhtml1.0写法:

    <br />

    html4.01写法:

    <br>

    作用相当于word文档中的回车。

    &nbsp;

    在html代码中输入空格是不起作用的

    html4.01版本 <hr>

    xhtml1.0版本 <hr />

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

     

    <address>联系地址信息</address>

     在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它

     

    <code>代码语言</code>

    注:如果是多行代码,可以使用<pre>标签。

    <pre>语言代码段</pre>

  • 相关阅读:
    带你去草原
    为爱痴狂
    打造值得信任的个人品牌究竟靠什么?
    【缅怀妈妈系列诗歌】之二十二:没妈的孩子像根草
    缅怀妈妈系列诗歌】之二十三:妈妈,我学会了坚强
    要创业?想自己当老板?先学会老板法则三十六计
    【缅怀妈妈系列诗歌】之二十一:妈妈,没有了您,就没有了家
    sql server text类型替换
    网页中插入天气预报
    超出了存储过程、函数、触发器或视图的最大嵌套层数最大层数为 32
  • 原文地址:https://www.cnblogs.com/XDJjy/p/4646192.html
Copyright © 2011-2022 走看看