Html简单介绍

作者:网络    软件教程库   2020-05-18

1、html--- hypertext markup language 的缩写 --- 超文本 标记 语言.

这个技术是什么

这个技术可以干什么

怎么用好技术

2、 html 就是 用来 做网页的 .

  • html指的是超文本标记语言,但不是一种编程语言 而是一种标记语言(markup language)
  • 标记语言是一套标记标签(markup tag)
  • html 使用标记标签来描述网页

3、html一些规范

html 文件 是有 自己的 特定 扩展名的: .html, .htm

html 的标签 分为如下 这两种 :

单标签:单标签一般 用于特殊的含义, 例如 : br/ 表示换行, hr/ 水平线

双标签:双标签一般用来 封装数据 , 展示特定的样式 , 例如 : font欢迎/font


标签的书写规则

在html 中 不管是单标签还是双标签, 都必须要 正确 关闭,

对于任何一个 html页面来说 , 都会有 一个 固定的 内容 :

html 必须是以 html 做为 根标签, 然后 下面有 head 和 body 标签,一般 head中 去写 标签 title 标签以及 meta 标签, 其中title 设置

html页面的 标题内容. meta 用于指定 html页面的 特定的属性 信息.


html中的注释 :

!-- html 中的注释 --


4、常用标签

html 标记一览
 
标记 类型 译名或意义 作 用 备注
文件标记
html 文件声明 让浏览器知道这是 html 文件
head 开头 提供文件整体资讯
title 标题 定义文件标题,将显示于浏览顶端
body 本文 设计文件#26684;式及内文所在
排版标记
!--注解-- 说明标记 为文件加上说明,但不被显示
p 段落标记 为字、画、表#26684;等之间留一空白行
br 换行标记 令字、画、表#26684;等显示于下一行
hr 水平线 插入一条水平线
center 居中 令字、画、表#26684;等显示于中间 反对
pre 预设#26684;式 令文件按照原始码的排列方式显示
div 区隔标记 设定字、画、表#26684;等的摆放位置
nobr 不折行 令文字不因太长而绕行
wbr 建议折行 预设折行部位
字体标记
strong 加重语气 产生字体加粗 bold 的效果
b 粗体标记 产生字体加粗的效果
em 强调标记 字体出现斜体效果
i 斜体标记 字体出现斜体效果
tt 打字字体 courier字体,字母宽度相同
u 加上底线 加上底线 反对
h1 一级标题标记 变粗变大加宽,程度与级数反比
h2 二级标题标记 将字体变粗变大加宽
h3 三级标题标记 将字体变粗变大加宽
h4 四级标题标记 将字体变粗变大加宽
h5 五级标题标记 将字体变粗变大加宽
h6 六级标题标记 将字体变粗变大加宽
font 字形标记 设定字形、大小、颜色 反对
basefont 基准字形标记 设定所有字形、大小、颜色 反对
big 字体加大 令字体稍为加大
small 字体缩细 令字体稍为缩细
strike 画线删除 为字体加一删除线 反对
code 程式码 字体稍为加宽如tt
kbd 键盘字 字体稍为加宽,单一空白
samp 范例 字体稍为加宽如tt
var 变数 斜体效果
cite 传记引述 斜体效果
blockquote 引述文字区块 缩排字体
dfn 述语定义 斜体效果
address 地址标记 斜体效果
sub 下标字 指数
sup 下标字 下标字
清单标记
ol 顺序清单 清单项目将以数字、字母顺序排列
ul 无序清单 清单项目将以圆点排列
li 清单项目 每一标记标示一项清单项目
menu 选单清单 清单项目将以圆点排列,如ul 反对
dir 目录清单 清单项目将以圆点排列,如ul 反对
dl 定义清单 清单分两层出现
dt 定义条目 标示该项定义的标题
dd 定义内容 标示定义内容
表#26684;标记
table 表#26684;标记 设定该表#26684;的各项参数
caption 表#26684;标题 做成一打通列以填入表#26684;标题
tr 表#26684;列 设定该表#26684;的列
td 表#26684;栏 设定该表#26684;的栏
th 表#26684;标头 相等于td,但其内之字体会变粗
表单标记
form 表单标记 决定单一表单的运作模式
textarea 文字区块 提供文字方盒以输入较大量文字
input 输入标记 决定输入形式
select 选择标记 建立 pop-up 卷动清单
option 选项 每一标记标示一个选项
图形标记
img 图形标记 用以插入图形及设定图形属性
连结标记
a 连结标记 加入连结
base 基准标记 可将相对 url 转绝对及指定连结目标
框架标记
frameset 框架设定 设定框架
frame 框窗设定 设定框窗
iframe 页内框架 于网页中间插入框架 ie
noframes 不支援框架 设定当浏览器不支援框架时的提示
影像地图
map 影像地图名称 设定影像地图名称
area 连结区域 设定各连结区域
多媒体
bgsound 背景声音 于背景播放声音或音乐 ie
embed 多媒体 加入声音、音乐或影像
其他标记
marquee 走动文字 令文字左右走动 ie
blink 闪烁文字 闪烁文字 nc
isindex 页内寻找器 可输入关键字寻找于该一页 反对
meta 开头定义 让浏览器知道这是 html 文件
link 关系定义 定义该文件与其他 url 的关系
stylesheet
style 样式表 控制网页版面
span 自订标记 独立使用或与样式表同用

