H5入门这一篇就够了

H5入门这一篇就够了
一、什么是HTML
       HTML的全称是 Hyper Text Markup Language，翻译过来就是超文本标记语言，是目前网络上应用最为广泛的语言，它不是编程语言，而是一种标记语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
       说白了它就是用来构建网页的，所以话不多说，先来创建一个HTML文件吧。
二、创建HTML
       创建HTML总得使用一款工具吧，那么它来啦。这里推荐一款非常好用而且是国产的前端Web开发工具HBuilder，当然还有比它更加好用的Web开发工具：webstorm、VS code等。这里只是入门的简单示例，所以就不用这种专门开发大前端的工具了。毕竟它也是国产的开发工具嘛，有时候我们还是需要支持一下国产的开发工具滴。个人认为Hbuilder还是比较适合新手入门的。

官网地址：https://www.dcloud.io/
下载地址：https://www.dcloud.io/hbuilderx.html

   下载完成后解压打开，创建一个项目。
   此种方式创建开发工具会自动创建一个默认的 index.html文件，打开index.html的内容是：
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>
```
   上面就是HTML的整体骨架。这是HTML5的定义方式。所以肯定会与HTML4有区别，具体的区别还请自行去问度娘。现在基本都是以H5标准开发前端。
    来认识一下上面的的标签：
    ①、<!DOCTYPE html>：必须在文档开头第一行，表示标记为文档类型。（必不可少）
    ②、<html>:HTML页面的根元素，告知浏览器其自身是一个HTML文档。（必不可少）
    ③、<head>:用于表述网页的元数据，及网页的基本信息。（必不可少）
    ④、<meta>：表示元数据，是描述文件类型和编码，搜索关键字和描述。它永远位于<head>元素内部。元数据它不会显示在页面上，但是对于机器是可读的。
            <meta>标签有两种格式如下：
```
<meta name="keywords" content="html入门" charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
```
简单介绍其中的属性：
- charseat属性：设置文档字符集编码格式，如UTF-8，GBK。它是必要属性，因为要防止页面出现乱码。而下面的是可选属性。
- name属性:写给搜索引擎看。需掌握的属性值author（作者）keywords（关键字）description（网页描述），配合content使用。
- http-equiv属性：将我们的信息写给浏览器看，让浏览器按里边的要求执行。属性值：Content-type（文档类型）Refresh（网页定时刷新）set-cookie（设置缓存），必须配合content使用，因为http-equiv属性只表明设置哪部分，具体的设置内容放在content属性中。
- content属性配合其他使用。
       meta标签的详细使用可以参考这篇博客：meta标签的作用及整理    我认为的meta标签一方面是设置浏览器的一些功能，另一方面是方便搜索引擎的收录关键词。

    ⑤、<title>：表示网页的标题。例如:
    ⑥、<body>：表示显示在网页上的内容。（它是最重要也是最主要的部分）
    HTML的基本整体骨架就介绍这么多了，接下来我们学习常用标签。
三、常用的标签
     标签参考：https://www.runoob.com/tags/html-reference.html
     HTML中的注释： 
     ①、标题 h
     HTML的标题通过<h1>—<h6>标签来定义，<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
```
<!DOCTYPE html>
<html>
  <head>
	<meta  charset="utf-8"/>
	<title>标题h</title>
  </head>
  <body>
	<h1>这是标题1</h1>
	<h2>这是标题2</h2>
	<h3>这是标题3</h3>
	<h4>这是标题4</h4>
	<h5>这是标题5</h5>
	<h6>这是标题6</h6>
  </body>

</html>
```
     ②、段落 p
     HTML段落通过标签 <p> 来定义。
```
<!DOCTYPE html>
<html>
  <head>
	<meta  charset="utf-8"/>
	<title>网页标题</title>
  </head>
  <body>
        <p>这一个是段落</p>
	<p>这一个是段落</p>
	<p>这一个是段落</p>
	<p>这一个是段落</p>
  </body>

</html>
```
③、超链接 a
HTML超链接通过标签 <a> 来定义，用于从一个页面链接到另一个页面。
```
<!DOCTYPE html>
<html>
  <head>
	<meta  charset="utf-8"/>
	<title>网页标题</title>
  </head>
  <body>
        <a href = "http://www.baidu.com" title="百度">这是一个超链接</a><br/>
        <a href = "http://www.baidu.com"target="_blank">这是一个超链接，在另一个窗口打</a><br/>
  </body>

