前言：本文是自己在学习课程中的课程笔记，这里用来温故知新的，并非本人原创。

一、HTML快速入门(重点)

1、HTML概述

1、什么是HTML

HTML : Hyper Text Markup Language 超文本标记语言

超文本：超级文本

a : 第一个字符

超文本a : 超链接

标记：<a>

语言：表现形式，语法规范

HTML用来设计网页的语言

由HTML所编写的文件，以.html或.htm作为后缀

2、HTML基础语法

1、标记语法

1、什么是标记

HTML中用于描述功能的符号称之为"标记"

ex:

<p></p> - 段落

<a></a> - 超链接

... ...

2、语法

标记在使用时必须用尖括号<>括起来

3、分类：

1、封闭类型标记

也叫作 双标记，必须成对出现

语法

<标记></标记>

<p></p>

<a></a>

<div></div>

2、非封闭类型标记

也叫作 空标记或单标记

语法

<标记>或<标记/>

ex:

<img> - 图像

<br> - 换行

<hr> - 水平线

2、元素

也称之为 标记

标记：实际上是语法规范

元素：强调的是标记中的内容

<div>这是一个div</div>

3、元素嵌套

元素之间可以实现嵌套，从而表现出更为复杂的页面结构

<div><p>这是一个被嵌套的段落</p></div>

注意：

1、嵌套位置和顺序

<div><p></div></p>

2、被嵌套的内容要通过"代码缩进"来表示层级结构

<div><p>这是一个p</p></div>

<div>

<p>这是一个p</p>

</div>

<div>

<p>这是一个p</p>

</div>

4、属性 和 值

1、作用

修饰元素

2、语法

1、属性的声明必须位于开始标记中

2、一个元素可以有多个属性，多个属性之间用空格隔开，并且排不分先后

3、每个属性都可以有值，值和属性之间用 = 连接。值最好要放

在引号中(“  ” 或 ‘  ‘)

align 属性 ：控制文本的水平对齐方式，

取值：

1、left ：左对齐

2、center ：居中对齐

3、right：右对齐

问题：控制 一个p标记的文本，是水平居中对齐

<p align='center'>This is a p</p>

在以上的基础上，设置 p元素的id属性值为 p1

<p align='center' id="p1">This is a p</p>

3、标准属性

所有的元素都具备的属性，称之为标准属性或通用属性

id:定义元素在网页中独一无二的标识

title:鼠标移入到元素上的时候，所弹出的文字

class:定义元素所引用的类选择器(CSS中使用)

style:定义元素的内联样式(CSS中使用)

5、注释

1、什么是注释

允许出现在网页源码中，但是不会被浏览器所解释的文本，称之为注释。

通常情况下，会将 对代码的解释文本放在注释中，以便让其他的开发者去看。

2、注释的语法

<!-- 注释内容  -->

注意：

1、注释不能嵌套

<!--

<!-- -->

-->

2、注释不能出现在<>中

<p <!-- align="center" -->></p>

以上写法是错误的。

6、HTML 和 XHTML

1999年12月24日 W3C推出HTML4.01标准规范

2000年1月26日 W3C推出XHTML1.0标准规范

XHTML1.0 版本 以 HTML4.01几乎相同，但是它是更严格更纯净的HTML版本

比如：

1、要求标记必须要关闭

<p></p>

<br/>

2、要求属性值必须用引号引起来

<p align=center></p>(html4.01和html5中都可以)

7、HTML5(H5)

h5的目标，为了实现更加简洁的HTML代码

1、空标记有无结束均可

<br>

<br/>

2、属性值可以被引号括起来

<p align="center"></p>

<p align='center'></p>

<p align=center></p>

3、有些属性可以不给值

<input readonly="readonly">(h5之前的写法)

<input readlony>(h5写法)

二、文档结构

1、HTML文档结构

由两大部分组成

1、文档类型声明

用于指定网页的版本和风格

2、html页面

要显示在页面给别人去看的内容

2、文档类型声明

<!doctype html>

该段代码要出现在网页的最顶端

3、HTML页面

1、由一对 html 元素表示，位于 文档类型声明之后

2、在 <html>元素中，包含两个直接子元素

1、<head></head>

网页头部

作用：定义页面全局信息

包含：

<title></title> 定义网页标题

<script></script> 定义或引入JS文件/代码

<style></style> 定义内部样式表

<link/>:引入外部样式表文件

