html

2022-10-01 23:12:08

1.HTML快速入门

1.1 什么是HTML

HTML:HyperText Markup Language 超文本标记语言

a 普通文本

<a></a>超文本标记

具有自己的功能

语言：有语法结构

1.2 HTML的特点

1.以.html或.htm为后缀

2.由浏览解析执行

3.用带有尖括号的"标记"来标识

4.可以在网页中执行js脚本

1.3 HTML的基础语法

(1)标签的分类

1.双标记(封闭类型)

<关键字></关键字>

双标记必须成对出现，有开始就有结束 <p></p>

2.单标记(非封闭类型)

<关键字>或者<关键字/>

(2)标签的嵌套

1.什么是嵌套

一对标记中出现另一个(对)标记，形成了层级。

<div>

<p></p>

</div>

2.语法

<关键字1>

<关键字2>

<关键字3></关键字3>

</关键字2>

</关键字1>

(3).属性和值

允许通过属性和值对标记进行修饰

属性用来设置标签中的内容如何显示

属性不能瞎写，应该根据文档中的规定来编写，

有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

语法：

1.属性和值必须声明在开始标记中

<关键字属性="值"></关键字>

2.多个属性之间用空格分开

<关键字属性1="值1" 属性2="值2" ...></关键字>

3.标准属性(通用属性)

所有的元素都支持的属性

id 定义此元素在页面中的唯一标识

title 鼠标悬停在元素上时，显示的文本

style css中，定义行内样式

class css 中，引用类选择器

(4)注释

语法：

注意：注释不能嵌套注释，注释也不能出现在标记中

2.HTML的文档结构

1.文档类型的声明

<!DOCTYPE html>告诉浏览器，我这篇html使用h5的规则解析

2.网页的结构

<!doctype html>

<html>

</html>

<html></html>表示网页的开头和结束

在html中包含两个标签

<head></head> 网页的头部，定义全局的信息

<body></body> 网页的主题，展示的内容

3.head元素是其他头元素的容器<head></head>

<title></title> 网页的标题并且title标签的内容会作为搜索结果的超链接上的文字显示。

用来设置网页的字符集，避免乱码问题

chrome 62以上的版本，自动识别中文

Name：指定数据名称 concent：指定数据内容

Name的取值：

Keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开。为搜索引擎提供服务。

description 用于指定网站的描述

网站的描述会显示在搜索引擎的搜索的结果中。

4.body元素

定义网页的主体

body的属性

bgcolor 背景颜色

text 字体颜色

取值：合法的颜色值---->颜色的应为单词

3.文本标记

3.1 标题元素

作用：在页面中以醒目的方式显示文本

语法 <h1></h1>一级标题 <hn></hn> n:1~6

...

<h6></h6>六级标题

特点：

1.文本加粗

2.字号发生变化

3.独占一行，上下有垂直间距

从h1~h6重要性递减，h1最重要，h6最不重要

h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1

一般情况下标题标签只会使用到h1~h3，h4~h6很少用

标题标签都是块元素

属性align 设置标签内容水平方向对齐方式

取值：left/center/right

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

<h1>回乡偶书二首</h1>

</hgroup>

3.2 段落标记paragraph

语法：<p></p>

作用：突出的表示一段文字

特点：独立成行，上下有垂直的间距

p也是一个块元素

属性：align

3.3.换行标记

3.4.水平线(分割线)

width="50%" 表示水平线的宽度，取值为%或者px为单位的数字

size="5px" 表示水平线的尺寸(粗细)，取值为%或者px为单位的数字

align="left" 对齐方式

color="red" 设置水平线的颜色

3.5.预格式化标签

使标签内部的文本，保留其格式，在页面上显示

空格折叠现象，一个或多个空格，会被浏览器渲染成一个空格显示

一个或多个回车，会被浏览器渲染成一个空格显示

3.6.特殊字符(实体)

空格 &nbsp；

< <

> >

® ®

￥ ¥

x ×

3.7.文本样式

上标 <sup></sup>

下标 <sub></sub>

补充：

1、blockquote 表示一个长引用，块元素

鲁迅说：

这句话我是从来没有说过的！

</blockquote>

2、q表示一个短引用，行内元素

子曰<q>学而时习之，乐呵乐呵！</q>

3.8.分区元素

1.块分区，用于页面中布局

独立成行

2.行分区，处理同一行文本的不同样式

可以与其它的span和文字共用一行

3.9.行级元素和块级元素（元素的显示形式）

1.块级元素

在网页中，单独成行，就是块级元素

在网页中一般通过块元素来对页面进行布局

从上往下排列

常见块级元素

h1~h6

div

2.行内元素(行级元素)

在页面中，与其他行内元素/行内块共用一行

行内元素主要用来包裹文字

从左往右排列

页面中常见行内元素

i em b strong u sup sub span

3.行内块元素

显示的方式与行内元素相同，但是具备块级元素的特征

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

块元素中基本上什么都能放

p元素中不能放任何的块元素

