HTML学习笔记《一》 ---- HTML基本认识
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标签
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的meta标签</title> <!--设置网页的编码-->
<meta charset="utf-8"/> <!--设置网页的关键字-->
<meta name="keywords" content="页面关键字"/> <!--设置网页的描述-->
<meta name="description" content="网页相关描述信息" /> <!--设置网页的更新信息-->
<meta name="revised" content="更新信息,2017年3月2日09:55:00"/> <!--设置网页刷新频率以及跳转地址-->
<meta http-equiv="refresh" content="3,http://www.bing.com" /> <!--设置标题处的ico小图标-->
<link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/> <!--引入一个外部的css层叠样式表-->
<link rel="stylesheet" href="./css.css" type="text/css"/>
</head>
<body>
</body>
</html>
HTML当中的meta标签
head标签中的Script标签和Style标签
<!DOCTYPE html>
<html>
<head>
<title>head标签中的Script标签和Style标签</title>
<meta charset="utf-8"/> <!--通常是写js用的标签-->
<script>
//在网页打开的同时弹出了一个对话框
//alert('弹框内容');
</script> <!--引入一个外部的js文件-->
<script src="1.js"></script> <!--在当前页面来添加css样式-->
<style>
font{
color:red;
}
</style>
</head>
<body> </body>
</html>
head标签中的Script标签和Style标签
3.主体内容
<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
HTML当中的文本标签
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的文本标签</title>
<meta charset="utf-8"/>
</head>
<body>
<!--标题标签-->
<h1>让我们来看一下，<u>字体</u>字体的大小变化</h1>
<h2>让我们来看一下，字体的大小变化</h2>
<h3>让我们来看一下，字体的大小变化</h3>
<h4>让我们来看一下，字体的大小变化</h4>
<h5>让我们来看一下，字体的大小变化</h5>
<h6>让我们来看一下，字体的大小变化</h6> <!--水平线标签-->
<hr/> <!--b标签：普通的加粗标签-->
<b>文字加粗</b><br/> <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容-->
<strong>文字加粗（强调）</strong><br/> <!--斜体、强调标签-->
<em>斜体（强调）</em><br/> <!--普通的斜体标签-->
<i>让你随时<u>脉动</u>回来！</i><br/> <!--普通的斜体标签-->
<cite>让你随时脉动回来！</cite><br/> <!--下标标签-->
H<sub>2</sub>0<br/> <!--上标标签-->
2<sup>2</sup>=4 <!--段落标签-->
<p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p> </body>
</html>
HTML当中的文本标签
文本标签页面展示效果：
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的文本标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML当中的文本标签</h1> <!--定义文档的输出方向-->
<bdo dir="ltr">正大光明</bdo><br/>
<bdo dir="rtl">正大光明</bdo><br/> <!--定义一个短的引用-->
沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br/> <!--表示一个缩写的形式-->
<abbr title="United States">US</abbr><br/> <!--删除线标签-->
测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br/> <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->
<details>
<summary>鬼吹灯系列丛书</summary>
鬼吹灯之精绝古城<br/>
鬼吹灯之黄皮子坟<br/>
鬼吹灯之云南虫谷<br/>
</details> <!--对话标签-->
<dialog open>
<dt>男：</dt><dd>我们分手吧~~</dd>
<dt>女：</dt><dd>为什么？</dd>
<dt>男：</dt><dd>我怀孕了~~</dd>
<dt>女：</dt><dd>不，不可能，我不相信……</dd>
<dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>
<dt>女：</dt><dd>…………</dd>
</dialog>
</body>
</html>
HTML当中的文本标签
HTML当中的列表标签
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的列表标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML当中的列表标签</h1>
<!--有序列表-->
<ol type="A">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol> <!--无序列表-->
<ul type="circle">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul> <!--格式化输出标签-->
<pre>
*
* *
* * *
* * * *
</pre>
</body>
</html>
HTML当中的列表标签
页面显示效果：
在<ol>标签中增加 type 属性，使其属性值为 A or a or 1 会显示不同的排序编码，可视情况而定
HTML当中的超链接标签
<a></a>：超链接标签
属性： 值：
href： 路径或外部网站
title： 鼠标移入链接时提示的内容
target： _self (默认，从当前标签页打开链接)
_blank (在新标签页中打开链接)
_parent (在父级框架中打开链接)
_top (在顶级框架中打开链接)
framename(在制定框架名的位置打开链接)
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的超链接标签 a</title>
<meta charset="utf-8"/>
</head>
<body>
<!--相对路径链接到本地的文件-->
<a href="./1.html">链接本地HTML文件</a><br/><br/> <!--链接到了一个外部的网站-->
<a href="http://lol.qq.com" target="_blank">英雄联盟官网</a> <!--使用绝对路径链接到本地文件-->
<a href="D:\Wamp\www\test\lesson_HTML\test.html" title="超链接信息">5.html</a> </body>
</html>
HTML当中的超链接标签
页面显示效果：
a标签的锚点功能
使 a 链接标签可跳转到页面指定元素的位置
<!DOCTYPE html>
<html>
<head>
<title>a标签的锚点功能</title>
<meta charset="utf-8"/>
<style>
/*找到4个div添加了一些属性*/
div{
/*设置一下div的宽度*/
width:500px; /*设置一下div的高度*/
height:500px; /*设置一下div的边框：1像素宽，实线，红色*/
border:1px solid red;
}
</style>
</head>
<body>
<h1>a标签的锚点功能</h1>
<a href="#one">第一章：三打白骨将</a><br/>
<a href="#two">第二章：倒拔垂杨柳</a><br/>
<a href="#three">第三章：火烧赤壁</a><br/>
<a href="#four">第四章：刘姥姥进大观园</a><br/> <!--第一章-->
<h2><a id="one"></a>第一章：三打白骨将</h2>
<div>
<p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。
</p>
</div> <!--第二章-->
<h2><a id="two"></a>第二章：倒拔垂杨柳</h2>
<div>
<p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。
</p>
</div> <!--第三章-->
<h2><a id="three"></a>第三章：火烧赤壁</h2>
<div>
<p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。
</p>
</div> <!--第四章-->
<h2><a id="four"></a>第四章：刘姥姥进大观园</h2>
<div>
<p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。
</p>
</div>
</body>
</html>
a标签的锚点功能
HTML当中的常见实体内容：
HTML学习笔记《一》 ---- HTML基本认识的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
- ucos实时操作系统学习笔记——任务间通信（消息）
ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...
随机推荐
- 5、xamarin.android 中如何对AndroidManifest.xml 进行配置和调整
降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 我们在翻看一些java的源码经常会说我们要在AndroidManifest.xml 中添加一些东西.而我们使用xamari ...
- (转)Linux 文件目录特殊权限设定(SUID，SGID，SBIT)
原文:https://blog.csdn.net/leshami/article/details/77184029 Linux文件及目录的权限设定,除了我们孰知的读写执行(rwx)之外,还有一些特殊的 ...
- (转)Db2数据库一次生产故障详细记录---数据库坏页
原文:http://www.talkwithtrend.com/Article/216335 前言 数据库最严重的故障莫过于数据库损坏.数据库坏页是数据库损坏的一种,如果数据库中有数据页出现损坏,在没 ...
- 腾讯云域名申请+ssl证书申请+springboot配置https
阿里云域名申请 域名申请比较简单,使用微信注册阿里云账号并登陆,点击产品,选择域名注册 输入你想注册的域名 进入域名购买页面,搜索可用的后缀及价格,越热门的后缀(.com,.cn)越贵一般,并且很可能 ...
- springboot自定义错误页面
springboot自定义错误页面 1.加入配置: @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { re ...
- 【java排序】冒泡排序、快速排序
冒泡排序 冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地 进行直到没有再需要交换,也就是说该数列已经排序完成.这 ...
- 【优化】Filddler用于移动端
Fiddler是一个非常强大的Web调试工具,它能捕获所有客户端和服务器的http和https请求,我们可以对请求监视.设置断点,也能修改输入输出数据,这些特性使得Fiddler成为广大web开发者的 ...
- Postman—命令执行脚本及生成报告
前言 前面的应用中,都是在postman图形界面工具里面进行测试,但是有时候我们需要把测试脚本集成到CI平台,或者在非图形界面的系统环境下进行测试,那么我们该如果处理呢 通过newman来执行post ...
- 针对石家庄铁道大学官网首页的UI分析
身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...
- WPF中触发器（Trigger、DataTrigger）使用动画最简单的方式EnterActions和ExitsActions
1.当鼠标移入后执行某个动画: <Style TargetType="{x:Type StackPanel}"> <Setter Property="R ...