前言:
首先为什么学习HTML,因为我最终的目的是学习并熟练掌握Bootstrap前端技术,而在大学的四年中接触了HTML、CSS、JavaScript和JQuery前端编程技术,但是都不是很熟练。在偶然的一次浏览别人博客的过程中,看见了对我来说比较新颖的Bootstrap前端技术,然后自己也花了一点时间去学习先关的控件和属性,但是最后感觉不太理想。这种效果就像是坐进观天,总是融入不了Bootstrap这个大世界。心里总觉得需要了解它底层封装的CSS和相关的HTML以及JS,然后又想到自己的前端编程技术确实不扎实。所以这次系统的学习下前端的东西。
正文:
HTML(HyperText Markup Language)有很多的版本,学习技术肯定是学习比较新的而且比较稳定的编程技术【不是一种编程语言,而是一种标记语言】。所以这里我们重点学习HTML5。HTML5是由万维网联盟(W3C)于2014年10月完成的HTML最新的标准化,设计的目的是为了在移动设备上支持多媒体。但是由于HTML中很多属性是向后兼容的,所以我们先学习HTML。
1. 文档类型申明
<!DOCTYPE html> //doctype 声明是不区分大小写的
2. 文档编码申明
<meta charset="utf-8"> //需要申明,避免乱码出现
3. 简单的HTML5文档
<!DOCTYPE html> //声明为 HTML5 文档
<html>
<head>
<meta charset="utf-8"> //文档编码
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
HTML 元素:
0. <head>标签中的元素标签
有 <title>, <style>, <meta>, <link>, <script>, <noscript>, 和<base>.
> base 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<base href="http://www.weizuled.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.weizuled.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
理解下并记住用法:
<base href="http://www.weizuled.com/images/" target="_blank">
> <meta> 标签
用来描述HTML文档的描述,关键词,作者,字符集等。
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
> <link> 标签通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
> 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
1. 标题标签
<h1>……<h6>来定义
2. 超链接标签
<a href="#" target="_blank">这是一个链接</a> //含有属性target,可以定义被链接的文档在何处显示
> id属性实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#tips">点击这里跳转</a>
<br> //这里省略了一些内容
<br>
<p id="tips">ajflajfla</p>
<br>
</body>
</html>
运行结果为书签效果,在点击了超链接后,该网页文件会滚动到指定的id="tips"的位置。常常用作左边导航的设置。
> 跳出框架:
在页面中,我们可能会用到框架页,在通常情况下在框架页中的链接,点击后的效果还是在框架页中显示,但是有时候,我们需要刷新整个浏览器窗口页面,也就是需要跳出框架,代码如下:
<p>跳出框架</p>
<a href="www.baidu.com" target="_top">点击这里</a>
> 电子邮件链接:
<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<p>
<b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>
3. 图像标签
<img src="/images/logo.png" width="258" height="39" alt="好看的图片" />
src 指 "source"。源属性的值是图像的 URL 地址
alt 是图片加载失败时候显示的图片说明文字
> 创建图片链接:
<p>图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
> 创建图像映射
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)
1、矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
4. 水平线
<hr/>来定义 //可以写作<hr>,但是<hr/>有更好的考虑(所有标签均闭合)
5. 注释
<!-- 这是一个注释 -->
6. 段落标签
<p>这是一个段落 </p> //p标签是块级元素,独占内容行(效果和div类似)
7. 换行
<br> //同样的,建议采用<br/>
8. 文本格式化相关标签
> 加粗字体
<b>这个文本是加粗的</b> //定义粗体文本
<strong>这个文本是加粗的</strong> //定义着重文字
> 斜体字体
<em>这个文本是斜体的</em>
<i>这个文本是斜体的</i>
> 字体的放大与缩小
<big>这个文本字体放大</big>
<small>这个文本是缩小的</small>
> 上标与下标
这个文本包含<sub>下标</sub>
这个文本包含<sup>上标</sup>
> 文本排版样式原样输出(预格式文本)
<pre>
此例演示如何使用 pre 标签
对空行和 空 格
进行控制
</pre>
> 地址信息
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
> 缩写(鼠标hover时,显示全部文本内容)
<abbr title="etcetera">etc.</abbr><br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
> 文本显示的方向
<p>该段落文字从左到右显示。</p>
<p><bdo dir="ltr">该段落文字从左到右显示。</bdo></p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
> 删除字和添加字
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
-----------------------------------------------------------------------------------------------------------------
免责申明:以上内容来自互联网。
-----2018年6月12日