W3C -----> World Wide Web Consortium (万维网联盟) “中立性技术标准机构”

W3C的标准包括：

结构化标准语言：HTML 、XML
表现标准语言： CSS
行为标准： DOM 、ECMAScript

HTML、CSS、JS俗称前端三剑客，其作用：

HTML：将内容进行结构化组织；
CSS：负责页面的布局，各个区域、元素的样式；
JS：动态的，响应某个事件，通过修改BOM（浏览器对象模型）和DOM（文本对象模型）对象（HTML/CSS），进行修改用户看到的内容。

然而背后默默工作的是浏览器，作为开发者只负责提供内容，那么如何处理内容就是浏览器来完成的。

浏览器工作：

通过URL，找到某一个HTML页面，通过解析HTML的内容，进一步加载其他资源：例如：<img src=" ">、<link href =" ">、<script src=" "> 等

多媒体、CSS、JS资源

由浏览器负责把HTML结构化成DOM树，运行JS，把CSS根据规则，应用到各个元素上，最后渲染出用户看到的界面。

- HTML篇 -

HTML基本结构

HTML语言不是编程语言，而是一种标记语言（超文本标记语言） --->用于描述网页。

HTML代码是有“标签”构成（即HTML使用一套标签来描述网页）。

HTML文档（web页面）包含HTML标签和文本内容。

大部分的标签有开始标签和结束标签；但是有少数是单标签（即是有开始标签没结束标签）。

<开始标签> 内容 <结束标签>

HTML元素

以开始标签起，以结束标签结束。

元素内容即是开始标签与结束标签之间的内容。

某些HTML元素具有空内容（即没有内容的HTML元素）。

标签对大小写不敏感但是推荐使用小写的！

在开始标签中，可能会带有“属性” id属性相当于给这个标签设置了一个唯一的标识符（即身份证

号）。

<!DOCTYPE html>    <!-- 声明了文档的类型，有助于在浏览器中正确的显示网页。   <!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!doctype HTML>  都是可以的-->
<html lang="en">       <!--  html是页面的根元素-->
<head><!--在head中写页面的属性--><meta charset="UTF-8"><title>XXXXXX</title>   <!--页面的标题-->
</head>
<body><!--在body中写页面上展示的内容--></body>
</html><!-- 按照Ctrl + / 可以快速进行注释和取消注释>

HTML属性

是为HTML元素提供的附加信息；

一般描述与开始标签之内；

属性值应该永远包括在引号内；

标签层次结构

父子关系
兄弟关系

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML</title>
</head>
<body></body>
</html>

<html>是<head>和<body>的父标签；
<head>和<body>是兄弟关系；
<head>是<title>的父标签；

标签之间关系构成了一个DOM（文本对象模型）树。

快速生成html框架

直接输入！，然后按Tab键，就可以自动生成代码主体框架。

标题标签

最大最小

水平线标签

在html中使用<hr>标签即可生成一个水平线。

关于空格

无论使用多少个空格，HTML解释器会将连续出现的空格字符减少成为一个单独的空格符；

&nbsp ; ---->代表一个空格

<a>标签

定义HTML中的标签；也叫anchor（锚点）；

<a href="#">xxx</a> "#"代表空标签；

锚链接的创建：

1.需要一个锚标记
<a name="top">顶部</a>    <!--在最上面-->
2.创建跳转到锚标记的链接
<a href="#top">回到顶部</a>   <!--点击"回到顶部"跳转到锚标记处-->

功能性链接：

<a href="mailto: 放一个地址  ">点击联系我</a>
点击“点击联系我”就会跳转到“放一个地址”的地方。

<target> 定义被链接的在何处显示（新的窗口还是原窗口中）

例如：

<a href="一个链接" target=" A " >xxx</a>

若 A=_blank 则这个链接将在新的网页被访问

若A=_self 则这个链接将在自己的网页被访问

<img>标签单标签

定义HTML中的图像；

使用<img>标签来为网页添加图片。

<img src="此处放一个图片的具体位置（address）" alt="XXXX" height="100px" width="100px">alt : 如果图片加载失败的话 那么就会显示alt中的内容来提示使用网页的人。

