一 HTML 基本元素

基本结构

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />

<title>这是标题</title>

</head>

<body>

HTML 文档正文内容

</body>

</html>

1、头部元素 head

作用范围整篇文档。包含以下元素：

1 标题: <title>...</title>

2 基本设置: <base href=”http://www.baidu.com” target=”_blank”/> 用来定义相对路径的根目录

3 元信息:

 <meta http-equiv=”Content-Type” content=”text/html; charset=文字编码” >

<meta name=”keywords” content=”关键字 1,关键字 2”>

<meta name=”description” content=”简介”>

<meta name=”Copyright” content=”版权”>

<meta name=”author” content=”作者”>

4 样式 style ：例：

<style type=”text/css”>

#div table tr td{

text-align:center;（把所有表格内数据居中了）

}

</style>

5 链接 link：调用其它文档内容

6 脚本 script : 也能放在<body>内

2、主体元素 body

<body bgcolor=” 背 景 色 ” background=” 背 景 图 ” text=” 文 字 颜 色 ” link=”blue” alink=”red” vlink=”red”（三种链接颜色） leftmargin=”” topmargin=””

（页面与浏览器之间距离）>...</body>

3、内容

1 注释 ： <!-- ...-->

2 标题 ： <h1>...</h1> 从 1 到 6，由大到小。

3 字体 ： <font face=”字体” size=”字号” color=”颜色”>...</font>

4 格式化：

<strong>加强 <b>加粗

<i> <em> <cite> 斜体

<sup> 上标 <sub> 下标

<big> 加大 <small> 缩小

<u> 下划线

5 段落： <p>段落 <br>换行

6 图像：格式包括 PNG,GIF,JPEG

<img src=”图像文件的路径” alt=”加载失败” title=”鼠标悬停显示文本” width=”图像的宽度” height=”图像的高度” border=”图像边框的宽度” 

align=”水平对齐方式” hspace=”水平边距”>

7 超链接：可设置任意文字或任意位置的图片

① 普通超链接

<a href=”绝对路径或相对路径” target=”目标窗口的打开方式（一般用_blank 或_self）” accesskey=”键盘上的键值（同时按 ALT 和定义的热键激活，按

ENTER 打开）” tabindex=”激活顺序数字值（数字小的优先，没有值得排最后）” >...</a>

② 页面中的超链接：

同页跳转<a href=”#锚点的名称”>...</a> 需要和<p id=”锚点的名称”>...</p> 配合使用；

跨页跳转<a href=”路径.html#锚点的名称”>...其他一样。

③ 图像中的超链接

(1)图像整体：<a href=”链接路径”><img src=”图片路径” alt=”图片说明”>...</a>

(2)图像局部：

<img src=”图片路径” usermap=”#map 中定义的 name 或 id”>

<map name=”名称” id=”标记”>

<area sharp=”形状” coords=”区域坐标组” href=”链接路径”

alt=”文本说明” target=”链接目标窗口”/>

</map>

附：

sharp 取值

circle 圆，对应 coords 值 x,y,r

coly 多边形

rect 矩形

x1,y1,x2,y2,...每个顶点坐标

x1,y1,x2,y2 左上角、右下角坐标

二 HTML 表格

基本结构

<table>

<tr>

<td>单元格内容</td>

</tr>

</table>

1、表格构成

1 定义表格：<table>...</table>

2 行：<tr>...</tr>

3 单元格：<td>...</td>

4 标题：<caption>...</caption> 指定唯一标题。在<table>下<tr>上。

5 头部：<th>...</th> 定义表头。一般在第一行第一列，在<tr>替代<td>。

6 定义表首：<thead >...</thead> 在<table>里唯一。包住<th>。

7 定义表尾：<tfoot>...</tfoot> 类似 Word 中的页脚。

8 表体：<tbody>...</tbody> 将表格内容分割成各个独立部分，在每个独立的部分定义特定的表现效果。

2、表格属性

< table width=”表格宽” height=”表格高” align=”对齐方式” bgcolor=”背景色” background=”背景图片路径” border=”表格边框值” bordercolor=”边框颜色”

bordercolorlight=”边框亮边线（影响左、顶的边线）” bordercolordark=”边框暗边线（影响右、底的边线）” cellspacing=”每个单元格之间的间距值” 

cellpadding=”各个单元格与其中的内容之间的间距值” frame=”具体显示哪条表格外边框（和border 一起使用，常用取值：box 显示所有、void 不显示边框）”

rules=”单元格之间的边框显示方式（和 border 一起使用，常用取值：all 显示所有、none 不显示边框）”

3、行属性

<tr height=”” align=”” valign=”” bgcolor=”” bordercolor=”” bordercolorlight=”” bprdercolordark=””>...</tr>

