一、什么是HTML？

HTML不是编程语言，是用来描述网页文档（页面结构）的一种标记语言；

HTML指超文本标记语言（Hyper Text Markup Language），之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。；

HTML规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器 （IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

二、HTML是什么样的？

简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。

下面是一个最简单的HTML文档：

<html>
  <head>
    <title>第一个Html文档</title>
  </head>
  <body>
    欢迎访问<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>! 
 
  </body>
</html>

所有的HTML文档都应该有一个<html>元素，<html>元素可以包含两个部分:<head>和<body>。

<head>元素用于包含整个文档的一般信息，比如文档的标题（<title>元素用于包含标题），对整个文档的描述，文档的关键字等等。

文档的具体内容就要放在<body>元素里。<a>元素用于表示链接，在浏览器（如IE,Firefox等）中查看HTML文档时，点击<a>标签括起来的内容时， 通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>元素的href属性指定。上面的<a href=http://hanzhaoxin.cnblogs.com/>中，href属性的值就是http://hanzhaoxin.cnblogs.com/。

三、HTML文档可以包含哪些内容 ？

通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等。

  • 文本 ：HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。
  • 链接 ：链接用来指出内容与另一个页面或当前页面某个地方有关。
  • 图片 ：图片用于使页面更加美观，或提供更多的信息。 
  • 列表 ：列表用于说明一系列条目是彼此相关的。 
  • 表格 ：表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。 
  • 表单 ：表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。 
  • 框架 ：框架使页面里能包含其它的页面。 

四、对于HTML我会说哪些概念？

文档：HTML文档俗称网页。

标签：用尖括号包围的关键词我们成为标签。通常HTML标签成对出现，如：<a>、</a>。

  • 开始标签：标签对中的第一个标签是开始标签，也成为开放标签。如<a>。
  • 结束标签：标签对中的第二个标签是结束标签，也成为闭合标签。如</a>。

元素：我们把匹配的标签对以及它们包围的内容称为元素。即（元素 = 开始标签 + 内容 + 结束标签）。如：<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>。

  • 块级元素：在浏览器默认显示时以新行来开始（和结束）的元素。
  • 内联元素：又称行内元素，在浏览器默认显示时在同一行按从左至右顺序显示，不单独占一行的元素。

属性：开始标签中那些以名称/值对的形式出现的内容，我们称之为属性。如上例中：href="http://hanzhaoxin.cnblogs.com/"。（href是属性名称，"http://hanzhaoxin.cnblogs.com/"是属性值）。

谈前端（HTML篇）第二课：常见元素

 

一、根元素

<doctype> 定义文档类型。
<html> 定义 HTML 文档。

二、元数据元素

<head> 定义关于文档的信息。
<meta> 定义关于 HTML 文档的元数据。
<link> 定义文档与外部资源之间的关系，一般用于引入样式表。
<base> 定义页面上所有链接的默认地址或默认目标。
<title> 定义文档标题。
<style> 定义文档的样式信息。

三、脚本元素

<script> 定义客户端脚本。
<noscript> 定义当浏览器不支持脚本的时候所显示的内容

四、块元素

<body> 定义文档的主体。
<h1>、<h2>...<h6> 定义文档标题。
<p> 定义文档段落。
<blockquote> 定义块引用。
<ul>、<ul>、<dl> 定义列表。
<table> 定义表格。

1、列表元素

  • 无序列表

    <ul> 定义无序的列表。
    <li> 定义列表项。
  • 有序列表
    <ol> 定义有序的列表。
    <li> 定义列表项。
  • 定义列表
    <dl> 定义定义列表。
    <dt> 定义定义术语。
    <dd> 定义定义描述。

2、表格元素

<table> 定义表格。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<th> 定义表格的表头行。
<tr> 定义表格的行。
<td> 定义表格单元。

五、表单元素

<form> 定义供用户输入的表单。
<input> 定义输入域。
<textarea> 定义文本域 (一个多行的输入控件)。
<lable> 定义一个控制的标签。
<select> 定义一个选择列表。
<option> 定义下拉列表中的选项。
<optgroup> 定义选项组。
<button> 定义一个按钮。
<fieldset> 定义域。
<legend>

定义域的标题。
 

六、文本元素

1、文本格式化元素

<em> 定义着重文字。
<strong> 定义加重语气。
<sup> 定义上标字。
<sub> 定义下标字。
<ins> 定义插入字。
<del> 定义删除字。
<b> 定义粗体文本。
<i> 定义斜体文本。
<big> 定义大号字。
<small> 定义小号字。

2、“计算机输出”标签

<code> 定义计算机代码。
<kbd> 定义键盘码。
<pre> 定义预格式文本。

3、引用、引用和术语定义

<q> 定义简短引用。
<blockquote> 定义长引用。
<address> 定义地址。

七、链接与图像

<a> 定义超链接
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。

---------------------------------------

八、<div> 和 <span>

<div> 定义文档中的分区或节（division/section）。
<span> 定义 span，用来组合文档中的行内元素。

