关键词：
HTML 基本认识
一、简介
1.HTML是超文本标记语言，标准通用标记语言下的一个应用，解释性语言。
2.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
3.超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
二、语言特点（内容摘抄自--百度百科）
1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行原因之一。
4.通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
三、整体结构
HTML标准文件结构有一个基本的整体结构，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
1.文件代码整体
标记符<html>,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,<html></html>是超文本标记语言文件的开始标记和结尾标记。
2.头部内容
<head></head>；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，
其中标题标记符用于定义网页的标题，它的内容显示在网页窗口栏中，网页标题可被浏览器用作书签和收藏清单。
HTML head 元素：
HTML当中的meta标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的meta标签</title> 5 6 <!--设置网页的编码--> 7 <meta charset="utf-8"/> 8 9 <!--设置网页的关键字--> 10 <meta name="keywords" content="页面关键字"/> 11 12 <!--设置网页的描述--> 13 <meta name="description" content="网页相关描述信息" /> 14 15 <!--设置网页的更新信息--> 16 <meta name="revised" content="更新信息,2017年3月2日09:55:00"/> 17 18 <!--设置网页刷新频率以及跳转地址--> 19 <meta http-equiv="refresh" content="3,http://www.bing.com" /> 20 21 <!--设置标题处的ico小图标--> 22 <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/> 23 24 <!--引入一个外部的css层叠样式表--> 25 <link rel="stylesheet" href="./css.css" type="text/css"/> 26 </head> 27 <body> 28 </body> 29 </html>
head标签中的Script标签和Style标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>head标签中的Script标签和Style标签</title> 5 <meta charset="utf-8"/> 6 7 <!--通常是写js用的标签--> 8 <script> 9 //在网页打开的同时弹出了一个对话框 10 //alert('弹框内容'); 11 </script> 12 13 <!--引入一个外部的js文件--> 14 <script src="1.js"></script> 15 16 <!--在当前页面来添加css样式--> 17 <style> 18 font{ 19 color:red; 20 } 21 </style> 22 </head> 23 <body> 24 25 </body> 26 </html>
3.主体内容
<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
HTML当中的文本标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--标题标签--> 9 <h1>让我们来看一下，<u>字体</u>字体的大小变化</h1> 10 <h2>让我们来看一下，字体的大小变化</h2> 11 <h3>让我们来看一下，字体的大小变化</h3> 12 <h4>让我们来看一下，字体的大小变化</h4> 13 <h5>让我们来看一下，字体的大小变化</h5> 14 <h6>让我们来看一下，字体的大小变化</h6> 15 16 <!--水平线标签--> 17 <hr/> 18 19 <!--b标签：普通的加粗标签--> 20 <b>文字加粗</b><br/> 21 22 <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容--> 23 <strong>文字加粗（强调）</strong><br/> 24 25 <!--斜体、强调标签--> 26 <em>斜体（强调）</em><br/> 27 28 <!--普通的斜体标签--> 29 <i>让你随时<u>脉动</u>回来！</i><br/> 30 31 <!--普通的斜体标签--> 32 <cite>让你随时脉动回来！</cite><br/> 33 34 <!--下标标签--> 35 H<sub>2</sub>0<br/> 36 37 <!--上标标签--> 38 2<sup>2</sup>=4 39 40 <!--段落标签--> 41 <p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p> 42 43 </body> 44 </html>
文本标签页面展示效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的文本标签</h1> 9 10 <!--定义文档的输出方向--> 11 <bdo dir="ltr">正大光明</bdo><br/> 12 <bdo dir="rtl">正大光明</bdo><br/> 13 14 <!--定义一个短的引用--> 15 沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br/> 16 17 <!--表示一个缩写的形式--> 18 <abbr title="United States">US</abbr><br/> 19 20 <!--删除线标签--> 21 测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br/> 22 23 <!--定义一段被隐藏的文字,summary标签可以定义列表的标题--> 24 <details> 25 <summary>鬼吹灯系列丛书</summary> 26 鬼吹灯之精绝古城<br/> 27 鬼吹灯之黄皮子坟<br/> 28 鬼吹灯之云南虫谷<br/> 29 </details> 30 31 <!--对话标签--> 32 <dialog open> 33 <dt>男：</dt><dd>我们分手吧~~</dd> 34 <dt>女：</dt><dd>为什么？</dd> 35 <dt>男：</dt><dd>我怀孕了~~</dd> 36 <dt>女：</dt><dd>不，不可能，我不相信……</dd> 37 <dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd> 38 <dt>女：</dt><dd>…………</dd> 39 </dialog> 40 </body> 41 </html>
HTML当中的列表标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的列表标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的列表标签</h1> 9 <!--有序列表--> 10 <ol type="A"> 11 <li>有序列表1</li> 12 <li>有序列表2</li> 13 <li>有序列表3</li> 14 </ol> 15 16 <!--无序列表--> 17 <ul type="circle"> 18 <li>无序列表1</li> 19 <li>无序列表2</li> 20 <li>无序列表3</li> 21 </ul> 22 23 <!--格式化输出标签--> 24 <pre> 25 * 26 * * 27 * * * 28 * * * * 29 </pre> 30 </body> 31 </html>
页面显示效果：
在<ol>标签中增加 type 属性，使其属性值为 A or a or 1 会显示不同的排序编码，可视情况而定
HTML当中的超链接标签
<a></a>：超链接标签
属性： 值：
href： 路径或外部网站
title： 鼠标移入链接时提示的内容
target： _self (默认，从当前标签页打开链接)
_blank (在新标签页中打开链接)
_parent (在父级框架中打开链接)
_top (在顶级框架中打开链接)
framename(在制定框架名的位置打开链接)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的超链接标签 a</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--相对路径链接到本地的文件--> 9 <a href="./1.html">链接本地HTML文件</a><br/><br/> 10 11 <!--链接到了一个外部的网站--> 12 <a href="http://lol.qq.com" target="_blank">英雄联盟官网</a> 13 14 <!--使用绝对路径链接到本地文件--> 15 <a href="D:\Wamp\www\test\lesson_HTML\test.html" title="超链接信息">5.html</a> 16 17 </body> 18 </html>
页面显示效果：
a标签的锚点功能
使 a 链接标签可跳转到页面指定元素的位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>a标签的锚点功能</title> 5 <meta charset="utf-8"/> 6 <style> 7 /*找到4个div添加了一些属性*/ 8 div{ 9 /*设置一下div的宽度*/ 10 width:500px; 11 12 /*设置一下div的高度*/html学习笔记《一》HTML一、简介 1.HTML是超文本标记语言，标准通用标记语言下的一个应用。 2.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 3.超文本标记语言的结构包括“头”部分（英语：Head）、... 查看详情
javascript学习笔记一
...入HTML页面后,可由所有的现代浏览器执行.JavaScript很容易学习.HTML的脚本必须位于<script>与</script>标签之间.脚本可被放置在HTML页面的<body>和<head& 查看详情
jquery学习笔记详解--(一）(代码片段)
概念 jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 就是一堆JavaScript代码 jQuery库包含以下功能： HTML元素选取 HTML元素操作 ... 查看详情
html+css学习笔记
...竟对于一个网站而言，大部分都还是文字，这是基础性的学习，这个学好了，接下来也就更容易领悟。关于文本，CSS的属性有很多，比如：字体、大小、粗细、倾斜、行高，甚至背景颜色、间距，都涵盖在内。接下来我们一一学... 查看详情
html学习笔记
一、HTML的概述（了解） a.html是什么：hypertextmarkuplanguage超文本标记语言 超文本：音频，视频，图片称为超文本。. 标记：<英文单词或者字母>称为标记.一个HTML页面都是由各种标记组成。 b.作用：... 查看详情
html学习笔记
一、HTML概述1、系统结构：①、B/S架构BrowserServer(浏览器/服务器的交互形式。)Browser支持哪些语言：HTMLCSSJavascriptS是服务器端Server,Server端的语言很多：c++、Java、python...B/S架构的系统有什么优点和缺点 查看详情
html学习笔记
四、层叠样式表 (一)引入方式： 1.内联在标签中使用style属性去设置 &nb 查看详情
html学习笔记
一、浮动和清除浮动 float属性： left：元素向左浮动； right：元素向右浮动。 clear属性： left：清除左浮动； right：清除右浮动； both：左右浮动一... 查看详情
html学习笔记(canvas基础)
1.什么是Canvascanvas就是一个画布，可以进行画任何的线，图形，填充等一系列操作。这一切都是用Js操作的，另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。创建canvas标签<!--... 查看详情
html学习笔记jquery（dom操作）
一般来说，DOM操作分为三个方面，即:DOMCore(核心)，HTML_DOM和CSS_DOM。1.DOMCoreDOMCore并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。他的用途并不局限于处理网页，也可以处理任何一种使用标记语言编写出来的文... 查看详情
html基础学习笔记
HTML指超文本标记语言（HyperTextMarkupLanguage）,一种标记语言，用来描述网页的一种语言。一、HTML基本结构示意图1、 HTML标签(HTMLtag)，由尖括号包围的关键词(如<html>)，通常是成对出现的，比如<b>（开... 查看详情
html+css学习笔记
一、html和CSS的关系1.HTML是超文本格式，它可以包含普通文字，图画，视频，声音的网页；CSS是HTML网页中文字的大小，颜色，边框的大小，颜色的修饰，总的来说CSS就相当于是HTML的外衣；二、HTML引入CSS的四种方法1.行内式 &nb... 查看详情
jquery学习笔记
...一个JavaScript库jQuery极大的简化了JavaScript编程jQuery很容易学习 1.jQuery库-特性 jQuery是一个JavaScript函数库。 jQuery库包含以下特性： HTML元素选取 HTML元素操作... 查看详情
学习笔记html基础：使用html制作网页
一、初识HTML 1.什么是HTML？ HyperTextMarkupLanguage（超文本标记语言） 扩展XML:Extendsible MarkupLanguage(可扩展性标记语言) HTML(HyperTextMarkupLanguage)超文本标记语言是创建Web页面的基础，HTML由一套标记标签... 查看详情
html5学习笔记之historyapi
这系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~先出一道题目：以下不... 查看详情
html学习笔记
1.编码(html文件编码成字节用的码表和浏览器读取这一系列字节所用的码表必须相同):2.<a>标签的小细节:提供文件下载!在href中如果给的是文件的路径,那么点击超链接将会下载文件! <a>标签的属性target:-self在当前页面打... 查看详情
《机器学习》读书笔记一序言部分
...档：http://www.a-site.cn/article/429982.html《陆汝铃：六问机器学习》 参考文献：《机器学习》---周志华 文章摘自《机器学习》序言部分 在人工智能发展早期，机器学习技术内涵几乎全部是符号学习，从二十世纪九十... 查看详情
html学习笔记《二》----html部分标签应用
HTML部分标签应用 一、HTML中的注释、标签语法以及颜色表示方式 1.HTML中注释：<!--....--> 注释的目的：1.辅助说明2.代码调试（不同编程语言，注释方式略有差异） 2.HTML标签（标记）的... 查看详情