一文掌握HTML语言的基础语法

础准备

我使用的是Hbuilder编辑器，在hbuilder中创建一个HTML文件。

在hbuilder中运行HTML文件

效果

HTML文档结构

<!DOCTYPE html>
<html>
	<head>
		<!--网页的头部 -->
	</head>
	<body>
		<!--网页内容 -->
	</body>
</html>

<!-- -->   用于注释代码

HTML常用标签

基础标签

html 最外层的元素
head 网页的头部
title 网页的标题
body 网页内容

文本格式化

i/em 斜体
strong 加粗
q 引用
blockquote 长引用
code 元素定义编程代码示例

<i>武汉，加油！</i>
<em>湖北,加油！</em>

<strong>武汉，加油！</strong>

<q>HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能，清爽的界面，强大的功能和于一身。</q>

<blockquote>
  HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能，清爽的界面，强大的功能和于一身。
</blockquote>

<code>var a = 1 </code>

实验效果

标题段落

h1-h6 表示标题数字越大字体越小
p 段落标签
hr 水平分割线
br 换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用标题和段落</title>
	</head>
	<body>
		
		<!-- 标题-->
		<h1>武汉加油！</h1>
		<h2>武汉加油！</h2>
		<h3>武汉加油！</h3>
		
		<h4>武汉加油！</h4>
		<h5>武汉加油！</h5>
		<h6>武汉加油！</h6>
		
		<!--段落标签-->
		<p>武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！</p>
	
	    <hr > <!--水平分割线-->
		<p>武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！</p>

<!-- 换行符-->
武汉加油！武汉加油！武汉加油！武汉加油！
<br>武汉加油！武汉加油！武汉加油！
        
	</body>
</html>

块元素

div 盒子
span 功能和div类似，span可以用来装一小段文字和div的区别就是在一行内显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ </i>
		
		<div style="background-color: aqua;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</div>
		<div style="background-color: aqua;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</div>
		
		<span style="background-color: blue;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</span>
		<span style="background-color: blue;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</span>
	</body>
</html>

最终效果

图片

img
img标签必须加上 src属性才能把图像展示出来
alt属性：当图片没有办法显示的时候用来提示用户的文字
title属性：当鼠标移动到图片的时候，用来提示用户的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用图片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="风景图" title="测试图片" >
	</body>
</html>

链接

a标签超链接
href属性：超链接的地址
target属性：_blank 表示新建一个浏览器标签页来显示超链接的内容，不会覆盖原来的网页_parentsearchtop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>

列表

ol 有序列表
ul 无序列表
li 列表项
type 定义类型
disc 实体圆点
circle 空心圆
square 实体方形
a 小写字母（有序）
A 大写字母（有序）
默认数字（有序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 无序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>

表格

tablecaption 表格标题
th 表头
tr 行
td 单元格

TML 基础- 4个实例

本章介绍了 HTML 中较为常用的标签的实例。

您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

h 是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。h1 是主标题，h2 是副标题，h3、h4、h5、h6 依次递减字体的大小。

实例

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签 <p> 来定义的，P 是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样，您可以进行实战实验。

实例

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

HTML 链接

HTML 链接是通过标签 <a> 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

实例

<a href="#">这是一个链接</a>

提示:在 href 属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识)。

HTML 图像

HTML 图像是通过标签 <img> 来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

举例如下：<img src="#">

请注意：img元素是自关闭元素，不需要结束标记。

实例

注意：图像的名称和尺寸是以属性的形式提供的。

教学还没结束哟，我会尽快编辑下一章。

我是一名前端开发程序员，自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴
前端资料获取方式：
1.在你手机的右上角有【关注】选项，点击关注！
2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】
电脑已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

html图像

在htmtl中,图像由<img>标签定义.<img>是空标签,它只包含属性,并且没有闭合标签.

要在页面上显示图像,使用源属性(src).源属性的值是图像的url地址(统一资源定位符).

定义图像的语法是:

url指存储图像的位置.

<html>

<head>

<title>first page</title>

</head>

<body>

</body>

<html>

●如果图像无法显示,则alt属性用来为图像定义一串预备的可替换的文本.alt属性是必需的.

height(高度)与width(高度)属性用于设置图像的高度与宽度.该属性值可以以像素或百分比形式指定,默认单位为像素

<html>

<head>

<title>first page</title>

</head>

<body>

</body>

</html>

●<img>的border属性规定图像周围的边框的宽度.默认情况下,图像是没有边框的

border属性的属性值的单位是像素.表示边框的宽度

实例:带有2个像素粗边框的图像.

二 html链接

html使用标签<a>来设置超文本链接.

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分.

在标签<a>中,使用href(hyper text reference)属性来描述链接的目标地址

链接的html代码很简单.格式如下:

上边的代码显示为:链接文本(链接文本下面有下划线)

●使用target属性,你可以规定在何处打开链接文档.如果给target属性赋值_blank,将使链接在新窗口或新选项卡中打开.

三 html列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记

无序列表使用<ul>标签,与<li>标签一起使用(unordered list)

<ul>

</ul>

浏览器显示效果如下:

有序列表也是一列项目,列表项目使用数字进行标记.

有序列表始于<ol>标签,每个列表项目始于<li>标签.

<ol>

</ol>

运行效果如下:

四 html表格

表格由<table>标签定义.

每个表格均有若干行(由<tr>标签定义,table row),每行被分割为若干单元格(由<td>标签定义,table division)

下面是一个包含两行两列的表格:

<tr>

</tr>

<tr>

</tr>

</table>

运行效果:

在线咨询

上一篇：这些实用的HTML5 & jQuery 插件要收藏哦，网站开发中一定会用到
下一篇：安装jdk1.8并配置系统变量

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一文掌握HTML语言的基础语法

础准备

HTML文档结构

HTML常用标签

您的项目需求