HTML 学习分享~

时间 2019-11-16

标签 html 学习分享栏目 HTML 繁體版

原文原文链接

什么是HTML？javascript

HTML 是指超文本标记语言: Hyper Text Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 文档也叫作 web页面

五大主流浏览器介绍：php

既然html是在浏览器上面运行的。那咱们就得了解一下各各不一样浏览器的支持程度了。若是浏览器不支持，css

那岂不是白写了！接着往下来介绍浏览器以及他们的内核：html

1: IE浏览器；内核Trident；前端

IE是微软公司旗下的浏览器。html5

2: Opera浏览器；内核Prestojava

Opera是挪威Opera Software ASA公司旗下的浏览器。web

3：Safari浏览器; 内核:KHTML编程

苹果公司的Safari浏览器。浏览器

4：Firefox浏览器；内核： Geccko

Firefox浏览器使Mozilla公司旗下浏览器。

5：Chrome浏览器内核：webkit

google浏览器。

HTML 网页结构：

<!DOCTYPE html>

<html<head><body>

<!DOCTYPE html> 用于告诉浏览器咱们是用的html

<html>是html的根元素 ;全部的标签都是嵌套在<html>里面的。

<head> 是写页面头部的内容，是不可见的。常见的有一些外部连接 <link> 或内嵌样式内嵌javascript脚本等。

<body> 是网页中呈现给用户看的内容例如：文字,连接,图片,多媒体等。

HTML 标签详解：

html也叫超文本标记语言。既然是标记语言，那也必定是与标记\标签有关的。

咱们先列举一些常见的标签 <h1></h1>~<h6></h6> <p></p> <a> <img> <div></div> 等。咱们列举出一些常见的标签。

一眼看过去是否是有些不一样，虽然他们都是标签为何有的标签后面会跟着一个带/的相同标签呢。

这是由于标签也是有分类的：他们有分为单标签和双标签。单标签就本身一个标签双标签是有一个关闭标签的。

若是双标签的没有写关闭标签就会出错，虽然如今的编辑器很强大并不会报错。可是咱们仍是按照正规的要求来写！

基本标签的做用详解：

<a> 标签用于建立连接 |不换行

<img>标签用于插入图片 |不换行

<h1>~<h6>标签用于写标题自带加粗字体变大效果 h1-h6递减。 |独占一行

<p>标签表示一个段落 |独占一行

<br>标签表示换行

<hr>标签表示水平线 |独占一行

html 样式 css 详解：

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。

经过使用CSS实现页面的内容与表现形式分离，极大提升了工做效率。样式存储在样式表中，一般放在<head>部分或存储在

外部CSS文件中。做为网页标准化设计的趋势，CSS取得了浏览器厂商的普遍支持，正愈来愈多的被应用到网页设计中去。

经过css渲染：咱们能够改变字体颜色、字体大小、背景颜色、对齐方式。等

CSS 能够经过如下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性:
写法：<p style="color:blue;margin-left:20px;">This is a paragraph.</p>。
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
写法：
<head>
<style></style>
</head>
外部引用 - 使用外部 CSS 文件
写法：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

格式化标签详解：

<code>计算机代码</code>

<i></i> 斜体文本

<kbd></kbd> 键盘输入

<pre></pre> 预格式化文本

<small></small> 更小的文本

<strong></strong> 重要的文本

<abbr> 缩写

<address> 联系信息

<bdo> 文字方向

<blockquote> 从另外一个源引用的部分

<cite> 工做的名称

<del> 删除的文本

<ins> 插入的文本

<sub> 下标文本

<sup> 上标文本

列表详解:

无序列表：<ul>

　　　　</ul>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表适合成员之间无级别顺序关系的状况。

无序列表使用 <ul> 标签

有序列表：

<ol>

　　　　</ol>

一样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每一个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的状况。列表项项使用数字来标记。

自定义列表：

<dl>

</dl>

自定义列表不只仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每一个自定义列表项以 <dt> 开始。

每一个自定义列表项的定义以 <dd> 开始

<dd>有缩进效果。

表格详解：

表格由<table>标签来定义。每一个表格均有若干行（由<tr> 标签订义），每行被分割为若干单元格（由<td>标签订义）。

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

基本布局：

基本的布局能够分为两种：1.div布局 2.table布局。

使用div布局: 咱们能够建立多个div，把内容分红多个块的。用CSS 对元素进行定位，或者为页面建立背景以及色彩丰富的外观。