注:

  • ● 表示该标记属围堵标记,即需要关闭标记如 /标记。
  • ○ 表示该标记属空标记,即不需要关闭标记。
  • ie 表示该标记只适用于 internet explorer。
  • nc 表示该标记只适用于 netscape communicator。
  • 反对 表示该标记不为 w3c 所赞同,通常这标记是 ie 或 nc 自订,且己为众所支 持,只是 html 标准中有其它同功能或更好的选择。
  • 弃用 表示该标记己为 w3c 所弃用,是过时的标记,但 html 具向下兼容的特 性,不用担心新浏览器不支援旧标记。
  • 新 表示该标记是 html 4.0 中新增的。

5、html的一些特殊符号

只要你认识了 html 标记,你便会知道特殊字符的用处。

html 原始码 显示结果 描述
小於号或显示标记
大於号或显示标记
可用於显示其它特殊字符
引号
reg; 己注册
copy; 版权
trade; 商标
ensp; 半方大的空白
emsp; 全方大的空白
不断行的空白


6、常用的标签介绍

1)、font 标签:

font 是应用于文件的内文部分,即 body 与 /body 之间的位置,只影响 所标示的字句,是一个围堵标记。

font的参数设定: 例子: font face=arial size=#43;2 color=#008000creation of webpage/font face=arial 设定文字的字形。arial 是常用的一种,请不要使用 window 内建字 形以外的字形。于没有设定为 gb2312 encoding 的中文网页,netscape net vigator 不会显示此标记 所指明的任何中文字形。 size=#43;2 设定文字的大小。其#20540;可以是绝对或相对, 绝对的意思便是标记自己决定文字的大小,不受 basefont 的影响,

如 size=5 表示其大小便是 5, 而html内定#20540;为 3,即 size=3和没有设定是一样的。 相对的意思便是在内定#20540; 3 的基础上增加或减少大小级数,如 size=#43;2 便等同绝 对表示法的 size=5,但若已设定 basefont size=n 则其实际大 小便是 n#43;2 不 再是 3#43;2 了。basefont只有绝对表示法。 color=#008000 设定文字的颜色。#008000 表示绿色


2)、img标签

img主要用以插入图片于网页中


img 的一般参数设定:

例如 img src=logo.gif width=100 height=100 hspace=5 vspace=5 border=2 align=top alt=logo of penpals garden lowsrc=pre_logo.gif

  • src=logo.gif
    图片来源,接受 .gif, .jpg 及 .png #26684;式,前两者通行己久,后者由 96 年开始发展, 于未来取代前两者。若图片文件与该 html 文件同处一目录则只 写上文件案名称,否则 必须加上正确的途径,相对及绝对皆可。
  • width=100 height=100
    设定图片大小,此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真,若 要改变图片大小最好事先使用图像编辑工具。
  • hspace=5 vspace=5
    设定图片边沿空白,以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。
  • border=2
    图片边框厚度。
  • align=top
    调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选#20540;:top, middle, bottom, left, right,内定为 botom。netscape 还支持 texttop, baseline, absmiddle, absbottom,
    texttop 表示图片和文字依顶线对 ,
    baseline 表示图片对 到目前文字行底线#20540;,
    absmiddle 表示图片对 到目前文字行绝对中央,
    absbottom 表示图片对 到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。
  • alt=logo of penpal garden
    这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
  • lowsrc=pre_logo.gif
    设定先显示低解像图片,若所加入的是一张很大的图片,下载 时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。


