在当今的互联网+时代，国内的互联网领域也发展迅速，所以在这里写一些关于web前端h5的简单介绍分享给感兴趣的同学，让大家对html有一个基础的了解，也希望同样专注于H5的同学们能够相互学习帮助，共同进步。
HTML（Hyper Text Markup Language）：超文本标记语言，它本身是一种标记语言，并不是编程语言，是用来描述网页的，而标记语言是一套标记标签。
起始标记
<>
结束标记
</>
标记+特殊的字符组成标签
标签的作用就是告诉浏览器内容的起始和结束的位置
例如
<h1></h1>
下面我们简单看一下html的基本模板，了解一下html的整体结构，其中包含的是html所必须得基础标签：
!-- 不是标签 告诉浏览器使用html5的标准解析这个文件 -->
<!doctype html>
<!-- html标签代表的就是整个html文档 -->
<html>
<!-- 代表整个html文档的头部 -->
<head>
<meta charset="utf-8"/>
<!-- 代表网页的标题，可以显示在浏览器的选项卡中 -->
<title>hello</title>
</head>
<!-- 展示网页的内容 -->
<body>
你好呀.
</body>
</html>
接下来我们看一下html的中用到的基础标签和它所代表的含义：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>基础标签</title>
</head>
<body>
<!-- h1标签可以作为整个网页内容的标题，一般网页只有一个h1 -->
<h1>宝宝离婚了</h1>
<h2>宝宝离婚了</h2>
<h3>宝宝离婚了</h3>
<h4>宝宝离婚了</h4>
<h5>宝宝离婚了</h5>
<h6>宝宝离婚了</h6>
<!-- 段落 每一段文字都是一个p标签-->
<p>宝宝心里苦，但是宝宝不说，<br/>现在宝宝说了，宝宝要离婚。宝宝不知道宝宝的宝宝是不是宝宝的宝宝。</p>
<!-- 文字的容器 用来展示文字 -->
<span>我是span标签</span>
<!-- 容器 -->
<div>我是div标签</div>
<!-- b，strong，em，i标签都是用来展文字的; b，strong是加粗效果 i，em是斜体效果 -->
<b>我是b标签</b>
<strong>我是strong标签</strong>
<i>我是i标签</i>
<em>我是em标签</em>
<!-- a链接标签，锚点; href是a标签的属性 ; href属性:1.网站 2.写自己的html文件 3.# 占位
target="_blank"可设置链接在新的窗口打开，默认是在原有的窗口打开 title：鼠标悬浮在标签上面的时候会有一个提示 -->
<a target="_blank" title="去百度呀">百度</a>
<!-- src 1.给网络图片的url； 2.给本地图片的路径 相对路径：从本html所在的位置开始查找；（../ 返回上一级文件夹） 绝对路径：从根目录查找（/Users/lanou/Desktop/hehe.jpg 可以使用文件终端查找）
alt属性 作用是1.文本替代方案（图片显示不出来的时候会显示文字；）2.可以让搜索引擎收录图片的时候检测到我们图片的内容 3.对seo有一定的优化作用 -->
<img src="image/hehe.jpg" alt="美女"/>
<!-- hr：分割线 -->
<hr/>
<!-- br：换行 -->
<br/>
</body>
</html>
每一个html都有它自己的特性，通过在浏览器中打开检查工具可以看到它具体的属性；在制作网页的时候，同一个标签我们往往会需要使用不同的样式，必须字体颜色，字体大小等，这时候我们需要通过引入CSS样式对其做改变。下面我们来看一下内联样式引入：通过在起始标签里加入style，并对属性赋值来改变标签的样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>标签特性和CSS样式</title>
</head>
<body>
<!-- CSS样式引入
1.行间样式 -->
<div style="background:red;width:200px;height:100px;">我是div1</div>
<div>我是div2</div><br/>
<!-- img标签页可以改变宽和高；第一种：通过行间样式在style属性里写width：200px；第二种：通过img标签的width属性直接给宽和高（一般使用第二种） -->
<img width="200" style="width:200px;height:200px;" src="hehe.jpg" alt="美女"/>
<div>3333333</div>
<br/>
<div style="background:blue;">测试div的特性</div>
<h1 style="background:green;width: 200px;height: 100px;">1111</h1>
<a target="_blank" style="background:yellow;width:200px;height:100px">百度</a><br/><br/><br/><br/><br/><br/><br/>
<p>13334444<br/>44444</p>
<br/>
<div style="background:green;width:400px;height:100px;">
<div style="background:yellow;">1111</div>
</div>
<!-- display可以改变标签的特性：inline代表行级；block代表块级 行块可以互换。
-->
<div style="background:blue;display:inline;">我是块级div</div>
<span style="background:green;display:block;">我是行级span</span>
<!-- CSS文本样式、边框 -->
<div style="color:red;">文字颜色</div>
<div style="font-size:30px;">文字大小</div>
<div style="text-indent:20px;">文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进</div>
<div style="text-align:center;">对齐方式</div>
<div style="text-align:left;">对齐方式</div>
<div style="text-align:right;">对齐方式</div>
<!-- 系统默认字体在一行种上下是居中的；所以设置行高可以上下居中；对于单行文字可以用行高来设置，多行的会有bug，不会换行；
当行高和容器高度一样的时候，就可以让文字在容器里竖直方向居中（仅限于单行文字） -->
<div style="color:white;background:blue;width:300px;height:100px;text-align:center;line-height:100px;">行高</div>
<div style="color:white;background:pink;width:300px;height:100px;text-align:center;line-height:100px;">行高行高行高行高行高行高行高行高行高行高行高行高11122</div>
<div style="color:white;background:pink;font-size:20px;">行高行高行高行高行高行高行高行高行高行高行高行高</div>
<div style=""></div><br/><br/><br/><br/><br/><br/>
<div style="background:green;width:400px;">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
</body>
</html>
了解上面这些HTML基础的知识后，就可以用在网页上呈现一些简单的内容了。今天先写这些html的简介，后面还会写一些html的基本内容介绍，以及在编写网页中得一些心得。若有有什么错误的地方以及感兴趣的问题，可以留言讨论，谢谢大家！
|
|
收藏
淘帖
踩
