HTML概述

HTML 指的是超文本标记语言 (HyperText Markup Language)。

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

利用HTML语言把我们需要的内容显示到网页上去，但是HTML并不显示。

HTML声明

html4的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

html5的文档声明

<!DOCTYPE html> 如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。

HTML基本语法

(1). html中所有的内容都包含在了<html1>所有内容</html1>当中,该标签为网页的跟标签，标记语言必须有一个跟标签

<!DOCTYPE html><!-- 声明html语句 -->
<html><!-- 其他所有语句都包含在这个标签中 即头部部分和主体部分--><head></head><body></body>
</html>

(2). Head标签(标签)包含了所有的头部标签标签。

<title>标签可定义网页的标题

<!DOCTYPE html><!-- 声明html语句 -->
<html><!-- 其他所有语句都包含在这个标签中 --><head><meta charset="utf-8"><title>一起来学html</title><!-- 为网页添加名称 --></head><body></body>
</html>

<!DOCTYPE html><!-- 声明html语句 -->
<html><!-- 其他所有语句都包含在这个标签中 --><head><meta charset="utf-8"><link href="img/hao123.png" rel="icon" /><!-- 将hao123图标添加进入标题处 --></head><body></body>
</html>

一个html基本结构如下图所示：

(3). HTML注释： 注释后的内容不会显示在网页上

(4). 标签与标签属性

标签：HTML使用标记标签来描述网页。

结构：分为两种,

闭合标签 ( 有标签内容 ): <标签名 > 标签内容 </ 标签名 >

自闭合标签 ( 无标签内容 ): <标签名 />

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：<body text=”red”>

属性的格式：属性名 = “ 属性值 “

属性的位置： <标签名属性名 = “ 属性值 “ >xxx</ 标签名 >

添加多个属性： <标签名属性名 = “ 属性值 “ 属性名 = “ 属性值 “ >xxx </ 标签名 >

基本常用标签

标题标签 <h1></h1>…..<h6></h6>可使用align = "center/right"属性使其居中，居右，默认为局左

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3></body>
</html>

段落标签 <p></p>，段落标签不加其他标签的话，网页文字不会识别其他特殊符号，如换行等。

换行标签 <br/>若需要换行操作则需要换行标签来进行，如下图所示。

列表

无序列表 <ul><li></li></ul>前面没有序号，有一个默认图标

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><ul><li><a >第一章</a></li><li><a >第二章</a></li><li><a >第三章</a></li><li><a >第四章</a></li><li><a >第五章</a></li><li><a >第六章</a></li></ul></body>
</html>

有序列表<ol><li></li></ol>列表前默认有序号，也可以使用type加属性来添加其他例如：type="A"

超链接 <a></a>使用规定按钮来进行网页转换或其他功能

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><a href="https://www.baidu.com/" target="_blank">百度</a><!-- href="需要打开的地址，必须要有"，target= "_blank"表示在新的页面打开，百度两字为按钮 --></body>
</html>

● 图像标签 <img/>使用img在网页中插入图片，只是引用图片地址

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body><img src= "../img/peach.jpg"/><!-- src中保存的是图片地址 --></body>
</html>

使用超链接标签来制作锚点，此处案例是点击某个章节直接到达该章节所在位置

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><body  bgcolor="bisque"><h1 align="right">斗破苍穹</h1><ul><li><a href = "#第一章">第一章</a></li><li><a href = "#第二章">第二章</a></li><li><a href = "#第三章">第三章</a></li></ul><h3 align="center"><a name = "第一章">第一章 林动</a></h3>2<p>“唔。”<br/>当林动费尽所有的力气睁开那有些沉重的眼皮时，简陋而整洁的房间顿时出现在眼中，熟悉的 一幕让得他愣了愣，旋即连忙转头，果然是见到，在那房中，一男一女两道身影正坐在桌旁。<br/>“爹，娘……”<br/></p><br/><br/><br/><h3 align="center"><a name = "第二章">第二章 通背拳</a></h3><p>清晨，大雾笼罩着这座僻静的山峰，白蒙蒙的，让人的视线，都是变得模糊了起来。<br/>“呼……呼……”<br/>在山顶后山的一片密林之中，突然间有着一种极为激烈的喘息声传出，视线拉近，只见得在 那林间的一处空地上，一道短小的身影，双手正挂在一根粗壮的树干上，小小的身体借助着手臂的拉扯之力，不断 的上下起伏着，而且在起伏间，他的身体呈现一个有些怪异的姿势，这种姿势，更是让得浑身的肌肉，都是一起的运动了 起来。</p><br/><br/><br/><h3 align="center"><a name="第三章">第三章 石符</a></h3><p>“出声了！”<br/>空地上，林动怔怔的望着拳头，小脸上涌现难以掩饰的欣喜之色，不过抬起头来 时，却是见到林啸慢吞吞的身影已是走出了树林。<br/>“嘿嘿，明天再给爹看看，让他惊喜一下。”见状，林动一咧嘴，突然感到手臂上 传来阵阵疼痛，急忙撸起袖子，却是发现其手臂上布满着一道道血红的印子，甚至还有着一些地方皮层都是被搽 掉，鲜血不断地渗透而出。</p><h3 align="center"><a name="第四章">第四章 通背拳</a></h3><h3 align="center"><a name="第五章">第五章 通背拳</a></h3></body>
</html>

