一 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. JOISC 2019 记录

    Day1 T1 Examination 三维数点板子题,直接 cdq分治+树状数组,时间复杂度 \(O(n\log^2n)\). Day1 T2 Meetings 对于一个大小为 \(n\) 的树,我 ...

  2. STC12C5A56S2和DS12C887做的电子闹铃

    配件信息 控制器: STC12C5A56S2 定时芯片: DS12C887 显示: 4位0.56寸数码管 其它: 无源蜂鸣器, 三极管S9012, 电阻10K*2, 100*1, 电容30p*2, 1 ...

  3. NodeJs web项目框架Express笔记

    安装 以下都使用Yarn进行. 环境前提: 已经安装NodeJS(及自带的npm), 已经安装Yarn # 全局安装 yarn global add express-generator@4 #查看版本 ...

  4. Laravel入坑指南(9)——数据迁移与填充

    当我们开发完成一个(小)项目,发布到线上时,我们需要将本地数据库迁移到服务器上,并且填充初始化数据.而Laravel框架规定了一套完善的数据迁移与填充机制. 在官网中分别介绍了以下四个命令: php ...

  5. 微信小程序云开发项目-个人待办事项-04【我的】模块开发

    上一篇: 微信小程序云开发项目-个人待办事项-03[主页]模块开发 https://blog.csdn.net/IndexMan/article/details/124538576 模块开发步骤 本篇 ...

  6. Java并发编程实例--18.修改锁的公平性

    ReentrantLock和ReentrantReadWriteLock类的构造函数可接受一个布尔类型参数fair,表示你可以控制这2个类的行为. 其默认值为false,代表non-fair(不公平) ...

  7. golang常用库：操作数据库的orm框架-gorm基本使用

    golang常用库:gorilla/mux-http路由库使用 golang常用库:配置文件解析库/管理工具-viper使用 golang常用库:操作数据库的orm框架-gorm基本使用 golang ...

  8. React Native如何每次唤醒APP都执行一段代码

    最近想要做一个类似于淘宝每次打开会根据用户剪贴板内容弹出对应商品的功能.要完成这个功能需要每次唤醒APP都读取一次剪贴板. 1.监听 && 销毁 1 async componentDi ...

  9. macOS Monterey 与以下电脑兼容下载操作流程解析

    有时在开发iOS应用时我们时常遇到各种情况,比如手机升级了Xcode不支持这时候需要安装xcode但是xcode需要依奈相应系统本人小编整理了这种情况无法解决问题. 首相打开苹果标志进入到下面界面 进 ...

  10. m1芯片mac安装homebrew

    安装 ARM 版 Homebrew ARM版Homebrew最终被安装在/opt/homebrew路径下. 直接执行: /bin/bash -c "$(curl -fsSL https:// ...