3)、表#26684;标签


table是一个容器标记,意思是说它用以声明这是表#26684;而且其他表#26684;标记只能在他的 范围内才适用,属容器标记的还有其他。
tr用以标示表#26684;列(row)
td用以标示储存#26684;(cell)

table 的参数设定(常用):
例如: table width=400 border=1 cellspacing=2 cellpadding=2 align=center valign=top background=myweb.gif bgcolor=#0000ff bordercolor=#ff00ff bordercolorlight=#00ff00 bordercolordark=#00ffff cols=2

  • width=400
    表#26684;宽度,接受绝对#20540;(如 80)及相对#20540;(如 80%)。

  • border=1
    表#26684;边框厚度,不同浏览器有不同的内定#20540;,故请指明。

  • cellspacing=2
    表#26684;#26684;线厚度,请看例子三,那是加厚到 5 的#26684;线。

  • cellpadding=2
    文字与#26684;线的距离,请看例子四,那是加至 10 的 padding。

  • align=center
    表#26684;的摆放位置(水平),可选#20540;为: left, right, center,请看例子五或六,那表#26684; 是放于中间的,为怕一些浏览器不支援,故特加上居中标记center,只是多 层保证而己,当然只用center亦可。

  • valign=top.
    表#26684;内字画等的摆放贴 位置(垂直),可选#20540;为: top, middle, bottom。

  • background=myweb.gif
    表#26684; 纸,与 bgcolor 不要同用。

  • bgcolor=#0000ff
    表#26684;底色,与 background 不要同用,请看例子六。

  • bordercolor=#ff00ff
    表#26684;边框颜色,nc 与 ie 有不同的效果,请看例子六。

  • bordercolorlight=#00ff00
    表#26684;边框向光部分的颜色,请看例子二。『只适用于 ie』

  • bordercolordark=#00ffff
    表#26684;边框背光部分的颜色,请看例子二,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』

  • cols=2
    表#26684;栏位数目,只是让浏览器在下载表#26684;是先画出整个表#26684;而己。

tr 的参数设定(常用):
例如:tr align=right valign=middle bgcolor=#0000ff bordercolor=#ff00ff bordercolorlight=#808080 bordercolordark=#ff0000

  • align=right
    该一列内字画等的摆放贴 位置(水平),可选#20540;为: left, center, right。

  • valign=middle
    该一列内字画等的摆放贴 位置(垂直),可选#20540;为: top, middle, bottom。

  • bgcolor=#0000ff
    该一列底色,请看例子五。

  • bordercolor=#ff00ff
    该一列边框颜色,请看例子三。『只适用于 ie』

  • bordercolorlight=#808080
    该一列边框向光部分的颜色,请看例子三。『只适用于 ie』

  • bordercolordark=#ff0000
    该一列边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』

td 的参数设定(常用):
例如:td width=48% height=400 colspan=5 rowspan=4 align=right valign=bottom bgcolor=#ff00ff bordercolor=#808080 bordercolorlight=#ff0000 bordercolordark=#00ff00 background=myweb.gif

  • width=48%
    该一储存#26684;宽度,接受绝对#20540;(如 80)及相对#20540;(如 80%)。

  • height=400
    该一储存#26684;高度。

  • colspan=5
    该一储存#26684;向右打通的栏数。请看例子六

  • rowspan=4
    该一储存#26684;向下打通的列数。请看例子六

  • align=right
    该一储存#26684;内字画等的摆放贴 位置(水平),可选#20540;为: left, center, right。

  • valign=bottom
    该一储存#26684;内字画等的摆放贴 位置(垂直),可选#20540;为: top, middle, bottom。

  • bgcolor=#ff00ff
    该一储存#26684;底色,请看例子四。

  • bordercolor=#808080
    该一储存#26684;边框颜色,请看例子三。『只适用于 ie』

  • bordercolorlight=#ff0000
    该一储存#26684;边框向光部分的颜色,请看例子三。『只适用于 ie』

  • bordercolordark=#00ff00
    该一储存#26684;边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』

  • background=myweb.gif
    该一储存#26684; 纸,与 bgcolor 任用其一。

