Fork me on GitHub

JavaEE Day01 HTML

Day01 HTML

目录

什么是HTML？

Htyper text markup language：超文本标记语言

超文本：展示信息更加丰富（文本，图片，音频，视频，动画等）

标记语言：写html文档就是在写标签（html标签+文本，不需要编译，借助于浏览器解释。

软件开发架构

C/S：client/server(qq，LOL)

优点：

  1. 预先加载数据在本地(对带宽要求低，加载速度提升）
  2. 安全性能较高

缺点：

  1. 更新（客户麻烦；开发维护成本变高）
  2. 占用客户端资源

B/S:browse/server（百度，淘宝，京东） http/https

优点：

  1. 更新(更新速度快，开发维护成本低）
  2. 资源在服务器端（占用开发资源，不占用客户端资源）

缺点:

  1. 协议是公共协议，安全性能相对于cs略低
  2. 不适合做及时性要求高的业务（网络游戏）

html标签

  1. html标签是html文档基本组成单元
  2. 有尖括号包围关键字组成
  3. 标签一般成对存在，存在开始标签和结束标签；<html>内存区</html>
  4. 标签允许正确嵌套；<html><head></head></html>
  5. 开始标签允许使用属性，属性值需要使用双引号包围。<a href=""></a>
  6. 标签建议使用小写

. 编写html文档

  1. 编写以.html/.htm结尾的文件
  2. 在文档中编写标签
  3. 在浏览器中运行

工具

  1. 记事本
  2. Notepad
  3. Dreamweaver(网页三剑客）
  4. Sublime(插件)
  5. webstrom（jet brains:Intellij idea)
  6. Hbuilder(h5)
    i. 1991/ 1999 4.0
    ii. 2009 html5(audio video canvas)

html标签

标题标签

做强调作用（字体较大，有加粗效果,独占一行）
h1…h6

水平线

<hr/>
默认占满整个父级元素宽度（没有内容区）

注释标签

<!-- 注释 -

段落标签

p标签

换行标签：

<br />(空标签)

超链接

<a></a>

href:链接资源的路径（#：空）

  1. 本地资源：绝对路径和相对路径
  2. 网络资源：需要协议

Target:目标

  1. _self:默认，覆盖打开
  2. _blank：新标签页打开
  3. _parent: 父级窗口打开
  4. _top:顶级窗口打开

锚链接

锚点：<p id="p1">哈哈</p>
跳转： <a href="#p1"><\a>

图片标签

<img />

  1. src:图片资源（本地资源，网络资源）
  2. titile：鼠标移动到图片时显示的文字
  3. alt：图片不能正确显示，才显示
  4. title：鼠标悬停提示

列表标签

无序列表：常用

  1. ul：代表无序列表
  2. li：代表列表项

有序列表

  1. ol：代表有序列表
    type：表示以什么排序
  2. Li : 代表列表项

自定义列表

  1. dl：代表自定义列表
  2. dt：列表项
  3. dd：代表列表项说明（备注）

表格标签

table

代表表格

  1. border: 边框
  2. cellspacing：单元格之间的间距
  3. cellpadding：单元格的内边距（边框和内容能够之间的间距）

tr

代表行

td

列表单元格

  1. colspan：跨列
  2. rowspan：跨行
  3. aligh：文本的对其方式，（left，center，right）

备注：

  1. thread：表头（标题）
  2. tbody：表格正文
  3. tfoot: 统计信息

表单标签

（http请求：公开的协议（包含很多key/value键值对））

form:代表表单

  1. action：动作，服务器的URL（统一资源定位符）
  2. method：请求方式(http请求：get/post.
    1. get：请求路径？参数（key=value.
    2. post: 数据封装在请求体中

input：表单项（文本框，密码框，单选，多选等）

  1. type：表单项的类型
    1. text：文本输入框
    2. password：密码输入框
    3. button: 按钮
    4. submit：提交按钮
    5. radio：单选
    6. checkbox：多选
    7. file : 文件上传（请求方式必须是post,enctype="multipart/form-data")
  2. value：表单项值（传输给服务器的值）
  3. name：表单项的名称（传输给服务器的key.
  4. checked：控制选中状态(单选，多选.
    checked：代表选中
  5. select:下拉列表
    option：下拉列表项
  6. textarea：文本域（多行多列的文本输入框）

div标签 + CSS

  1. 页面布局
  2. 默认和父级元素高度一致，高度默认为0；
  3. 块级元素：独占一行（不与其他元素共享一行）

span标签

  1. 标记
  2. 内联元素（行内元素，可以与其他元素共享一行）

实体

  1. &nbsp; 空格
  2. &lt;
  3. &gt;
posted @ 2018-10-28 10:02  耳_东  阅读(95)  评论(0)    收藏  举报