HTML、 CSS、 JavaScript三者的关系
HTML、 CSS、 JavaScript三者的关系
HTML、 CSS、 JavaScript三者的关系
网页主要由三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）
HTML —— 结构， 决定网页的结构和内容（ “是什么”）
CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
一、 HTML语言
1.1什么是HTML语言（ HTML概述）
英文全称： Hyper Text Markup Language
中文全称： 超文本标记语言
HTML 语言是制作网页的最基本语言， 并且只能通过web浏览器显示出来。
Hyper（ 超） ：
用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。
Text（ 文本） ：
HTML是一种文本解释性的程序语言， 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。
Markup（ 标记） ：
HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。
1.2 HTML文档结构
HTML文档一般由两部分组成：
1. 文档所要表达的内容信息（ 文字、 图片等） ；
2. 一系列的HTML标签；
1.3 HTML标签
1.3.1 什么是HTML标签
1. HTML标签是用 <> 所括住的指令， 主要分为：
单标签： <起始标签/>
双标签： <起始标签></结束标签>
例如：
<br/>
<div></div>
2. 通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。
<div>标签内容</div>
3. 在元素的起始标签中， 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。
<div 属性名="属性值"></div>
例如：
<div class="wrap" id="wrap"></div>
4. 每一对双标签之间可以嵌套， 但不能交叉。
正确示例：
<div>
<p></p>
</div>
错误示例：
<div>
<p>
</div>
</p>
1.4 编码器
1.4.1 WebStorm源码主体标签含义
<!DOCTYPE> ：
是一个声明不是 HTML 标签； 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。
<html>：
<html>是文档标识符， 它是成对出现的， 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面， 明确地表示文档是以超文本标识语
言（ html)编写的。 该标签不带有任何的属性。
<head>：
<head>标签用于定义文档的头部， 它是所有头部元素的容器。 <head> 中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。
<meta>：
<meta>标签位于文档的头部， 用于定义文件信息， 对网页文件进行说明。 其中name属性主要用于描述网页， 与之对应的属性值为content， content中
的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<body>：
<body>标签用于定义文档的主体， 即在浏览器上看到的网页内容。
1.5 HTML标签的使用
1. HTML注释
注释内容可插入文本中任何位置， 其内容不在网页中显示， 只在源码文档中供开发者备注使用。
<!--注释内容--> 方法适用于文档主体部分
//注释内容
/*注释内容*/ 方法适用于文档引用标签部分
2. 特殊字符
在 HTML 代码中直接输入一些特殊字符是没有效果的， 需要用专有的代码标记。
<!-- 空格 -->
< <!-- 左尖括号<或小于号 -->
> <!-- 右尖括号>或大于号 -->
© <!-- 版权符号© -->
® <!-- 已注册符号® -->
& <!-- 表示and符号& -->
— <!-- 长破折号 -->
3. div块标签
<div>这是一个div块， 通常用于布局</div>
4. 正文标题标签
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>
注意： 只有h1~h6 六个标签， 没有h7...
5. 文本节标签
<span>这是一个文本节</span>
6. 强调标签
<strong>加强语气</strong>
7. 图片标签
<img src="图片地址"/>
8. 段落标签
<p>这是一个段落</p>
9. 超级链接标签
<a href="链接地址">超链接， 打开新窗口</a>
10. 文本域
<textarea>文本内容</textarea>
11. 无序列表标签
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
12. 有序列表标签
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
13. 自定义列表
<dl>
<dt>自定义列表项</dt>
<dd>自定义列表项的定义</dd>
</dl>
14. table表格
<table>
<tr>
<td>娱乐项目</td>
<td>项目支出</td>
</tr>
<tr>
<td>聚餐</td>
<td>200元</td>
</tr>
</table>
15. form表单
<form>
表单输入控件
</form>
16. 控制标签
<label>控制标签， 平时无效果， 用作标记使用</label>
17. 表单输入控件
<input type="text"> <!-- 文本 -->
<input type="password"> <!-- 密码 -->
<input type="radio"> <!-- 单选框 -->
<input type="button" value="点击"> <!-- 普通按钮 -->
<input type="checkbox"> <!-- 复选框 -->
<input type="submit"> <!-- 提交按钮 -->
<input type="reset"> <!-- 重置按钮 -->
<input type="file"> <!-- 文件上传 -->
button和submit的区别：
button 就是一个普通按钮， 没有任何功能。 而 submit 在用户点击后会自动提交 form 表单。
18. 下拉列表
<select>
<option>川菜</option>
<option>粤菜</option>
<option>北方菜</option>
<option>上海菜</option>
<option>西餐</option>
<option>泰国菜</option>
</select>
19. 内联框架
<iframe src="需要显示的网页链接地址"></iframe>
HTML、 CSS、 JavaScript三者的关系相关推荐
- html,css,javascript之间的关系是什么？各是负责哪方面工作的？
html,css,javascript之间的关系是什么?各是负责哪方面工作的? html是xml的前身,你说的html是指单纯的静态页面,也就是写什么就是什么. css就是美化html,女人再漂亮也要 ...
- html+css+javascript之间的关系与作用
三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...
- html+css+javascript 之间的关系与作用
三者间的关系 一个基本的网站包含很多个网页,一个网页由 html, css 和 javascript 组成. html 是主体,装载各种 dom 元素:css 用来装饰 dom 元素:javascri ...
- html前世今生以及与css和js的关系
现在你使用的html是哪个版本,不管你使用的哪个,现在最流行的html版本是html5,简称"h5",html发展到html5,已经不单单指的是纯碎的html了,所以我们平常所听到 ...
- HTML、CSS、Javascript三者关系
HTML用于控制网页的结构,CSS用于控制网页的外观,JavaScript控制的是网页的行为. 很多同学可能不太清晰的了解这三者的关系. HTML-----超文本标记语言,HTML是一门描述性语言. ...
- 通过构建城市来解释HTML，CSS和JavaScript之间的关系
by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 通过构建城市来解释HTML,CSS和JavaScript之间的关系 (The relationship betw ...
- html与css与php的关系,HTML、PHP、CSS、JS之间的关系
23:02:06 2019-08-05 自己要搭建网站 虽然可以下载大佬的界面 但至少要懂一点web开发的知识 我现在感觉像个憨憨 啥都不明白 HTML负责放你需要显示的内容, 而PHP可以输出可变化 ...
- 前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
- app登录界面背景 css_计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
最新文章
- SSL 1055——能量项链_DP
- iOS项目之同时点击多个按钮解决方案
- 健忘族的大爱，机器人管家Watch Bot提醒你不要丢三落四
- rhel 8.2不识别unicode_基于tensorflow 实现端到端的OCR：二代身份证号识别
- UPX 加壳工具:The Ultimate Packer for eXecutables
- 确定不进来看看？分享一个插件，让敲代码不再枯燥，activate-power-mode
- Scala 语法基础
- C++STL泛型编程基础知识讲解--------2015年2月3日
- Linux下配置Hadoop全分布式环境
- Atitit GRASP(General Responsibility Assignment Software Patterns)，中文名称为“通用职责分配软件模式”
- 数学建模：现代优化算法之粒子群算法
- spark大数据技术与应用 实训
- HighCharts一个基于JavaScript的图表插件
- VS同一个解决方案中不同项目相互引用问题
- APP登录功能的Java服务端开发
- 转：elasticsearch下载太慢在国内, 我把包放到了云盘上,还有kibana,logstash.有需要自取,持续更新版本
- 简单的java程序代码？
- RAR压缩包如何加密，忘记密码如何找回？
- selenium 处理多浏览器测试
- centos usb转网口_如何将USB接口打印机转换成RJ45网口并安装到打印服务器上共享使用？...