四，JavaWeb简略的谈下前端技术<一>HTML5的各个标记

1，一个基本的HTML的文档结构是这样的：

这个html文档用浏览器打开是这个样子的。

注意！本文介绍的前端技术，都是HTML5的。由于HTML5比之前的版本优化了不少，并且增长了一些接口。

2，HTML排版用的各类标记

1， 特殊标记：HTML文档里边特殊字符是显示不了的。它们须要特别的实体名称。像空格= ，”="；等等。举个例子吧，例如我想在浏览器中显示 <”我是个大帅比”>那么应该这么写。

看到红色圈圈了吧。我是大帅比的两边就是特殊标记。

2，段落标记<p></p>，段落标记没啥卵用，就是在段落前和段落后各加了一个空行。

3，换行标记<br>，换行标记的卵用比较大，由于HTML里边是不认识enter回车的，因此想另起一行就要用段落标记。

4,标题标记<h1></h1>，网站嘛不免有各类各样的标题啊，<h1></h1>就是一级标记，显示的时候，显示的特别大，从h1一直到h6，一共六个级别。

5，无序列表标记，<ul></ul>这个是无序列表，里边的每一列都用<li></li>括起来。

6，有序列表标记，<ol></ol>这个是有序列表，里边的每一列也是用<li></li>括起来，注意有序列表并非会对列表自动排序什么的，而是在浏览器中显示的时候在每一列前边增长了一个标记好1,2,3,4等。。。。

7，图片标记：<img src=”url” width=”value” height=”value” border=”value” alt=”提示文字”>,src表示图片的来源地址，width，height，border分别表示图片的宽，高，外边框的宽度。Alt若是因为各类缘由，图片没有显示，那么就会显示里边的提示文字。

8超连接标记，这个很是重要，几乎每一个网站都有这个，点击一个链接后，跳转到另外一个页面啥的。<a href=”url” hreflang=”language” name=”bookmarkname” type=”mimetype” charset=”code” coords=”coordinate” target=”target” tabindex=”value” accesskey=”key”></a>呵，好长一串。。其实一个简单的超连接，只须要<a href=”url”></a>就好了

9，表格标记：这个不想提，好麻烦几乎用不到。

10，播放音视频：<audio autoplay>您的浏览器不支持<audio>标记！ <source src=”audio url.mp3” type=”audio/mp3”></audio> 您的浏览器不支持，是当播放的音频显示不出来的时候显示的，固然有时候并非真的由于浏览器不支持，管他呢，先把锅甩出去再说，你不支持啊，和我不要紧啊。。。

11，播放视频：<video src=”url” width=”value” height=”value” autoplay=”ture/false” control=”true/false”> 您的浏览器不支持<video>标记！<video> 固然浏览器不支持一样为了甩锅哈，src指定视频的在服务器的位置，width，height，autoplay，contory分别指宽，高，是否自动播放，是否可控。

12，HTML5还增长了header，footer，section，article，aside，nav。我的以为这些新增长的标签并没什么卵用，可是和CSS一块儿配合使用，应该方便很多。

13，表单标记：这个很重要，若是要向服务器提交一些信息的话，就会用到这个标记。直接举个例子吧，一个简单的网站登陆：

效果以下：

固然还有一些其余乱起八糟的标记，可是我们目标是后台开发工程师，我就再也不一一的介绍了，有兴趣或者真的要开发一些简单的页面，建议直接去一些网站看源代码。在某个网站，点击鼠标右键，查看源代码~。好了，暂时就这样了，晚安。

下期预告：《简略的谈下前端技术<二>CSS层叠样式表》

若是像查看更多的原创技术文档，请订阅个人公众号：ITYaoDao,或者直接扫描下边的二维码：