<meta/>:定义网页元数据

比如：

  • 编码格式

设置网页编码格式为utf-8

<meta charset="utf-8">

  • 网页关键字
  • 描述

2、<body></body>

网页主体，所有显示给用户去看的东西都写在body中

属性：

  • text

取值：颜色

作用：控制整个页面中所有文本的颜色

  • bgcolor

作用：设置页面的背景颜色

取值：颜色

三、文本(重点)

1、文本标记的作用

会让文本有不同的显示方式

2、特殊字符表示方式

文档中的 空格和回车 最终只会被解释成为一个空格

如果想表示特殊的字符效果，如 空格，<,>, ... 需要进行转义

1、<  --> less than

表示 <

2、>  --> greater than

表示 >

3、

空格

4、©

©

5、¥

￥

3、文本标记

1、文本样式

1、作用

对文本进行修饰，比如加粗，斜体，线条样式等...

2、标记

1、<b></b>

加粗

2、<i></i>

斜体

3、<u></u>

下划线

4、<s></s>

删除线

5、<sup></sup>

上标

6、<sub></sub>

下标

2、标题元素

1、作用

以醒目(改变字体大小、加粗方式、垂直空白)的方式显示文本

2、语法

<h#></h#>

#:1~6

一级标题(<h1></h1>)字最大

...

六级标题(<h6></h6>)字最小

3、属性

align ：文本的水平对齐方式

取值：

1、left

2、center

3、right

3、段落元素

1、作用

以特殊的方式来显示文本即段落的上和下都有垂直的空白

2、语法

<p></p>

3、属性

algin

4、换行元素

语法：

<br>或<br/>

5、块分区元素

分区：可以对元素进行分组，多数用于页面布局上

语法：<div></div>

作用：独占一行，做布局!!!

6、行内分区元素

语法：<span></span>

作用：包裹文本，灵活的设置文本的样式

7、分割线元素

1、作用

在网页中显示一条水平线

2、语法

<hr>或<hr/>

3、属性

1、size

尺寸，相当于设置 水平线的 高度

取值 以 px 为单位的数值，px可以省略

2、width

宽度，以px为单位的数值，px可以省略

3、color

颜色

4、align

水平线自己的水平对齐方式

8、预格式化

1、作用

保留源文档中的格式，即保留原来的换行和文本中的空格

2、语法

<pre>内容</pre>

9、元素分类

1、行内元素

不会换行，可以和其他的行内元素位于同一行

使用场合：包裹文本，去设置文本的显示效果

display:inline

注意：所有的行内元素都不具备 align属性

2、块级元素

默认的情况下，每个元素独占一行，适用场合，多数都会用于 布局上

display:block;

ex:

<div></div>

<p></p>

<h1>~<h6>

注意：

1、不要让行内元素嵌套块级元素

<span>

<div></div>

</span>

错误的。

2、p标记

p标记是不能嵌套块级元素

<p>

<p></p>

</p>

4、图像和链接

1、URL

1、目录结构

目录：文件夹名称，保存网页内容的文件夹

2、URL

URL(Uniform Resource Locator)

统一资源定位器,俗称 路径,用来表示 网络资源的地址

资源：图片，音频，视频，文件等...

路径：从当前位置到目标资源位置所经过的路线。

三种表现形式:

1、绝对路径

1、什么是绝对路径

从文件最高级路径下开始的完整路径。

1、访问网络资源

由 协议名称、主机名(域名/IP地址)、目录路径、文件名

ex ：获取 百度 LOGO

协议名称：https

主机名:www.baidu.com

目录路径：img

文件名：bd_logo1.png

<imgsrc="//www.baidu.com/img/bd_logo1.png" width="270"  height="129">

2、访问本机资源

文件所在的最高级目录路径：？--文件所在的盘符

2、相对路径

1、什么是相对路径

从当前文件所在的位置处开始，去查找资源文件所经过的路径就是相对路径

1、同目录

直接通过 资源文件名称 进行引用即可

2、子目录

先进入，再通过资源名称进行引用

images/1.jpg

3、父目录

先返回，在通过资源文件的名称或路径进行引用

返回:../

3、根相对路径

特点：永远都是从网站所在的服务器根目录处开始查找

表现方式：/作为开始

2、图像

1、图像格式

1、jpeg

图像图像联合专家组

.jpg 作为后缀来存储的

2、gif

