一、基本格式

1.不用区分大小写。

2.HTML代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></bod  y>两部分组成。其中头部分是给.HTML页面增加一些辅助或者属性信息，它里面的内容会  最先加载。体部分是真正存放页面数据的地方。

3.多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束，比如input，hr，br等标签

4.想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

5.属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。

  注意：如果公司规定书写规范，一定按照公司规范写。

 

二、全局架构标签

<html>：用于标记.HTML文件

<head>：用于标记网页的头部信息，标签内可以使用<title>和<meta>

<title>:用于标记HTML文件的标题，即浏览器左上的标题栏内容

<body>：定义HTML的主体部分，即浏览器显示的窗口内容部分

 

三、格式标签

<p>:用于创建一个段落，里面有一个align属性，可以设置页面文字左对齐，右对齐及居中此外，可以在css中设置相关属性，通过stytle属性或者css语言设置段落属性。

</br>:换行标签，注意这个标签是在标签内结束的。同理的还有一个<nobr/>用于阻止浏览器对数据过长的数据进行自动换行的操作。

<marquee>:用于在浏览器中移动显示标签体内的图像或文字，其中一个属性direction指定移动的方向，其值有left（水平向左），right（水平向右），down（垂直向下），up（垂直向上）。另一个属性behavior，用于设定移动的行为，设置的值为scroll、alternate、slide。例如<marquee direction="left" behavior = "slide">.

 

四、字体标签

<h1>...<h6>标签：<h1>为最大标题标签，<h6>为最小标题

<b>：字加粗  <u>： 字加下划线  <i>：字斜体  <em>:斜体加粗

<font>：用于设置文本的face（字体），size（字号），color（颜色）。

特殊字符：在HTML中也有转移字符，一定注意

 

 

五、列表标签

 

<dl>:列表标签，与嵌套在内的<dt>和<dd>一起用。

<dt>：上层项目

<dd>：下层项目

<ol>：数字标签（a A 1 i I），用来创建一个有序的列表，里面有很多<li>

<ul>：符号标签（○●■），用来创建一个有无序的列表，里面有很多<li>

<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。





六、图像标签

<image/>:注意是在标签内结束的，其中有两个属性一般都需要设置，即为alt,主要是设置当鼠标移动到图像上时，显示的提示文本。另一个当然是src，设置图像的地址。

<hr/>：也是一个在内部结束的标签，显示一条水平线，可以根据属性设置水平线的样式。

<map>：图像地图，当要在图像中选取某一部分作为连接的时候。例：中国地图每个省所对应的区域。

注意：map标签要和img标签联合使用。Href是超连接，代码如下：

<img src="1.jpg" alt="图片说明文字" usemap="#map" />

 <map >

    <area shape="rect" coords="50,59,116,104" href="1.html" />

    <area shape="circle" coords="118,203,40" href="2.html" />

 </map>

 

七、表格标签

<table>：表格标签，其组成为标题标签，表头标签以及行标签以及单元格标签，其中有两个属性，一个是cellspacing（设置单元格间距大小）和cellpadding（设置单元格边框与其内部内容之间的间隔大小）。

<caption>：给表格提供标题。

<th>：表头标签，一般对表格的第一行或者第一列进行格式化，就是粗体显示。

<tr>：行标签：

<td>：单元格标签，加载行标签的里面。

 

八、超链接标签

<a herf="">:用于将标签内的内容设置为超链接，并用herf属性设置链接到的URL，另外一个属性target，用于设置是否在新窗口中打开URL链接的页面。

格式：<a herf ="链接的URL" target = "是否在新窗口显示"> 需要创建超链接的文本或图像</a>

<a name="">:用于定制一个锚点，配合上面的标签使用。例：<a name ="锚点">定制锚点位置，<a herf="#锚点">跳转到定制锚点的位置</a>，注意#是为了不启动任何引擎所用。

 

九、框架标签

<frameset>：框架标签，用于创建一个框架集，主要属性rows（几行帧窗口）cols（几列帧窗口）注意属性的值由百分数和绝对像素值或者*组成，框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