关于<code>标签

用于计算机源代码or其他机器可以阅读文本内容的。

不会作为html语言被浏览器处理，被认为是文本而独立显示成带尖括号的源码形式。

一些其他标签

<em>xxx</em> 来标记要强调的内容,默认是斜体

<strong> 粗体

<big>xxx</big> 放大字体

<small>xxx</small> 缩小字体

<br> 换行

<b>xxx</b> 定义粗体文本

<sub>xxx</sub> 下标

<sup>xxx</sup> 上标

<i>xxx</i> (在文本中)斜体

&lt； <

&gt； >

&copy； © （版权符合）

<kbd>xxx</kbd> 表示文本是从键盘上键入的

<tt>xxx</tt> 呈现打字机or文本等宽的效果

<smap>xxx</smap> 定义样本文本

<var>xxx</var> 表变量名称

<address>xxx</address> 定义文档or文章的作者or拥有者联系信息

文本呈现斜体；

若<address>在<body>内，则代表的是文档联系信息；

若<address>在<body>外，则代表的是文章联系信息；

<abbr></abbr> 缩写

<acronym></acronym> 首字母缩写

例如：
<abbr title = "nihao" > nh  is  language.</abbr>   //缩写；<acronym title = "Hello World"> HW </acronym>  //首字母缩写
在某些浏览器中，把鼠标移至缩略字上，title可以显示完整的表达内容。

<bdo dir="ltr/rtl">xxx</bdo> 定义文字方向由dir内决定

<bdo dir="ltr">ABC。</dbo> ----->ABC。

<bdo dir="rtl">ABC。</dbo> ----->。CBA

<q></q> 短的引用

<blockquote></blockquote> 长的引用

例如：

<p>这是一件:<q>好事</q> --------> 这是一件:“好事”

<del>xxx</del> 删除文本

<ins>xxxx</ins> 插入字

二者配合使用！！！

例如：

<p>这里一共有<del>二十</del><ins>十二</ins>本书。</p>

这里一共有二十（二十中间带有横杠）十二（十二下面带有横杠）本书。

<cite> 标定作品(例如：书、歌、电影、绘画等)标题. 人名不属于作品标题。

<dfn> 标记那些对特殊术语or短语的定义。（是一个内嵌元素）

列表：分为有序列表和无序列表以及自定义列表

有序列表： order list

<ol>

</ol>

无序列表: unorder list (应用范围：网页导航、列表栏)

<ul>

</ul>

自定义列表: (应用范围：网页底部)

<dl>

<li>XXXX</li> (列表名称)

<li>XXXX</li> (列表内容)

</dl>

为什么要用表格？

因为表格简单明了、结构稳定

基本的一些结构：

行（tr）、列（td）、跨行（rowspan）、跨列（colspan）；

<video src =" " controls="controls" autoplay></video> 视频

<audio src =" " controls="controls" autoplay></audio> 音频

// autoplay 打开时自动播发

// controls="controls" 控制播发

页面结构分析

header 标题头部区域内容（用于页面or页面中的一块区域）
footer 标记脚部区域内容（用于整个页面or页面中的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容or应用（常用语侧边栏）
nav 导航类辅助内容

iframe 内联框架

<iframe src=" " frameborder =" 0(无)/1(有边框默认是1) " ></iframe>

frameborder 规定是否显示框架周围的边框；

网页内套网页：

<iframe src=" " name="框架标识名"></iframe>

<a href="链接" target="放上面的框架标识名">点击跳转</a>

表单语法

<from method="post" action= "放网站/请求处理的地址"></from>

method的常用值分为get/post 规定如何发送表单数据

post方式提交：信息不显示可传大文件安全

get方式提交：我们在url中可以看到提交的信息不可传大文件不安全但是高效

type 指定元素类型{ text（默认的）、password、checkbox(多选框)、radio、submit、reset、file、hidden、image、button(按钮)}

name 指定表单元元素的名称

value 元素的初始值当type为radio时，必须指定一个值

size 指定表单元素的初始宽度。当type为text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。

maxlength type为text或者password时，输入的最大字符数

checked type为radio或者checkbox时，指定按钮是否是被选中