图形接口格式

特点：支持动画

.gif 作为后缀来存储的

3、png

可移植网络图形

采用 无损压缩，有8位，24位，32位三种形式

支持 透明色(PNG24位不支持)

.png 作为后缀存储的

2、图像元素

1、语法

<img>

2、属性

1、src

要引用的图像URL(绝对，相对，根相对)

注意：URL 要严格区分大小写,服务器路径 严格区分大小写

本机路径则无所谓

2、width

宽度

3、height

高度

以 px 或 % 为单位的数值，如果省略单位不写，默认为 px

<img src="../Images/a.jpg" height="300">

注意：width 和 height 如果只给一个属性的话，那么另外一个属性会跟着等比缩放

<img width="100px" src="a.jpg">

3、链接

1、作用

链接又叫超链接，允许用户通过点击的操作完成页面的跳转。

2、语法

<a>内容</a>

属性：

1、href

链接URL，只有设置了 href 属性之后，才是真正的超链接。

2、target

目标，打开新页面的方式

取值：

_blank : 在新标签页中打开

_self:默认值，在当前页中打开

3、链接的表现形式

1、目标文档为下载资源

href 属性值，指定的文件名称，就是下载操作(rar,zip)

2、电子邮件链接

前提：计算机中必须安装 邮件客户端，并且配置好了 邮件信息。

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

3、返回页面顶部的空链接

<a href="#">内容</a>

4、链接到Javascript

<a href="javascript:">内容</a>

4、链接-锚点

1、什么是锚点

用于在页面中做一个记号，允许页面随时随地的跳转到这个记号的位置处

2、使用方式

1、定义锚点(做记号)

1、使用 a 标记的 name 属性

<a name="NO1">衣装鞋帽</a>

2、使用任何一个标记的 id 属性

<ANY id="锚点名称"></ANY>

2、链接到锚点上(跳到记号位置处)

<a href="#锚点名称">内容</a>

ex:

<a href="#NO1">...</a>

以上方式，链接到本页的锚点处

链接到其他页面的锚点处:

<a href="页面url#锚点名称"></a>

四、表格

1、什么是表格&表格作用

由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列

到一起组成的

表格的作用 以一定的结构来显示信息的。

2、使用表格

1、创建表格(语法)

表格：表格，行，列(单元格)组成

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

创建表行：<tr></tr>

创建列(单元格):<td></td>

注意：默认情况下，每行中的列数是统一的。

table : display:table;

特点：

1、独占一行

2、宽度自适应(由内容来决定)

2、表格属性

1、<table> 属性

1、width

设置表格宽度

2、height

设置表格高度

3、align

设置表格在其 父元素 中的水平对齐方式，

取值：left,center,right

4、border

边框,边框宽度，以px为单位的数值，px可以省略

5、cellpadding

单元格内边距

单元格边框与内容之间的距离

6、cellspacing

单元格外边距

单元格与单元格之间或者单元格与表格之间的 距离

7、bgcolor

背景颜色

2、<tr> 属性

1、align

该行的内容 水平对齐方式

2、valign

该行的内容 垂直对齐方式

取值：top，middle，bottom

3、bgcolor

3、<td> 属性

1、width

2、height

3、align

4、valign

5、bgcolor

6、colspan

设置单元格跨列

7、rowspan

设置单元格跨行

3、表格中的其他标记

1、<caption></caption>

作用：为表格定义标题

位置：表格正上方居中显示

<table>

<caption>标题</caption>

<tr>

<td></td>

<td></td>

</tr>

</table>

2、行标题或列标题

列标题：第一行中的每一列，加粗，水平居中的效果显示

行标题：每行里面的第一列, 加粗，水平居中的效果显示

行(列)标题:<th></th>

<th></th>作用 与 <td></td>一模一样

3、表格的复杂应用

1、行分组

表格可以被划分成3个部分

1、表头 <thead></thead>

2、表主体 <tbody></tbody>

3、表尾 <tfoot></tfoot>

<table>

<tbody>

<tr></tr>

<tr></tr>

</tbody>

</table>

注意：如果不对表格行进行分组的话，那么默认都属于 tbody 中

2、不规则表格

每行中的列数，不是统一化的。

1、跨列

合并列，让指定的单元格，横向向右，合并几个单元格

(包含自己)

语法：

td 的 colspan 属性

2、跨行

