前端HTML基础知识---你只需会这些即可

HTML：

1. HTML：标记语言，HTML文档也叫网页，

2. HTML形式：

<html>

<body>

</body>

</html>

3. HTML5形式：

<html>

<head>

</head>

<body>

</body>

</html>

4. HTML标签：

标题：<h1>~<h6>：从大变小

段落：<p></p>

链接：<a href=”链接地址”></a>

href属性：链接目标；

target属性：何处显示；

name属性：目标“锚”

图像：<img src=”.jpg” width= height= ></img>

空标签：<br/>（强制定义换行）

水平线：<hr/>

注释：

样式：style属性（背景颜色background-color、字体font-family（颜色color和尺寸fond-size）、文本对齐text-align）

格式化：粗体<b>、大号<big>、斜体<i>…

预格式：<pre></pre>，原格式输入

地址：<address>

引用：

短引用（自动添加引号）-> <q></q>；

长引用（自动缩进）-> <blockquote></blockquote>

缩略词：<abbr>

著作标题：<cite>

计算机代码：

键盘输入：<kbd></kbd>

计算机输出示例：<samp></samp>

编程代码示例：<code></code>

数学变量：<var></var>

CSS：

样式定义：<style>

资源引用：<link>

块级：<div>

小块：<span>

字体：<font>

基准字体：<basefont>

居中：<center>

表格：

<table>

<th></th> “表头”

<tr><td></td>…</tr> “表格，单元”

</table>

定义列表：

无序列表：<ul><li></li>…</ul>（圆点在前）

有序列表：<ol>…（数字在前）

定义列表：<dl><dt><dd>…（dt项目，dd项目描述，首行缩进）

块元素：块级元素（<h1>、<p>、<ul>、<table>）

<div>（类）：组合其他HTML元素的容器，使用id对CSS进行定位

内联元素：（<b>、<td>、<a>、<img>）

<span>（类）：文本的容器

布局：

CSS：设置表格或元素的样式；

响应式设计：（在style中设置div中的样式，“div中的元素相应style中的设置样式”）

<!DOCTYPE html>

<head>

“样式设置”

</head>

<body>

“样式响应”

</body>

</html>

使用Bootstrap方法：目前最流行的开发式相应web的HTML、CSS和JS。

HTML框架：rows:行；clos：列。

内联框架：<iframe></iframe>

背景：<body>标签中：背景颜色bgcolor、背景background、文本text已废弃

在CSS中设置。

脚本：<script>标签：定义JavaScript（图片操作、表单验证、内容动态更新）

头部：

<title>标题；

<base>链接的默认地址或默认目标；

实体：

不使用”<”，”>”会和标签弄混；

参考实体编号手册：

<：<； >：&gt；…

URL：网址（统一资源定位器：Uniform Resource Locator）

格式：scheme://host.domain:port/path/filename

scheme: 因特网服务类型（http/https安全/ftp，计算机file）

host：主机（www）

domain：域名

port：端口

path：路径

filename：文档/资源名称

URL编码：%参考手册

颜色：

基本色（红色#FF0000/rgb(255,00,00)，绿色#00FF00/rgb(00,255,00)，蓝色#0000FF/rgb(00,00,255)）
颜色名定义：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow（16）。

文档类型：<!DOCTYPE>（声明帮助浏览器正确显示网页）

HTML5 <!DOCTYPE html>

XHTML:（XHTML元素/属性是以XML格式编写的HTML元素/属性）

1. 文档结构：强制性；

2. 元素语法：元素正确嵌套/元素始终关闭/元素小写/须有一个根元素；

3. 属性语法：属性小写/引号包围/最小化禁止；

HTML表单：（搜集不同类型的用户输入）

1. （表单元素）：

Input元素：

Type属性：<input type=text/radio/submit>（文本输入/单按钮输入/提交输入）

Name属性：

<form>元素：

Action属性（提交表单时执行的动作）：

Method属性：

get（默认，表单被动提交-搜索引擎，无敏感信息，少量数据，地址栏可见）

post（表单正在更新数据，敏感数据，地址栏不可见）

2. <fieldset>组合表单数据（圈起来）：<legend>元素标题

3. <select>元素（下拉列表）：<option>待选择项

4. <textarea>元素（多行输入字段，文本域）：

5. <button>元素（可点击的按钮）

6. 表单元素：

HTML5增加的：<datalist>/<keygen>/<output>

7. HTML输入类型：

输入类型：text（文本输入）、submit（表单处理程序）；

radio（单选按钮）、checkbox（复选框）、button（按钮）、number（数字）、date、color、range（有范围的）、month、week、time、datatime、datetime-local、email、search、tel、erl

输出类型：password（密码字段）；

