HTML入门

概述

• HTML/CSS/JS

C/S和B/S架构

• C/S架构
  • client：客户端
  • server：服务器
• B/S架构
  • browser：浏览器
  • server：服务器

工具

• 编辑工具：notepad++
• 测试工具：chrome

原理

• 浏览器 => 服务器，发送请求，索要相关数据
• 服务器 => 浏览器，返回数据(响应)，然后浏览器解析收到的数据，就会出现相应的效果
• 组成：HTML、CSS、JS

HTML

• 说明：超文本标记语言，所见即所得
• 后缀：.html或.htm，统一使用.html

标签

• 格式：
  • 双边：<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容
  • 单边：<标签名 属性1="值1" 属性2='值2' 属性3=值3 />
• 特点：
  • 成对出现
  • 容错性强
  • 已经预定义
  • 全部小写，注意格式
• 说明：标签就是HTML的组成部分

全局架构标签

• 示例：

• 说明：

  • html：所有的内容都要放在该标签中
  • head：存放头部，如：编码等
  • body：有效的内容，会出现在网页中

• body属性:

  • text：字体颜色
  • bgcolor：背景色

• 几乎每个标签都有的属性：

  • class、name、id、style
  • 可以在后面结合css及js使用

字符实体

• 说明：在html中显示有特殊意义的内容，如：标签相关内容

• 字符实体：用特定的一串字符代表某一个有特殊意义的字符

• 示例：

  <：    <
  >:    >
  空格:  
  &：    &；
  

• 参考：http://www.w3school.com.cn

常用标签(文本修饰)

• h1 ~ h6：字体从大到小，表示标题，h1一个页面中最多一个，不要为了调整字体大小而使用。
• 加粗：b、strong
• 斜体：i、cite、em
• 下划线：u
• 中划线：s
• 下标：sub
• 上标：sup
• 字体：font
  • size：大小
  • color：颜色
  • face：类型
• 换行及空格：
  • br：换行标签，一段文本无论多长都不会换行，除非有用于隔断的空白
  • 空格：无论多少个空格，解析后都会变成一个
  • 回车：无论多少个，都会解析成一个空格

常用标签(格式控制)

• br：换行(单边标签)
• p：段落
• hr：分割线(单标标签)
• marquee：滚动显示
• pre：原样输出
• ul：无序列表，每个元素都是li
  • type：disc(实心圆，默认)，circle(空心圆)，square(实心方块)
• ol：有序列表，每个元素都是li
  • type：1、a、A、I
  • start：起始位置