zoukankan      html  css  js  c++  java
  • 前端开发

    9 前端开发

    9.0 前端内容介绍

    前端开发都有哪些内容

    我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。

    三部分都是做什么的

    (1)HTML是什么?

    HTML,全称“Hyper Text Markup Language(超文本标记语言),简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

    (2)CSS

    CSS,全称(层叠样式表)。以后我们在别的地方看到层叠样式表“CSS样式,指的就是CSS

    (3)JavaScript

    JavaScript是一门脚本语言。

    (4)HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?

    “HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

    9.1 HTML

    9.1.1 HTML简介

    HTML简介

    HTML,全称是超文本标记语言(HyperText Markup Language),它是一种用于创建网页的标记语言。

     什么是标记语言呢?

    举个通俗的例子,就是一段文本内,不但有该文本真正需要传递给读者的有用信息,更有描述该段文本中各部分文字的情况的信息。 如下:

    <问题>
        <问题标题>Alex老师是不是很帅?
        <问题描述>这是你说的啊,我可没说
     
    <回答>
        <回答者>二狗子
        <回答者简介>我就叫二狗子
        <回答内容>你说什么就是什么啦,与我没关系了,反正我是个男的!!
    <回答>
        <回答者>三袍子
        <回答者简介>我就叫三袍子
        <回答内容>我反对,我觉得武sir更帅。

    9.1.2 开发环境

    9.1.3 HTML标签介绍

    HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。

    那什么是标签呢?

     
    1. HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>``<p>`都是标签。
    2. HTML中标签**通常**都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,如`<p>标签内容</p>``<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。
    3. 标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么`</p>`必须放在`</div>`的前面。
    4. HTML标签不区分大小写,`<h1>``<H1>`是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。

    注意:不是所有标签都支持互相嵌套。(看下节)

    9.1.4 HTML文档结构

     
    <!DOCTYPE HTML>
    <html>
        <head>...</head>
        <body>...</body>
    </html>

    让我们来解释一下上面的代码:

    首先,<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档。

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

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

    在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在<body>标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。

    HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。

    9.1.5 HTML注释

    HTML注释

    无论我们学习什么编程语言,一定要重视的就是注释,我个人一直把注释看成是代码之母。 HTML中注释的格式:

    <!--这里是注释的内容-->

    注意: 注释中可以直接使用回车换行。

    并且我们习惯用注释的标签把HTML代码包裹起来。如:

    <!-- xx部分 开始 -->

        这里放你xx部分的HTML代码

    <!-- xx部分 结束 -->

    HTML注释的注意事项:

    1. HTML注释不支持嵌套。
    2. HTML注释不能写在HTML标签中。

    9.1.6 head标签相关内容

    head标签

    我们首先来介绍一下head标签的主要内容和作用,文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。 以下标签是可以用在head标签中的:

    <head lang='en'>
        <title>标题信息</title>
        <meta charset='utf-8'>
        <link>
        <style type='text/css'></style>
        <script type='text/javascript'></script>
    </head>

    title标签

    <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。

    我们接下来做一个小练习,创建一个带有我们自定义标题内容的网页:

    <!DOCTYPE HTML>
    <html>
        <head>
            <title>路飞学城</title>
        </head>
        <body></body>
    </html>

    将上面的文件另存为demo.html,然后用浏览器打开,就可以看到下面的内容。

    上面我们介绍了title标签的用法,接下来我们继续看一下head标签中可以使用的其他标签:

    meta标签

    Meta标签介绍:

    元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

    标签位于文档的头部,不包含任何内容。

    提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    常用的meta标签:

    1. http-equiv属性

    它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

    <!--重定向 2秒后跳转到对应的网址,注意分号-->
    <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
    <!--指定文档的内容类型和编码类型 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!--告诉IE浏览器以最高级模式渲染当前网页-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    1. name属性

    主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="路飞学城">

    其他标签

    <!--标题-->
    <title>路飞学城</title>
    <!--icon图标(网站的图标)-->
    <link rel="icon" href="fav.ico">
    <!--定义内部样式表-->
    <style></style>
    <!--引入外部样式表文件-->
    <link rel="stylesheet" href="mystyle.css">
    <!--定义JavaScript代码或引入JavaScript文件-->
    <script src="myscript.js"></script>

    9.1.7 body标签相关内容

    标题标签 h1~h6

    <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。

    文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...
     
    1. `<b></b>`:加粗
    2. `<i></i>`:斜体
    3. `<u></u>`:下划线
    4. `<s></s>`:删除线
    5. `<sup></sup>`:上标 
    6. `<sub></sub>`:下标
     
    现在如果想在一段文字中特别强调某几个字,这时候就可以用到`<em>``<strong>`标签。
     
    这两个标签都是表示强调,但是两者在强调的语气上有区别:`<em>`表示强调,`<strong>`表示更强烈的强调。
    在浏览器中`<em>`默认会用斜体表示,`<strong>`会用粗体来表示。两个标签相比,我们通常会推荐大家使用`<strong>`表示强调

    段落标签 p

    <p>,paragraph的简写。定义段落

    浏览器展示特点:

    1. 跟普通文本一样,但我们可以通过css来设置当前段落的样式
    2. 是否又独占一行呢? 答案是的 块级元素

    超链接标签 a

    超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

    target:_blank 在新的网站打开链接的资源地址 target:_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题

    链接其他表现形式:

    1. 目标文档为下载资源 例如:href属性值,指定的文件名称,就是下载操作(rar、zip等)
    2. 电子邮件链接 前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息。 例如:<ahref="mailto:zhaoxu@tedu.cn">联系我们</a>
    3. 返回页面顶部的空链接或具体id值的标签 例如:<a href="#">内容</a>或<a href="#id值">内容</a>
    4. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>
    5. javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</a

    列表标签 ul,ol

    网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用,每条li表示列表的内容

    <ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表

    ol标签的属性:

    type:列表标识的类型

    • 1:数字
    • a:小写字母
    • A:大写字母
    • i:小写罗马字符
    • I:大写罗马字符

    列表标识的起始编号

    • 默认为1

    ul标签的属性: type:列表标识的类型

    • disc:实心圆(默认值)
    • circle:空心圆
    • square:实心矩形
    • none:不显示标识

    盒子标签 div

    <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的、不同的部分

    我们将文档放在一个父级的区(div)中,它里面包含四块区(div)域,浏览器查看效果,你会发现每小块区域都是独占一行的,所以div是块级元素。另外,每块区域表示独立的一块,id属性和class属性其实很简单,你可以看成给这个区域起个名字。id是唯一的,一个页面中不能有两个重复的id,跟身份证号码一样,class可以设置同样的属性值,并且可以设置多个,例如class=’para n1‘

    图片标签 <img/>

    一个网页除了有文字,还会有图片。我们使用<img/>标签在网页中插入图片。

    语法:<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

    注意:

    1. src设置的图片地址可以是本地的地址也可以是一个网络地址。
    2. 图片的格式可以是png、jpg和gif。
    3. alt属性的值会在图片加载失败时显示在网页上。
    4. 还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度
    5. 浏览器查看效果:行内块元素与行内元素在一行内显示
    6. 可以设置宽度和高度
    7. span标签可以单独摘出某块内容,结合css设置相应的样式

    其他标签

    换行标签 <br>

    <br>标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

    分割线 <hr>

    <hr>标签用来在HTML页面中创建水平分隔线,通常用来分隔内容

    特殊符号

    浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格。

    表格标签 table

    表格由<table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

     

    表格行和列的合并

    rowspan 合并行(竖着合并)
    colspan 合并列(横着合并)

    表单标签 form

    表单是一个包含表单元素的区域
    表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、输入框(input)、单选框()

    表单的作用

    表单用于显示、手机信息,并将信息提交给服务器

    1. 语法:
    <form>允许出现表单控件</form>

    9.1.8 HTML标签属性

    HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中。如

    <div id="i1">这是一个div标签</div>
    <p class='p1 p2 p3'>这是一个段落标签</p>
    <a href="http://www.luffycity.com">这是一个链接</a>
    <input type='button' onclick='addclick()'></input>

    为什么能设置属性呢?

    其实呢,你可以这样简单理解,因为最终我们这些标签会通过css去美化,通过javascript来操作,那么这些标签我们可以看成是一个对象,对象就应该有它自己的属性和方法。那么你像上面说到input标签,type=‘button’就是它的属性,onclick=‘addclick()’就是它的方法。后面会详细讲JavaScript和css,大家不用担心这里不好理解。

    关于标签属性的注意事项:

    1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序。
    2.属性值要用引号包裹起来,通常使用双引号也可以单引号。
    3.属性和属性值不区分大小写,但是推荐使用小写。

    9.1.9标签分类

    HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素。

    常用的块状元素:

    <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

    常用的行内元素

    <a> <span> <br> <i> <em> <strong> <label>

    常用的行内块状元素:

    <img> <input>

    块级元素特点:display:block;

    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。独占一行

    2、元素的高度、宽度、行高以及顶和底边距都可设置

    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    行内元素特点:display:inline;

    1、和其他元素都在一行上

    2、元素的高度、宽度及顶部和底部边距不可设置

    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

    行内块状元素的特点:display:inline-block;

    1、和其他元素都在一行上

    2、元素的高度、宽度、行高以及顶和底边距都可设置

    注意

    我们可以通过display属性对块级元素、行内元素、行内块元素进行转换,为后面页面布局做好了准备。

    9.1.10标签嵌套规则

    块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素

    块级元素不能放在p标签里面

    有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:

    h1h2h3h4h5h6p

    li元素可以嵌入ul,ol,div等标签

    9.2 css

    9.2.1 css介绍

    CSS的出现解决了下面两个问题:

    1. 将HTML页面的内容与样式分离。
    2. 提高web开发的工作效率

    什么是CSS?

    CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

    css的优势

    1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录

    如何使用CSS?

    我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。

    9.2.2CSS语法

    CSS基础语法

    CSS语法可以分为两部分:

    1. 选择器
    2. 声明

    CSS注释

    注释是代码之母。

    /*这是注释*/

    9.2.3 CSS引入方式

    • 内联样式
    • 行内样式表
    • 外部样式表:
        • 链接式
        • 导入式

    链接式与导入式的区别

    1<link/>标签属于XHTML,@import是属性css2.1
    2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
    3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
    4@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的

    9.2.4 基本选择器

    选择器为样式规则指定一个作用范围。

    基础选择器包括:

    l  标签选择器

    l  类选择器

    l  ID选择器

    l  通用选择器

    9.2.5 组合选择器

    高级选择器

    9.2.6 属性选择器

    跟据属性查找

    [title] {
      color: red;
    }

    表单常用

    input[type="text"] {
      backgroundcolor: red;
    }

    9.2.7 分组选择器

    9.2.8 伪类选择器

    常用的几种伪类选择器。

    没有访问的超链接a标签样式:

    a:link {

      color: blue;

    }

    访问过的超链接a标签样式:

    a:visited {

      color: gray;

    }

    鼠标悬浮在元素上应用样式:

    a:hover {

      background-color: #eee;

    }

    鼠标点击瞬间的样式:

    a:active {

      color: green;

    }

    input输入框获取焦点时样式:

    input:focus {

      outline: none;

      background-color: #eee;

    }

    9.2.9伪元素

    介绍常用的伪元素。

    first-letter

    用于为文本的首字母设置特殊样式。

    例如:

    p:first-letter {
      font-size: 48px;
    }

    before

    用于在元素的内容前面插入新内容。

    例如:

    p:before {
      content: "*";
      color: red;
    }

    在所有p标签的内容前面加上一个红色的*

    after

    用于在元素的内容后面插入新内容。

    例如:

    p:after {
      content: "?";
      color: red;
    }

    在所有p标签的内容后面加上一个蓝色的?

    9.2.10 选择器的优先级

    9.2.11字体相关CSS属性介绍

    font-family

    字体系列。

    font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

    简单实例:

    body {
      font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
    }

    如果设置成inherit,则表示继承父元素的字体。

  • 相关阅读:
    谈谈WPF中的CollectionView与CollectionViewSource (1)
    XPath语法备忘
    WPF中,如何将绑定源设置到单件实例
    避免让WPF资源字典变得杂乱臃肿
    自定义WPF面板
    [WPF疑难] 继承自定义窗口
    WPF高手:站出来,Show出来
    Windows Presentation Foundation Tools and Controls
    放送Ifttt邀请四枚
    使用Amazon S3 Service时报403错误的解决方法
  • 原文地址:https://www.cnblogs.com/ykugb/p/9496947.html
Copyright © 2011-2022 走看看