8. input属性：

Value属性（初始值）、readonly属性（只读）、disabled属性（禁用）、size属性、maxlength属性、list、pattern….

HTML5：

1. 实例：

<!DOCTYPE html>

<html>

</html>

2. 向HTML5中添加任何新元素：

脚本（<script>document.createElement(“myHero”)</script>，body中调用）

3. 新的元素：

基本：<article>（文章）、<details>（隐藏的）、dialog（对话框）...

表单元素：<datalist>、<keygen>、<output>（计算结果）

属性语法：多支持；

图像：<cansas>（定义使用JavaScript的图像绘制）

新的媒介元素：

<audio>（声音或音乐）、<embed>（插件等）、<source>（来源）、<track>（轨道）、<video>（视频）

4. 语义元素：

<section>、<article>（论坛、博客、新闻）、<header>（页眉）、<footer>（页脚）、<nav>（导航链接）、<aside>（侧栏等）...

5. <article>、<section>和<div>之间差异：

<article>：相关元素的完整的自包含块；与section区别不大

<section>：相关元素的块；

<div>：子元素块。

6. HTML5中必须的属性：

始终对图像使用alt属性，始终定义图像尺寸：<img src=”” alt=”HTML5” style=”width: height: ”>

HTML图形：

1.Cansas：（HTML5中的canvas元素使用JavaScript在网页上绘制图像）（写脚本）

var c=document.getElementById("myCanvas"); <--搜寻id-->

var cxt=c.getContext("2d"); <--创建context对象-->

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

2. SVG（可伸缩矢量图形，XML形式定义）：

HTML视频：

1. <object>支持HTML助手（插件），使用<embed>标签，使用<video>标签；

HTML API：

1. HTML5 Geolocation API 用于获得用户的地理位置。

getCurrentPosition() 方法来获得用户的位置，showPosition() 函数获得并显示经度和纬度

2. 拖放API：（drag和drop）

3. 本地存储：localStorage对象（存储没有截止日期的数据）、sessionStorage（浏览器关闭后数据丢失）

4. 应用程序缓存（离线浏览、速度快、减少服务器负载）：

通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本

5. Web worker（运行在后台的JavaScript、不会影响页面性能）

首先检测浏览器的支持：

if (typeof(Worker) !== "undefined") {

// 是的！支持 Web worker！

// 一些代码.....

} else {

// 抱歉！不支持 Web Worker！

}

6. Server-Sent事件（网页从服务器获得更新）：

接收通知：EventSource对象（onopen连接打开、onmessage接收到消息、onerror发生错误）

前端HTML基础知识---你只需会这些即可相关推荐

网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
深度学习所需显存_只需10分钟即可学习基本的Flexbox
深度学习所需显存 by Justin Yek 贾斯汀·耶克(Justin Yek) 只需10分钟即可学习基本的Flexbox (Learn basic Flexbox in just 10 minut ...
red hat安装宝塔_只需几分钟即可安装Red Hat Container Development Kit（视频）
red hat安装宝塔自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Ki ...
只需几分钟即可安装Red Hat Container Development Kit（视频）
自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Kit(CDK)的可用性令我 ...
将安卓系统迁移到鸿蒙OS,华为或很快推出鸿蒙系统手机将安卓系统迁移到鸿蒙OS只需1-2天即可实现...
据硅谷分析狮报道,供应链最新消息称,随着HMS生态高速增长,以及外部环境压力,华为已经开始考虑更多的自主终端计划,比如搭载鸿蒙系统的手机. 报道称,供应链最新消息中提到,华为一直都没有放弃基于鸿蒙系统 ...
【DB宝4】只需2步即可拥有Oracle19c的ASM+DB环境
[DB宝4]只需2步即可拥有Oracle19c的ASM+DB环境文章目录目录一.从Docker Hub下载小麦苗上传的镜像二.创建容器三.尽情使用吧 3.1 数据库使用示例: 3.2 在外部 ...
web前端开发基础知识_薪资30K+的web前端怎么做到的？
好的web前端年薪会有多少?首先,我们要知道怎么才能成为一个所认为的"好的web前端",其次,自己能值多少价值? 用户体验为王,是互联网时代的座右铭.人们在享受互联网带来的便捷的同 ...
网页编程从入门到精通杨凡_干货 | web前端入门基础知识
一名合格的web前端工程师必须得掌握HTML.CSS和JavaScript. 只懂其中一个或两个还不行,你必须对这三门语言都很熟悉. 也不是说必须对这三门语言都非常精通,但你至少要能够运用它们完成大多 ...

前端HTML基础知识---你只需会这些即可

前端HTML基础知识---你只需会这些即可相关推荐

最新文章

热门文章