HTML入门最完整基础概念（已全部更新完成........）

已于 2022-12-27 16:20:12 修改

分类专栏：笔记文章标签： html 前端 javascript

于 2022-12-05 19:03:24 首次发布

学习html相对于其他计算机语言来说比较简单，虽然整体偏简单但是我们依旧不能轻视它毕竟html所学的东西多且杂。

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML入门最完整基础概念（已全部更新完成........）

1.html概述

（1）前端三种技术

一.html：网页结构以及相应的元素

一.css：修饰网页元素（暂时不细讲）

三.javaSprict：动态效果 （暂时不细讲）

（2）html定义

一超文本：文本嵌入图片视频等

二.语言：交流沟通工具

三.标记：符合标签内容

（3）浏览器

一.编译执行：html、css、javaScript

二.浏览器种类：火狐、谷歌、微软等

（4）html发展阶段

第一阶段：html

第二阶段：html2、html3和html4

第三阶段：html5

（5）W3C定义html规范

（6）兼容性

一.高版本向低版本兼容性

二.新标签和浏览器之间的兼容性

（7）网页调试

一.浏览器本身的工具

一.Fn+F12

（8）开发工具

一.记事本

二.HubliderX

三.sublime等

（9）html规范

一.成对出现

二.缩进为tab

三.注释为：<-- -->

2.html语言

（1）规范

一.镶嵌:<p>段落</p>

二.内置属性：<p align="center">段落</p>

三.封闭性：成对出现：<p></p> 单独：<img src="">

（2）网页结构

一.文档声明类型：<!doctype html>

二.开始结束标记：<html></html>

三.二级标记

Ⅰ：<head></head>

壹：文档开头，包含网页本身信息

贰：包含：title、keywords、描述、作者、编码格式

Ⅱ：<body></body>

文档体，包含页面要显示的信息

布局标签、列表标签、标题标签、表格标签、表单标签、框架标签

四.编码格式：UTF-8

3.html标签

（1）元素显示

一.块元素:独占一行，p，h1-h6

二.内联元素:不独占一行，span

三.内联块元素:通过css来实现

（2）DIV

一.块元素

二.容器元素：包含其他元素

三.<div>包含元素</div>

（3）span

一.内联元素

二.<span></span>

（4）列表

一.无序列表

开始结束标记：<ul></ul>

列表选项标记：<li></li>

内置属性：type=circle | disc | square

例子：<li type=circle></li>

二.有序列表

开始结束标记：<ol</ol>

列表选项表标记 ：<li></li>

内置属性： type=i | 1 | A | a 默认为1；start=1

三.自定义列表

开始结束标记：<dl</dl>

标题标记：<dt></dt>

内容标记：<dd></dd>

（5）文本标记

一.段落标记：p 开始结束标记：<p></p>

二标题标记： <h1></h1>--<h6></h6>

三.内联标记

粗体标记：<b></b> | <strong></strong>

斜体标记：<i></i> | <em></em>

三.javaSprict：动态效果（暂时不细讲）

一.镶嵌:`<p>段落</p>`

二.内置属性：`<p align="center">段落</p>`

三.封闭性：成对出现：`<p></p>` 单独：`<img src="">`

二.开始结束标记：`<html></html>`

Ⅰ：`<head></head>`

Ⅱ：`<body></body>`

三.`<div>包含元素</div>`

二.`<span></span>`

开始结束标记：`<ul></ul>`

列表选项标记：`<li></li>`

内置属性：`type=circle | disc | square`

例子：`<li type=circle></li>`

开始结束标记：`<ol</ol>`

列表选项表标记：`<li></li>`

开始结束标记：`<dl</dl>`

标题标记：`<dt></dt>`

内容标记：`<dd></dd>`

一.段落标记：`p` 开始结束标记：`<p></p>`

二标题标记： `<h1></h1>--<h6></h6>`

粗体标记：`<b></b> | <strong></strong>`

斜体标记：`<i></i> | <em></em>`

下划线标记：`<u></u>`

上标：`<sup></sup>`

下标：`<sub></sub>`

Ⅰ格式：`<a href="目标地址">热点</a`>

Ⅱ内置属性：`target target=_self | target=_blank`

壹：从外向内：`test1/test2/a.thml`

Ⅰ声明锚点：`<p id="锚点名称">热点</p>`

Ⅱ本页面访问锚点：`<a href="#锚点名称">热点</a>`

Ⅲ第三方页面访问锚点：`<a href="页面名称#锚点名称">热点</a>`

Ⅰ访问电子邮件：`<a href="mailto: ">热点1</a>`

Ⅱ访问手机号：`<a href="tel: ">热点2</a>`

Ⅲ访问短信：`<a href="sms: ">热点3</a>`

Ⅰ格式：`<img src="目标路径/文件名"/>`

Ⅰ开始结束标记：`<form></form>`

get：字符串不超过256 安全性不高

post:数据块大小不限制安全性高

文本框：`<input type="text" name="n1"/>`

密码框：`<input type="password" name="n1"/>`

隐藏框：`<input type="hidden" name="n1"/>`

内置属性：`maxlength` 定义输入最大字符个数

内置属性：`placeholder` 提示信息

单选按钮：`<input type="radio" name="n1"/>`实现单选效果，必须name保持一致

复选框：`<input type="checkbox" name="n1"/>`可以选择多个

格式：`<input type="file"/>`

内置属性：accept定义显示文件的格式`<input type="file" accept="image/gif,image/jpeg"/>`

内置属性：上传多个文件multiple,`<inputtype="file"mutiple/>`

普通按钮：`<iput type="button" value="普通"/>`

提交按钮：`<input type="submit"/>`

重置按钮:`<input type="reset"/>`

图片按钮:`<input type="imge"src="路径/文件"width="300px" height="200px">`

其他按钮：`<button type="submit | reset | button">按钮</button>`

开始结束标记：`<select></select>`

选项标记：`<option></option>`

内置属性：selected `<option selected>选项一</option>`

开始结束标记：`<textarea></textarea>`多行显示文本信息

开始结束标记：`<label></label>`

开始结束标记：`<fieldset></fieldset>`

标题：`<lengend>标题</lengend>`