一 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. CF1089K King Kog's Reception 题解

    题目传送门 前置知识 线段树 解法 第一眼感觉和 luogu P1083 [NOIP2012 提高组] 借教室 很像.本题同样采用线段树维护,\(sum_{l,r}(1 \le l \le r \le ...

  2. NC223888 红色和紫色.md

    题目链接 题目 题目描述 漫长的生命总是无聊的.这天,小红和紫准备玩一个染色游戏. 她们拿出了一个有 \(n*m\) 个格子的网格,每个格子只能被染成红色或紫色.每个人可以任意选择一个格子染成红色和紫 ...

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

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

  4. Stream 总结

    1 前言 Stream 是 Java 8 中为方便操作集合及其元素而定制的接口,它将要处理的元素集合看作一种流,对流中的元素进行过滤.排序.映射.聚合等操作.使用 Stream API,就好像使用 S ...

  5. 扣子（coze.cn）| 由浅入深，手把手带你实现Java转型学习助手

    扣子(coze.cn)是一款用来开发新一代 AI Chat Bot 的应用编辑平台,无论你是否有编程基础,都可以通过这个平台来快速创建各种类型的 Chat Bot,并将其发布到各类社交平台和通讯软件上 ...

  6. 【Azure API 管理】Azure API Management通过请求中的Path来限定其被访问的频率(如1秒一次)

    问题描述 Azure API Management 是否可以通过请求中的Path来限定其被访问的频率? 在系统Request中发现某个Path 在短时间内被频繁的调用,影响了后台服务的性能及安全,所以 ...

  7. ASP.NET Core 从入门到精通-资源收集导航

    ASP.NET Core 从入门到精通-资源收集导航 目录 ASP.NET Core 从入门到精通-资源收集导航 学习路线 学习路线资源导航大全 1,介绍 2,入门 3,教程 创建 Razor 页面 ...

  8. Anaconda与Python环境在Windows中的部署

      本文介绍在Win10电脑中,安装Anaconda环境与Python语言的方法.   在这里需要注意,本文介绍的方法是在电脑自身原本不含有Python的情况下进行的:如果大家电脑中原本就下载.安装过 ...

  9. 1. JVM体系结构

    1. 前言 作为Java工程师 ,jvm对于 java的重要性不言而喻,但是 我们又对jvm了解多少 Java的跨平台性 java发布的口号 "一处编译到处运行 " 依赖于jvm, ...

  10. 17. Class字节码指令解析

    ## 1. 概述 官方文档:https://docs.oracle.com/javase/specs/jvms/se8/html/jvms-6.html Java 字节码对于虚拟机,就好像汇编语言对于 ...