HTML基础

HTML基础

一、软件架构

• C/S结构，即客户端(下载, 更新)-服务器结构。
  

  缺点是：
  在C/S结构下，不同的服务需要安装不同的客户端软件。
  比如说A出差的时候需要在B的电脑上查收邮件，但是B的电脑上并未安装查收邮件所需的客户端软件，这样的话，B就不得不先去下载一个这样的软件才能成功查收，很明显，这样的一个过程时非常不方便的。

• B/S结构，即浏览器-服务器结构。
  

  B/S结构的优点：

  1. 客户端无需安装，有Web浏览器即可；
  2. 可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强；
  3. 无需升级多个客户端，升级服务器即可。可以随时更新版本，而无需用户重新下载。

二、浏览器

谷歌 火狐 Edge IE 苹果 欧朋 (内核)

三、访问网站：

例：
地址栏：www.baidu.com:端口 (web端口默认是80)

• 执行过程：

1. hosts C:\Windows\System32\drivers\etc
2. DNS域名—>IP地址
3. IP地址–>服务器，主机
4. 处理请求
5. 返回结果(html css js……)
6. 浏览器渲染文本，显示结果

• 浏览器作用：

1. 页面渲染
2. JS引擎（JS越来越独立，弱化）

四、开发过程

1. UI设计师，设计出psd格式（图片格式）
2. 开发人员，用代码实现
3. 用浏览器看效果(主流浏览器呈现效果一致)

五、W3C联盟

制定 web标准：编写网页的语言，规则由W3C制定（万维网联盟www.w3.org，非盈利组织）。

结构：主要由html组成。

表现：主要由css进行美化。

交互：主要由js完成与用户的交互行为。

六、HTML

• HTML—超文本标记语言，是标记语言的一种，标记语言还有XML。
• 超文本
  • 文本，图片，其他多媒体元素，超越文本限制
  • 链接，链接到任何已知的资源，超越链接限制
• 开发工具：
  记事本，sublime, editplus, notepad++, HBuilder, WebStrom等。

七、HTML骨架

• 文档声明类型
• 设置编码，防止出现乱码
  • html设置的编码meta
  • 文件存储的编码
  • 浏览器查看网页使用的编码

八、常用标签

• 标题 h1 – h6（字号一次递减）
• 段落 p（自动换行）
• 水平线 hr
• 换行 br
• 布局 div（自动换行） span

九、文字标签

• 粗体 b strong
• 斜体 i
• 下划线 ins
• 中划线 del

十、图像标签 img

img 标记属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度

十一、路径

• 相对
  • 同一目录下 ， 直接文件名
  • 下一级目录， 目录名/文件名
  • 上级目录， …/ 表示上一级目录，如果有多级， …/…/…/
• 绝对
  从根目录（盘符）到文件名称。

十二、表格 table

显示比较规整的数据。

• 表格标题：caption
• 单元格标题：th (一般是第一行 或 第一列)
• 合并单元格：
  • 跨行 rowspan
  • 跨列 colspan

十三、超链接 a

• 页面间链接
  非本站点链接：http:// https://
• 锚链接
  定义锚点 < p id=”top”>top < /p>
  连接锚点< a href=”#top”>top< /a>
• 功能性链接
  < a href=mailto:111@qq.com>联系站长
• 属性 target
  • _blank 新窗口方式打开链接
  • _self 当前窗口打开链接

十四、标签分类

• 书写方式
  • 双标签 <标签名> </标签名>
    包含：h1-h6 p a table div span form
  • 单标签(闭合标签) <标签名 />
    包含：hr br img
• 布局：独占一行，上下换行
  • 块标签 h1-h6 p hr div table form
  • 行标签 a img span

十五、标签关系

• 嵌套关系： (注意格式) 后标签，先结束
  规范：内层标签比外层标签多一个tab键（2|4缩进）
• 并列关系
  规范：左对齐（垂直对齐）

十六、表单 form

• 作用：收集用户信息，把表单数据发送到服务器。

• 组成： 提示信息，表单元素，表单域

• 属性：

  • action: 提交的路径
  • method ： get 地址栏可见， post 不可见，安全性更高（文件上传，必须使用post）
  • name: 一个页面有多个form时，必须指定
  • filedset + legend

• 表单元素

  • 文本框 text
  • 密码password
  • 单选 radio (同一组的单选按钮，name属性值要一致)
  • 复选 checkbox
  • 下拉 select - option
  • 文本域
    textarea，通过rows cols设置文本域的宽度和高度
  • 按钮
    submit 提交
    reset重置
    button 按钮
    image（图片形式的提交按钮）

• 表单元素属性

  • 隐藏域 hidden
  • 单选,复选，选中 checked
  • 下拉，选中 (option) selected
  • 只读, readonly
  • 禁用,disabled

十七、列表

• 有序列表 ol – li
• 无序列表 ul - li
• 自定义列表 dl – dt – dd(多个)