注意：浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，对在内存中的源码进行修正

比如：

标签写在了根元素的外部

p元素中嵌套了块元素

根元素中出现了除head和body以外的子元素

... ...

4.table

表格的宽高是由表格的内容决定的

内容多，就宽一些，高一些，

表格中所的数据都预读到内存，一次性画到页面上

4.图像和链接

4.1.图像

1.使用

图片标签用于向当前页面中引入一个外部图片

使用img标签来引入外部图片，img标签是一个自结束标签

img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性

src="url" url--图片资源路径

alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示。

搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。

width图片的宽度(单位是像素)

height图片的高度

宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意：

一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大

但是在移动端，经常需要对图片进行缩放（大图缩小）

补充：图片的格式：

jpeg(jpg)

支持的颜色比较丰富，不支持透明效果，不支持动图

一般用来显示照片

gif

支持的颜色比较少，支持简单透明，支持动图

颜色单一的图片，动图

png

支持的颜色丰富，支持复杂透明，不支持动图

颜色丰富，复杂透明图片（专为网页而生）

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

它具备其他图片格式的所有优点，而且文件还特别的小

缺点：兼容性不好

base64

将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64

效果一样，用小的

效果不一样，用效果好的

2.URL

Uniform Resource Locator 统一资源定位符简称：路径

3.URL路径的表现形式

1.绝对路径，一个写完整的路径

通信协议+主机地址+文件目录结构+文件的具体名称

合适使用：

1.使用网络资源的时候，使用绝对路径

优点：不占据自己服务器的存储空间

缺点：不稳定

2.使用本地资源，使用绝对路径(项目中100%用不到)

从最高盘符开始查找 C/D/E/F/G

项目中不用

2.相对路径（参照物是html本身）

1.图片与html文件在同一个目录下，src直接引用图片名称

src="3.jpg"

./表示当前文件所在的目录，可以省略

4.2.链接

1.语法 <a href="#"></a>

<a href="http://www.tmooc.cn/">Tmooc</a>

超链接可以让我们从一个页面跳转到其他页面，

或者是当前页面的其他的位置

属性：

href指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

target:指定打开链接的方式

取值：_self 默认值，在当前标签页打开新链接，新页面替换之前的页面。

_blank 在新的标签页打开链接

超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

2.其它的表现形式

空链接: <a href = "##"></a>

#表示空链接,当写一个#时,单击a会回到顶部,##不回到顶部

注意：

1、

　　　　<a href="#">这是一个新的超链接</a>

2、

　　　　<a href="javascript:;">这是一个新的超链接</a>

4.3.锚点

锚点就是网页中的一个记号，跳转到页面的指定位置

定义锚点(指定位置)

使用a标签的name属性定义锚点

定义锚点(指定位置)

任意标签的id属性定义锚点

链接到锚点

使用a标签链接锚点，#锚点名称

链接到锚点

使用a标签链接锚点， #id

5.列表(重点***)

默认按照从上到下的顺序来显示数据，并且可以在数据前添加标识

使用列表布局(去掉标识，从上到下，从左到右排列)

5.1.列表的组成

1.有序列表<ol></ol> order list

2.无序列表<ul></ul> unorder list

3.列表项 <li></li> list item

5.2.列表属性

1.有序列表的属性 ol

type 设置标识符的类型

取值：默认值，数字

a A 字母

i I 罗马数字

start 指定起始编号

取值：无单位数字

2.无序列表的属性 ul

type：设置标识

取值 disc 默认值实心圆

circle 空心圆

square 实心方块

none 无

5.3.列表的嵌套

所有的嵌套必须只能写在li中

ul(ol)只能包含li,li里可以包含任何其他标签

5.4.自定义列表

1.作用

做名词解释使用,用于图文混排

<dl>

<dt>需要被解释说明的名字</dt>

<dd>对名词的解释内容</dd>

</dl> 10:17上课

6.表格

6.1.表格语法

<table>

<tr>

</tr>

.....

</table>

在table中使用tr表示表格中的一行，有几个tr就有几行

在tr中使用td表示一个单元格，有几个td就有几个单元格

6.2属性

1.table标签的属性

　　border:设置边框 border=“1”

　　width:设置表格的宽

　　height:设置表格的高

　　可以设置宽高，内容小于宽高的，按宽高尺寸，内容大于宽高，按内容改变尺寸

　　align:设置表格的对齐方式(table自己的水平位置)

　　取值 left/center/right

　　bgcolor:背景颜色

　　cellpadding:设置单元格内边距(边框到内容的距离)

　　cellspacing:设置单元格外边距（边框与边框之间的距离），默认是2px

2.tr的属性

　　1.align设置当前行内容的水平对齐方式（设置表格内容的对齐方式）

　　2.valign设置当前行内容的垂直对齐方式

　　取值：top/middle/bottom

　　3.bgcolor 当前行的背景颜色

3.td的属性

　　width

　　height

　　align

　　valign

　　bgcolor

　　colspan

