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 ...
随机推荐
- Spring+SpringMVC+MyBatis+easyUI整合基础篇（一）项目简介
很久之前就打算开始写一下自己的技术博客了,实在抽不出时间所以计划一直搁置了,最近项目进度渐渐缓了下来,不那么忙了,也因此开始筹备自己的博客.说到这次博客的主角,也是无心插柳找到的,来源于两年前自己写的 ...
- 学习笔记——Java数字处理类
1.数字格式化 使用Java.text.DecimalFormat格式化数字,一般使用其中的DecimalFormat类.如: import java.text.DecimalFormat; publ ...
- 【转】Java中关于异常处理的十个最佳实践
原文地址:http://www.searchsoa.com.cn/showcontent_71960.htm 导读:异常处理是书写强健Java应用的一个重要部分,Java许你创建新的异常,并通过使用 ...
- Asp.Net 常用工具类之加密——对称加密DES算法（2）
又到周末,下午博客园看了两篇文章,关于老跳和老赵的程序员生涯,不禁感叹漫漫程序路,何去何从兮! 转眼毕业的第三个年头,去过苏州,跑过上海,从一开始的凌云壮志,去年背起行囊默默回到了长沙准备买房,也想有 ...
- Hadoop伪分布安装配置
安装环境: 系统:Ubuntu 14.10 64bit hadoop:2.5.1 jdk:1.8.0_11 安装步骤: 一.安装JDK 安装 jdk,并且配置环境以及设置成默认 sudo gedi ...
- Linux进程管理详解
何谓进程?进程,就是正在执行的一个程序或命令,每一个进程都是一个运行实体,有自己的地址空间,并占用一定的系统资源.简而言之,进程就是运行中的程序.在Linux中,诸如ls等命令都是进程,只不过某些命令 ...
- 基于vue的多引擎搜索及关键字提示
关键代码: <div class="header-search"> <form id="form" action="http://m ...
- JavaSE之认识java
本来很早之前就应该总结自己在JavaSE中系统学到的知识了,马上就要出去工作了,想想自己还是非常菜的菜鸟,自己就夜不能寐呀.现在从zero基础开始带大家一起回顾学习的基础知识. 现在已经是凌晨了,但是 ...
- 你可记得曾经的-------- C#面向对象的“基础”
1.C#中构造函数定义的理解: ①构造函数名与所在的类名相同 ②构造函数可以重载 ③构造函数可以带参数 ④构造函数没有返回值,且不允许写出void,可以有参也可以无参 ...
- 企业架构（TOGAF）学习
自从听了公司内部的一堂<企业架构设计>培训,顿时觉得如获至宝. 先说下笔者,笔者是一名二流本科毕业,工作三年,基层的软件开发工程师,梦想着有朝一日成长成一名架构师.可是笔者对于如何成长成一 ...