九、框架

<frameset> 定义如何将窗口分割为框架。（注：<frameset>元素只能嵌套在<html> 元素或<frameset>元素自身中！）
<frame> 定义放置在每个框架中的 HTML 文档。

十、内联框架

<iframe> 定义内联的子窗口（框架）。
 
一、HTML全局属性

1、核心属性

属性 描述
id 设置元素的唯一 id。
class 设置元素的一个或多个类名（引用样式表中的类）。
style 设置元素的行内样式（CSS内联样式）。
title 设置有关元素的额外信息（可在工具提示中显示）。

2、语言属性

属性 描述
lang 设置元素内容的语言代码。

3、键盘属性

属性 描述
accesskey 设置访问元素的键盘快捷键。
tabindex 设置元素的 tab 键次序。

二、常见元素属性：

1、<a>元素的属性：

属性 描述
href 指定链接到互联网或你的计算机上的一个资源的别称。
target 指定打开链接的目标窗口。
title 指定所要链接到页面的文本描述。

2、<img>元素的属性：

属性 描述
src 指定向服务器请求的资源。
alt 指定图像无法显示时的替代文本。

谈前端（HTML篇）第四课：注意事项

空元素或者void元素：<br>,<img>

字符实体：<: < ,>:>  ,&:&,版权符号：©right

比如：the <html> element rocks  代码：the < html > element rocks

<a>属性：可以通过相对路径来链接同一网站的页面，也可以通过url绝对路径来链接其他网站的页面。

可以通过id属性连接到页面的特定位置  比如：1.id=“chai”2. <a href="index.html#chai">.....</a>

也比如：<a href="#top">back to top</a>同页面的目标链接。

<a href="....",title="...对链接的内容进行描述">........</a>

<a target="_blank" href="...">...</a>:在新窗口打开一个页面

<img>属性：<img src="...." alt="图片不显示时对图片信息的描述">。alt属性不可不写。

编写html页面的原则：

1.一定要以<doctype>开头  <!doctype html>

2.在<head>中指出正确的字符编码。 用<meta charset="utf-8">来标记

3.在<head>中一定包含一个<title>元素

编写好html以后，ctrl+s保存，然后打开浏览器访问即可。

HTML基本语法的更多相关文章

  1. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  2. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  3. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  4. [C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性

    回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性 序 目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...

  5. Velocity初探小结--velocity使用语法详解

    做java开发的朋友一般对JSP是比较熟悉的,大部分人第一次学习开发View层都是使用JSP来进行页面渲染的,我们都知道JSP是可以嵌入java代码的,在远古时代,java程序员甚至在一个jsp页面上 ...

  6. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  7. C#语法糖大汇总

    首先需要声明的是"语法糖"这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕 ...

  8. 值得注意的ibatis动态sql语法格式

    一.Ibatis常用动态sql语法,简单粗暴用一例子 <select id="iBatisSelectList" parameterClass="java.util ...

  9. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  10. postgresql 基本语法

    postgresql数据库创建/修改/删除等写入类代码语法总结: 1,创建库 2,创建/删除表 2.1 创建表 create table myTableName 2.2 如果表不存在则创建表 crea ...

随机推荐

  1. Vue.js 2.x笔记：状态管理Vuex（7）

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...

  2. js定时器 实现提交成功提示

    应用场景: 用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" st ...

  3. Kafka学习笔记-如何保证高可用

    一.术语 1.1 Broker Kafka 集群包含一个或多个服务器,服务器节点称为broker. broker存储topic的数据. 如果某topic有N个partition,集群有N个broker ...

  4. java &与&& |与||的区别

    一.与操作和或操作的区别 (1)在Java程序中,使用与操作,要求所有表达式的判断结果都是TRUE,才为真,若有一个为FALSE,那么最终判断结果则为FALSE (2)使用或操作,只要其中有一个表达式 ...

  5. Wiki leaks files backup

    Wiki leaks files backup 来源  http://ftp.icm.edu.pl/packages/incoming/torrent/ Index of /packages/inco ...

  6. Linux keepalived工作原理

    keepalived简介与工作原理 Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他 ...

  7. openstack虚拟机内核崩溃问题解决

    openstack对接的kvm虚拟化环境,创建虚拟机后无法进如系统,一直卡在call Trace . 解决办法: 更改配置文件的cpu-model,libvirt_cpu_mode = custom ...

  8. Elasticsearch.Net 多层嵌套的逻辑实现

    { "query": { "bool": { "must": [ { "match_phrase": { "t ...

  9. 洛谷P1066 2^k进制数（题解）（递推版）

    https://www.luogu.org/problemnew/show/P1066(题目传送) (题解)https://www.luogu.org/problemnew/solution/P106 ...

  10. dsu on tree 树上启发式合并 学习笔记

    近几天跟着dreagonm大佬学习了\(dsu\ on\ tree\),来总结一下: \(dsu\ on\ tree\),也就是树上启发式合并,是用来处理一类离线的树上询问问题(比如子树内的颜色种数) ...