HTML基础教程

　　　　超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。且.html与.htm文件类型相同，并无区别。

HTML的基础格式样式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>博客园(cnblogs.com)</title>
 6 </head>
 7 <body>
 8 
 9 <h1>标题测试</h1>
10 <p>段落测试</p>
11 
12 </body>
13 </html>

 

  • <!DOCTYPE html> 声明是html文件
  • <html>文件是html页面的根目录
  • <head>元素包含了文档的元数据，例子如上述所示
  • <title>描述了标题
  • <body>元素包含了可见的页面内容
  • <h1>元素定义了大标题
  • <p>元素定义了一个段落

　　　　下面是一个简单的HTML的实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>
 6 页面标题</title>
 7 </head>
 8 <body>
 9  
10 <h1>我的第一个标题</h1>
11  
12 <p>我的第一个段落。</p>
13  
14 </body>
15 </html>

HTML基础–一个实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>博客园</title>
 6 </head>
 7 <body>
 8 
 9 <h1>这是标题 1</h1>
10 <h2>这是标题 2</h2>
11 <h3>这是标题 3</h3>
12 <h4>这是标题 4</h4>
13 <h5>这是标题 5</h5>
14 <h6>这是标题 6</h6>
15 
16 <p>这是一个段落。</p>
17 
18 <a href="https://www.cnblog.com">博客园</a>
19 
20 <img src="logo.png" width="258" height="39" />
21 </body>
22 </html>

HTML元素以及属性

　　　　HTML元素的具体构成如下表所示：

开始标签* 元素内容 结束标签*
<p> 这是一个段落 </p>
<a  href=”default.htm”> 这是一个超链接 </a>
<br> 换行  

　　　　Tips：对于元素部分，需要注意部分内容：某些HTML元素可以是空内容，空内容在开始标签中关闭。

　　　　HTML属性

　　　　属性示例如下：

<a href="http://www.runoob.com">这是一个链接</a>

　　　　适用于大部分的HTML5的表单元素当中的属性列表如下：

属性 描述
class 为html元素定义一个或者多个类名
id 定义元素的唯一性id
style 规定元素的行内样式
title 描述元素的额外信息

HTML标题和段落

　　　　具体参照上述的实例，此处主要列举一些标签参考手册。

属性 描述
<html> 定义html文档
<body> 定义文档的主体
<h1>-<h6> 定义html标题
<hr> 定义水平线
<!–> 定义注释
<p> 定义一个段落
<br> 换行

HTML超链接

　　　　超链接的代码很简单，模式以及实例如下所示：

1 <a href="url">链接文本</a>
2 <a href="https://www.google.com/">访问谷歌</a>
3 <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">访问谷歌网站</a>
4 <a id="tips">有用的提示部分</a>

　　　　注意：target定义了被链接的文档在何处显示

　　　　此处，我觉得较为重要的一点，便是超链接使用id属性，id属性可以创建文档标签，具体可以参看下面的文档：

1 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
2 <a href="#tips">访问有用的提示部分</a>
3 在HTML文档中插入ID:
4 <a id="tips">有用的提示部分</a>
5 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
6 <a href="https://www.google.com/html/html-links.html#tips">访问有用的提示部分</a>

　　　　另外需要注意的一点是：请始终将正斜杠添加到子文件夹当中，防止多次请求访问，效率偏低。书写类似这种：https://www.google.com/html/。

HTML头部

　　　　头部主要是<head>部分，具体使用方法以及概述主要通过下方的代码以及表格进行概述：

 1 <head>
 2 <base href="http://www.runoob.com/images/" target="_blank">
 3 </head>
 4 
 5 <head>
 6 <link rel="stylesheet" type="text/css" href="mystyle.css">
 7 </head>
 8 
 9 <head>
10 <style type="text/css">
11 body {
12     background-color:yellow;
13 }
14 p {
15     color:blue
16 }
17 </style>
18 </head>
19 
20 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

　　　　表格部分主要是对于其进行说明:

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了文档与外部资源的关系
<meta> 定义了文档中html文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了html文件的样式文件

HTML样式-CSS

　　　　常用的几种样式方法，通过代码向大家展示，具体如下：

 1 内联样式：
 2 <p style="color:blue;margin-left:20px;">这是一个段落。</p>
 3 
 4 
 5 <body style="background-color:yellow;">
 6 <h2 style="background-color:red;">这是一个标题</h2>
 7 <p style="background-color:green;">这是一个段落。</p>
 8 </body>
 9 
