Front-end day1

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Front-end day1相关的知识，希望对你有一定的参考价值。

Front-end day1


1.前端三把刀：
    1.html（好比人的骨架）（各种各样标签）
        （HyperText Markup Language：超文本标记语言，通过标记符号来显示网页中的各个部分。）
    2.css （好比衣服）    （各种显示效果）
        （Cascading Style Sheets：层叠样式表，用于定义HTML元素的显示形式。）
    3.java script（让人动起来）（页面动起来）
        （直译式脚本语言，应用于web应用开发，为网页添加各式各样的动态功能。）
        （jQuery 相当于javascript的一个类库）

2.HTML是什么？
        服务端→返回到→浏览器→可识别的一种形式，这种方式叫做html。

3.HTML头部信息
    1.文档树（后续附图片）
    2.<!DOCTYPE html>
        <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
        <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    3.<head>内容</head>
        头部信息：定义内在的东西，网页是不显示的，除了title标签。
    4.<body></body>
        主题内容：定义用户看到的东西
    5.头部事例：
        <head>
            <meta charset="UTF-8" />
            <title>Title</title>
        </head>
    6.头部标签
        1.meta标签
            <meta charset="UTF-8" />
                1.自闭和标签，类似encoding，
                2.为了区别自闭和标签和普通标签，在结尾加一个/ 。
                3.页面编码：charset="UTF-8"
                4.页面定时刷新:
                    例如：每2s刷新
                    <meta http-equiv="refresh" content="2" />
                5.页面定时刷新跳转到某网页:
                    <meta http-equiv="refresh" content="2;Url=http://www.baidu.com" />
                6.定义针对搜索引擎的关键词:
                    <meta name="keywords" content="html css xml" />
                7.定义对页面的描述:
                    <meta name="description" content="免费的前端教程" />
                8.定义页面的最新版本：
                    <meta name="revised" content="abc 2016/9/21">
                9.X-UA-Compatible（兼容ie，专门为IE提供）
                    代表用IE最新内核处理网页：
                    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
                注意：
                    1.<和字母之间不能有空格；
                            正确：<meta />     错误：< meta />
                    2.<>里边的引号不能是中文的。
                总结meta标签属性：
                    charset：定义文档的字符编码。
                    content：定义与 http-equiv 或 name 属性相关的元信息。
                    http-equiv：把 content 属性关联到 HTTP 头部。
                    name：把 content 属性关联到一个名称。

        2.title标签
            <title>Title</title>
            网站的头部信息，用户可见。
            一般不加属性
            主动闭合标签，需要加</title>
            注意：
                如果不加</title>，浏览器会报错，但不显示报错信息，会一直卡在那里。
        3.link标签
            1.css 引入css样式
                <link rel="stylesheet" type="text/css" href="/c5.css">
            2.icon 引入icon图片：链接网页头部图标
                <link rel="shortcut icon" href="favicon.ico">
        4.style
            在页面中写样式，例如：
              <style>
                    .aa {
                            background-color: red;
                            color: white;
                    }
              </style>
        5.script
            1.引入css文件
            2.引入js文件
    7.注释格式
            <!--xxx-->
            PyCharm 里边注释，在字体所在行，按Ctrl+？ 自动添加注释。


本文出自 “杨栋豪” 博客，请务必保留此出处http://506554897.blog.51cto.com/2823970/1855122

以上是关于Front-end day1的主要内容，如果未能解决你的问题，请参考以下文章

Web front-end learning about Text and paragraph

The Front-End Checklist

前端 | Front-End

64551 Front-End Developer (Angular)

Front-End——工具使用

Front-end 前端优化总结