前端开发基础之

HTML

CaelumTian@SIPC115

什么是前端？

前端的定义，前端是做什么的
前端的发展历程，web2.0
前端的新兴技术，打破以往的格局

前端需要的技术

HTML（超文本标记语言）
CSS（层叠样式表）
javascript（前端的核心，灵魂）
Node.js（走向全栈工程师）
Hybrid 开发（移动方向方案）
Cocos2d，Egret，ThreeJS（游戏开发）

标准的HTML界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML页面</title>
    </head>
<body>
    <h1>页面标题</h1>
    <p>页面正文</p>
</body>
</html>

DOCTYPE的作用

Document Type ~ 文档类型声明
指定HTML页面使用的标准和版本
浏览器根据doctype决定使用那种渲染模式

渲染模式

Quirks Mode 怪异模式
Almost Standard Mode 准标准模式
Standard 标准模式

各种doctype

<!DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

HTML4 vs XHTML

<div CLASS=test>This is a <br> test.</div>
<script type="text/javascript">
    alert(1);
</script>

<div class="test">This is a <br/> test.</div>
<script type="text/javascript">
<![CDATA[
    alert(1);
]]>
</script>

HTML5 设计思想

兼容已有内容
避免不必要的复杂性
解决现实的问题
优雅降级
尊重事实标准
用户》开发者》浏览器厂商》标准制定者》理论完美

HTML & HTML5

基本标签

元数据元素

base：指定基准URL及链接打开方式
title：页面的标题
script：引入脚本
style：嵌入页面样式表
link：引入外部资源
noscript：浏览器不支持脚本时才展示的被容
meta：页面元数据

meta标签

<meta charset="UTF-8">
<meta name="keywords" content="前端, HTML, CSS, JavaScript">
<meta name="description" content="前端基础教程">
<meta http-equiv="refresh" content="5; url=http://example.com/">

使用meta扩展HTML

<meta name="robots" content="noindex">
<meta name="format-detection" content="telphone=no, email=no">
<meta http-equiv="Cache-Control"content="no-siteapp"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">

标题

h1 ~ h6
h 元素拥有确切的语义
请确保把 <h1> 用于最顶层的标题，<h2> 和 <h3> 用于较低的层级

章节内容

body：页面所有展示内容都被放在body内
article：文章
aside：侧边栏
nav：导航栏
section：内容快
header：页头
footer：页尾

段落

段落是通过 <p> 标签定义的（<p> 是块级元素）
插入单个折行（换行）。<br>

<p>
    这是一个段落
</p>
<p>
    这是第二个段落
</p>
<p>
    这个段落可以换行<br>
    换行之后的结果
</p>

<a>标签连接

target属性：
- _blank (新的页面打开)
- _self (自身页面打开)
- _top (跳出框架)
- _parent
href:
- mailto: (mailto: xx@qq.com)
- tel: (tel:156XXXXXXX)
锚: <a href="#tip">

引用

<blockquote cite="http://xxx.html">天才并不是自生自长在深林荒野里的怪物， 是由可以使
天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。
</blockquote>
<p>--鲁迅</p>

<p>我最喜欢的一本书是<cite>小王子</cite></p>
<p>使用 cite 标签; 标签来定义作品的标题：</p>

列表标签

有序列表
无序列表
定义列表

有序列表 <ol>

<h1>世界电影票房排行榜</h1>
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

无序列表 <ul>

<h1>购物清单</h1>
<ul>
    <li>1个西瓜</li>
    <li>2瓶矿泉水</li>
    <li>1盒酸奶</li>
</ul>

定义列表 <dl>

<h3>霸王别姬</h3>
<dl>
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
    <dt>上映日期：</dt>
    <dd>1993-01-01</dd>
</dl>

嵌入内容

img: 图片
svg：SVG矢量图
video：音频
canvas：画布
iframe：内联框架
object：其他外部资源

使用图片

<img src="/path/to/img.jpg" alt="替代文字"
     width="300" height="200">

<figure>
    <img src="/path/to/img.png" alt="替代文字">
    <caption>图片标题</caption>
</figure>

图片的高宽指定

不指定高宽：原图大小显示
指定宽度：按比例缩放到指定宽度
指定高度：按比例缩放到指定高度
指定高宽：强制按指定宽高显示

常用图片格式

jpg：照片
png
- 色彩较少时使用
- png24 可以半透明
gif：
- 无法半透明
- 可以用来做动画

表格table

table：定义表格
thead：表格的页眉
- th：表格的表头
tbody：表格的主体
- tr：表格的行
- 可以用来做动画
caption: 用于对表格的描述

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

表单

form: 定义供用户输入的表单
- action：表单提交地址
- method：GET / POST 表单提交方式
input：定义输入域名
- type：定义输入类型
- name：输入的内容名称
- value：输入的值
- placeholder：默认值
textarea：文本域
label：为 <fieldset>元素定义标题
fieldset：对表中相关元素进行分组
select：下拉选项表
- option：下拉选项表中的项

input 输入框

type = "text" 输入文本内容
type = "radio" 单选按钮组（name值必须相同）
type = "checkbox" 复选按钮组（name值必须相同）
type = "submit" 提交表单按钮
type = "password" 密码输入组
<label>：为input定义标注

# type = "color" 颜色输入组

# type = "date" 时间输入组

# type = "email" 邮箱输入组

# ......

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

textarea & select

1. textarea：定义一个多行输入的文本控件

cols：文本的可见列数 rows：文本可见的行数

2. select：用来创建下拉列表

options：用来创建具体的下拉选项（selectd默认）

<form action="">
    <select name="item">
        <option value="volvo">前端</option>
        <option value="saab">ACM</option>
        <option value="fiat" selected>移动端</option>
        <option value="audi">后端</option>
    </select>
</form>

前端开发基础之

HTML

什么是前端？

前端需要的技术

DOCTYPE的作用

渲染模式

各种doctype

HTML4 vs XHTML

HTML5 设计思想

HTML & HTML5

基本标签

元数据元素

meta标签

使用meta扩展HTML

标题

章节内容

段落

<a>标签连接

引用

列表标签

有序列表 <ol>

无序列表 <ul>

定义列表 <dl>

嵌入内容

使用图片

图片的高宽指定

常用图片格式

表格table

表单

input 输入框

textarea & select

使用PhotoShop进行简单的切图

袁弋博@SIPC115