合并行，让指定的单元格，纵向向下，合并几个单元格

(包含自己)

语法：

td 的 rowspan 属性

注意：无论是跨行还是跨列，被合并的单元格一定从代码中删除出去

3、表格的嵌套

在一个表格中，又嵌入了另外一个表格

被嵌套的表格必须出现在<td>中

<table>

<tr>

<td>

<table>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

五、列表

1、什么是列表&作用

将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来

2、列表的组成

列表是由 列表类型 和 列表项 组成的

列表类型：

有序列表

无序列表

列表项：

表示具体的列表中的内容

3、使用列表

1、有序列表

1、语法:

<ol></ol>  --> Order List

列表项：<li>内容</li> --> List Item

2、ol 的属性

1、type

列表标识的类型

取值：

1、1 ：数字(默认值)

2、a ：小写字母

3、A ：大写字母

4、i ：小写罗马字符

5、I ：大写罗马字符

2、start

列表标识的起始编号

默认为1

2、无序列表

1、语法

<ul></ul>->Unorder List

列表项：<li></li>

2、属性

1、type

取值：

1、disc,实心圆(默认值)

2、circle,空心圆

3、square,实心矩形

4、none,不显示标识

4、列表嵌套

注意：显示的内容只能放在 li 中

<ul>

<li>孙悟空</li>

</ul>

5、定义列表

1、作用

用于要给出一类事物的定义的情形。

2、语法

1、<dl></dl> 定义一个定义列表

2、<dt></dt> 定义 列表中的一个术语

3、<dd></dd> 对 术语 进行解释和说明

3、使用场合

图文混排

六、结构标记

1、什么是结构标记

H5中新标记，用来表示页面布局的，从而提升标签的语义性

2、结构标记分类

1、<header></header>

作用：用于定义文档的头部

注意：允许在页面中出现多次，作为任何部分的头部信息定义

替代:<div id="header"></div>

2、<nav></nav>

作用：用于定义页面的导航链接部分

替代：<div id="nav"></div>

3、<section></section>

作用：用于定义文档中的具体组成部分，表示主体内容分

替代：<div id="main"></div>

4、<article></article>

作用：用于定义独立于文档主体内容的一些其他内容

比如：论坛中的帖子、新闻信息、博客或微博中的条目

5、<footer></footer>

作用：用于定义网页中的页脚信息，网页中的靠下部分的内容

6、<aside></aside>

作用：用于定义页面中的 边栏信息

注意：能使用 结构标记的 地方，尽量使用结构标记，无法被结构标记

所取代的，就使用 <div id=""> 一起来实现布局

七、表单(重难点)

1、表单的作用

表单用于显示、收集信息，并将信息提交给服务器

2、完整的表单组成

1、表单 - form

2、表单控件

3、表单元素(重点)

1、语法

<form>

允许出现表单控件

</form>

2、属性

1、action

定义表单被提交时发生的动作

提交给服务器处理程序的地址

注意：通过 与服务器端人员交流 得到 action 的地址

默认，提交给本页

2、method

作用：定义表单提交数据时的方式

取值：

1、get (默认值)

意义为：得到，获取

场合：向服务器要数据时使用

特点：

1、明文提交,所提交的数据时可以显示在地址栏上的安全性较低

2、提交数据有大小限制-最大为2KB

2、post

意义：邮寄，邮递

场合：将数据提交给服务器处理时使用(有保密类型数据时)

特点：

1、隐式提交-所提交的内容是不会显示在地址栏上的，安全性较高

2、无大小限制

3、put

4、delete

5、...

3、enctype

作用：编码类型，即表单数据进行编码的方式

允许表单将什么样的数据提交给服务器

取值：

1、application/x-www-form-urlencoded

默认值

允许将普通字符，特殊字符，都提交给服务器，不允许提交文件

2、multipart/form-data

允许 将文件 提交给服务器

3、text/plain

只允许提交普通字符。特殊字符，文件等都无法提交

4、name

定义 表单的名称