4、格属性

<td width=”” height=”” align=”” valign=”” bgcolor=”” background=””

bordercolor=”” bordercolorlight=””

rowspan=”合并行” >...</td>

注意：小单位的属性能覆盖大单位的

bordercolordark=””

colspan=” 合 并 列 ”

三 HTML 表单

基本结构

<form>表单控件和其他常规元素</form>

1、表单属性

<form action=”处理表单的程序的路径” method=”向服务器发送数据的方式（包括 post 和 get 两种）” name=”标记某个表单，方便程序处理（id 也能替代）”
 enctype=”对发送前的数据编码” target=”目标窗口打开方式”>...</form>

注意：name 相当于名字，id 相当于身份证号。id 是后来出现的，具有唯一性。

2、控件

1 文本框：

<input name=”控件名称” type=”text” value=”默认取值” size=”控件长度” maxlength=”最大字符数”/>

2 密码：

<input name=”控件名称” type=”password” value=”默认取值” size=”控件长度” maxlength=”最大字符数”/>

3 单选：

<input name=”控件名称” type=”radio” value=”默认取值” checked（设置该属性时，单选按钮以选中状态显示）/>

4 复选：

<input name=”控件名称” type=”checkbox” value=”默认取值” checked（同上）/>

5 提交：

<input name=”控件名称” type=”submit” value=”按钮的字”/>

6 重置：

<input name=”控件名称” type=”reset” value=”按钮的字”/>

7 图像：

<input name=”控件名称” type=”image” src=”图像路径”/>

8 隐藏域：

<input name=”控件名称” type=”hidden” value=”隐藏域的取值”/>

9 文 件 ：

 <input name=” 控 件 名 称 ” type=”file” size=” 控 件 长 度 ” maxlength=”最大字符数” />

（要上传，表单的 enctype 属性必须为 multipart/form-data）

3、文本

<textarea name=”名称” cols=”列数” rows=”行数”></textarea>

4、选择

<select name=”下拉菜单名称” size=”下拉出的文本行数目” multiple（多选）>

　　<option value=”选项值” selected（同 checked）>选择列表内容</option>

</select>

四 HTML 框架

1、使用<frameset>框架实现多窗口页面

它写在<body>外面。

步骤：

1 如下写好框架

实例：

<frameset cols=”25%,50%” border=”5”>

<frame src=”….html” name=””>

……

</frameset>

注意：cols 和 rows 与<table>里的同理，它们不能同时出现在一条标签里。但 这个是分割，<table>里的是合并。

2 给需要实现跳转的页面设置 name。

3 在导航页里，设置链接：

<a href=” 目 的 地 页 面 ” target=” 要 实 现 跳 转 的 页 面 的name”>...</a>

2、使用<iframe/>内嵌复用页面

它写在<body>里面。

格式：

<iframe src=” 引 用 页 面 的 地 址 ” width=”” height=”” name=”” frameborder=”边框（可有可无）” scrolling=”滚动条（no 的话页面会被截断）”/>

五 课堂笔记

1 常用的 4 种块状结构：

　　div-ul(ol)-li 用于分类导航和菜单

　　div-dl-dt-dd 用于图文混编

　　table-tr-td 用于图文布局或显示数据

　　form-table-tr-td 用于布局表单

2 w3c 的基本规范：

　　内容（结构）和表现（样式）分离；

　　HTML 内容结构要求语义化。

3 HTML 基本规范：

　　标签名和属性名闭合；

　　属性值用引号括起来；

　　标签正确嵌套；

　　添加文档类型声明。