4)、超链接


a 称连结标记,由 a 与 /a 所围的文字、图片等等可以成为一个连结。

a 的一般参数设定:

例如 a href=index.html name=hello target=_top

  • href=index.html
    这参数不能与另一参数 name 同时使用,使用这参数才能造成可按的连结。
    • 当作为一外部连结时: href 所设定的是该连结所要连到的文件名称,若 该文件与此 html 档不是同在一目录请加上适当的路径,相对绝对皆可。
    • 当作为一内部连结时: href 所设定的是该连结所要连到的同文件内参考 点或指定文件之参考点,且不 要包围任何字画只 加上结束标示 /a便 可以,例如 a href=#there/a 、 a href=index.html#there/a 及 a href=http://www.school.net.hk/~chris55/index.html#there/a 其中 there 便 是参考点,并 於其前加上符号 # 以作识别,参考点由下一个参数 name 事先於文件中埋下。

  • name=hello
    这参数是为文件埋下参考点,作为被连结,不会被显示。所以说造成一个内部连 结 要使用两次 a 连结标记。一个使用参数 name 事先於文件中埋下一参考 点,另一个使用参数 href 连到这个参考点。

  • target=_top
    设定连结被按後之结果所要显示的视窗。可选#20540;为: _blank, _parent, _self, _top, 框 窗名称。

    • target=框窗名称
      这只运用於框架中,若被设定则连结结果将显示於该“框窗名称”之框窗 中,框窗名称是事先由框架标记所命名。
    • target=_blank 或 target=new
      将连结的画面内容,开在新的浏览视窗中。
    • target=_parent
      将连结的画面内容,当成文件的上一个画面。
    • target=_self
      将连结的画面内容,显示在目前的视窗中。(内定#20540;)
    • target=_top
      将框架中连结的画面内容,显示在没有框架的视窗中。(即除去了框架)
5)、表单标签


form称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,input便是其中的一个,用以设定各种输入资料的方法。它 是一个空标记。

