HTML5基础学习
分享一下html5的一些基础，小白上路！
一、html5基本结构
<!DOCTYPE html>
↑声明文档类型为HTML5文件。
文档声明，在HTML文档必不可少。且必须放在文档第一行
HTML4.01之前的写法：<！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "htttp://www.w3.org/TR/html4/strict.dtd">
【meta标签】
1·charset属性：单独使用。设置文档字符集文档字符集编码格式。
>>>写法：<meta charset="UTF-8">
>>>常见的中文编码格式：
GB-2312：国际码，简体中文
GBK：扩展的国标码，简体中文
UTF-8：万国码 Unicode码 基本兼容各国语言
2、http-equiv属性：需配合content属性使用。主要声明浏览器如何解释编译文件。
>>>写法：<meta http-equiv="属性值" content="属性值详细内容">
>>>常见属性值：content-type HTML4.01之前的文档内容编码声明
refresh 网页刷新 set-Cookie设置浏览器cookie缓存
3、name属性：需配合content属性使用。主要用于给搜索引擎提供必要信息。
>>>写法：<meta name="属性值" content="属性值详细内容"
>>>重要属性值：author 作者：声明网站作者，常用公司网址表示
keywords 关键字：网站关键字，多个关键字，用英文逗号分隔
description 网页描述 ：搜索引擎显示在title下的描述内容
*http-equiv和name属性，必须与content属性配合使用。前两者只是用于声明即将修改那些属性值，而实际的属性值内容，在content中描述
<meta http-equiv="set-cookie" content =666666666666666666666666/>
<!--作者-->
<meta name="author" content="http:www.jredu100.com" />
<!--网页关键字-->
<meta name="keywords" content="html5,网页,web前段开发" />
<!--网页描述-->
<meta name="description" content="第一个网页啊" />
<!--声明文档的编码格式-->
<meta charset="UTF-8">
<!--HTML4.01之前的写法：
<!--meta http-equiv="content-type" content="text/html;
charset=UTF-8"/>
link标签
1 作用：用于为网页链接各种文件。
2 常用属性：
rel:用于表明被链接文件与当前文件的关系。此处选icon，表明被链接图片是当前网页的icon图标.
type:报名被链接文件是什么类型。可以省略。
href:表明链接文件的地址。
title：网页的标题，即选项卡的文字
<link rel="icon" type="image/x-icon" href="img/Gfo.png"/>
<title>杰瑞教育</title>
二、常见的块级标签
<title>常见的块级标签</title>
[HTML的标签分类]
1、块级标签：自动换行、前后隔一行
2、行级便签：按行逐一显示
是否自动换行，是我们判断是佛块级标签的标准
[常见的块级标签]
标题标签<h1></h1>……<h6></h6>：默认加粗，H1最大,H6最小
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
水平线<hr/>：水平线标签
<hr />
段落<p></p>
<p>这是一个段落啊</p>
换行<br/>
用于<br />换行
引用<blockquote></blockquote >
1、表明标签的文字为引用的内容，浏览器显示为段落缩进
2、cite属性，表明引用的来源，一般为引用的网址URL
<blockquote cite="表明该文从何处摘录，一般写网址">这里写引用的文字</blockquote>
预格式<pre></pre>
浏览器解析时，会按照等宽字体显示，并且保留标签内的空格和回车。常用于保留代码格式。
<pre>
↖ ↑ ↗
← ㊣ →
↙ ↓ ↘
</pre>
<hr />
<h1>基于布局的块级标签</h1>
[有序列表ol order list]
<ol>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ol>
[无序列表ul unorder list ]
<ul>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ul>
[定义描述列表
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下，标题dt只有一项。描述项dd可以有N多项。
浏览器显示时，标题顶格显示，dd会缩进显示。
<dl>
<dt>这是d1列表的标题</dt>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
</dl>
[图片组合标签figure]
1、<figure></figure>标签有两个子标；
<img src="">:一幅图片，src表示图片的路径
<figcaption></figcaption>:图片的标题
2、浏览器显示为：图片与标题上下排列，且整体向后缩进一个单位。
<figure>
<img src="img/Gfo.png">
<figcaption>图片的标题</figcaption>
</figure>
[分区标签div]
常配合CSS使用，为网页中的最常用分区标签，常用于网页布局使用
<div style="width: :100%; height: 100px;background-color: green;">
里面有字啊
<h1>真的有字啊</h1>
</div>
三、常见的行级标签
[常见的行级标签]
span（文本）
img（图片）
em（强调）
strong（强调）
q（短引用）
a（超链接）
i（倾斜）
b（加粗）
small（缩小字体）
span(文本)：用于包裹一部分文字，进行特定样式的修改。
我真帅<span style="color: blue; font-size: 36px;">shuai</span>!!!
<br />
em（强调）：浏览器会显示为倾斜。
strong（强调）：浏览器会显示为加粗。
i(倾斜)：
b（加粗）：
[Strong/em/i/b的区别]
em和strong都表示强调，而且strong的强调程度要大于em，Strong和em标签均可多层嵌套，表示强调程度的递增。
2、em和i都能倾斜，Strong和b都能加粗。但是Strong和em多了一层强调的语义。可以帮助搜索引擎快速抓取网站重点。而且HTML5要求开发者，尽可能的实现代码的语义化。
<em>我被em标签强调了！！！</em>
<br />
<strong>我被strong强调了</strong>
<br />
q(短引用)：常用语一句话的引用，cite属性表示引用来源
浏览器解析时，会在内容的前后插入双引号。
<q cite="www.jredu100.com">我是用q标签声明的一句引用的话</q>
<br />
small（缩小字体）：small标签可以多层嵌套，表示比默认字体小一号，直到字号小到最小号为止.
big(放大字体)：同samll可以多层嵌套，直到字号最大为止。
但是，在最新规范中，samll和big标签，不被提倡使用。提倡使用style="font-size:11px;"CSS样式替代
<small>我被small缩小了</small>
<br />
<big>我被Big放大了</big>
[img 图片标签]
1、src属性：表示图片引用路径。
>>>常见路径的写法：
①相对路径：
>当图片在当前文件下一层时：文件夹名/图片名 src="img/abc.jpg"
>当图片与当前文件在同一层时： 图片名 src="abc.jpg"
>当图片在当前文件上一层时： ../图片名src="../computer.jpg"
使用相对路径时，图片最外层只能放到网站根目录（图片必须要在项目文件夹中）。
②绝对路径:写法file:///E:aaa.png，但是严禁使用。
③网络连接:直接使用图片的网络地址，但是由于图片在别人服务器，不可控。所以不建议使用。
2、title:当鼠标指上时，显示的文字
3、alt：当图片无法加载时，显示的文字
4、width/height:图片的宽度高度，相当于CSS中的style="width: ; height: ;"
5、align:图片周围的文字，相对于图片的排列方式。可选值:top/center/bottom
<img src="img/Gfo.png" title="当鼠标指上时，显示的文字" alt="当图片无法加载时，显示的文字" width="100" height="100" align="center"/>
[超链接a]
1、href:超链接的跳转地址。可以写网络连接或者本地html文件的相对路径，确定方式同img的src路径。
2、target:设置超链接打开窗口的位置。_self 自身页面打开（默认） _blank 新页面打开
3、title：鼠标指上后显示的文字
【功能性连接】
mailto://qq号@qq.com(//可以不带)
tencent://message/?uin=qq号
【锚连接】
1、页面锚连接
①设置一个锚点：<a name="top"></a> 用name属性表示锚点名称
②在超链接的href属性中，使用#name 跳转到指定的锚点位置：
<a href="#top">
2、其他页面锚链接：
①需跳转的页面设置锚链接
②在超链接的href属性，文件名。html#name
<a href="aaa.html#top"></a>
由于谷歌ie的兼容问题，需在锚点中插入一个空格  ；才能生效：
<a name="top"> ；</a>
<a href="#top"" title="鼠标指上后显示的文字" target="_self">这是一个超链接</a>
HTML5基础学习的更多相关文章
- HTML5 基础学习
HTML 基础学习 参考资料 视频课程:https://www.bilibili.com/video/BV14J4114768 W3C文档:https://webplatform.github.io/ ...
- html5开发学习 html5自学需要怎么学
记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...
- HTML5零基础学习Web前端需要知道哪些？
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- 带你零基础学习HTML5
1个HTML5基础入门教程,4个HTML5小项目教程,带你零基础入门学习HTML5. [HTML5基础入门] 教程将会介绍HTML5中的新特性,包括结构标签.新型表单标签.文件操作.Canvas.本地 ...
- HTML5的基础学习
课前预习:HTML又被叫做超文本标记语言,它不是编程语言,是web中最微不足道的,但又是web中最微不足道的基石, 对零基础学习HTML的人员来说先认识HTML的标签和字体是必不可少的,万丈高楼平地起 ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- [iOS]关于零基础学习iOS开发的学习方法总结
关于零基础学习iOS开发的学习方法总结 最近很多零基础来参加蓝鸥培训的学生经常会问到一些学习方法的问题,就如下我自己见过的好的学习方法一起讨论一下. 蓝鸥iOS开发技术的学习路线图 程序员的主要工作是 ...
- HTML入门1—HTML基础学习
html文档结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- JAVA基础学习-集合三-Map、HashMap,TreeMap与常用API
森林森 一份耕耘,一份收获 博客园 首页 新随笔 联系 管理 订阅 随笔- 397 文章- 0 评论- 78 JAVA基础学习day16--集合三-Map.HashMap,TreeMap与常用A ...
随机推荐
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- 存储过程与SQL语句如何选择
58到家数据库30条军规,有一条是“禁止使用存储过程.视图.触发器.Event”, 高并发大数据的互联网业务,架构设计思路是“解放数据库CPU,将计算转移到服务层”, 并发量大的情况下,这些功能很可能 ...
- DP 动态规划
p1269 马棚 题目: 每天,小明和他的马外出,然后他们一边跑一边玩耍.当他们结束的时候,必须带所有的马返回马棚,小明有K个马棚.他把他的马排成一排然后跟随它走向马棚,因为他们非常疲劳,小明不想让他 ...
- Couchbase 中的分布式储存
Couchbase 是一个具有高性能.可扩展性和可 用性强的数据库引擎.它可以让开发人员通过 NoSQL 的键值存储(二进制或者JSON)或者使用 N1QL 的形式对数据进行操作(N1QL 是非常类似 ...
- 延时循环数组 DelayLoops
在操作mongodb数据库时,查询了数据得到一个数组,然后还得遍历这个数组,再对每个数组的值进行数据库相关的增删改查, 如果单纯的遍历会出错.所以才写了这个简单的类. var a = [1,2,3,4 ...
- 《你不知道的JavaScript》整理（五）——值与原生函数
一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 a.toExponential(); // &quo ...
- Java面试05|MySQL及InnoDB引擎
1.InnoDB引擎索引 InnoDB支持的索引有以下几种: (1)哈希索引 (2)全文索引 (1)B+树索引 又可以分为聚集索引与辅助索引 索引的创建可以在CREATE TABLE语句中进行,也可以 ...
- Flume-ng源码解析之Source组件
如果你还没看过Flume-ng源码解析系列中的启动流程.Channel组件和Sink组件,可以点击下面链接: Flume-ng源码解析之启动流程 Flume-ng源码解析之Channel组件 Flum ...
- 1637: [Usaco2007 Mar]Balanced Lineup
1637: [Usaco2007 Mar]Balanced Lineup Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 393 Solved: 263[ ...
- 微信公众平台跳转网页url详解
1.利用Tomcat服务器部署项目,本地访问可以获取路径资源 2.开辟外网映射,实现全网访问 利用nat123端口映射工具 全网访问 3.将所获取的域名和端口设置到微信页面跳转的url,就完成了该项功 ...