HTML 结构 1.1 HTML 文件基本结构 1.2 VsCode 中 使用 HTML 的快捷键 2. HTML 结构 1.1 HTML 文件基本结构 <html> <head> <title>第一个html程序</title> </head> <body> </body> </html> html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性. body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题 DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件. <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”. /td>
一、课程介绍说明
1) HTML语言概念介绍
2) HTML语言代码编写
二、课程梳理回顾
1) 网络安全课程介绍 3个月时间
2) 网络安全法律法规
3) 网络安全基础知识 名词介绍
4) 网络安全病毒编写 bat批处理文件
5) 网络安全基础防护
三、HTML语言概念介绍
为了编写网页信息
1) HTML代码语言作用
2) HTML代码基本编写方法
3) HTML代码编写练习
windows系统特点: 识别文件类型时,会根据文件扩展名称进行识别
四、 HTML语言代码编写方法:
4.1 HTML元素概念
HTML元素就是预定义好的一些标签,不同标签有不同功能作用 (参考自维基百科)
2、HTML元素、HTML标签
HTML元素由一个开始的HTML标签和结束的HTML标签组成。 HTML元素
(上面已经提过)
一个HTML元素是HTML文件的一个基本组成单元,一个HTML文档由多个HTML元素构成。
用HTML元素写一个网页,就好比用乐高零件组合成一个完整的模型。 更多HTML属性
HTML事件
HTML 事件是发生在 HTML 元素上的事情。我们可以对事件做出回应。如,一个按钮被点击,这时会触发一个点击事件。 关系
简单来说,HTML元素就是HTML文档上的基本单位,HTML属性为这个HTML元素添加附加信息,HTML事件为这个元素提供一系列动作。
4、H5是什么,跟HTML有什么关系? H5是HTML5的简称,HTML5是HTML最新的修订版本。(它的上一个版本是1999年所制定的HTML 4.01。) 语言就是一种交流工具,HTML 是用户与浏览器之间交互工具。
简单说,HTML 是由浏览器解析执行的,它不会将 HTML 标签展示出来,而是会解析 HTML 标签,以特定效果展示出来。 Syntax
HTML 可以直接使用文本编辑器来编写
HTML 文件它的后缀名是 .htm 或 .html
<html> 标签它代表当前页面是一个 HTML
<head> 标签中可以声明 HTML 页面的相关信息 /foot.html"></frame>
</frameset>
</html>
top.html
<! 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点 DOM 方法 & 属性
HTML DOM 方法是可以在节点(HTML 元素)上执行的动作。
HTML DOM 属性是可以在节点(HTML 元素)设置和修改的值。 DOCTYPE html> 浏览器使用的规范
<head> 网页头
<body> 主体部分
<meta> 元数据
meta的name属性(了解)
Keyword(关键字) 为搜索引擎提供的关键字列表 --
目标位置:
demo10.html
-->
<! --
demo09.html
-->
跳转到demo10的底部
6.3 功能链接
<a DOCTYPE html>
<html>
<head>
</head>
<body>
(我也是在那学习的)
介绍
HTML标签也叫HTML元素,是HTML语言中的基本单位,一个HTML页面(网页)由多个 HTML标签构成。
也就是说,我们可以用HTML来编写一个网页。 DOCTYPE>
用于声明
声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。如:
HTML 5 :
<! DOCTYPE html>
HTML 4.01 Strict :
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
告知浏览器其自身是一个 是 HTML 文档中最外层的元素,是所有其他 HTML 元素(除了 <!DOCTYPE>)的容器。
<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。 静态资源:
HTML:用于搭建基础网页,展示页面的内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,让页面有一些动态的效果
HTML
概念:是最基础的网页开发语言
Hyper <标签名称> 如 html,xml
标记语言不是编程语言
快速入门:
语法:
html文档后缀名 .html 或者 .htm
标签分为
围堵标签:有开始标签和结束标签。 > 直接创建html文件,直接粘贴进去就能用,不能用随便骂。
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box 'green';
}
box5.onclick = function(){
box.style.backgroundColor = 'transparent';
}
</script>
</html >
开始注释了,代码浓缩在一起了,不难理解
html基本标签这块儿就不说了,先说body下的文本样式吧
<body>
500:服务器内部错误
四、HTML
HTML又称超文本标记语言。
4.1注释的方式
我们通常使用注释来划分区域如:
<! --侧边栏结束-->
4.2HTML的文档结构
HTML的语法格式如下:
<标签名 属性名1="属性值" 属性名2="属性值" ...>
<! --输出内容-->
</标签名>
<html>是文档的开始标记和结束的标记。
<head></head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。 </html>
对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。 4.3标签的分类
1.HTML的标签分为双标签、自闭合标签两类。
2.html的标签也可分为块级标签和行内标签。
块级标签:独占一行的标签,如h1~h6、p、hr、div等标签。 介绍
HTML元素上的属性,可以在元素中添加附加信息。 DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> DOCTYPE html>
<html lang="en">
<head>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body </body>
</html>
1.9、页面结构分析
? 前端知识真的还是比较有用的。一直要把前端的学习提上日程,因为各种事情各种拖延,写爬虫的时候也是捎带学习前端的东西,还是需要系统的了解下。
All from W3school. 标签
HTML标签是由尖括号包围的关键词比如html,便签通常是成对出现的,比如
和
第一个是开始,第二个标签是结束。
文档=网页
HTML文档描述网页,包含HTML标签和纯文本。 HTML 图像
HTML图像是通过img标签进行定义的。 HTML 元素
HTML元素指的是从开始标签到结束标签的所有代码。
HTML 属性
HTML标签可以拥有属性。属性提供了有关HTML元素的更多信息。
属性总是以名称/值对的形式出现。 听说上面的标题会居中 下面是引用: 初识前端
HTML简介历史
HTML(Hyper Text Markup Language)超文本标记语言,它不同于编程语言
超文本就是超过纯文本的范畴,例如描述文本的颜色、大小、字体等信息,或使用图片 前端开发
早期前端开发使用网页三剑客: Dreamweaver,Firework,Flash,微软的有Frontpage. 前端工具和框架越来越多,前端开发也不失随便使用什么文本编辑器就可以完成的了,如果使用框架,需要很多工具的配合,配置好一个开发环境非常重要.
硬件发展
最初,网页就是简单的文本,计算机轻松胜任. 众多平台都在思考是否能够以一套架构,解决所有前端问题,使用的技术还是最通用的网页+JS. X-UA-Compatible
让前端代码以最新的模式打开,自动兼容以前的版本. (兼容性问题)
网页文件的扩展名:html或htm
3、HTML文档结构分析
最基本的HTML文档:
<! body>
</body>
</html>
<! DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束标记,是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。 4、HTML标签格式
HTML标签是由尖括号包围的关键字,如<htnl>、 多学一招:maxlength属性可以限制最大输入长度,为了让服务器端接收到输入的数据,表单元素都需要加name属性 表格在网站中应用常用场景通常是金融类的网站,数据做统计,后台管理系统等
1.相关标签
画图说明,table是一个表格的模块,里面有行,光有行不行,里面要有列,在html中不叫列,叫单元格,再有很多行,就组成了表格 实体
导入:有一个需求,要做一个html的教材,例:p标签的语法是
,这样在页面中是看不到的,浏览器把这个标签解析了,现在是不需要的,需要将尖括号替换成浏览器不能解析的字符,且在浏览器中需要看到尖括号的形式 ,这个特殊字符就是实体
实体:替换特殊字符的代码,比如说<
空格:
<:<
>:>
HTML教材:
p标签的语法:<p></p>
效果图
多学一招: HTML概述
第一个HTML页面
创建
在vscode中输入html选择html:5即可
?
结构
!doctype 声明
<! DOCTYPE html>告诉浏览器当前html页面的版本
html基本结构
<html lang="en"> <! -- 表示当前HTML的主体,定义最终在浏览器窗口显示的内容 --> </html>
HTML标签
元素(Element):是用来包含文字、图片或者音视频的内容,一般是由标签和内容组成。 注意:
html标签对大小写不敏感,但W3C组织强制元素名使用小写
开始标签与结束标签
?
?
元素的属性
?
属性名(attribute name):其数量和作用都是 HTML 给定的。 一个 HTML 页面允许引入多个 CSS 文件,多个 CSS 文件的加载顺序按照 HTML 页面引入的顺序进行加载。 前端:什么是前端、技术栈、关注点、边界、开发环境
HTML:DOM 树的概念、基本语法、常用标签、内容划分、语义化
# 前端与 HTML - 笔记
# 前端
# 什么是前端
我认为前端的核心就是与用户的直接交互 ,有屏幕的地方就有前端
前端的要解决的问题主要有:
GUI 人机交互问题
跨终端
使用 web 技术栈
# 前端技术栈
传统意义上的前端开发就是 HTML、CSS、JavaScript 三件套
HTML ,因为作为前端页面,也是要与服务器进行交互的,这其中就少不了网络协议的支撑
由于前端项目的日益复杂化,现代意义上的前端开发,除了三件套的基础外,还少不了前端工程化的支撑,这其中就包括 Node.js、比较流行的前端框架 兼容性
用户体验
# 前端的边界
由于前端的高速发展和日益完善的生态,前端的边界已经被扩展的很广,使用现代前端技术,我们可以:
开发服务端:Node.js
开发客户端:Electron、React-Native ,但需要的数据
<body> 标签存放的是要展示给用户的内容
# DOM 树
由 HTML 标签组成的文档对象模型树,即为 DOM 树
# HTML 语法
HTML 文档由若干 HTML 元素组成, <frameset>:框架集,rows属性设置框架分几行显示,cols属性用来设置框架分几列显示,rows和cols尽量不要同时设置(因为不能及时辨别每个位置的页面) <title >
HTML元素属性, 对指定元素进行扩展功能配置
PS: 编写HTML代码信息时,文件中一定不能出现中文符号信息
4.2 HTML基本标签信息: 基本元素信息
--- 段落标签可以自动换行 实体化介绍
如果想让一些特殊符号信息,直接在页面显示,就需要进行实体化处理
4.5 HTML超链接:
This text
【前端】初识HTML
前端基础:HTML
前端(一)-Html
网页布局-使用h5新标签
<! /article>
</main>
【前端】HTML标签
前端基础-HTML
Hello World
</body>
</html>
标签学习:
文件标签:构成html最基本的标签
html :html文档的根标签
head:头标签。 用于指定html文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
:html5中定义该文档是html文档
文本标签:和文本有关的标签
* 注释:<!前端html换肤
前端之HTML
【前端】HTML属性
HTML前端基础
前端入门学习--HTML
<q>上面说的对,我是引用</q>前端之HTML
前端之HTML内容
前端基础-HTML表单
前端基础-HTML表格
前端基础-HTML实体
前端课程——HTML概述
前端与HTML - 笔记
前端基础-HTML框架