10 <h1 style="font-family:verdana;">一个标题</h1>
11 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
12 
13 <h1 style="text-align:center;">居中对齐的标题</h1>
14 <p>这是一个段落。</p>
15 
16 内部样式表：
17 <head>
18 <style type="text/css">
19 body {background-color:yellow;}
20 p {color:blue;}
21 </style>
22 </head>
23 
24 外部样式表：
25 <head>
26 <link rel="stylesheet" type="text/css" href="mystyle.css">
27 </head>

html常用样式标签如下：

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址

HTML图片、表格、列表

　　　　 图像、表格、列表的具体代码如下：

 1 图像：
 2 <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
 3 
 4 表格：
 5 <table border="1">
 6     <tr>
 7         <th>Header 1</th>
 8         <th>Header 2</th>
 9     </tr>
10     <tr>
11         <td>row 1, cell 1</td>
12         <td>row 1, cell 2</td>
13     </tr>
14     <tr>
15         <td>row 2, cell 1</td>
16         <td>row 2, cell 2</td>
17     </tr>
18 </table>
19 
20 列表：
21 
22 无序列表：
23 <ul>
24 <li>Coffee</li>
25 <li>Milk</li>
26 </ul>
27 
28 有序列表：
29 
30 <ol>
31 <li>Coffee</li>
32 <li>Milk</li>
33 </ol>
34 
35 自定义列表：
36 <dl>
37 <dt>Coffee</dt>
38 <dd>- black hot drink</dd>
39 <dt>Milk</dt>
40 <dd>- white cold drink</dd>
41 </dl>

HTML 区块

　　　　具体的标签文档如下：

标签 描述
<div> 定义了文档的区域
<span> 用来组合文档中的行内元素

HTML 布局

　　　　大部分网站可以使用<div>或者<table>来创建多行，CSS对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

HTML 表单和框架

　　　　HTML表单用于收集用户的输入信息，表示文档中的一部分区域，此部分包含交互式控件，将用户的信息发送到Web服务器。如下代码分别区分出文本域、密码字段、单选按钮、复选框等内容。

 1 文本域
 2 <form>
 3 First name: <input type="text" name="firstname"><br>
 4 Last name: <input type="text" name="lastname">
 5 </form>
 6 
 7 密码字段
 8 <form>
 9 Password: <input type="password" name="pwd">
10 </form>
11 
12 单选按钮（Radio Buttons）
13 <form action="">
14 <input type="radio" name="sex" value="male">男<br>
15 <input type="radio" name="sex" value="female">女
16 </form>
17 
18 复选框（Checkboxes）
19 <form>
20 <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
21 <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
22 </form>
23 
24 提交按钮(Submit)
25 <form name="input" action="html_form_action.php" method="get">
26 Username: <input type="text" name="user">
27 <input type="submit" value="Submit">
28 </form>

　　　　上述示例当中，存在一个method属性，其定义了表单数据的提交方式，可以是如下值：

  • post：指的是HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名和密码。
  • get :   默认值，指的是HTTP GET方法，表单属性会附加在action属性的URL当中，并以？作为分隔符，一般用于不敏感数据，如分页等，如https://www.icnblogs.com?page=1

　　　　html框架让浏览器窗口显示不止一个，具体用法如代码所示：

 1 iframe语法:
 2 <iframe src="URL"></iframe>
 3 
 4 iframe - 设置高度与宽度
 5 <iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
 6 
 7 iframe - 移除边框
 8 <iframe src="demo_iframe.htm" frameborder="0"></iframe>
 9 
10 使用 iframe 来显示目标链接页面
11 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
12 <p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML脚本

　　　　JavaScript使脚本更具有动态和交互性。

1 简单实例：
2 <script>
3 document.write("Hello World!");
4 </script>

HTML URL

　　　　URL是一个网页地址，URL由称为统一资源定位器，其语法规则如下：

                          scheme://host.domain:port/path/filename

  • scheme：定义因特网服务的类型，最常见的类型是http
  • host：      定义域主机（http默认是www)
  • domain:    定义互联网域名，不如cnblogs.com
  • post:         定义主机上的端口号，http默认端口号是80
  • path:         定义服务器上的路径
  • filename:   定义文档/资源名称

　　　　常见的scheme具体如下：

Scheme 访问 用于
http 超文本传输协议 以http://开头的普通网页，不加密
https 安全超文本传输协议 安全网页，加密所有的信息交互
ftp 文件传输协议 用于将文件下载或者上传到该网页
file   您计算机上的文件

原文地址：http://www.cnblogs.com/liuxinkai94/p/16774007.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性