一 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. JS leetcode 至少是其他数字的两倍的最大数 解答思路分析

    壹 ❀ 引 刷leetcode的第二天,那么今天做的也是一道难度为简单的题目至少是其他数字的两倍的最大数,老规矩,先说说我的实现思路后,再来分析优质答案,原题如下: 在一个给定的数组nums中,总是存 ...

  2. 【Unity3D】相机跟随

    1 前言 ​ 相机跟随是相机指始终跟随特定游戏对象,有以下 2 种跟随效果: 位置跟随:相机指向目标游戏对象的向量始终不变 位置和姿态跟随:相机在目标游戏对象的坐标系下的坐标和朝向始终不变 ​ 实现相 ...

  3. Go语言的100个错误使用场景（48-54）｜错误管理

    目录 前言 7. 错误管理 7.1 panicking(#48) 7.2 不清楚何时应该包裹一个 error(#49) 7.3 检查错误类型不够精确(#50) 7.4 检查错误值不够精确(#51) 7 ...

  4. Oracle数据库报ORA-01078和LRM-00109错误解决方法

    创建实例后,进入sqlplus启动报错:     sqlplus / as sysdba;     SQL*Plus: Release 11.1.0.6.0 - Production on Wed A ...

  5. Spring Boot图书管理系统项目实战-9.归还图书

    导航: pre:  8.续借图书 next:10.借还统计 只挑重点的讲,具体的请看项目源码. 1.项目源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.页面设计 2.1 bookRetur ...

  6. Java集合框架学习（十二） Arrays类详解

    声明:部分内容参考自:https://liuyanzhao.com/2863.html Arrays类介绍 这个类包含了用于操作数组的各种方法,诸如:排序和搜索. 这个类还包含一个静态方法asList ...

  7. QT - Day 6

    跟着视频教程创建了翻金币的项目,花了好几个晚上才学习完. 视频地址:最新QT从入门到实战 感谢视频的教学,真是受益匪浅. 后面的代码参考了老师的模板以及文档的抒写格式. 发布到随笔中的目的一方面为了完 ...

  8. leetcode - 相同的树

    给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入:p = [1,2,3], q = [1 ...

  9. 万字Java进阶笔记总结

    JavaApi 字符串 String 注意:Java中"=="操作符的作用: 基本数据类型:比较的是内容. 引用数据类型比较的是对象的内存地址. StringBuffer/Stri ...

  10. 1.Go 的基本数据类型

    Go 的基本数据类型