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

一、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>

2、非封闭类型标记

也叫作空标记或单标记

语法

<标记>或<标记/>

ex:

<img> - 图像

<br> - 换行

<hr> - 水平线

2、元素

也称之为标记

标记：实际上是语法规范

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

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

3、元素嵌套

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

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

注意：

1、嵌套位置和顺序

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元素的id属性值为 p1

3、标准属性

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

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

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

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

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

5、注释

1、什么是注释

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

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

2、注释的语法

注意：

1、注释不能嵌套

<!--

-->

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

以上写法是错误的。

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、属性值可以被引号括起来

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> 定义网页标题

比如：

编码格式

设置网页编码格式为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、换行元素

语法：

5、块分区元素

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

语法：<div></div>

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

6、行内分区元素

语法：<span></span>

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

7、分割线元素

1、作用

在网页中显示一条水平线

2、语法

3、属性

1、size

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

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

2、width

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

3、color

颜色

4、align

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

8、预格式化

1、作用

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

2、语法

9、元素分类

1、行内元素

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

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

display:inline

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

2、块级元素

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

display:block;

ex:

<p></p>

注意：

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

<span>

</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

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

3、链接

1、作用

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

2、语法

属性：

1、href

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

2、target

目标，打开新页面的方式

取值：

_blank : 在新标签页中打开

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

3、链接的表现形式

1、目标文档为下载资源

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

2、电子邮件链接

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

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

4、链接到Javascript

4、链接-锚点

1、什么是锚点

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

2、使用方式

1、定义锚点(做记号)

1、使用 a 标记的 name 属性

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

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

ex:

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

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

四、表格

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>

<tr>

</tr>

</table>

2、行标题或列标题

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

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

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

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

3、表格的复杂应用

1、行分组

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

1、表头 <thead></thead>

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

3、表尾 <tfoot></tfoot>

<table>

<tbody>

</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>

</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基础重要知识点复习的更多相关文章

【温故知新】——HTML5重要知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...
Spring知识点复习
Spring知识点复习一.专业术语侵入式设计引入框架,对现有的类的结构有影响,即需要实现或继承某些特定类.如:Struts框架非侵入式设计引入框架,对现有的类结构没有影响.如:Hiberna ...
【课堂笔记精选】为了能够用“Unity”软件做游戏，我要从最基础的开始复习JavaScript
[声明]在“随笔”模块,只是知识点,但是在“文章”模块(https://www.cnblogs.com/Robot-DX3906/articles/10579584.html)里面,有更多内容. 20 ...
Hybrid App 应用开发中 9 个必备知识点复习(WebView / 调试等)
前言我们大前端团队内部 ?每周一练的知识复习计划继续加油,本篇文章是 <Hybrid APP 混合应用专题> 主题的第二期和第三期的合集. 这一期共整理了 10 个问题,和相应的参考答 ...
python类，魔术方法等学习&&部分ssti常见操作知识点复习加深
python类学习&&部分ssti常见操作知识点复习加深在做ssti的模块注入的时候经常觉得自己python基础的薄弱,来学习一下,其实还是要多练习多背. 在python中所有类默认 ...
C语言知识点复习梳理
C语言知识点复习梳理 C语言的知识点讲完了,接下来就是做一下整理与总结,然后就会进入其他知识的学习. 本文目录如下: 基础知识. 顺序程序设计. 数据类型. 标准输入输出. 进制转换. 选择结构. 循 ...
Java---常用基础面试知识点
综合网上的一点资源,给大家整理了一些Java常用的基础面试知识点,希望能帮助到刚开始学习或正在学习的学员. 1.抽象抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方 ...
Java 基础常见知识点&面试题总结(中)，2022 最新版！| JavaGuide
你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,公众号同步一下最新更新,希望能够帮助你. 上篇:Java 基础常见知识点&面试题总结(上),2022 最新 ...
Java 基础常见知识点&面试题总结(下)，2022 最新版！
你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,同步一下最新更新,希望能够帮助你. 前两篇: Java 基础常见知识点&面试题总结(上),2022 最新版 ...

随机推荐

Visual C++ 连连看游戏源代码
点击下载
JQuery向ashx提交中文参数方案 [转]
转自:http://blog.csdn.net/wangqiuyun/article/details/8450964 字符编码这个东西,一旦和中文打上交道就不可避免出现乱码,今天项目用到了JQuery ...
自己搭建一个记笔记的环境记录（leanote）
一直在找一个开源的记笔记的软件,偶然看到leanote.竟然还是开源的,还是国人开发的果断mark了.自己在电脑上搭建了一个挺好玩的.可以记录一些不给别人看的小秘密. 下面是步骤记录,当然可以到官网上 ...
HDU5857 Median 模拟
Median HDU - 5857 There is a sorted sequence A of length n. Give you m queries, each one contains fo ...
POJ-2159 最小费用最大流
Going Home 自己写的第一道费用流,图建好一波板子AC.不过还是有几个地方有点迷. 先来 ...
import from 相对路径
项目目录 - server - static - src - - stroe - - router - - main.js - app.js src为前端文件,src目录下有main.js代码如下 i ...
html获取当前地址的参数
//jsd代码 function UrlSearch(){ var name,value; var str1 = ""; var str=loc ...
【13】vuex2.0 之 state
Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...
pat 甲级 1009. Product of Polynomials (25)
1009. Product of Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...
局部a链接样式
原文发布时间为:2010-01-16 -- 来源于本人的百度文章 [由搬家工具导入] <style type="text/css"> <!--默认页面链接-> ...

【温故知新】——HTML基础重要知识点复习

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

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

随机推荐

热门专题