HTML 最全知识点(超级详细)
网页三剑客 最主要由三部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、 css 和JavaScript。
【 web前端开发最核心的3个技术 】:
(1)HTML是什么?
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
(2)CSS
CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。
(3)JavaScript
JavaScript是一门 脚本语言 。
【 学习路线图 】:
学习路线: html 入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→ jQuery 入门→ ASP.NET 入门(或PHP入门)→Ajax→ ASP .NET进阶(或PHP进阶)
一、网页基础知识:你对我们常用的浏览器了解多少?
为什么会有 web标准 :
HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
HTML骨架格式:
【 注释解析 】:
1.html结构:包括<head>,< body>
2. HTML标签 是以尖括号包围的关键字.
3.html标签通常是成对出现的,有开始就有结束,包含成对标签、独立标签
4.html通常都有属性,格式:属性名=“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写。
在网页编辑中经常会用到的工具软件:
目前 HTML编辑器 可以说是种类繁多, 特别是国外, 开源的商业的, 各种版本,. 我只是简单介绍几个常见的免费/开源 的 可视化 HTML编辑器 (WYSIWYG)。
HTMLArea
功能一般, 文件不大, 支持是几种语言, 比较容易定制, 使用广泛,支持IE/Firefox/ Mozilla 等多种浏览器. 遵循BSD版权, 目前最新版是3.0.
官方网站:
FCKEditor
庞大, 功能强大, 加载慢. 在很多地方使用广泛, 比如 CSDN 的blog就是使用的这个. 功能也可以定制. 支持多种浏览器, 遵循LGPL版权. 目前最新版是2.0
官方网站:
演示:
FreeTextBox
定制编辑器界面, 包括 Office 2000 /Office XP/Office 2003 等界面, 运行速度一般, 功能还不错, 能够支持多种浏览器. 主要应用于ASP.net. 目前最新版是3.0.6.
官方网站:
演示:
aynHTML
界面比较象Windows, 美观度一般, 加载速度尚快, 遗憾的是只支持 IE , 目前最新的版本是
官方网站:
演示:
SPAW Ediotr
支持多种浏览器, 界面比较漂亮,类似MAC风格, 功能一般, 加载速度中等, 支持PHP比较好. GPL版权,
官方网站:
演示:
TinyMCE
界面相当清新, 很适合素雅主义使用, 功能比较强大, 不逊色于FCKEditor, 但是加载速度委实比较慢, 支持多种浏览器, 使用LGPL版权, 目前最新版本是2.0
官方网站:
演示:
XinHa
界面还可以, 加载速度比较慢, 但是比TinyMCE强点, 定制功能相当强大, 而且本身支持的功能也很强大, 支持多种浏览器, 也可以把它跟HTMLArea比较一下. 基于BSD授权,
官方网站:
演示地址:
skyWriter
功能比较强大, 使用比较复杂. 开发源代码. 有兴趣可以尝试下.
官方网站:
演示:
————————————————
有兴趣的小伙伴也可以在评论区留言推荐你觉得好用的编辑器,我们相互学习交流。
HTML是什么?
HTML超文本标记语言(HyperText Markup Language)是一种用于创建网页的标准标记语言。HTML 运行在浏览器上,由浏览器来解析。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML的基本标签:
HTML文档由4个主要标记组成,包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。
为了方便记忆配图结合加深记忆,HTML标签间的相互关系:
【 html基本标签规则 】:
用<>尖括号包括英文单词 的关键词
HTML 标签 通常是成对出现的,比如 <b> 和 </b>、
标签对中的第一个标签是开始标签,以开始标签起始。第二个标签是结束标签,也是结束标签。
1 HTML标签:
作用所有HTML中标签的一个根节点。通常以<html>开头 </html>结尾。
2 head标签 :
作用:用于存放:
title, meta ,base,style,script,link
注意在head标签中我们必须要设置的标签是title
3.title标签:
作用:让页面拥有一个属于自己的标题。
4.body标签:
作用:页面在的主体部分,用于存放所有的HTML标签:
p,h,a,b,u,i,s,em,del,ins,strong,img
【 属性 】:
color:文本的颜色
bgcolor:背景色
background:背景图片
【 颜色的表示方式 】:
第一种方式: 使用颜色名称: 仅仅有16种颜色名可用英文字母,其余的要用16进制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver , teal, white, yellow
第二种方式: RGB模式
第三种: 十六进制:#000000 #ffffff #325687 #377405
平时我们在浏览网页时候可以按住键盘上的 F12 快捷键,打开我们所浏览网页的编码详情,大家可以简单的明白一个网页的构成是怎样的结构。
以 百度 为例简单演示:
是不是感觉一个百度搜索页,怎么会有这么多英文代码构成,是不是有点一头雾水呢?
那么我们又该如何解读这些内容呢?他们又是一个怎样的结构关系,组合到一起。通过网页的形势呈现的呢?带着这些疑问开始我们今天的内容分享吧。
文档类型<! DOCTYPE >(重点)
还是用刚才截图的百度搜索页截图做个简单说明,我们看到开头有这样一串英文代码。 <!DOCTYPE html>,该如何解读呢?
<!DOCTYPE html>
这句话就是告诉我们使用的哪个html版本? 我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。
标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。
————————————————
HTML标签的语义化(重点)
白话: 所谓标签语义化,就是指标签的含义。
为什么要有语义化标签:
1、方便代码的阅读和维护
2、同时让浏览器或是 网络爬虫 可以很好地解析,从而更好分析其中的内容
使用语义化标签会具有更好的搜索引擎优化:
核心:合适的地方给出一个最为合理的标签。
语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。
不管是谁都能看懂这块内容是什么。
【 遵循的原则 】:先确定语义的HTML ,再选合适的CSS。
总结:(重要知识点)
双标签:
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签:
<br><hr><img><input><param><meta><link>
————————————————
文档结构:
包括<html>、<head>、<title>、<body>.这4个标记构成了HTML页面最基本的元素。
(1)HTML标签
<html>标记是 HTML文件 的开头。
在整个网页代码编辑中是从 <html> 这里开始的,然后到 </html> 结束。
标记虽然没有实质性的功能,但却是HTML必不可少的部分。
所有的HTML文件都以标记开头,以标记结束,即HTML页面的所有标记都要放置在与标记中。
(2)head标签
<head>标记是HTML文件的头标记,用于存放HTML文件的信息,如定义CSS样式的代码可放置在与标记之中。
<title>标记
<title>标记为标题标记。
可将网页的标题定义在标记之中
(3)body标签
body标签代表页面的“身”,定义网页展示内容,这些内容往往都是“可见内容”(在浏览器可见)。
HTML页面的主体标记。
页面中的所有内容都定义在标记中。
标记本身也具有控制页面的一些特性,如控制页面的背景图片和颜色等。
HTML常用标记:
换行标记:
在HTML中,换行标记是<br>
排版标签:
1.注释标签:<!–注释–>
2.换行标签:<br/>
3.段落标签:<p>文本文字
特点:段与段之间有行高
属性:align对齐方式
(left:左对齐 center:居中 right:右对齐)
4.水平线标签:<hr/>
属性:
width:水平线的长度(两种:第一种:像素表示;第二种,百分比表示)
size: 水平线的粗细 (像素表示,例如:10px)
color: 水平线的颜色
align:水平线的对齐方式(left:左对齐 center:居中 right:右对齐)
容器标签
<div>:块级标签,独占一行,换行
<span>:行级标签,所有内容都在同一行作用:
<div>:主要是结合css页面分块布局
<span>:进行友好提示信息
段落与文字
(一)、段落标签
(1)、段落与文字标签
(2)、文本格式化标签
(二)、网页特殊符号
网页特殊符号 只需要记忆一个就行了,就是HTML空格“ ”,其他的 特殊符号 我们不需要记忆,当我们需要的时候再回来查找一下 特殊符号 表就OK了。
(三)、自动闭合标签
HTML标签分为2种,一种是“一般标签”,另外一种是“自闭合标签”。一般标签有开始符号和结束符号,自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号,不能插入其他标签或文字,只能定义自身的属性。
(1)、一般标签
举例:<body></body>
(2)、自动闭合标签
举例:<br/>、<hr/>
(四)、块元素和行内元素
(1)、 HTML元素 根据浏览器表现形式分为两类:①块元素;②行内元素;
(2)、块元素特点:
(1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
(2)块元素内部可以容纳其他块元素或行元素;
常见块元素有:h1~h6、p、hr、div等。
(3)、行内元素特点:
(1)可以与其他行内元素位于同一行;
(2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;
常见行内元素有:strong、em、span等
标签语义对照表
3种列表的语义记忆:
(一)、HTML3种列表
【列表有3种】: 有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用,而定义列表比较少用。在实际应用中,最常用的是序列表,请大家重点掌握。
目录列表和菜单列表已经被废除,大家可以直接忽略这两种列表。
(1)、有序列表
有序列表type属性
(2)、无序列表
无序列表是三个列表中最为重要的列表。
无序列表type属性
(3)、定义列表
【 说明 】:
<dl>即“definition list(定义列表)”,<dt>即“definition term(定义名词)”,而<dd>即“definition description(定义描述)”。
在该语法中,<dl>标记和</dl>标记分别定义了定义列表的开始和结束,<dt>后面添加要解释的名词,而在<dd>后面则添加该名词的具体解释。
5、表格
(一)、表格语义记忆
通过语义化记忆表格标签:
表格结构标签
(二)、表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签,其他标题标签<caption>、表头单元格<th>可以没有,但是这3者必须要有。
【 说明 】:
<table>和</table>标记着表格的开始和结束,<tr>和</tr>标记着表格的开始和结束,在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
(三)、表格完整结构
表格完整结构应该包括表格标题(caption)、表头(thead)、表身(tbody)和表脚(tfoot)4部分。
表格语义化之后,使得代码更清晰和更利于后期维护。
【 语法 】:
<table>
<caption>表格标题</caption>
<!–表头–>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!–表身–>
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!–表脚–>
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
【 说明 】:
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格,th表示表身单元格。每一对“<tr></tr>”表示一行。
(四)、合并行和合并列
合并行使用td标签的 rowspan 属性,而合并列则用到td标签的colspan属性。
(1)、合并行
【 语法 】:
<td rowspan=”跨度的行数”>
【 举例 】
<!DOCTYPE html>
<html xmlns=”#34;>
<head>
<title>合并行rowspan</title>
</head>
<body>
<table>
<!–第1行–>
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<!–第2行–>
<tr>
<td rowspan=”2″>喜欢水果:</td>
<td> 苹果 </td>
</tr>
<!–第3行–>
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>
演示效果
(2)、合并列
【 语法 】:
<td colspan=”跨度的列数”>
【 举例 】:
<!DOCTYPE html>
<html xmlns=”#34;>
<head>
<title>合并列colspan</title>
</head>
<body>
<table>
<!–第1行–>
<tr>
<td colspan=”2″>绿叶学习网精品教程</td>
</tr>
<!–第2行–>
<tr>
<td>HTML教程</td>
<td>CSS教程</td>
</tr>
<!–第3行–>
<tr>
<td>jQuery教程</td>
<td>SEO教程</td>
</tr>
</table>
</body>
</html>
————————————————效果演示————————————————
6、图像
(一)、图像标签
在HTML中,图像标签为<img>。<img>是一个自闭合标签。img标签只需要掌握3个属性就可以了:src、alt、title。
【 语法 】:
<img src=”图片地址” alt=”图片描述(给搜索引擎看)” title=”图片描述(给用户看)”>
src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到,所以只需要掌握这两个属性即可,大家要是在别的书籍上看到<img>还有别的属性,你不用去记忆它们。
(二)、 相对路径 和绝对路径
相对路径,指的是同一个网站下,不同文件之间的位置定位。引用的文件位置是相对当前文件的位置而言,从而得到相对的路径。
绝对路径,指的是文件的完整路径。
当前文件找目标文件的过程
2.绝对路径
3.相对路径
用得很多,可移植性很好
同级目录
(三)、图片格式
虽然图片格式这一节知识比较多,大部分我们只需要了解就可以了,我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像,如相片、网页一般的图片。
2、PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差,但是可以制作动画。
7、链接
超链接使用a标签,语法如下:
<a href=”链接地址” target=”目标窗口的打开方式”>
我们只需要掌握“_self”和“_blank”这两个属性值就可以了,其他两个用不到。
超链接根据链接对象的不同分为:
(1)外部链接
(2)内部链接:①内部页面链接;② 锚点 链接;
<!DOCTYPE html>
<html xmlns=”#34;>
<head>
<title>锚点链接</title>
</head>
<body>
<div>
<a href=”#music”>推荐音乐</a><br />
<a href=”#movie”>推荐电影</a><br />
<a href=”#article”>推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id=”music”>
<h3>推荐音乐</h3>
<ul>
<li> 林俊杰 -被风吹过的下图</li>
<li> 曲婉婷 -在我的歌声里</li>
<li> 许嵩 -灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id=”movie”>
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id=”article”>
<h3>推荐文章</h3>
<ul>
<li> 朱自清 – 荷塘月色 </li>
<li> 余光中 -乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
————————————————
锚点链接,就是点击某一个超链接,它就会跳到当前页面的某一部分。如下图:
只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接,滚动条就会滚动到相应的版块。
1.a 标签 (Anchor ) : 超链接(锚)
超链接在页面中起到跳转或定位的作用(超链接、锚链接、a链接、a标签)
2. a标签的跳转功能
3.a 标签的属性
4.a 标签的其他用法
5.a标签的定位功能
a标签可以快速定位到当前页面或者其他页面的目标内容(百度百科)
在当前页面进行定位
8、表单
表单标签共有4个:<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。
我们通过一张表单来把所有input标签囊括:
文本格式化标签
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义 上标 字。
定义插入字。
定义删除字。
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
HTML5 新标签与特性
常用新标签
- header :定义文档的页眉
- nav:定义导航链接的部分
- footer:定义文档或节的页脚
- article:标签规定独立的自包含内容
- section:定义文档中的节(section、区段)
- aside:定义其所处内容之外的内容
多媒体标签
embed:标签定义嵌入的内容
audio:播放音频
video:播放视频
多媒体 embed(会使用)
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
\<embed src=”#34;%20allowFullScreen=”true” quality=”high” width=”480″ height=”400″ align=”middle” allowScriptAccess=”always” type=”application/x-shockwave-flash”>\</embed>
多媒体 audio
HTML5通过<audio>标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放,如:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
多媒体 video
HTML5通过<video>标签来解决音频播放的问题。
通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
HTML常用标签或属性全称
好了今天的内容分享就到这里,后续不断更新,敬请期待。