一篇文章了解HTML5
2018-03-07 本文已影响0人
奥之
一篇文章了解HTML5
市面上的html5教程冗长且难于理解，实际上html5是一门非常容易入门的语言，本篇文章让你初步了解html5，进入建立网站的大门
认识基本结构
<!DOCTYPE html>
<!-- 这个是头文件 -->
<html>
<!-- 这个是html的标志 -->
<head>
<!-- 这儿填你需要引入的文件，以后再讲 -->
<meta charset="utf-8">
<!-- 这个理解为引入的字符 -->
<title></title>
<!-- 两个title之间可以填入网站的名字 -->
</head>
<body>
<!-- body，顾名思义，网页的主体 -->
<h1>认识h5基本结构</h1>
<p>两个p之间可以插入文字，也就是段落</p>
</body>
<!-- 结束网页内容 -->
</html>
处理文字
- HTML使用
<p>标签定义段落，具体使用方法如下：
<p>This is a paragraph.</p>
- 如果你想高亮段落中的某一段文字，可以使用
<mark>标签
<mark>我是被高亮的部分</mark>
- 如果想加粗某一段文字，可以使用
<b>标签
<b>Bold Text Here</b>
- 如果想实现某一段文字的倾斜，可以使用
<i>或者<em>标签
<i>Italicized Text Here</i>
<em>Italicized Text Here</em>
- 如果想给文字添加下划线，可以使用
<u>标签
<u>mispelled</u>
- 如果想标记某段文字让他显示省略形式，可以使用
<abbr>
<abbr title="Hypertext Markup Language">HTML</abbr>
- 如果要标记某段文字被删除，可以使用
<del>
<del>Deleted Text</del>
- 如果要插入某段文字，使用
<ins>
<ins>New Text</ins>
- 文字的上标和下标
<sup>superscript here</sup>
<!-- 这是上标 -->
<sub>subscript here</sub>
<!-- 这是下标 -->
处理链接
- HTML链接使用
<a>标签定义你想定义的东西，东西链接地址在href属性中进行指定。
- 比如你想实现点击某一段文字，打开网页的效果，可以敲入如下代码
<a href="https://我的网站地址">我想去的网站</a>
-
上文的链接改成你喜欢的网站链接，即可实现上文所说的效果。
-
如果要链接另外一个标题的话，可以写下如下的代码
<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>
-
这段话的意思就是点击jump to first/second Topic 可以跳转到第一/二个标题。
-
当然，链接的内容还可以是电话，例如下面这行代码：
<a href="tel:1234567890">Call us</a>
当有用户点击上面这行代码的时候，他的设备会为他自动跳转电话界面
- 如果想在一个新的窗口打开跳转的网页的话，可以这么处理
<a href="example.com" target="_blank">Text Here</a>
-
这样就能够在一个新窗口里面跳转了
-
也可以通过href来链接javascript(并不建议这样做)
<a href="javascript:myFunction();">Run Code</a>
<a href="#" onclick="myFunction(); return false;">Run Code</a>
- 如果还没有决定好要链接什么，可以用
#来代替要链接的内容
<a href="#!" onclick="myFunction();">Run Code</a>
- 链接到邮箱地址
<a href="邮箱地址:example@example.com">Send email</a>
<a href="邮箱地址：example@example.com?cc=example2@example.com&bcc=example2@example.com">Send email</a>
- 如果要在邮箱中省去再打一遍邮件内容和主题的过程，可以加入如下代码
<a href="邮件地址:example@example.com?subject=主题&body=内容">Send email</a>
处理列表
在网页中肯定会有用到列表的时候，那么用h5该怎么去表示呢？
- 有条理的列表
<ol>
<li>Item</li>
<li>Another Item</li> <li>Yet Another Item</li>
</ol>
这个在网页中的显示效果大致如下
- Item
- Another Item
- Yet Another Item
- 如果想改成不是1开头的列表的话，在开头加入如下的代码
<ol start="你希望列表开始的数字">
- 无序列表
<ul>
<li>Item</li>
<li>Another Item</li> <li>Yet Another Item</li>
</ul>
- 缩进列表
<ul>
<li>item 1</li> <li>item 2
<ul>
<li>sub-item 2.1</li> <li>sub-item 2.2</li>
</ul> </li>
<li>item 3</li> </ul>
表格
在网页中也有需要用到表格的地方，毕竟你总不能直接截个Excel之类的软件的图放在网页上吧
- 简单表格
<table> <tr>
<th>Heading 1/Column 1</th>
<th>Heading 2/Column 2</th> </tr>
<tr>
<td>Row 1 Data Column 1</td> <td>Row 1 Data Column 2</td>
</tr> <tr>
<td>Row 2 Data Column 1</td>
<td>Row 2 Data Column 2</td> </tr>
</table>
- 这种简单的表格看上去并不美观，我们可以给他增加行数和列数
<table> <tr>
<td>row 1 col 1</td> <td>row 1 col 2</td> <td>row 1 col 3</td>
</tr> <tr>
<td colspan="3">This second row spans all three columns</td> </tr>
<tr>
<td rowspan="2">This cell spans two rows</td> <td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr> <tr>
<td>row 4 col 2</td>
<td>row 4 col 3</td> </tr>
</table>
- 如果你觉得还是不够详细，并想把列祖组合在一起的话，可以用下面的代码
<table>
<colgroup span="2"></colgroup> <colgroup span="2"></colgroup> ...
</table>
当然我觉得h5自带的表格样式其实挺不好用的，表格相关的我们到了css再说
插入图片和视频
- 插入图片
<img src="图片地址及名字" alt="图片名字"style="width:宽度数字px;height:高度数字px;>
- 插入视频
<video width="320" height="240" controls>
<!-- 高度和宽度 -->
<source src="视频名字" type="video/mp4">
</video>
关于html5最最最基本的东西基本就是这些，了解后可以轻松编写一些简单的网页，但是如果想要做好一个网站，还是需要css和js的帮助.