<frame>:用于定义具体的窗口，嵌套在<frameset>里面，主要有src和name属性。还有一个属性noresize，用于设定当框架大小不想被鼠标拖动而改变，可以在frame标签中加入属性，这个属性没有属性值，称为标记属性，加上就为固定。

注意：在XHTML中规范每一个属性必须有属性值，标记属性值为自身。

<iframe>：画中画标签，是在一个网页中插入一个简单的窗口，主要属性有name和src。该网页和整个框架的其他页面没有关系。他可以去连接其他网页，常被黑客用。

十、头元素标签

头标签都放在<head></head>头部分之间。

<title>：指定浏览器的标题栏显示的内容。

<base>：其中href 属性用于指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。target 属性用于指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。

<meta>：其中name 属性用于网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv 属性用于模拟HTTP协议的响应消息头。

 

<link>：其中herf属性必须设定，并且该属性包含着第二个资源的URL。rel 以及rev属性用于描述目标文档与当前文档的关系，也必须设定。type 属性用于指定目标资源文档类型。media指定目标文档在哪种设备上起作用。





十一、表单标签

<form>:表单标签,用于定义一个表单，与服务器端的交互,在里面可以嵌入表单元素，如文本框（text），密码框 （password），单选框 （radio）等，其中主要属性有action（用于设置表单提交到的服务器程序的URL）、method（设置表单提交方式，主要是post和get）、target（指定服务器返回的结果现实的目标窗口）、title（设置当鼠标在表单任意位置停留时。浏览器黄色小浮标显示的文本信息）。

注意：post与get的区别。

post：体积比较大，地址栏不显示提交信息，处理编码转换方便，封装在数据包后面，数据        大小有限制（ie地址栏最长长度2083）

get：地址栏显示信息，编一次解一次（默认），封装在数据包前面。数据大小没有限制

<input>：输入标签 ：接收用户输入信息。其中的type属性指定输入标签的类型。

? 文本框 text。输入的文本信息直接显示在框中。

? 密码框 password。输入的文本以原点或者星号的形式显示。

? 单选框 radio 如：性别选择。

? 复选框 checkbox 如：兴趣选择。

? 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

? 提交按钮 submit 用于提交表单中的内容。

? 重置按钮 reset 将表单中填写的内容设置为初始值。

? 按钮 button 可以为其自定义事件。

? 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

? 图像 image 它可以替代submit按钮。

<select>：选择标签 提供用户选择内容。

<option>：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。 

<textarea>：多行文本框。主要有两个属性cols（列数）和rows（行数）

<label>：用于给各元素定义快捷键。其中for 属性用于指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。accesskey 属性用于指定快捷键，此快捷键需要和alt键组合使用。

 

 

 

十二、区域标签

 

<div>：将HTML标签组合成一个区域块，标签内可以包含任何HTML标签。

<span>:文本片段，用于同一行文本内选取一个片段，该元素内只可以为文本元素。

小结：当我们需要对页面的一段文本进行格式化的时候，大多会用列表，如果需要和服务器   交互的时候，就想到用表单。

