HTML简要内容

1.  html基础

html是用来制作网页的标记语言,不需编译,直接由浏览器执行。大小写不敏感,推荐使用小写。html文件必须使用html或htm为文件名后缀。

html主体结构:

(1)DTD头:用于告诉浏览器用什么标准解析当前页面

(2)head部分:告诉浏览器一些相应信息

(3)body部分:给人看的数据

2.  html语言的语法

2.1 html标签

标签是html中最基本单位,也是最重要的组成部分,用角括号< >括起来。

标签都是闭合的,有两种形式:<标签名>内容<标签名> ;<标签名 />

有三部分组成:标签名,要显示的数据,显示数据的属性

<标签名 属性名1=“属性值” …属性名n=“属性值”></ 标签名>

2.2 html注释

<!--被注释的内容-->

2.3 html代码格式

回车和空格在源代码中不起作用,所以在编写html代码时可以使用回车或空格进行排版,可使代码清晰,也便于团队合作。必须保持严格的缩进规则,以“Tab”键为准。

把代码写得漂亮比把代码写得正确更重要。

3. head部分

表示html文档的头信息,以<head>开始,以</head>结束。

包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在html文档中的。

常用标签:

title标签--代表html文档的标题

base标签--将相对URL转换为完整的绝对URL

meta标签--用于定义文件信息的名称、内容等信息

link标签--当在文档中声明使用外接资源(如CSS)时使用此标签

style标签--在文档中声明样式时使用此标签

script标签--在文档中使用JavaScript脚本

4.body标签中的常用属性(注意默认值)

text-------设置页面文字的颜色

bgcolor---------设置页面的背景颜色

background-------设置页面背景图片

bgroperties-------设定页面背景图像为固定,不随页面滚动而滚动

link--------设定页面默认的链接颜色

alink-----------设定鼠标正在点击时的颜色

vlink-----------设定访问后链接文字的颜色

topmargin-----------设定页面的上边距

leftmargin-------------设定页面的左边距

5. 文字版面的编辑

5.1 格式标签

<br>    换行标签

<p>     段落标签,里边可加入文字、列表、表格等

<center>     居中对齐标签

<pre>     按原文显示标签,可把原文件中的空格,回车,换行,tab键表现出来

<li>      代表html列表项目,每个列表项使用一对<li></li>

<ul>      html无序列表

<ol>      html有序列表

<hr>     水平分割线标签,用于段落与段落间的分割

5.2 文本标签

<hn>   标题字标签,n为1-6,定义六级标题,而且会自动换行插入一个空行

<b>     粗体字标签

<i>     斜体字标签

<u>    下划线字体标签

<sub>   文字上标字体标签

<sup>   文字下表字体标签

<font>  字体标签,可通过标签的属性指定文字的大小、颜色及字体等属性

<tt>    打字机文字

<cite>  用于引证、举例,通常为斜体字

<em>  表示强调,通常为斜体字

<strong>   表示强调,通常为粗体字

<small>    小型字体标签

<big>     大型字体标签

6. 插入图像

img标签,单独出现,<img />

常用属性:

alt-------代表图像的替代文字

src------图像源(即图像的位置)

border-------图片边框的宽度

height--------图像的高度

width---------图像的宽度

设计网页时常用的图片格式:gif,jpeg,png

7. 建立锚点和超链接

7.1 a标签-------代表html链接,成对出现<a>…</a>

常用属性:

href---------代表一个url链接源

url可以是网页,其他的文件,指向HTML文件中的一个位置,email地址

target---------用来指出链接打开方式

target=_blank:将链接内容在新的窗口中打开

target=_parent:将链接的内容当成文件的上一个画面

target=_self:将链接的内容显示在当前窗口

target=_top:使整个画面重新显示成链接的画面内容

链接语法:

<a href=“url” target=“_blank”>显示的文字</a>

7.2 定位网页内部的链接(锚点链接)

用<a name=””>定义,如:<a name=”here1”>第一部分</a>,使用<a href=”#here1”>跳转到第一部分</a>,超链接就可以定位到网页中的“第一部分”这个位置。

7.3 超链接

三种链接路径:

绝对路径:http://www.sohu.com/index.html

文档相对路径:adver/contents.html

站点根目录相对路径:/support/app/customer.html

8. html表格

8.1 常见标签

<table>    代表html表格,成对出现

属性:width------表格宽度

height------表格高度

border------表格边框

cellspacing-----表格边框与表格内容填充的距离,也是内容填充之间的距离

cellpadding------内容填充的宽度

<caption>    定义表格标题的位置,可由align和valign属性来设置

<tr>   表中的一行

<th>   表中的一列

tr、th属性:

width与height------代表宽度和高度

colspan---------一行跨越多列

Rowspan--------一列跨越多行

align-------------水平对齐方式(left,center,right)

valign----------竖直对齐方式(top,middle,bottom)

