html基础知识

快乐的高兴的学习代码中

已于 2022-02-12 12:43:51 修改

阅读量981

点赞数

分类专栏：详细知识文章标签： html

于 2021-01-05 20:46:57 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/112252461

版权

详细知识专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的结构、标签、表格、表单元素等。HTML是前端开发的三大核心技术之一，用于控制网页结构，CSS负责样式，JavaScript处理网页行为。文章讲解了各种HTML标签的用法，如标题、段落、图像、超链接等，并提到了表格的结构、表单元素的使用，以及新表单元素和结构标记的作用。

摘要由CSDN通过智能技术生成

静态页面指只能供用户浏览而无法与服务器进行数据交互的页面。

动态页面，增加了与服务器进行数据交换的功能。

前端开发的核心3个技术是html/css/javascript.

html全称为HYPER TEXT Markup Language,超文本标记语言

css , Cascading Style Sheets ，层叠样式表。

javascript,嵌入到html页面中的脚本语言，由浏览器一边解释一边执行。

html控制网页结构，css控制网页外观，javascript控制网页行为。

html特点

以.html/.htm为后缀

由浏览器解析执行（默认情况下代码从上往下，同一行从左往右按顺序执行）

页面中可以嵌套js脚本

html结构

<!DOCTYPE html> 声明文档类型，当前文档是由h5编写的

<html></html>网页的开始和结束，页面的根元素，一个页面中只能有一对。

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

<title></title>网页标题

meta有两个重要属性

name属性，有4个值，值后常跟content写内容

name属性，有4个值	keywords 网页关键字可以有多个
	description 网页描述
	author 网页作者
	copyright 版权信息

http-equive属性，定义网页所使用的编码，定义网页自动刷新跳转。

meta可以有多个。

<body></body>网页的主体，可视区域，真正编写内容的地方

属性：bgcolor 背景颜色

text 文本颜色

align 对齐方式，所有独占一行的元素都有效

行内元素块级元素

块级元素在浏览器显示状态下独占一行，并排斥其他元素。块级元素内部可以容纳行内元素和块级元素。

行内元素可以和其他行内元素位于同一行。行内元素只能容纳行内元素，不能容纳块级元素。

行内快元素：与其他文本，行内元素和行内块共用一行。一行访不下，自动换行

常见的块级元素有h1-h6 p div hr ol ul pre

常见行内元素 strong em a(超链接) span i em b s del sub sup

行内块元素：input

注意，这里的独占一行指的是在浏览器显示效果中独占一行，不是指在页面代码内独占一行.

当在浏览器中同时有几个元素时，而几个元素内容本身能被这一行所包含时，但其中有一个块级元素，他会把其他元素挤出这一行。

列表

有序列表 ol,type属性可改变列表项符号

type属性	阿拉伯数字1 2 3.... 默认值
	小写英文字母 a b c ...
	大写英文字母 A B C.....
	小写罗马数字 ⅰⅱⅲ.....
	大写罗马数字 ⅠⅡⅢ....

start="数值"

无序列表 ul

type属性	disc 实心圆
	circle空心圆
	square 正方形

none 去掉标识项

列表的嵌套必须放在li中

定义列表

表格

表格的基本结构

表格的完整结构

语义化添加了表头表身表脚

注意，表头thead、表身tbody、表脚tfoot是不会再浏览器页面上显示出来的。

表格的属性

border="1" 设置边框宽度

bordercolor="purple" 边框颜色

width="400" 表格宽度

height="400" 表格高度

bgcolor="pink" 背景颜色

align="center" 表格水平居中

在块级元素设置align="center" ，设置内部文本水平居中

给表格设置align="center",让表格自已水平居中

cellpadding="30" 设置单元格内边距（内容到边框的距离）

cellspacing="30" 设置单元格外边距（边框到边框的距离）

提示边框距离为0，就是一根线了。

tr属性

bgcolor="pink" 设置某一行背景色

align="right" 设置某一行内部文本的水平对齐方式 left/center/right

valign="middle" 设置某一行文本的垂直对齐方式 top/middle/bottom

td属性

width

height

bgcolor

align

valign

表格的显示特点

表格不是块级元素，表格是一种特殊的显示方式

不同行的每一列宽度必须一致，以最宽的为标准

同一行每一列的高度必须一致，以最高的为准

table有独特的渲染方式，把整个一个表格完整的下载下来，存储到内存中，再一次性渲染到页面上，渲染效率低（存取到内存）

单元格的大小，取决于内容和设置尺寸两者中大的哪一方

行列和并

rowspan 行合并

colspan 列合并

被合并的单元格要删除

可选标记

表格标题<caption>表格标题</caption>

要求必须紧紧挨着table标签写

行列的标题

<th></th>代替td标签，自动居中和加粗

行分组

把整个表格中的所有行，分成几组，为后期的js操作提供便捷

thead tbody tfoot

如果代码中没有添加行分组，浏览器会自动添加一个tbody，把所以行放进去

表格的嵌套