传智播客学习之HTML基础语法的更多相关文章

  1. 传智播客学习之Android运行原理 （转）

    传智播客学习之Android运行原理 (2010-03-20 22:45:15) 转载▼ 今天终于忙里偷闲,和大家探讨一下android技术,第一次听到3G应该追溯到大学三年级的时候了,记得当时现代通 ...

  2. 传智播客.NET视频学习课件

    传智播客.NET视频学习课件访问.NET网站了解更多课程详情http://net.itcast.cn(小提示:为什么本书中超链接打不开?)此套课件是伴随 传智播客.net实况教学视频 (小提示:为什么 ...

  3. 【高清未加密】2015传智播客 最新21期c#asp.net 基础到就业班视频和源码

    [.NET]传智播客第[21]期就业班视频(高清无加密)本套2015年21期传智播客C#ASP.NET win10通用mvc+app开发视频教程附源码,是一套非常不错的asp.net自学视频教程,传智 ...

  4. 传智播客C语言视频第二季(第一季基础上增加诸多C语言案例讲解，有效下载期为10.5-10.10关闭)

    卷 backup 的文件夹 PATH 列表卷序列号为 00000025 D4A8:14B0J:.│  1.txt│  c语言经典案例效果图示.doc│  ├─1传智播客_尹成_C语言从菜鸟到高手_第一 ...

  5. 成都传智播客java就业班和基础班

    传智播客成都Java培训,带你走进Java的世界... 我们有咨询的教育团队,一流的名师指导: 我们是重视基础理论建设,强化高端应用技能: 我们有四大JavaEE项目,海量Android项目: 我们是 ...

  6. 2018年3月python传智播客人工智能基础就业班全套视频教程

    2018年3月python传智播客人工智能基础就业班全套视频教程 有需要的可以留言留下邮箱.

  7. 【传智播客】Libevent学习笔记(五)：基本类型和函数

    目录 00. 目录 01. 基本类型 1.1 evutil_socket_t类型 1.2 标准类型 1.3 各种兼容性类型 02. 可移植的定时器函数 03. 套接字API兼容性 04. 可移植的字符 ...

  8. 【传智播客】Libevent学习笔记(四)：事件event

    目录 00. 目录 01. 事件概述 02. 创建事件 03. 事件的标志 04. 事件持久性 05. 超时事件 06. 信号事件 07. 设置不使用堆分配的事件 08. 事件的未决和非未决 09. ...

  9. 【传智播客】Libevent学习笔记(三)：事件循环

    目录 00. 目录 01. event_base_loop函数 02. event_base_dispatch函数 03. event_base_loopexit函数 04. event_base_l ...

随机推荐

  1. OpenCV中OpenCL模块函数

    It currently develop and test on GPU devices only. This includes both discrete GPUs(NVidia,AMD), as ...

  2. 判断Http请求由手机端发起，还是有电脑端发起

    某些情形,我们需要判断Http请求是来自手机端还是电脑端,关键是取得User-Agent的信息,进行筛选判断即可. 核心类如下: public static boolean isMobileDevic ...

  3. Form( 表单) 组件

    本节课重点了解 EasyUI 中 Form(表单)组件的使用方法, 这个组件不依赖于任何组件.一． 加载方式表单组件只能在 JS 区域设置,首先定义一张表单.<form id="box ...

  4. 规约模式(Specification Pattern)

    前期准备之规约模式(Specification Pattern) 一.前言 在专题二中已经应用DDD和SOA的思想简单构建了一个网上书店的网站,接下来的专题中将会对该网站补充更多的DDD的内容.本专题 ...

  5. Arcgis Engine - 鹰眼(减少闪烁)

    网上看到的代码,都是一个模样,经过不断调试,无意中效果就可以了.主要是在"鼠标拖动的时候",网上的代码的鹰眼效果,感觉坑爹死了,闪烁超级严重.主要原因是鼠标拖动的时候,进行时时更新 ...

  6. Arcgis - Personal Geodatabase 和 File Geodatabase的区别.

     一.平台支持: 1.Personal Geodatabase:仅可在Windows 上运行: 2.File Geodatabase:跨平台支持,可在Windows 及UNIX.linux上运行. 评 ...

  7. JAVA中，JSON MAP LIST的相互转换

    1 JSON包含对象和数组,对应于JAVA中的JSONObject,JSONArray 2 String 转JSON对象 JSONObject.fromObject("String" ...

  8. Linux下彻底删除oracle步骤【转】

    (1)关闭oracle服务和后台进程  <1>查看安装的主目录和环境变量: echo $ORACLE_HOME env | grep ORA <2>查看实例名 sqlplus ...

  9. [Leetcode][015] 3Sum (Java)

    题目在这里: https://leetcode.com/problems/3sum/ [标签] Array; Two Pointers [个人分析] 老实交待,这个题卡半天,第一次做不会,抄别人的.过 ...

  10. (翻译玩)SQLALchemy backref章节文档

    Linking Relationships with Backref 自从在Object Relational Tutorial中第一次提到backref参数后,许多案例中也用到了backref,那么 ...