<td>   表中的一个单元格,用于存放具体数据内容

align,valign具体解释详见上面

9. html框架结构

9.1 简述

一个浏览器窗体可通过几个页面的组合来显示。可使用框架(frames)来完成。可分为数行和数列。

优点:重载页面时不需重载整个页面;方便制作导航栏。

缺点:会产生很多页面,不易管理;不易打印;浏览器的后退按钮无效;代码复杂,无法被一些搜索引擎索引到;多数小型的移动设备(PDA手机)无法完全显示框架;多框架的页面会增加服务器的http请求

由于这许多缺点,不符合标准网页设计的理念,已被标准网页设计抛弃

9.2 html框架标签

<frameset>标签--代替body标签定义了框架页,并定义了框架将分为多少行多少列

常用属性:

cols---框架含有多少列与列的大小

rows----框架还有多少行与行的大小

border----框架页是否有边框

framespacing----框架之间间隔的距离

<noframes>标签--可为那些不支持框架的浏览器显示文本,与<body>组合使用

<iframe>标签----创建一个包含另外一个文档的内敛框架,iframe标签内的内容可以作为浏览器不支持iframe标签是显示

frame标签---定义frameset标签中每个框架页的内容

单独出现,<frame />

常用属性:

frameborder----定义了内容页的边框,取值为(1|0),缺省值为1

1--在每个页面之间显示边框    0----不显示边框

name-----在一个框架页链接到另一框架页是使用(另一个框架页可使用target定义链接页)

Noresize----定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)

scrolling----定义了是否有滚动条,取值为(yes|no|auto),缺省值为auto

yes---显示滚动条  no----不显示滚动条  auto----需要时再显示滚动条

src----定义了内容条URL

border---设置边框粗细

10. html表单设置

10.1 form标签

网页怎样与用户进行交互?答案是:使用html表单(form)

form标签-----代表html表单

常用属性:

action---浏览者输入的数据被传送到的地方,如一个jsp页面

method----数据传送的方法,常用post

10.2 input标签-----html表单的单行输入域

单独出现,<input />

属性:

type----代表一个输入域的显示方式(分为输入型,选择型,点击型)

取值:

text---文字输入域(输入型)

password----文字输入域,但输入的文字以密码符号*显示(输入型)

file----可以输入一个文件路径(输入型)

checkbox----复选框,可以选择零个或多个(选择型)

radio----单选框,只选且必选一个(选择型)

hidden---代表隐藏域,可传送一些隐藏的信息到服务器

button----按钮(点击型)(有提交功能,会把所有表单一起提交)

image----使用图片来显示按钮,使用src属性指定图像的位置(点击型)

submit---提交按钮,可使用value属性来显示按钮上的文字(点击型)

reset----重置按钮,可以把表单中的信息清空(点击型)

name-----此表单项名称

value----输入域的值

size----输入域的长度

maxlength-----输入域最多可以输入文字的长度(个数)

checked-----如果是选择型的输入域,代表已经被选择,值为checked

readonly-----输入域可以选择,但无法修改,值为readonly

disabled-----输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用

accesskey-----表单的快捷键访问方式如值为h即按Alt+h

tabindex-----输入域的“tab”键遍历顺序

src----当使用图片来表示按钮时,代表图片的位置(URI)

alt----用来替换提交按钮的图片提示信息

10.3 textarea标签-----代表表单多行输入域

成对出现,<textarea></textarea>

属性:

cols----多行输入域的列数

rows----多行输入域的行数

name----此表单项名称

accesskey-----表单的快捷键访问方式

disabled-----无法获得焦点,无法选择

readonly----输入域可选择,但无法修改

tabindex-----输入域,使用“tab”键的遍历顺序

10.4 select标签

Select标签----选择列表标签

成对出现<select></select>

此标签中的每对option标签代表一个选择项

属性:

name---表单项名称

size---选择域的高度

multiple---可以有多个选择

disabled---以灰色显示,在表单中不起任何作用

tabindex--使用“tab”键的遍历顺序

option标签---代表选择列表的一个选择项

成对出现<option></option>

属性:

label----说明选择项

value----说明选择项的值

selected---此选择项已经被选择

disabled----输入框无法获得焦点,以灰色显示,在表单中表示禁用

tabindex----使用“tab”键的遍历顺序

时间: 2024-10-11 01:53:15

HTML简要内容的相关文章

微软公有云魅力之Websites

由世纪互联运营的Microsoft Azure已经在国内运行了一段时间了,通过最近项目中的亲身体验我个人是越来越欣赏和喜爱Azure了,恰巧也汇总了一些信息在此跟大家分享一下,之前的博文也有简单聊过Azure网络.存储.虚机的一些话题,今天就来说说Websites,也就是站点服务. 首先Azure作为一款PaaS级平台,它提供了四大类服务,分别是计算.数据.应用.网络,然后在每一类服务中又有细分,websites就是属于计算服务下面的一个分支.正如Azure官方所描述的,Azure Websit

