前端开发基础之

HTML

CaelumTian@SIPC115

什么是前端？

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

前端需要的技术

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

标准的HTML界面 

<!DOCTYPE>
<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：输入标题
  • fieldlist：相关元素固定起来
  • 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>

使用PhotoShop进行简单的切图

袁弋博@SIPC115

SIPC115 HTML

By caelumtian

Made with Slides.com

SIPC115 HTML

  • 721

More from caelumtian