　　rowspan

6.3.不规则表格的使用

1.跨列

　　colspan=?

从指定的单元格位置处开始，横向向右合并?个单元格(包含自己)

被合并掉的单元格，要删除

2.跨行

　　rowspan=?

从指定的单元格位置处开始，纵向向下合并?个单元格(包含自己)

被合并掉的单元格，要删除

6.4.table中的可选标记

1.表格的标题

如果设置标题，必须将<caption>放在<table>之后

2.行/列的标题

加粗，居中

6.5.表格的复杂应用

1.行分组

可以将连续几个行，划分到一个组中，进行统一管理

表头行 <thead></thead> 表格最上面一行的标题放在thead中

表主体 <tbody></tbody>允许将若干放在tbody中进行统一管理

表尾行 <tfoot></tfoot> 表格中最后一行放在tfoot中

2.表格的嵌套

一张表格中，所有的嵌套的表格，只能放在td中

7.表单(重点********&难点***)

7.1.作用

1.提供可视化的输入控件

2.收集用户填写的信息并提交给服务器

在现实生活中表单用于提交数据

在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

使用form标签来创建一个表单

7.2.表单的组成部分

1.前端部分

提供表单的控件，与用户做交互的可视化控件

2.后端部分

对提交的数据进行处理(接口)

7.3.表单

　　　　　　属性

1.action

通常是定义服务器处理数据的地址，接口(url)

默认，提交给本页地址

2.method

指定表单数据提交的方式(方法)

1.get(默认值)

　　明文提交，提交时内容会显示在浏览器地址栏上

　　提交的数据有大小限制，2kb

　　向服务器要数据的时候使用get

2.post

　　提交数据无大小限制

　　隐式提交，提交的数据不会显示在地址栏中

　　把数据传递给服务器的时候，使用post

3.delete

4.put

3.enctype 编码方式

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

1.提交普通字符，不能有特殊符号

enctype ="text/plain"

2.允许将任意字符提交给服务器

application/x-www-form-urlencoded

3.允许将文件提交给服务器

multipart/form-data

7.4.表单控件

能够与用户进行交互的可视化元素

7.4.1分类

1.input元素

2.textarea 多行文本域

3.下拉选择框

4.其它元素

7.4.2input元素

在页面中提供各种各样的输入控件，通过type属性来设置输入控件的类型

type 设置输入控件的类型

name 为控件定义名称，提供给服务端使用(必须值)

vaule 控件的值，提交给服务端使用

disabled 禁用控件，不能操作也不能提交，无值属性

type取值

1.文本框和密码框

type="text" 默认值

type="password"

属性

　　1.maxlength 限制输入的最大字符数

　　2.readonly 只读，只能看不能写，但允许被提交，无值属性

　　3.placeholder 占位符，默认显示在控件上文本，只要得到焦点，文本就无效了，此文本不能提交

　　4.autocomplete="off" 关闭自动补全

　　5.autofocus 设置表单项自动获取焦点

2.按钮

type="submit"提交按钮

　　将表单中的数据，提交给服务器

type="reset"重置按钮

　　让表单内容恢复到初始化状态

type="button" 无功能按钮，可以调用js脚本

3.单选按钮和复选按钮

单选按钮

type="radio"

多选按钮

type="checkbox"

像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器，不然提交的值是on。

多个选择按钮的name属性值必须一致。除了定义控件名称，还起到分组的效果

checked：设置默认选中项，无值属性

checkbox的name要写成数组hobby[]

4.隐藏域

type="hidden"

想提交给服务器，但是不想展示给用户看的数据，使用隐藏域

5.文件选择框

type="file"

注意：

method="post"

enctype="multipart/form-data"

multiple 无值属性，可以同时上传多个文件

需要name属性值为数组

7.4.3textarea文本域

允许录入多行数据的文本框

name 控件的名称

readonly 只读

cols 指定文本域的列数，以英文单词为准，中文减半

rows指定文本域的行数，

7.4.4下拉选择器框

<select> 表示一个下拉选

<option></option> 表示下拉选中的一个选项

.......

</select>

注意：

　　当option没有value属性时，提交的时候select的value为选中option的内容。

　　当option有value，提交时，select的value为选中option的value。

select属性

name选项框的名称

　　size 默认为1，定义显示选项的数量。

　　　　如果值大于1的数字。下拉选表现为滚动列表

　　multiple 无值属性，可以多选，但是name要用数组

　　　　设置了multiple之后，就算size="1" 也是滚动列表

option的属性

value

selected设置默认选中项

7.5.其它元素

1.label

文本与表单控件的关联

属性

for:要与label中文字发生关联的form控件的id

2.为控件分组

<fieldset></fieldset> 为控件分组

<legend></legend> 分组标题

3.浮动框架

允许在一个网页中，引入另外一个网页

属性

src="url"

width="100%"

height="200px" 高度存在问题，需要使用js.dom来解决

scrolling="no" 不显示滚动条

frameborder="0" 不显示边框