</html>
```
a标签中的相关属性：
- href:规定链接的目标 URL，可以是网络连接，也可以是本地文件。
- target：超链接打开的位置，_self自身页面（默认）_blank 新页面。
- title：鼠标放在上面之上后显示的文字。
- rel:指定当前文档与被连接文档的关系。"chapter":文档的章，"section"：文档的节，”subsection”：文档的子段。
④、图片 img
HTML图片通过标签 <img> 来定义。
```
<!DOCTYPE html>
<html>
  <head>
	<meta  charset="utf-8"/>
	<title>网页标题</title>
  </head>
  <body>
        <img src = https://www.baidu.com/img/bd_logo1.png /><br>
        <img src = https://www.baidu.com/img/bd_logo1.png align="right"/><br>
        <img src = https://www.baidu.com/img/bd_logo1.png title="百度图片" alt="百度图片"/><br>
        <a href="https://www.baidu.com"><img src = https://www.baidu.com/img/bd_logo1.png height="100px" width="100px"/></a>

  </body>

</html>
```
img标签中的相关属性：
- src:规定显示图像的 URL。
- align:设置图片周围文字相对于图片的位置，top center botton left right。
- title:图片的标题，鼠标指上后显示的文字。
- alt:当图片无法加载时显示的文字。
- height="100px"width="100px"图片的宽度高度，可以用css样式（style=""）代替。
⑤、列表ol-li、ul-li、dl-dt-dd
HTML列表通过标签<ol>-<li>、<ul>-<li>、<dl>-<dt>-<dd>，分为有序和无序列表。
```
<!DOCTYPE html>
<html>
  <head>
	<meta  charset="utf-8"/>
	<title>网页标题</title>
  </head>
  <body>
	
	<dl>
	    <dt>第一行</dt>
	      <dd>描述第一行</dd>
	    <dt>第二行</dt>
	      <dd>描述第二行</dd>
	 </dl>
	
    <ul>
        <li>ul第一行</li>
        <li>ul第二行</li>
        <li>ul第三行</li>
        <li>ul第四行</li>
    </ul>
	
    <ol>
        <li>ol第一行</li>
        <li>ol第二行</li>
        <li>ol第三行</li>
        <li>ol第四行</li>
    </ol>

  </body>

</html>
```
⑥、选择框select-option
HTML的选择框通过标签<select>-<option>来定义。其中<option>是可以单独使用的，但是不和<select>配合使用那么这个标签无任何意义。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
            <select name="select" autofocus disabled size="5">
                <option value="1">1</option>
	        <option value="2">2</option>
	        <option value="3">3</option>
	        <option value="4">4</option>
	        <option value="5">5</option>
	        <option value="6">6</option>
            </select>
	</body>
</html>
```
select-option标签的相关属性：
- autofocus：在页面加载时下拉列表自动获得焦点。
- disabled：禁止使用下拉列表。
- name：下拉列表的名称。
- required：用户在提交表单前必须选择一个下拉列表中的选项。
- size：下拉列表中可见选项的数目。
- value：选择框提交至服务器的值。
- select：select="selected"表示默认选中。
⑦、容器 div、span
div和span是HTML中两个非常重要的标签，会在后面的编码中大量使用，尤其是div标签。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	<body>
	    
	    <div>1</div>
	    <div>2</div>
            <div>3</div>
	    <div>4</div>

	    
	    <span>5</span>
	    <span>6</span>
	    <span>7</span>
	    <span>8</span>
	</body>
</html>
```
       div和span区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。div和span一般都是用CSS来控制它们的样式。
     ⑧、表格 table
     HTML表格通过<table>标签来定义。表格的行用<tr>表示；表格的表头用<th>表示，默认加粗，单元格居中；表格的列用<td>表示。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <table border="1"cellpadding="0" cellspacing="0">
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
            <tr>
                <td>第一行数据</td>
                <td>第一行数据</td>
                <td>第一行数据</td>
            </tr>
            <tr>
                <td>第二行数据</td>
                <td>第二行数据</td>
                <td>第二行数据</td>
            </tr>
        </table>
    </body>
</html>
```
table标签中的相关属性：
- border：表格边框大小。当border属性增大时，只有外围框线增粗，中间框线不变。
- cellspacing：单元格与单元格之间的距离当，HTML5已经不支持了，建议用CSS代替。
- cellpadding：每个单元格内文字与边缘之间的距离，HTML5已经不支持了，建议用CSS代替。
⑨、输入框 input
HTML输入框通过<input>标签来定义。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        输入框：<input type="text" name="input" value="默认值"/><br/>
        密码：<input type="password" name="password" value="123456"/><br/>
        提交按钮：<input type="submit" name="submit" value="提交"/><br/>
        单选框：<input type="radio" name="radio" />
               <input type="radio" name="radio" />
               <input type="radio" name="radio" /><br/>
        复选框：<input type="checkbox" name="checkbox"/>
               <input type="checkbox" name="checkbox"/>
               <input type="checkbox" name="checkbox"/><br/>
        重置按钮：<input type="reset" /><br/>
        普通按钮：<input type="button" /><br/>
        文件：<input type="file" name="file"/><br/>
        图片：<input type="image" src="C:UsersAdministratorPictures头像0.jpg" name="image"/><br/>
        日期时间：<input type="datetime" name="datetime"/><br/>
    </body>