20145306《信息安全系统设计基础》课程总结

# <信息安全系统设计基础>课程总结 第0周总结 简要内容: 使用虚拟机VirtualBox成功安装Linux系统,预习了Linux基础入门,阅读娄老师推荐的博客感想. 二维码: 第1周总结 简要内容: 介绍了Linux操作系统,ubuntu下常用代码,核心的Linux命令,使用Linux中用户管理命令/系统相关命令/文件目录相关命令/打包压缩相关命令/比较合并相关命令/网络相关命令等. 二维码: 第2周总结 简要内容: 介绍了了Linux系统下的开发环境.vi的基本操作.gcc编译器的基本原

正确设置网站title、keywords、description(转载)

本文转载自蚂蚁HR(www.mayihr.com) 优化技巧是老师在课堂上教不了你的,而自己也不可能在练习中领悟,最便捷的方法就是听取别人的经验,所以转载一下 1.title(网站标题) title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要.)title一般不超过80个字符,而且词语间要用英文“-”隔开,因为计算机只对英语的敏感性较高,对汉语的敏感性不高. 用法:<title>网站标题&l

iPad应用的10大用户体验设计准则

与众多优秀的产品相同,iPad应用的成功也取决于产品核心价值以及用户体验模式等诸多方面的因素.除了游戏之外,多数类型的应用都必需能够在一定的上下文环境中帮助用户解决某些特定的问题.它应该足够的简单易用,使用户不需要进行复杂的设置和学习就可以顺利上手. 而产品在视觉外观.交互方式.情感联接等方面的表现更会直接影响到用户对于应用的体验满意度.在本文中,我们将共同了解一些你在设计工作中需要认真考虑与贯彻的指导准则.我们不会对创建iPad应用的完整设计流程进行讲解,也不会将时间花费在几乎任何一篇移动应用

20145326蔡馨熤《信息安全系统设计基础》期末总结

20145326蔡馨熤<信息安全系统设计基础>期末总结 每周作业链接汇总 第0周作业 简要内容:初步翻阅课本,提出问题:学会如何使用虚拟机VirtualBox并成功安装Ubantu:预习了Linux基础入门:阅读了老师推荐的博客并写出了自己的感想. 二维码: 第1周作业 简要内容:初步了解Linux操作系统:介绍了核心的Linux命令:find/locate/cheat/grep/which/whereis. 二维码: 第2周作业 简要内容:介绍了Linux系统下的开发环境.vi的基本操作.g

匹夫细说CIL:你好,沃尔德

前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾.所以决定写几篇关于CIL的文章,即和各位看官一起进行个交流,同时也是匹夫自己总结和巩固一下这些知识点.俗话说的好,“万事开头,Hello World”,那么作为匹夫总结CIL的第一篇文章,就从Hello World开始吧.当然,正式开始写CIL代码之前,我们还有点闲话要说,那就是运行时的选择为何是它

职场保鲜二十大锦囊

简要内容:有时候我们不做一件事,是因为我们没有把握做好.我们感到自己状态不佳或精力不足时,往往会把必须做的事放在一边,或静等灵感的降临.你可不要这样.如果有些事你知道需要做却又提不起劲,尽管去做,不要怕犯错.给自己一点自嘲式幽默.抱一种打趣的心情来对待自己做不好的事情,一旦做起来了尽管乐在其中.        在职场沉浮几载的人,身心的疲惫难免会让他们失去对生活的兴趣,工作的激情也一并消磨殆尽.怎么让职场保鲜,给自己充沛的精力去面对每一天重复的工作?想必很多职场人士都在找答案.要想重获工作激情,

通信系列2: 深入浅出SIP协议

传统电话是电磁波的通信,当电话技术发展到IP技术时代,SIP协议成为了电话通信标准协议,不仅可以通电话.还可以收发信息.视频.开会.放PPT.事实上,今天的通信业已全面采用SIP协议作为通信标准,无论是固定电话.还是移动电话,其后台都是以SIP协议完成通话.交换的. 很多软件也采用SIP协议进行通信,如:Windows Messenger. 学习多天,记录如下: 一.从打电话的过程,理解SIP协议 (一) 分析一下打电话的过程 两个电话之间的一次通话称为一个会话(Session), 首先,通话双

黑马程序员_使用Jquery实现AJAX功能

1.AJAX是什么? AJAX技术虽然一直听过,但是真正用起来还是工作有一年了的时候,当时需要实现一个异步更新推送的功能.如:在档案管理系统中,存在代办事项和站内信,而这些模块需要在页面不刷新的情况下定时的反馈给前台待办事项的数量以及简要内容,站内信也是如此.这个时候我认为只有AJAX能够胜任,那AJAX是什么?AJAX是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术. 2.为什么使用Jquery来实现? 学习ASP.NET开始,Jquery的强大已经深深捕获了我,而且我还记着