【温故知新】——HTML基础重要知识点复习的更多相关文章

  1. 【温故知新】——HTML5重要知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...

  2. Spring知识点复习

    Spring知识点复习 一.专业术语 侵入式设计 引入框架,对现有的类的结构有影响,即需要实现或继承某些特定类.如:Struts框架 非侵入式设计 引入框架,对现有的类结构没有影响.如:Hiberna ...

  3. 【课堂笔记精选】为了能够用“Unity”软件做游戏，我要从最基础的开始复习JavaScript

    [声明]在“随笔”模块,只是知识点,但是在“文章”模块(https://www.cnblogs.com/Robot-DX3906/articles/10579584.html)里面,有更多内容. 20 ...

  4. Hybrid App 应用开发中 9 个必备知识点复习(WebView / 调试 等)

    前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 <Hybrid APP 混合应用专题> 主题的第二期和第三期的合集. 这一期共整理了 10 个问题,和相应的参考答 ...

  5. python类，魔术方法等学习&&部分ssti常见操作知识点复习加深

    python类学习&&部分ssti常见操作知识点复习加深 在做ssti的模块注入的时候经常觉得自己python基础的薄弱,来学习一下,其实还是要多练习多背. 在python中所有类默认 ...

  6. C语言知识点复习梳理

    C语言知识点复习梳理 C语言的知识点讲完了,接下来就是做一下整理与总结,然后就会进入其他知识的学习. 本文目录如下: 基础知识. 顺序程序设计. 数据类型. 标准输入输出. 进制转换. 选择结构. 循 ...

  7. Java---常用基础面试知识点

    综合网上的一点资源,给大家整理了一些Java常用的基础面试知识点,希望能帮助到刚开始学习或正在学习的学员. 1.抽象 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方 ...

  8. Java 基础常见知识点&面试题总结(中)，2022 最新版！| JavaGuide

    你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,公众号同步一下最新更新,希望能够帮助你. 上篇:Java 基础常见知识点&面试题总结(上),2022 最新 ...

  9. Java 基础常见知识点&面试题总结(下)，2022 最新版！

    你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,同步一下最新更新,希望能够帮助你. 前两篇: Java 基础常见知识点&面试题总结(上),2022 最新版 ...

随机推荐

  1. python 浮点数问题

    为什么 输入:0.2 + 0.1 得到的是:0.30000000000000004???? 0.1 * 3 = 0.30000000000000004????

  2. Leetcode 514.自由之路

    自由之路 视频游戏"辐射4"中,任务"通向自由"要求玩家到达名为"Freedom Trail Ring"的金属表盘,并使用表盘拼写特定关键词 ...

  3. 转载 hadoop 伪分布安装

    一. 概要        经过几天的调试,终于在Linux Cent OS 5.5下成功搭建Hadoop测试环境.本次测试在一台服务器上进行伪分布式搭建.Hadoop 伪分布式模式是在单机上模拟 Ha ...

  4. ibatis核心内容概述

    核心提示:SqlMap的配置是iBatis中应用的核心.这部分任务占据了iBatis开发的70的工作量. 1.命名空间: sqlMap namespace=Account,在此空间外要引用此空间的元素 ...

  5. i++ 和++i 的理解 以防面试

    根本原理: //模拟 a++ function afterAdd(){ var temp = a; a = a+1; return temp; } //模拟++a; function beforeAd ...

  6. 【2019.3.2】NOI 模拟赛

    题目 题解(有些小错误) H老爷的简短题解 请无视题目 $pdf$ 的第二行,信那句话的人都已经上清华了 听说大老爷切了 $250+$ 分,然后发现是两个人分着写三道题的,然后第一题还流假了…… $x ...

  7. python请求带cookie

    先获得cookie到文件 import cookielib import urllib2 #设置保存cookie的文件,同级目录下的cookie.txt filename = 'cookie.txt' ...

  8. Struts框架详解

    1.Struts应用框架介绍 (1)框架 框架最简单的形式是指已开发过并已测试过的软件的程序块,这些程序块可以在多个软件开发工程中重用.框架提供了一个概括的体系结构模版,可以用这个模板来构建特定领域中 ...

  9. bzoj 2741 [FOTILE模拟赛] L

    Description 多个询问l,r,求所有子区间异或和中最大是多少 强制在线 Solution 分块+可持久化trie 1.对于每块的左端点L,预处理出L到任意一个i,[L,j] 间所有子区间异或 ...

  10. 【HDOJ5951】Winning an Auction（博弈DP）

    题意:A和B两个人做一个拍卖游戏.每一轮两人分别给出一个价格,出价高者获得该轮的物品,出价相同则奇数轮A优先,偶数轮B优先. 两个人的目标都是最大化自己的商品数量,给定轮数n与两人分别的总资金a,b, ...