`
哈达f
  • 浏览: 120524 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

html简介

 
阅读更多

Html 内容

1.   Html就是超文本标记语言的简写，是最基础的网页语言。

2.   Html是通过标签来定义的语言，代码都是由标签所组成。

3.   Html代码不用区分大小写。

4.   Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

5.   头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

6.   体部分是真正存放页面数据的地方。

 

l  多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

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

l  属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

l  格式：<标签名 属性名='属性值'> 数据内容 </标签名>

<标签名 属性名='属性值' />

 

l  操作思想：

为了操作数据，都需要都数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

 

常用标签的使用

字  体

1.   字体标签：<font>

例：<font size=5 color=red>字体标签示例</font>

注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。

2.   标题标签：<h1><h2>…..<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

3.   特殊字符：

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

&lt;

< 

&gt;

> 

&amp;

&

&quot;

“

&reg;

®

&copy;

©

&trade;

™

&nbsp;

空格

 

 

注：在Dreamweaver8中都具有联想功能。

 

 

列   表

4.   列表标签：<dl>

<dt>：上层项目

<dd>：下层项目

例：

<dl>

    <dt>游戏名称</dt>

       <dd>星际争霸</dd>

       <dd>红色警戒</dd>

    <dt>部门名称</dt>

       <dd>技术部</dd>

       <dd>培训部</dd>

</dl>

效果：

列表中项目符号对应的标签

<ol>：数字标签（a A 1 i I）

<ul>：符号标签（○●■）

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

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

 

图   像

5.   图像标签：<img>

例：<img src=”1.jpg” align=” middle” border=”3” alt=”图片说明文字”/>

align:属性定义图片的排列方式，border用来设置图像的边框。Src  连接一个文件

6.   图像地图：<map>

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

map标签要和img标签联合使用。Href是超连接

<img src="Sunset.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>

 

表   格

7.   表格标签：<table>

组成：标题标签：<caption>，给表格提供标题。

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

行标签：<tr>

单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

格式：

<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->

    <caption>表格标题</caption>

    <tr><!-- 第一行 -->

       <th>姓名</th>

       <th>年龄</th>

    </tr>

    <tr algin=”center”><!-- 第二行 -->

       <td>张三</td>

       <td>23</td>

    </tr>

</table>

效果：

<table border="1" width="40%">

<tr>

    <tr>

    <th colspan="2"> <!-- colspan：th标签占两列 -->

    个人信息

    </th>

    </tr>

    <tr align="center">

       <td>张三</td>

       <td>23</td>

    </tr>

</tr>

</table>

效果：

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。

THEAD、TFOOT包含关于表格列的信息。

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。

超  链  接

8.   超链接标签：<a>

两种用法：

一、超链接<a href=””>

例：

<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>

<!-- href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->

二、定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

例：

<a name=”标记”>标记位置</a>

<p>…….<!--很多空行以制造网页过长的效果 -->

<a href=”#标记”>返回标记位置</a>

注：使用定位标记时一定在href值的开始加入#标记名。

 

 

框   架

9.   框架标签：<frameset>

注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

例：

<frameset rows="10%,*">

    <frame src="1.html" name="top" />

    <frameset cols="30%,*">

       <frame src="2.html" name="left" />

       <frame src="3.html" name="right" />

    </frameset>

</frameset>

这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html

效果：

注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

10. 画中画标签：<iframe>

<iframe src=”1.html” >

很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。

</iframe>

框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。

 

ø表   单ø

11. 表单标签：<form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签 ：接收用户输入信息。

其中的type属性指定输入标签的类型。

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

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

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

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

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

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

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

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

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

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

<select>：选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

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

<textarea>：多行文本框。如：个人信息描述。

<label>：用于给各元素定义快捷键。

for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。

例：

<label for="user" accesskey="u">用户名(u)</label>

<input type="text" id="user" />

 

 

表单提交：

1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。

2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

 

get和post这两种最常用的提交方式的区别：

1．get提交将数据现在地址栏，对于敏感信息不安全。

    post提交不显示在地址栏。

2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。

post可以提交大体积数据。

      3．对提交数据的封装方式不同：

         get：将提交数据封装到了消息的前，请求行中。

         post：将提交的数据封装到消息头后，数据体中。

      注意：通常表单使用post提交，因为编码方便。

            对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。

            通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。

如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。

头  标  签

头标签都放在<head></head>头部分之间。包括：title base meta link

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

13. <base>：

href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。

target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。

14. <meta>：

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

例：

<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" />

表示打开此页面3秒后自动转到新浪页面。

15. <link>：

rel 属性：描述目标文档与当前文档的关系。

type 属性：文档类型。

media：指定目标文档在哪种设备上起作用。

例：

<link rel="stylesheet" type="text/css" media="screen,print" href="a.css" />

 

Other

16. <marquee> 让内容动起来。

direction 属性：left right down up

behavior 属性：scroll alternate slide

17. <pre>：可以将文本内容按在代码区的样子显示在页面上。

 

XHTML   XML

XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。

l  XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。

l  XHTML的代码结构更为严谨，是基于XML的一种应用。

XML是可扩展标记语言（Extensible Markup Language）

l  XML是对数据信息的描述。HTML是数据显示的描述。

l  XML代码规定的更为严格，如：标签不结束被视为错误。

l  XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。

l  各个服务器，框架都将XML作为配置文件。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

是大夫撒旦防撒地方撒

 

色人防守对方萨芬的

 

 

广告哦

 

 

 

新闻

 
 

 

分享到：
| 充当服务端代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    LAMP兄弟连PPT--HTML简介 LAMP兄弟连PPT--HTML简介

    在“LAMP兄弟连PPT--HTML简介”中，我们可能将深入探讨这一关键的Web开发技术。 HTML由一系列元素组成，这些元素以开始标签、内容和结束标签的形式呈现，如`&lt;html&gt;`、`&lt;head&gt;`和`&lt;body&gt;`等。每个标签都有其特定的...

    HTML语言剖析之Html简介

    ### HTML语言剖析之Html简介 #### 什么是HTML？ HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。其基本功能在于通过特定的标签（Tag）来控制文档的某些部分，从而使文档达到预想的显示...

    Html简介和超链接.ppt

    HTML 简介和超链接 HTML 是一种标记语言，使用 HTML 标记和元素，可以控制页面和内容的外观，发布联机文档，使用 HTML 文档中插入的链接检索联机信息，创建联机表单，收集用户的信息、执行事务等等，插入动画，开发...

    LAMP兄弟连PPT--HTML简介

    LAMP兄弟连PPT--HTML简介

    HTML简介11111

    HTML简介11111

    HTML的简介及标签的使用

    #### 一、HTML简介 HTML，即HyperText Markup Language（超文本标记语言），是一种用于创建网页的标准标记语言。它并非编程语言，而是由一系列预定义好的标记（标签）组成的语言，这些标记告诉浏览器如何显示网页上...

    HTML 的简介！！！！

    "HTML 简介" HTML（HyperText Markup Language）是一种用于描述网页的语言，用于描述网页的结构和内容。它是一种标记语言，而不是编程语言。HTML文档由HTML标签和文本内容组成。 HTML 的基本结构： * `&lt;!DOCTYPE ...

    intro-html:HTML简介

    这个“intro-html:HTML简介”很显然是一个引导初学者了解和学习HTML的资源。在这个压缩包“intro-html-master”中，很可能包含了HTML基础教程、示例代码和练习文件。 HTML由一系列的元素组成，这些元素通过标签来...

    HTML简介、标记、属性.xmind

    该思维导图主要对HTML的标记和属性进行一个初步介绍，让大家对网页的结构有个初步了解，其实html与css基础的学习，就是在学习一个个的标记和具有的属性，再根据属性值搭建整个网页的布局与修饰网页显示内容的样式。

    html做的简单的图书管理系统

    图书详情页可能包含更丰富的信息，如书评、作者简介等。HTML5引入了新的语义化标签，如`&lt;article&gt;`、`&lt;section&gt;`和`&lt;aside&gt;`，这些可以帮助提高页面内容的可读性和搜索引擎优化。同时，`&lt;img&gt;`标签用于插入图书封面...

    基于HTML(品优购)电商项目项目的设计与实现（html前端源码+毕业设计）

    2.2.1HTML简介 6 2.2.2JavaScript简介 6 2.2.3 CSS简介 7 2.2.4Hbuilder简介 7 3 系统的需求分析与设计 7 3 项目开始 8 3.1可行性分析 8 3.2 页面分析 9 3.2.1 公共样式分析 9 3.2.2 首页分析 9 3.3 字体引入 11 3.4...

    HTML简介

    NULL 博文链接：https://chaoyi.iteye.com/blog/2059102

    ES5基础02. HTML简介与复习

    [JavaScript][JS][前端教學]_ES5基礎#02._HTML簡介與複習

    java将mht转化为html

    #### 一、MHT与HTML简介 1. **MHT (MHTML)**：是一种将网页的所有组成部分（如HTML代码、图片、样式表等）打包成一个文件的格式。这种格式方便了网页的保存和分享。 2. **HTML**：超文本标记语言，是构成Web页面的...

    简洁大气好看的个人博客模板HTML源码.txt

    简洁大气好看的个人博客模板HTML源码.txt

    博主推荐HTML制作一个美观的个人简介网页（附源码）

    在本教程中，我们将深入探讨如何使用HTML来创建一个美观的个人简介网页。这个网页不仅适用于个人展示，还能在PC端和移动端流畅运行，提供了跨平台的用户体验。 首先，我们需要了解HTML的基本结构。一个HTML文档通常...

    html教程（最简单易学的html标记手册）

    • 第一课 Html简介 • 第二课 HTML标记一览 • 第三棵 文件标记 • 第四课 排版标记 • 第五课 字体标记 • 第六课 清单标记 • 第七课 表格标记 • 第八课 表单标记 • 第九课 图形标记 • 第十课 链接...

    基于html家具装饰网站设计毕业设计.rar（含论文毕设+项目源码+答辩设计+成绩评分表+评定表）

    2.3 HTML 简介 4 2.4 HTML 技术介绍 4 第三章 网站需求分析 5 3.1 系统概述 5 3.2 系统的可行性分析 5 (1)实用性 5 (2)技术性 5 (3)经济性 5 第四章 网站的设计与实现 6 4.1 网站的总体设计 6 4.1.1 网站结构图 6 ...

    html+css+javascript教程课件ppt

    1. HTML简介： * HTML是Hyper Text Markup Language的缩写，表示超文本标记语言 * HTML是一种标记语言，用于在Web上传递信息 * HTML的历史：HTML1.0 – HTML2.0 (IETF制定) – HTML4.0 (最终版) W3C 2. HTML语法...

Magicbox
Global site tag (gtag.js) - Google Analytics