快速上手系列：HTML的更多相关文章

  1. 快速上手系列-C语言之指针篇(一)

    快速上手系列-C语言之指针篇(一) 浊酒敬风尘 发布时间:18-06-2108:29 指针的灵活运用使得c语言更加强大,指针是C语言中十分重要的部分,可以说指针是C语言的灵魂.当然指针不是万能的,但没 ...

  2. 使用 mongodb 的 Docker Image 快速上手系列 lab

    Docker 主要的概念 Dockerfile => 用來產生 docker image 用的(介紹) Image => 可以用來產生 docker container Container ...

  3. SpringBoot快速上手系列01：入门

    1.环境准备 1.1.Maven安装配置 Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. 下载Maven可执行文件 cd /usr/local ...

  4. 【新手】【十分钟上手系列-一】快速开发vue插件

    2018.6.28 在这浮躁的前端娱乐圈,不会三两个新框架都觉得自己不是前端.哦,不是我说的.说到底.原生才是重中之重.加油. vue用了大半年多,一直在用ui库,插件等,没有自己的东西. 想想连个v ...

  5. [Android开发学iOS系列] 快速上手UIKit

    快速上手iOS UIKit UIKit是苹果官方的framework, 其中包含了各种UI组件, window和view, 事件处理, 交互, 动画, 资源管理等基础设施支持. 按照前面的介绍, 用U ...

  6. WPF快速入门系列(8)——MVVM快速入门

    一.引言 在前面介绍了WPF一些核心的内容,其中包括WPF布局.依赖属性.路由事件.绑定.命令.资源样式和模板.然而,在WPF还衍生出了一种很好的编程框架,即WVVM,在Web端开发有MVC,在WPF ...

  7. ESFramework 4.0 快速上手（06） －－ Rapid引擎（续）

    <ESFramework 4.0 快速上手>系列介绍的都是如何使用Rapid引擎(快速引擎) -- RapidServerEngine 和 RapidPassiveEngine.其实,大家 ...

  8. ESFramework 4.0 快速上手（01） －－ Rapid引擎

    (在阅读该文之前,请先阅读 ESFramework 4.0 概述 ,会对本文的理解更有帮助.) ESFramework/ESPlatform 4.0 的终极目标是为百万级的用户同时在线提供支持,因为强 ...

  9. EF Core 快速上手——创建应用的DbContext

    系列文章 EF Core 快速上手--EF Core 入门 EF Core 快速上手--EF Core的三种主要关系类型 本节导航 定义应用的DbContext 创建DbContext的一个实例 创建 ...

  10. EF Core 快速上手——EF Core的三种主要关系类型

    系列文章 EF Core 快速上手--EF Core 入门 本节导航 三种数据库关系类型建模 Migration方式创建和习修改数据库 定义和创建应用DbContext 将复杂查询拆分为子查询   本 ...

随机推荐

  1. 【LGR-156-Div.3】洛谷网校 8 月普及组月赛 I & MXOI Round 1 & 飞熊杯 #2（同步赛）

    [LGR-156-Div.3]洛谷网校 8 月普及组月赛 I & MXOI Round 1 & 飞熊杯 #2(同步赛) \(T1\) luogu P9581 宝箱 \(100pts\) ...

  2. java 从零开始手写 redis（五）过期策略的另一种实现思路

    前言 java从零手写实现redis(一)如何实现固定大小的缓存? java从零手写实现redis(三)redis expire 过期原理 java从零手写实现redis(三)内存数据如何重启不丢失? ...

  3. SSL证书类型价格和购买

    SSL证书 SSL和HTTPS的工作机制就不多说了, 密钥交换加通道依然是非常靠谱的安全访问方式, 除非你的浏览器连证书和DNS都被劫持, 否则中间节点要解密/篡改HTTPS访问的可能性微乎其微. 现 ...

  4. Jsp+Servlet实现文件上传下载（四）--下载文件

    接着上一篇讲: Jsp+Servlet实现文件上传下载(三)--删除上传文件    点击打开链接 本章来实现一下下载文件功能,同时优化了一下上一章中的代码. 废话少说,上代码 ------------ ...

  5. golang微服务实践：服务注册与服务发现 - Etcd的使用

    为什么? 为什么会有服务注册和服务发现?在它以前我们是怎么做的? 举个例子: 比如我们做MySQL读写分离,就在本地配置一个文件,然后程序读取这个配置文件里的数据进行数据库读写分离的设置. 但是随着业 ...

  6. git tag 常用操作-创建、查看、推送、删除等

    创建tag 1.创建tag: git tag -a v0.0.1 或者 对某一提交的信息打tag标签,末尾是一个commit id git tag -a v0.0.1 cc16905 2.创建tag带 ...

  7. 原来你是这样的JAVA--[07]聊聊Integer和BigDecimal

    今天来聊聊Java中跟数值处理相关的两个类型Integer和BigDecimal. 说起这两个类型,我们肯定都不陌生,但是其中有些容易踩到的坑需要注意避让. Integer 整型我们应该每天都会用到, ...

  8. 国内如何快速访问GitHub

    1.国内如何快速访问gibhub -FQ的方法无非就是用软件,这种就不介绍了 -本次介绍的是修改本地系统主机hosts文件,绕过国内dns解析,达到快速访问github 打开https://tool. ...

  9. python枚举之Enum模块

    枚举是与多个唯一常量值绑定的一组符号(即成员).枚举中的成员可以进行身份比较,并且枚举自身也可迭代. 枚举成员名称建议使用大写字母 # 示例 from enum import Enum,unique, ...

  10. 第137篇:重学ES6模块化

    好家伙,   我原本以为学完模块化之后,就能非常顺利的完成我的项目分包, 然而并没有,这是非常重要的知识,而我没有学好 所以我决定重学一遍   本篇为<阮一峰 ECMAScript 6 (ES6 ...