使用table布局：经过合并单元格来达到咱们想要的区块效果。

Tip:推荐使用 CSS 最大的好处是，若是把 CSS 代码存放到外部样式表中，那么站点会更易于维护。经过编辑单一的文件，就能够改变全部页面的布局

HTML表单详解：

表单是一个包含表单元素的区域。

表单元素是容许用户在表单中输入内容，好比：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

HTML表单-输入元素：

多数状况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数常常被用到的输入类型以下：

1.文本域经过<input type="text"> 标签来设定 /当用户须要再表单中键入内容时就会用到，文本域。

2.密码字段经过标签<input type="password"> 来定义 /经过password 设定的文本框输入的内容时不可见的。

3.<input type="radio"> 标签订义了表单单选框选项。 /使其能够选中其中的一个选项

4.<input type="checkbox"> 定义了复选框. /使其能够选中给于的多个选项

5.<input type="submit"> 定义了提交按钮. /当用户单击确认按钮的时候，表单的内容会被传送到另外一个文件。

HTML 框架:

iframe能够显示一个目标连接的页面

目标连接的属性必须使用iframe的属性，以下实例:

HTML 颜色颜色名颜色值理解：

　html 颜色可使用 RGB、十六进制、英文单词。

CSS一些经常使用颜色分享：

　　红色red：ff0000

　　黑色black：000000

　　紫色violet： ee82ee

　　粉色pink：ffc0cb

　　蓝色blue：0000ff

　　绿色green：008000

　　橙色orange：ffa500

在此分享一个前端用的高级颜色调试器：http://bj.91join.com/color.html ;

HTML脚本：

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 使 HTML 页面具备更强的动态和交互性。

JavaScript 插入 HTML 页面后，可由全部的现代浏览器执行。

如何插入脚本经过<script>标签插入脚本；脚本可放置在<head>或<body>里面。

想知道如何操做的话！能够经过学习javascript 。

HTML 转义字符部分解析：

字符	实体编号	实体名称	描述
"	`"`	`"`	quotation
'	`'`	`'`	apostrophe
&	`&`	`&`	ampersand
<	`<`	`<`	less-than
>	`>`	`>`	greater-than

字符	实体编号	实体名称	描述
	` `	` `	non-breaking space
¡	`¡`	`¡`	inverted exclamation mark
¢	`¢`	`¢`	cent
£	`£`	`£`	pound
¤	`¤`	`¤`	currency
¥	`¥`	`¥`	yen
¦	`¦`	`¦`	broken vertical bar
§	`§`	`§`	section
¨	`¨`	`¨`	spacing diaeresis
©	`©`	`©`	copyright
ª	`ª`	`ª`	feminine ordinal indicator
«	`«`	`«`	angle quotation mark (left)
¬	`¬`	`¬`	negation
	``	``	soft hyphen
®	`®`	`®`	registered trademark
¯	`¯`	`¯`	spacing macron
°	`°`	`°`	degree
±	`±`	`±`	plus-or-minus
²	`²`	`²`	superscript 2
³	`³`	`³`	superscript 3
´	`´`	`´`	spacing acute
µ	`µ`	`µ`	micro
¶	`¶`	`¶`	paragraph
·	`·`	`·`	middle dot
¸	`¸`	`¸`	spacing cedilla
¹	`¹`	`¹`	superscript 1
º	`º`	`º`	masculine ordinal indicato
»	`»`	`»`	angle quotation mark (righ
¼	`¼`	`¼`	fraction 1/4
½	`½`	`½`	fraction 1/2
¾	`¾`	`¾`	fraction 3/4
¿	`¿`	`¿`	inverted question mark
×	`×`	`×`	multiplication
÷	`÷`	`÷`	division

结尾：

ok！ html部分到此内容也差很少了。一些不全面的部分，欢迎指正！要向了解更多新内容更全面的内容。

咱们能够经过访问如下连接去学习：

https://www.w3cschool.cn/

http://www.runoob.com/try/try.php?filename=tryhtml5_datalist

另外分享一个本人在用的标签速查表：

https://man.ilovefishc.com/html5/

。

1. HTML基础学习心得分享
2. 学习分享
3. 学习layui分享
4. jbpm4.4 学习分享
5. echarts学习分享
6. RocketMQ学习分享
7. Python学习分享
8. STM32学习分享
9. LabVIEW学习分享
10. Unity3D——学习分享
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议