关于前端的笔记

发表于 | 分类于

前端

  • 在各个设备上适配
  • 搜索技术
  • 网站性能优化
  • 要学习内容 HTML5 , XHTML , CSS3 , JavaScript , jQuery-UI , jQuery-Mobile
  • HTML :描述网页语言;超文本标记语言; 不是编程语言，是一种标记语言，与C++不相通

HTML5

HTML5的优点:

  1. 跨平台 PC 手机 Linux
  2. 硬件要求低
  3. flash之外的选择 尤其是手机端
  4. HTML5 ：用于绘画canvas 标签；媒体 video audio元素；本地离线储存；

HTML基础

  • 新建项目：Create New Project—>Static web—>HelloWord

    新建页面：New-->HTML File-->index

  • 设置快捷键： Preferences(Setting)–Keymap 快捷键列表

    (代码补全 ：Alt+/)   (代码上移或下移：Alt+上下)
(代码快速复制：Alt+Ctrl+上下)   (删除一行：Ctrl+D)

  • js文件 引用:

    1
    <script src="   "></script>

  • 声明：<!DOCTYPE>

    HTML5:  <!DOCTYPE html>     声明代表是HTML5版本
  • 元素：从开始标签到结束标签的所有代码

标签：

  • 头标记：

     <head></head>
编码格式： <meta charset="UTF-8">
标题：<title>网页标题</title>
引用CSS样式：<style type="text/css "></style> (样式定义)
`<link>`:资源引用

  • body：

    <body></body>
HTML标题: `<h1>`...`<h6>`
段落标记(另起)：<p></p>
超链接：<a href="http://www.baidu.com">百度</a>
图像标记：<img src="images/html.png"></img>
空标签：<br/>  换行
文字从左向右输出：`<bdo dir="rtl">`内容`</bdo>`
空格：&nbsp
标签 描述
<b></b> 定义粗体文字 <big></big> 定义大号字
<em></em> 定义着重文字 <i></i> 定义斜体字
<small></small> 定义小号字 <strong></strong> 定义加重语气
<sub></sub> 定义下标字 <sup></sup> 定义上标字
<ins></ins> 定义插入字 <del></del> 定义删除字

属性：

  • 常用属性(以键值对形式出现)
<body>bgcolor:背景颜色 <body>background:背景图片
<h1>align:对齐方式(默认居左) <a>target :在何处打开链接(是否覆盖原页面)
  • 通用标签属性：
    id :规定元素唯一ID  (后期引用要使用)    class:规定元素类名
style:规定元素样式(引用外部文件)         title:规定元素额外信息
rel="stylesheet":外部样式表          margin-left:边距

HTML样式

三种样式表插入方法：

  • 外部样式：<link rel="stylesheet" type="text/css" href="mystyle.css">

    需要一个外部文件.css，用rel 属性引入外部表，type 文件类型，href文件地址
    .css文件中写想要改变的样式,例： 然后再.html文件中引入

    1
    2
    3
    h1{
    color : red;
    }

  • 内部样式表：

    直接在头标记中写入样式

    1
    2
    3
    4
    <style type="text/css">
       body { background-color:red}
       p { margin-left:20px}
    </style>

  • 内敛样式表：<p style="color:red">

    直接在标签内部改变样式

注： 建议将样式引用放在头文件中

HTML链接

  • 链接分为文字链接和图片链接

    href：指向另一个文档链接
    图片链接：点击图片跳转到另一个页面 alt="html5logo"给图片内容，当图片无法显示时会显示

    1
    2
    3
    4
    5
    <a href="http://www.baidu.com">
            <img src="html.png"
            width="100px"
            height="100px" alt="html5logo">
    </a>

  • 文档内跳转链接 例如：回到顶部

    1
    2
    3
    4
    <a name="tips">
    hello</a>
    <a href="#tips">
    跳转到hello</a>

HTML 中有用的字符实体

GitHub set up