表格中，所以嵌套的内容，必须放在td/th中

表单

提供可视化的输入控件

自动收集整理数据的能力（name属性）

注：form内部控件的name属性，只能用于form表单提交请求的使用！

如果不用form表单提交请求，就不用谢name属性

（单选和多选，永远需要name属性做分组）

ajax提交请求，不写name属性

发送请求给服务器

不能接受响应

form内部控件的name属性，只能用于form表单提交请求的使用

<from>属性

action="" 设置表单的请求提交接口，不填写，请求默认提交给当前页面本身

method="" get/post 设置请求的提交方法

get 默认值，明文提交，查询字符会出现在地址栏中，请求中包含的数据大小有限，最小值2kb-8kb

post 隐式提交，提交的数据在请求主体req.body中，请求的数据没有大小限制

put/delete/option........

enctype="" 规范了请求中数据的格式

规范了请求可以传递什么格式的数据给服务器

application/x-www-form-urlencoded 默认值，允许传递任意字符

text/plain 允许传递普通字符（特殊符号 & = 尖号等不能传递）

multipart/form-data 可以上传文件+任意字符

表单控件

input元素

type="" 设置input的控件类型

name="" 给控件起名字，form提交请求的时候，name值是等号左边的内容

value="" 控件真正的取值，给控件添加默认值

用户填入值，提交请求时等号右边的内容。也就是真正的值

disabled 无值属性，禁用，不让用户操作，也无法提交

文本框和密码框

text 文本框默认值

password 密码框

maxlength 控制用户输入的文本长度

readonly 无值属性，只能看不能改，可以提交

placeholder=“” 占位提示符

按钮

type="submit" 提交按钮，收集form中数据，并发送请求

type="reset" 恢复到表单的初始状态

type="button" 普通按钮，没有功能，只能使用onclick调用js

<button>提交</button> 功能为submit

单选按钮

type="radio"

属性name="" 为控件分组，实现单选或者多选效果，（不管是否使用form,都需要name）

value="" 提交时，被选中控件的值会被提交

checked 无值属性，默认选中

多选按钮

type="checkbox"

属性name="" 为控件分组，实现单选或者多选效果

value="" 提交时，被选中控件的值会被提交

checked 无值属性，默认选中

总结：单选按钮和多选按钮，必须写name属性和value属性

隐藏域

数据需要提交，但是又不想给用户看到

这种数据用隐藏域提交

type="hidden"

type="hidden" name="did" value="elem"

文件选择框，上传文件使用

需要对form先进行设置

form action="" method="post" enctype="multipart/form-data"

type="file"

multiple 多选，无值属性

textatea 多行文本域

多行文本框，属性设置在不同硬件上不统一

灵活度太强，不受控制

textarea rows="3" cols="5" name="txt"></textarea>

select 和option 下拉框

select name="add"

</select>

提交的时候，option有value值，select的value是选中的option的value值

option没有value值，select的value是选中的option的内容区域

属性 size="6" 默认为1，下拉选中框

取值大于1，滚动选择框，取值为几，就显示几个内容

multipe 多选

option的属性 selected 默认选中

其他表单元素

label

可以替代form中的span

用于关联文本和控件

<input id="n1"><label for="n1">(点文本就选中了)

控件分组

<fieldset> //分组

</fieldset>

浮动框架

不属于form表单范畴

在一个html页面中，引入其他html

frameborder 清除边框

scrolling 清楚滚动

新表单元素

邮箱控件

type="email" name="email"

提交的时候，验证value必须有@，并且@前后有字符，bug特别多

搜索类型

type="search" name="search"

提供了一个快速删除的小叉叉

url

type="url" name="url"

提交的时候验证，http:开头，后面有字符，bug大

电话类型

type="tel" name="tel"

在移动设备上显示时，文本框获取焦点，会自动弹出虚拟键盘

数字类型

type="number" name="number" max="20" min="10" step=3

输入的数字大小进行现在

step 步长

可以输入字母e,科学计数法

范围类型

type="range" name="range"

提供了一个数字范围滑块

颜色类型

type='color" name="color"

提供了取色器

日期类型

type="date"

提供了日期选择控件

月份类型

type="month"

星期类型

type="week"

结构标记

相当于div,但是给div起了名字，增加代码的可读性

给div赋予语义，有语义的标签，在被搜索时更容易被找到

header <header> </header>网页的头部，或者某个区域的顶部

footer 网页的顶部，或者某个区域的底部

nav 网页的导航部分

aside 侧边栏

section 网页主体

article 网页中与文本相关的部分（评价回帖·）

图片

img标签显示一张图片

img属性	src 路径，路径分为相对路径和绝对路径。
	alt 图片描述，给搜索引擎看，当图片无法显示时，页面中会显示alt中的文字
	title 图片描述，给用户看，光标移到图片上会显示文字

宽高width height

如果我们设置的宽高比和图片默认的宽高比不一致，图片会变形--图片失真

一般宽高只写一个，另外一个根据默认宽高比自动匹配