</html>
```
input标签中的相关属性：
- type:表示输入框的类型。下面有详细介绍
- name：输入框的名字，一般情况下必填。因为：传递数据的时候使用name=value 的方式传递。
- value：输入框的默认值。
- placeholder:提示内容，不能指定默认值，当提示框有内容时，提示内容消失。
- autofocus：当页面加载时 <input> 元素应该自动获得焦点。
- pattern：用于验证 <input> 元素的值的正则表达式。
- disabled：是否禁用输入框。
- readonly：输入框字段是只读的。
- checked：默认选中。(只针对 type="radio" 或者 type="checkbox")
- hidden：hidden="hidden"隐藏输入框，用于隐藏域传值。等同于type="hidden"隐藏域传值。
- step：输入框合法数字的间隔。
input标签中的type属性详解：
- text：文本输入框
- password：密码输入框，浏览器显示为点。
- submit：提交按钮：提交表单数据。
- radio：单选按钮。name和value属性值必须全部存在，提交时，提交的是value中的属性。radio凭借name中的属性区别是否为同一组，name相同为同一组，同组中只能选一个。
- checkbox：复选按钮
- reset：将表单数据重置为初始状态。
- file：文件上传按钮。
- image：图形提交按钮。
- bottom：普通按钮。
- date、datetime：日期和日期时间。
⑩、表单 form
HTML表单通过<form>标签来定义。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <form method="post" action="login" name="form">
            输入框：<input type="text" name="input" value="默认值"/><br/>
            密码：<input type="password" name="password" value="123456"/><br/>
            提交按钮：<input type="submit" name="submit" value="提交"/><br/>

        </form>
	</body>
</html>
```
form标签中的相关属性：
- method：发送表单数据的方法。get和post方式。
- action：表单数据发送地址。
- name：表单的名称。
- enctype：发送表单数据之前如何对其进行编码（适用于 method="post" 的情况）。application/x-www-form-urlencoded是默认编码。multipart/form-data以二进制的形式传送，用于上传文件。text/plain以纯文本形式进行编码，其中不含任何控件或格式字符。
其中get和poet方式的区别在于：
- get传参使用URL：http://服务器地址?name1=value1&name2=value2。使用get方式所有信息可在地址栏看到，并且可以通过地址栏随意传递数据，对数据来说非常不安全。
- post使用HTTP请求传输协议，地址栏不可见，比较安全，且传递数据无限制。所以一般使用post，尽量不要用get。
⑪、文本域 textarea
HTML文本域通过<textarea>标签来定义。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
    <body>
        <textarea rows="10" cols="10" name="name">文本域</textarea>
        <textarea rows="10" cols="10" autofocus="autofocus">文本域</textarea>
        <textarea rows="10" cols="10" maxlength="100">文本域</textarea>
        <textarea rows="10" cols="15" placeholder="请输入一段文字"></textarea>
        <textarea rows="10" cols="10" readonly="readonly" required="required">文本域</textarea>
    </body>
</html>
```
textarea标签中的相关属性：
- autofocus：当页面加载时，文本区域自动获得焦点。
- cols：本区域内可见的宽度。
- rows：文本区域内可见的行数。
- disabled：禁用文本区域。
- maxlength：规定文本区域允许的最大字符数。
- name：文本区域的名称。
- placeholder：规定一个简短的提示，描述文本区域期望的输入值。
- readonly：本区域为只读，不可写。
- required：规定文本区域是必需的/必填的。
⑫、HTML常用的字符实体
```
&nbsp; —— 空格
&lt; —— <
&gt; —— >
&amp; —— &
&copy; —— © 版权（copyright）
```
那么H5的入门就介绍怎么多了，正所谓学习是一个在于坚持，在于积累的过程，只要每天学习一点点，每天就会进步一点点，那么今天你学习了吗？
如果博客对你有一点点帮助的话，哪怕只有一点点，能否动一下靓仔靓女的手指点个赞。
相关阅读:
简单的PHP+SMARTY分页类
 三大WEB服务器对比分析（apache ,lighttpd,nginx）
逐步设置vim C/C++语法高亮显示和自动缩进
 Lighttpd 的安装配置(web服务器软件)
ASP如何获取文件和目录空间大小
 innerHtml用法
 临时表操作的一些见解(解决了我在存储过程中使用临时表的困惑）
Javascript的IE和Firefox兼容性汇编
 Javascript的IE和Firefox兼容性汇编
 innerHtml用法
原文地址：https://www.cnblogs.com/tanghaorong/p/12401991.html

H5入门这一篇就够了

一、什么是HTML

二、创建HTML

三、常用的标签