产品中心
私有化部署
下载客户端
模板知识库
建议反馈
帮助中心
购买
登录/注册
HTML
作者:州爱殇
|
0浏览
2025-04-07 17:37:33
下载
使用模板
已被用4次
100%
Shift + Enter 文字换行
X
HTML
一:概念
1.网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
2.网页:由前端人员书写 使用 HTML(超文本标记语言) 如文件图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html),然后浏览器打开,就能看到了网页.
3.HTML: 是用来描述网页的一种 超文本标记语言 (Hyper Text Markup Language) 。标记语言 (markup language)是一套标记标签 (markup tag)不是一种编程语言.
4.HTML 标签:
标记标签通常被称为 HTML 标签 (HTML tag)。
是由尖括号包围的关键词(eg: ),
通常是成对出现的,
比如
和
标签对中的
第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
元素的内容是开始标签与结束标签之间的内容
1.标签关系
并列关系
包含关系
2.标签分类
单标签
殊的标签必须是单个标签(极少情况),例如
,我们称为单标签。
双标签
成对出现的,例如 和 ,我们称为双标签
5.HTML 元素:"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
6.HTML 属性(又叫HTML标签属性):是 HTML 元素提供的附加信息,通常出现在 HTML 标签的开始标签中,用于定义元素的行为、样式、内容或其他特性。属性总是以 name="value" 的形式写在标签内,可以存在多个属性,name 是属性的名称,value 是属性的值。
语法:
<标签名 属性名1=“属性值” 属性名2=“属性值”>标签名>
7.HTML区块
区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例:
,
,
,
内联元素
内联元素在显示时通常不会以新行开始。
实例:
,
,
,
HTML
元素
HTML
元素是块级元素,它可用于组合其他 HTML 元素的容器。
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,
元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用
元素进行文档布局不是表格的正确用法。
元素的作用是显示表格化的数据。
HTML
元素
HTML
元素是内联元素,可用作文本的容器
元素也没有特定的含义。
当与 CSS 一同使用时,
元素可用于为部分文本设置样式属性。
8.前端开发:是使用 :HTML、CSS、JavaScript以及衍生出的各种框架技术等 创建Web页面或APP、小程序等前端页面呈现给用户的过程。
HTML5 HTML5+CSS3+JavaScript
H5 简称
Web前端 H5别名
大前端 跨平台、跨设备、万物互联(未来10年必然发展趋势)
Web全栈 前端、后端、数据库、服务器
二:基础
1.创建
鼠标右键->新建文本文件->更改后缀名.html (windows为例)
创建文件所需要注意事项
- 可以以中文命名,但是不允许使用中文。
- 不允许使用特殊字符。
- HTML文件名推荐使用小写。
- 创建完HTML文件后依然是文本文件格式,
那么需要将系统中隐藏已知文件类型扩展名勾选掉。
2.网页基本结构(HTML主体结构):
Document
我的第一个标题
声明为 HTML5 文档
元素是 HTML 页面的根元素。lang=“en告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示. en定义语言为英语 zh-CN定义语言为中文
元素包含了文档的元(meta)数据,如
定义网页编码格式为 utf-8。
元素描述了文档的标题
元素包含了可见的页面内容
3.HTML颜色值
1. 浏览器都支持颜色名称集合,颜色值是一个关键字或者是一个RGB格式的数字,在网页中都用的很多。
2. 使用英文单词作为颜色值:
- red 红色 | green 绿色 | blue 蓝色 | pink 粉色 | purple 紫色等。
3. 六位的十六进制颜色值:
- #ff0000 简写:#f00
- 前两位表示红色,中间两位表示绿色,最后两位表示蓝色。
4.注释:
方便查找、比对、方便其他程序员快手了解你得代码、方便以后自己对自己代码理解和修改。
- 注释的内容不会被浏览器解析出来。
- 格式:
5.HTML的代码格式
任何回车或者空格在源代码中都不起作用,
所以在编写HTML代码时,都可以使用回车或者空格
进行代码排版,这样可以使代码清晰便于团队合作,
必须保持严格的缩进规则,缩进以tab键为准。
标签是大小写不敏感的,与表示意思一样。
注意:HTML标签推荐使用小写
HTML属性
全局属性
id:为元素指定唯一的标识符。
This is the header
class:为元素指定一个或多个类名,用于 CSS 或 JavaScript 选择。
This is a highlighted text.
style:用于直接在元素上应用 CSS 样式。
This is a styled paragraph.
title:为元素提供额外的提示信息,通常在鼠标悬停时显示。
HTML
data-*:用于存储自定义数据,通常通过 JavaScript 访问。
User Info
特定元素的属性
href(用于
和
元素):指定链接的目标 URL。
Visit Example
src(用于
, 加载JS脚本
style
加载CSS样式
格表:四
主要作用:
1.表格主要用于显示、展示结构化数据数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
2.表格不是用来布局页面的,而是用来展示数据的。
定义表格
定义表格的表头
定义表格的行,必须嵌套在
标签中
定义表格单元,必须嵌套在
标签中
定义表格标题
定义表格的页眉,表头单元格也是单元格,常用于 表格第一行突出重要性,表头单元格里面的文字会加 粗居中
定义表格的主体
定义表格的页脚
定义表格列的组
定义用于表格列的属性
列表标签
有序列表
有序列表也是一列项目,
列表项目使用数字进行标记。
有序列表始于
标签。
每个列表项始于
标签。
列表项使用数字来标记。
无序列表
无序列表是一个项目的列表,
此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以
标签开始。
每个自定义列表项以
开始。
每个自定义列表项的定义以
开始。
子主题2
表单:五
为什么需要表单:
使用表单目的是为了收集用户信息。
在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
表单的组成:
在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。
表单域:
表单域是一个包含表单元素的区域。
在 HTML 标签中,
标签用于定义表单域,以实现用户信息的收集和传递。
用于为用户输入创建HTML表单,把表单元素提交给服务器
实现代码:
各种表单元素控件
为用户定义需要使用的表单项
普通文本域
密码域
单选
复选
为input元素定义标注(绑定元素)
文件上传
提交按钮
用图片代替提交按钮
重置按钮
隐藏域
按钮
提交按钮
提交按钮
按钮
多行文本输入域
下拉列表
为下拉列表定义列表项
将表单内的相关元素分组
为fieldset定义标题
为下拉列表定义分组
定义可选数据列表
标签
标签为 input 元素定义标注(标签)。
标签用于绑定一个表单元素, 当点击
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法:
男
核心:
标签的 for 属性应当与相关元素的 id 属性相同。
签标架框:六
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。
代替body标签定义框架页(H5取消)
定义frameset标签中每个框架页的内容
在页面中开一块空间连接一个子页面
出于有些网页不希望被嵌套, 响应头中有一选项
X-Frame-Options
他有三个可配置值
DENY:表示该网站页面不允许被嵌套,即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN:表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri:表示该页面可以在指定来源页面中进行嵌套展示。
HTML全局属性
contentEditable 内容可编辑属性
designMode 页面可编辑属性
拓展
浏览器
IE
火狐
谷歌
苹果
欧朋
目前国内一般浏览器都会采用 Webkit/Blink 内核,如 360、UC、QQ、搜狗等。
web标准
由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
为什么需要Web标准:遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:
1.让 Web 的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度。
web标准的构成:
主要包括 《结构Structure》 、《表现(Presentation)》和《行为(Behavior)》三个方面。
Web 标准提出的最佳体验方案:**结构、样式、行为相分离
字符集
1.字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
2.在标签内,可以通过
标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
3.
4.charset 常用的值有:GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符.
5.注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用“UTF-8”编码,尽量统一写成标准的 "UTF-8",不要写成 "utf8" 或 "UTF8"。
特殊字符
通用声明
HTML5
HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
很多国外网站的 和 之间都会有一段注释,如:
该代码作用于 css,来写一些针对 IE 各版本的样式差异。
先判断用户用的哪个 IE 版本,然后在标签上加上该版本的 class,这样可以方便 hack。
css 文件是这样写的:
.ie6 xxx {};
.ie7 xxx {};
这是目前最好的 hack 方式之一。
参考文档
推荐的网址:
百度: http://www.baidu.com
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
开发工具
VScode
webstorm
Hbuilder
DW
Subline
知识点
1.href与src的区别
href 是 Hypertext Reference 的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:
浏览器会识别该文档为 css 文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用 link,而不采用 @import 加载 css 的原因。
src 是 source 的缩写,src 的内容是页面必不可少的一部分,是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。例如:
当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之,src 用于替换当前元素;href 用于在当前文档和引用资源之间建立联系。
2.相对路径的写法
./:代表文件所在的目录(可以省略不写)如果写成image/background就相当于是在html文件下找image文件夹,当然是找不到的
../:代表文件所在的父级目录
../../:代表文件所在的父级目录的父级目录
/:代表文件所在的根目录
实战
利用表格做一个课程表
利用表格完成注册页面练习
子主题3
总结:
1.HTML不是语言是标签,最终学习要做的是根据不同分类记住所有的常用标签,也就是HTML元素
2.表格标签和表单form 也属于标签,因为比较重要单独占一个分类
3.动手练习请参考https://www.runoob.com/html/html-examples.html 手动敲一遍代码
0
0
分享
查看详情
模板简介
HTML知识点总结
HTML
HTML5
举报/反馈
猜你喜欢
查看
使用
小学生
查看
使用
官方模板
查看
使用
西樱星星
查看
使用
MeantToBe
查看
使用
夜晚的猫
查看
使用
官方模板
查看
使用
官方模板
免费
查看
使用
官方模板
免费
查看
使用
官方模板
免费
查看
使用
magickerr
免费
查看
使用
magickerr
免费
查看
使用
ㅤ
免费
相关文章
互联网思维导图分享:互联网营销思维
2021-10-04
职场思维导图分享:撰写商业计划书
2021-10-03
企业组织架构图怎么画?组织结构图分享
2021-10-02
互联网思维导图案例整理:UI文案设计的误区
2021-09-08
互联网思维导图案例整理:可用性测试方法
2021-09-07
营销思维导图案例整理:市场营销概念
2021-09-06
运营思维导图案例整理:运营知识体系
2021-09-05
互联网公司组织架构图-组织结构案例整理
2021-09-04
互联网产品经理思维导图案例整理:儿童平衡车产品分析
2021-09-03
互联网思维导图整理之互联网九大思维
2021-09-02
网络营销思维导图之网络推广方法
2021-09-01
产品经理思维导图案例整理:用户研究方法思维导图
2021-08-31
网络营销思维导图案例整理:微信社群运营
2021-08-30
运营必看的思维导图合集!运营技巧干货整理
2021-06-20
市场营销必看的思维导图合集!营销干货整理
2021-06-19
如何制作企业组织架构图?常用组织结构模板分享
2021-06-16