下拉框：

<p> 下拉框：

<select name="列表名称">

<option value="选项的值加 selected(默认选择)">中国</option>

<option value="选项的值加 selected(默认选择)">美国</option>

</select>

</p>

文本域：

<p> 反馈：

<textarea name = "textarea" cols="xx"(显示多少列) rows="xx" (显示行数)>

文本内容

</textarea>

</p>

邮件验证

<p>

<input type = "email " name="email">

</p>

URL验证

<p>

<input type = "URL " name="URL">

</p>

滑块 //step 步长数字间隔中可以添加

<p> 滑块：

<input type="range" name="XXX" min = 0 max =100 step="2">

</p>

搜索

<p> 搜索：

<input type="search" name="search" >

</p>

按钮：

<p> 按钮：

<input type="button" name="xxxx" value="点击变长"> //普通按钮

<input type="image" name="xxxx" value="点击变长"> //图像按钮

<input type="submit" name="xxxx" value="点击变长"> //提交按钮

<input type="rest" name="xxxx" value="点击变长"> //重置按钮

</p>

HTML、CSS、JS(JAVA Sprict)相关推荐

智慧家安监控系统——用Java + html、css、js实现
目录系统背景系统介绍前端 SVG 监控情况弹出窗口图表后端表格处理 Servlet类数据处理类前后端的数据交互内容及设计采用Servlet技术采用Ajax技术前后端数据交互操作 ...
js和html以及css的区别,html、css、js中的区别与关系
html.css.js中的区别与关系 2020/04/26 作者: 互盟股份今天小盟给大家分享的是html.css.js中的区别与关系,相信很多人都不太了解,为了让大家更加了解html.css.js ...
js mysql java_Java、mysql、html、css、js 注释大小写
MySQL服务器支持3种注释风格: · 从'#'字符从行尾. · 从'-- '序列到行尾.请注意'-- '(双破折号)注释风格要求第2个破折号后面至少跟一个空格符(例如 ...
html超链接点不了_HTML、CSS、JS都有哪些区别？不看必悔
划重点 HTML.CSS.及JS的区别有哪些? 在日常学习中,html,css和js我们都学过,起初分不清这三者的区别和联系,随着知识的增长,有了一些体会.看一下这三项技术都是什么,能干什么? web ...
html css jsp 数据库,html、css、js、jsp的区别是什么？
html.css.js.jsp的区别是什么? HTML(Hypertext Markup Language)是文本标记语言,它是静态页面.是一种解释性语言,所谓解释性语言就是指可以在浏览器上显示出来, ...
html、css、js（javaWEB开发）
1.html.css html 超文本标记语言 (xml可拓展标记语言) 1.模板: !DOCTYPE声明+html根标签(根标签包括head头部标签和body身体标签 (头部标签可以定义meta编码 ...
JavaEE学习第一天（HTML、CSS、js）
HTML知识点 1.开发项目的简单图解 2.HTML的作用加粗样式  Web浏览器的作用是读取html文档,并以网页的形式显示它们.  浏览器不会显示html标签,而是使用标签来解释页面上的内容. ...
H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片点击图片查看大图,点击图片右上角"×"删除此图点击 ...
前端面试题 HTML、CSS、JS、Vue、Es6
第一部分 HTML&CSS整理答案什么是HTML5? 答:HTML5是最新的HTML标准. 注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等.... 设计目的 H ...

HTML、CSS、JS(JAVA Sprict)

- HTML篇 -

HTML基本结构

标签层次结构

快速生成html框架

标题标签

水平线标签

关于空格

<a>标签

<img>标签单标签

关于<code>标签

一些其他标签

页面结构分析

表单语法

HTML、CSS、JS(JAVA Sprict)相关推荐

最新文章

热门文章

HTML、CSS、JS(JAVA Sprict)

- HTML篇 -

HTML基本结构

标签层次结构

快速生成html框架

标题标签

水平线标签

关于空格

<a>标签

<img>标签 单标签

关于<code>标签

一些其他标签

页面结构分析

表单语法

HTML、CSS、JS(JAVA Sprict)相关推荐

最新文章

热门文章

<img>标签单标签