form 的参数设定(常用):
例如: form action=http://your.isp.com/cgi-local/example.cgi method=post

  • action=http://your.isp.com/cgi-local/example.cgi
    表单通常是与 cgi 配合使用的,参数 action 便是用以指明该 cgi 程式的位置,这 样此表单所填的资料才能正确传给 cgi 作处理。若馈下没有 cgi 以进行测试,可 设定此参数为 action=mailto:[email#160;protected] 那样该表单所填的资料将会寄至 此电邮地址(红色部分)。
  • method=post
    传送资料给 cgi 的的方式,可选#20540;为 post, get。你只需记住post容许传送大量资料,但 get则只接受低于 1k 的资 料,所以你若看过别人的表单原始码的话,你会发现申请表单用的是post 而搜 找器用的是 get。

input 的参数设定(常用):
由于其第一个参数 type 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。

  • type=text
    可选#20540;为 text, radio,checkbox, password, submit/reset, image, file, hidden, button。


html简单介绍

原文地址:http://blog.csdn.net/lmjssjj/article/details/45437451

软件教程库 原文地址:https://www.itjcku.com/9999/1091486.html

阅读全部内容


Tags:简单介绍

返回首页



推荐内容

configure:error:youmustconfigureinaseparatebuilddirectory

configure glibc-2.14 时出现以下错误: [[email#160;protected] opt]# ...

kohana框架生成feed

创建feed feed::create()斱法用给定癿参数杢创建 rss戒者 atom feed。下面是可接叐癿参数。 ...

用USB安装linux

手边没有光驱,安装ubuntu可以用 linuxlive usb creator 2.9.3,在百度网盘里有的。http ...

一个复杂子查询SQL优化

select * from test.vmark vk where id in (select v.id ...

Java多线程中常见的几个问题

我们都知道,在java中要想实现多线程,有两种手段,一种是继续thread类,另外一种是实现runable接口。  1. ...

OracleDataIntegrator12c-CreatingaCollocatedAgent

http://www.oracle.com/webfolder/technetwork/tutorials/obe/fm ...

CompilingGCC5onOSX

compiling gcc 5 on os x */--> pre.src {backgro ...

查看Linux上MySQL版本信息

如果mysql是用rpm或者yum安装的,可用 #rpm -qa|grep mysql查看. 如: [[email#16 ...

《赢在测试2-中国软件测试专家访谈录》读书笔记

《赢在测试2-中国软件测试专家访谈录》读书笔记 2015-04-30 测试人物经历与观点 1.董杰 百度测试架构师 董杰 ...

Objective-C的KVC和KVO

字面意思分别是: kvc是指key value coding,键值编码。 kvo是指key value observin ...

20150502调试分析之使用gdb远程调试ARM开发板

20150502 调试分析之 使用gdb远程调试arm开发板 2015-05-02 lover雪儿 今天我们要学习 ...

限制Apache日志access.log文件大小

可以在apache的httpd.conf配置文件中配置apache自带的程序rotatelogs的功能。 rotate ...

UVa11561-GettingGold

题目:给你一个二维的地图,里面有陷阱‘t‘,金子‘g‘以及墙壁‘#‘,和普通的道路‘.‘,现在已知一个人在起点‘p‘; ...

configure:error:cannotcomputesuffixofobjectfiles:cannotcompile

centos 6.5下安装gcc-4.8.4 make的时候提示以下错误: configure: error: can ...

我读的第一本书《梦断代码》

一切都是兴趣所在,兴趣才是发展的动力,虽然我们在这个开发过程中不可否认的会遇到挫折、瓶颈,但我认为,地狱与天堂共存 ...

iOS中定时器NSTimer的使用

ios中定时器nstimer的使用 1、初始化 + (nstimer *)timerwithtimeinterval:( ...

数组遍历二叉

//任务二叉树遍历 void cmission::initmission(dword base) { cha ...

Oracle基础<1>--数据库设计

一:为什么需要使用数据库设计   数据库设计可以使数据库通过健壮的数据库结构 高效并且健康 的进行工作。 二.数据库设计 ...

LinuxShell之七函数应用

函数是什么?函数是一些命令的集合,使用一个名称做代表,称为函数名称。函数名称的命名规则和变量相同。一旦函数定义好了,执行 ...

SkillButton技能冷却

#pragmaonce #include"cocos2d.h" using_ns_cc; classskillbutto ...

sles11启用Xmanager

一:开启xmanager要满足一下2个条件:1.安装了gnome桌面环境,并且默认启动级别为52.ip地址为固定ip地址 ...

linux软件管理之rpm、yum

应用程序: 程序:architecturec语言:源代码——》(编译)二进制格式脚本:解释器(二进制程序)源代码——》编 ...

MyEclipse2014下搭建Android开发环境

1、下载android-sdk_r24.1.2-windows.zip,将其解压到一个文件夹中,例如:d:\progra ...

LinuxShell之八转向的用法

一、文件代码“转向”的意思是说:原本应由标准输入(如键盘)读取数据的,改由其它文件读取;原本应把结果显示在标准输出(如屏 ...

Java中有关null的9件事

java中有关 null 的9件事 对于java程序员来说,null是令人头痛的东西。时常会受到空指针异常(np ...

LDAP账号同步和Windows域集成验证

#65279;#65279; paradise.ezla.com.tw/files/article/html/32/32 ...

在同一个sql语句中如何写不同条件的count数量(转)

select sum(case when (t.条件字段=‘00‘) then 1 else 0 ...

详解MessageBox(),MsgBox函数的正确使用

//或者使用chr(13),chr(10)效果一样 msgbox aamp;chr(13)amp;bamp;chr( ...

swift学习笔记5

五、集合 数组 1、泛型 arraylt;类型gt; 2、简化[类型] var myar:arraylt;stringg ...

约在CBD,吃饭

午饭当然是外卖。 cbd上班的同仁们不用约,都去了一间叫大食堂的餐厅。 它在商业街繁华地段的二楼,有1000平米。你不知 ...


本网站部分内容来自互联网,版权归原作者所有,文章内容仅代表原作者个人观点。如有侵权请联系我们删除 电子邮件 itjcku@foxmail.com