<! -- 超链接标签定位地址，点击超链接标签直接跳转到所对应的地址处-->

<! -- 地址标签-->

<h3 align="center"><a name = "第十章">第一章林动</a></h3>

特殊符号转义

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。为了可以使用这些预留字符，我们必须在html中使用字符转义。

小于号< ：&It

版权(C) ：&copy

大于号> ：&gt

商标(TM) ：&trade

空格： &nbsp

注册商标(R) ：&reg

表格（<table></table>）

表格的基本构成标签有

table标签：表格标签

tr 标签：表格中的行

th 标签 : 表格的表头，表格中的数据都必须放在单元格中，表头内容居中加粗

td 标签：表格单元格

表格的一些基本属性：Border：边框属性。 border="数字"；

background ：设置背景图像。 background="图片位置"；

bgcolor : 设置背景颜色。 bgcolor= "颜色"，可以在任意标签中

bordercolor ：设置边框颜色。 bordercolor = "颜色"

width，height ：设置表格，单元格长，宽。 width= "数字" height ="数字"

cellpadding ：设置内容到边框的距离。 cellpadding ="数字"

cellspacing ：设置单元格之间的距离，默认为两个像素。cellspacing ="数字"

单元格合并：colspan属性：跨列合并，即合并同一行的单元格，colspan= "数字"

rowspan属性：跨行合并，即合并同一列的单元格，rowspan= "数字"

合并后的单元格一个可以代表多个单元格，即在某一行或者某一列无需在写其他的单元格

表单<form></form>

网页上的表单有许多可以输或选的组件，用户可以在表单中输入信息，最终将表单数据提交到服务器上。

内联框<iframe></iframe>

HTML部分基础语法相关推荐

FPGA（2）基础语法 -- 按键控制led（alway@语句）
目录 1.module 文件名(端口) 2.声明关键字 3.always@语句代码 1.module 文件名(端口) 注:这里最好养成习惯,只在文件名后面的括号中声明引脚变量,输入输出.关键字类型 ...
javascript基础语法——表达式
前面的话一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
Rust语言开发基础（六）基础语法
2019独角兽企业重金招聘Python工程师标准>>> 一.变量的定义和使用其它常见的编程语言对变量的定义通常是通过声明类型和使用关键new来创建一个变量,但Rust不是,Rust ...
python列表嵌套字典取值_Python基础语法：你不得不知的几种变量类型
(点击上方快速关注并设置为星标,一起学Python) 作者:kina_chen來源:简书 01. Python编码Python中默认的编码格式是 ASCII 格式,在没修改编码格式时无法正确打印汉字, ...
python赋值语句的一般格式为_Python 基础语法
Python 基础语法 Python 语言与 Perl,C 和 Java 等语言有许多相似之处.但是,也存在一些差异. 在本章中我们将来学习 Python 的基础语法,让你快速学会 Python 编程 ...
深入浅出CMake(二): 基础语法
在<深入浅出CMake(一):基础篇>文章中,我们已经知道了怎么依葫芦画瓢编写简单的 CMake 构建文件了,但如果应对复杂的工程的话,这还是远远不够的. CMake 是一套编译构建体系, ...
Python基础语法学习笔记
Python基础语法学习笔记想淘宝省钱看我简介,博客www.liangxin.name (一) 一.Print()函数 1.数字可以直接输出,无需加引号只能理解数字,却读不懂文字.因为数字和数学运 ...
Python的零基础超详细讲解（第三天）-Python的基础语法
多行语句 Python 通常是一行写完一条语句,但如果语句很长,我们可以使用反斜杠 \ 来实现多行语句,例如: duohang = item_one + \item_two + \item_three ...
Python的零基础超详细讲解（第二天）-Python的基础语法1
Python 基础语法打开python的编辑器这里注意的是,之前下载的python在电脑主页上没有快捷方式,需要在win开始界面中打开最终打开效果是一个白色的跟终端类似的编辑器,我们输入的时候是 ...
Go语言基础语法--注释、基础结构2
章节 GO语言基础语法--注释.基础结构(重要) 1.GO语言基础语法---注释.基础结构 //程序所属的包,且必须在源文件代码第一行 package mainimport "fmt&quo ...

HTML部分基础语法