HTML语言笔记
html语言即超文本标记语言。
头部内容
标签
|
描述
|
---|---|
<head>
|
定义了文档的信息
|
<title>
|
定义了文档的标题
|
<base>
|
定义了页面链接标签的默认链接地址
|
<link>
|
定义了一个文档和外部资源之间的关系
|
<meta>
|
定义了HTML文档中的元数据
|
<script>
|
定义了客户端的脚本文件
|
<style>
|
定义了HTML文档的样式文件
|
主体内容
常见实体
显示结果描述实体名称实体编号空格 <小于号<<>大于号>>&和号&&"引号""'撇号' (IE不支持)'¢分¢¢£镑££¥日元¥¥欧元€€§小节§§版权®
®注册商标©©商标™™×乘号××÷除号÷÷元素
<html></html> 创建一个超文本标记语言文档。<head></head> (头)设置文档标题和其它在网页中不显示的信息,比如direction方向、语言代码Language Code(见实体定义!ENTITY % i18n)、指定字典中的元信息、等等。<BASE> 文档中不能被该站点辨识的其它所有链接源的URL(统一资源定位器)<script></script>脚本语句标签,比如引用一个javascript脚本。<body></body>文档体,文档的可见部分。<title></title> 设置文档的标题。内容描述<h1></h1> 最大的标题(一号标题)<pre></pre> 预先格式化文本 (英文全称:PREformatted)<u></u> 下划线(英文全称:Underline)<b></b> 黑体字 (英文全称:Bold)<i></i> 斜体字 (英文全称:Italics)<tt></tt>打字机风格的字体<cite></cite>引用,通常是斜体<em></em> 强调文本(通常是斜体加黑体、英文全称:EMphasize)<strong></strong> 加重文本(通常是斜体加黑体)<font size="" color=""></font> 设置字体大小从1到7,颜色使用名字或RGB(中文全称:红绿蓝)的十六进制值<BASEFONT></BASEFONT>基准字体标记<big></big> 字体加大<SMALL></SMALL> 字体缩小<DELECT></DELECT> 加删除线<CODE></CODE>程式码<KBD></KBD>键盘字(英文全称:KeyBoarD)<SAMP></SAMP> 范例(英文全称:SAMPle)<VAR></VAR> 变量(英文全称:VARiable)<BLOCKQUOTE></BLOCKQUOTE> 向右缩排(向右缩进、块引用)<DFN></DFN> 述语定义(英文全称:DeFiNe)<ADDRESS></ADDRESS>地址标记<sup></SUP> 上标字 (英文全称:SUPerscript)<SUB></SUB> 下标字(英文全称:SUBscript)<plaintext>...</plaintext>;固定宽度字体(不执行标记符号)<listing>...</listing> 固定宽度小字体<font color=00ff00>...</font>;字体 颜色<font size=1>...</font>;字体 大小等于1(最小)。<font style ='font-size:100 px'>...</font>;字体 样式等于无限增大(100像素)格式标志标签<p></p> 创建一个段落 (英文全称:Paragraphs)<p align=""> 将段落按左、中、右对齐<br/>定义新行<blockquote></blockquote> 从两边缩进文本<dl></dl> 定义列表(英文全称:DefinitionList)<dt> 放在每个定义术语词前(定义术语、英文全称:DefinitionTerm)<dd> 放在每个定义之前(定义说明、英文全称:DefinitionDescription)<ol></ol> 创建一个标有序的列表,默认前面有数字,从数字“1”开始计数,依次叠加,也可以设置为字母或从任何自然数开始计数的列表项 (有序列表、外语全称:OrderedList)<ul></ul> 创建一个无序的列表,默认前面标有圆点,也可以自己设置为none或者其他形状,如空心圆、方块等。(无序列表、外语全称:UnorderedLists)<li> 放在每个列表项之前,若在<ol></ol>;之间则每个列表项加上一个数字,若在<ul></ul>;之间则每个列表项加上一个圆点<div align=""></div> 用来排版大块HTML段落,也用于格式化表<MENU> 选项清单<DIR> 目录清单<nobr></nobr> 强行不换行(英文全称:nobreaking)<hr size='9' width='80%' color='ff0000'>;水平线(设定宽度、外语全称:horizontalrule)<center></center> 水平居中网页表格标签由于表格可以精确控制文本和图像在网页中的显示位置,所以在很多网站的主页中一般都使用表格来进行布局。
表格的基本结构如下:
<Table>
<caption> </caption>
<tr>
<th></th)<th)</th>...
</tr>
<tr>
<td></td><td> </td>...
</tr>
<tr>
<td></td><td> </td>...
</tr>
<tr>
<td></td><td> </td>...
</tr>
...
</Table>
<Table>定义整个表格,即表格的内容要放在<Table>和</Table>标记中;在<Table>中的主要属性:border属性显示表格的边框,width, height属性定义表格的大小。<caption>标记符用来定义表格的标题。
表格的表示以行为单位,在行中包含列。其中:一个<tr>...</tr>标记表示一行;一个<td>...</td>标记表示一列;<th>... </th>定义表头,一般可以不用。链接标志表格标志<ahref="一个统一资源定位器"></a>:创建超文本链接。<aname="书签页"></a>:创建位于文档内部的书签。<ahref="#书签页"></a>:创建指向位于文档内部书签的链接。使用(属性项)BGCOLOR(外语全称:BackgroundColor)用于定义网页的背景色,VLINK(外语全称:VisitedLINK)用于定义网页中已被访问过的超接链接字符的颜色,默认为紫红色直接颜色名称,可以在代码中直接写出颜色的英文名称。如<font color="red">我们</font>,在浏览器上显示时就为红色。16进制颜色代码,语法格式: #RRGGBB 。16进制颜色代码之前必须有一个“#”号,这种颜色代码是由三部分组成的,其中前两位代表红色,中间两位代表绿色,后两位代表蓝色。不同的取值代表不同的颜色,他们的取值范围是00--FF。如<font color="#FF0000">我们</font>,在浏览器上显示同样为红色。10进制RGB码,语法格式: RGB(RRR,GGG,BBB) 。在这种表示法中,后面三个参数分别是红色、绿色、蓝色,他们的取值范围是0--255。以上两种表达方式可以相互转换,标准是16进制与10进制的相互转换。如<font color="rgb(255,0,0)">我们</font>,在浏览器上显示字体为红色。使用图案代替背景颜色,可以使页面更生动、美观。如今用一张大图当做网页的背景已经成为一种流行趋势,高质量的精美照片和抽象的设计图片能够给网站的外观带去深刻的影响。注释1<!--百度百科:这是壹条注释,且不会呈现在渲染器或者网络浏览器之上。-->
其他版本和XHTML之间的差异:xmlns 属性在XHTML中是必需的,但在 HTML中不是。不过,即使XHTML文档中的 <html> 没有使用此属性,W3C 的验证器也不会报错。这是因为 "xmlns=百度" 是一个固定值,即使您没有包含它,此值也会被添加到 <html> 标签中。HTML语言的全部解释
<! - - ... - -> 注解
<!> 跑马灯 (图片和文字移动代码)
<marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=’left’></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定滚动速度
<marquee scrolldelay=300>...</marquee>设定卷动时间
<marquee onmouseover="this.stop()" >...</marquee>鼠标经过上面时停止滚动
<marquee onmouseover="this.start()" >...</marquee>鼠标离开时开始滚动
<!>字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调) (同上效果略同)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style=’font-size:100 px’>...</font>无限增大
<!>区断标记
<hr>水平线
<hr size=’9’>水平线(设定大小)
<hr width=’80%’>水平线(设定宽度)
<hr color=’ff0000’>水平线(设定颜色)
<br>(换行)
<nobr>...</nobr>水域(不换行)
<p>...</p>水域(段落)
<center>...</center>置中<!>连结格式
<base href=位址>(预设好连结路径)
<a href=位址></a>外部连结
<a href=位址 target=’_blank’></a>外部连结(另开新视窗)
<a href=位址 target=’_top’></a>外部连结(全视窗连结)
<a href=位址 target=’页框名’></a>外部连结(在指定页框连结)<!>贴图/音乐
<img src=图片位址>贴图
<img src=图片位址 width=’180’>设定图片宽度
<img src=图片位址 height=’30’>设定图片高度
<img src=图片位址 alt=’提示文字’>设定图片提示文字
<img src=图片位址’ border=’1’>设定图片边框
<bgsound src=MID音乐档位址>背景音乐设定<!>表格语法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)<!>分割视窗
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<frameset rows="20%,*">分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架<! - - ... - -> 注解
<A HREF TARGET> 指定超连结的分割视窗
<A HREF=#锚的名称> 指定锚名称的超连结
<A HREF> 指定超连结
<A NAME=锚的名称> 被连结点的名称
<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址
<B> 粗体字
<BASE TARGET> 指定超连结的分割视窗
<BASEFONT SIZE> 更改预设字形大小
<BGSOUND SRC> 加入背景音乐
<BIG> 显示大字体
<BLINK> 闪烁的文字
<BODY TEXT LINK VLINK> 设定文字颜色
<BODY> 显示本文
<BR> 换行
<CAPTION ALIGN> 设定表格标题位置
<CAPTION>...</CAPTION> 为表格加上标题
<CENTER> 向中对齐
<CITE>...<CITE> 用於引经据典的文字
<CODE>...</CODE> 用於列出一段程式码
<COMMENT>...</COMMENT> 加上注解
<DD> 设定定义列表的项目解说
<DFN>...</DFN> 显示"定义"文字
<DIR>...</DIR> 列表文字标签
<DL>...</DL> 设定定义列表的标签
<DT> 设定定义列表的项目
<EM> 强调之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 设定字体大小
<FORM ACTION> 设定户动式表单的处理方式
<FORM METHOD> 设定户动式表单之资料传送方式
<FRame MARGINHEIGHT> 设定视窗的上下边界
<FRame MARGINWIDTH> 设定视窗的左右边界
<FRame NAME> 为分割视窗命名
<FRame NORESIZE> 锁住分割视窗的大小
<FRame SCROLLING> 设定分割视窗的卷轴
<FRame SRC> 将HTML档加入视窗
<FRameSET COLS> 将视窗分割成左右的子视窗
<FRameSET ROWS> 将视窗分割成上下的子视窗
<FRameSET>...</FRameSET> 划分分割视窗
<H1>~<H6> 设定文字大小
<HEAD> 标示文件资讯
<HR> 加上分格线
<HTML> 文件的开始与结束
<I> 斜体字
<IMG ALIGN> 调整图形影像的位置
<IMG ALT> 为你的图形影像加注
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入图片并预设图形大小
<IMG HSPACE> 插入图片并预设图形的左右边界
<IMG LOWSRC> 预载图片功能
<IMG SRC BORDER> 设定图片边界
<IMG SRC> 插入图片
<IMG VSPACE> 插入图片并预设图形的上下边界
<INPUT TYPE NAME value> 在表单中加入输入栏位
<ISINDEX> 定义查询用表单
<KBD>...</KBD> 表示使用者输入文字
<LI TYPE>...</LI> 列表的项目 ( 可指定符号 )
<MARQUEE> 跑马灯效果
<MENU>...</MENU> 条列文字标签
<meta NAME="REFRESH" CONTENT URL> 自动更新文件内容
<MULTIPLE> 可同时选择多项的列表栏
<NOFRame> 定义不出现分割视窗的文字
<OL>...</OL> 有序号的列表
<OPTION> 定义表单中列表栏的项目
<P ALIGN> 设定对齐方向
<P> 分段
<PERSON>...</PERSON> 显示人名
<PRE> 使用原有排列
<SAMP>...</SAMP> 用於引用字
<select >...</select > 在表单中定义列表栏
<SMALL> 显示小字体
<STRIKE> 文字加横线
<STRONG> 用於加强语气
<SUB> 下标字
<SUP> 上标字
<TABLE BORDER=n> 调整表格的宽线高度
<TABLE CELLPADDING> 调整资料栏位之边界
<TABLE CELLSPACING> 调整表格线的宽度
<TABLE HEIGHT> 调整表格的高度
<TABLE WIDTH> 调整表格的宽度
<TABLE>...</TABLE> 产生表格的标签
<TD ALIGN> 调整表格栏位之左右对齐
<TD BGCOLOR> 设定表格栏位之背景颜色
<TD COLSPAN ROWSPAN> 表格栏位的合并
<TD NOWRAP> 设定表格栏位不换行
<TD VALIGN> 调整表格栏位之上下对齐
<TD WIDTH> 调整表格栏位宽度
<TD>...</TD> 定义表格的资料栏位
<TEXTAREA NAME ROWS COLS> 表单中加入多少列的文字输入栏
<TEXTAREA WRAP> 决定文字输入栏是自动否换行
<TH>...</TH> 定义表格的标头栏位
<TITLE> 文件标题
<TR>...</TR> 定义表格美一行
<TT> 打字机字体
<U> 文字加底线
<UL TYPE>...</UL> 无序号的列表 ( 可指定符号 )
<var>...</var> 用於显示变数
BlockQuotc文本缩进
表示颜色的有三种方式;
1,16进制颜色代码
语法: #RRGGBB
例: <font color="#ff0000">红色</font>
2,10进制RGB码
语法: RGB(RRR,GGG,BBB)
例: <font color="rgb(255,000,000)">红色</font>
3,直接用颜色的英文名称
例: <font color="red">红色</font>
<body>.....</body>属性可分为三种:
1,背景属性
包括:bgcolor 背景色, background背景图案。
.bgcolor 背景色
语法格式: <body bgcolor="#ff0000">
.background 背景图案。
语法格式: <body background="url">
2,文字属性:
包括:text文本颜色, link连接文字颜色, alink活动连接文字颜色, vlink已访问连接文字颜色。
text 文本颜色(非连接文字颜色)
.link 连接文字颜色(可连接文字颜色)
.alink 活动连接文字颜色(正被点击的可连接文字的颜色)
.vlink 已访问连接文字颜色)(已经点击访问过的可连接文字的颜色)
.语法格式:<body text="color" link="color" alink="color" vlink="color">3,留白属性:
其中分为:leftmargin页面左侧的留白距离, topmargin页面顶部的留白距离
.leftmargin 页面左侧的留白距离
.topmargin 页面顶部的留白距离
语法格式: <body leftmargin="value" topmargin="value">
注:value 为长度值为数字
align 属性
语法: <h2 align="?">文字</h2>
其属性有三种:left 靠左, center 居中, right 靠右
〈p〉</p>为段落标记,可利用以上属性对整个段落进行设置
〈br>为换行标记
<nobr></nobr>为不换行标记 放在文字两边即可
例: <body>
<h3>江南逢李龟年</h3>
<p>歧王宅里寻常见<br>
催九堂前几度闻<br>
正是江南好风景<br>
落花时节又逢君</p>
</body>
预格式化:
<pre>......</pre> 浏览是效果和编写是效果格式一样
列表分为
1、无序列表 , 又称符号列表
语法格式:
<ul type=""> type的属性可选值:disc实心圆点,clrcle空心圆点,square实心方框
<li>文字</li>
<li>文字</li>
</ul>
2、有序列表
语法格式:
<ol type="?" start"?">
<li>文字</li>
<li>文字</li>
</ol>
type 的值是编号字符,可选的有1...,a...,A...,i... ,I...
start 为起始值例:如果start为3是那么将从3开始,而且必须是数字。
3、定义列表
<dl> 定义列表标记
<dt> 标示定义条目
<dd> 标示定义内容
语法格式:
<dl>
<dt>文字</dt>
<dd>文字内容</dd>
</dl>
连接和图像
语法格式: <a href="url" name="?" target="?" title="?">....</a>
属性:href 连接目标值,可以是url地址,也可以是连接锚点
<a href="url">...</a>或者
<a href="锚点">...</a>
name 连接名称
语法格式: <a name="锚点名称">...</a>
例: <a name="abcdcf">...</a>
连接到该锚点的连接则应是:
<a name="#abcdef">....</a>
target 目标窗口
语法格式:
<a href="url" target="_blank|_self|_farent|_top|windowname">....</a>
_blank 打开新窗口
_self 当前窗口打开
以下两个仅在框架叶面中应用
_parent 当前窗口的父级窗口(上一级)打开
_top 在最高一级的窗口打开
windowname 已命名的窗口或框架中打开连接
title 连接提示
语法格式:
<a href="http://www.crazytribe.net" title="打开狂人部落的首页">狂人部落</a>
图像<img>
语法格式: <img src="url" alt="?" width="?" height="?" border="?" align="?">
border 属性定义图片边框的宽度,默认值为0
align 属性设置图片旁边文字的位置
语法格式: <img src="" align"">
可选值有:
top 图片和文字顶部对齐
middle 图片和文字居中对齐
bottom 图片和文字底边对齐(默认)
left 图片居左对齐,文字沿图片绕排
right 图片居右对齐,文字沿图片绕排
absmiddle 图片对齐到目前文字行绝对中央
absbottom 图片对齐到目前文字行绝对底部
文字的排版
不换行空白标记
font 元素
语法格式:
<font face="字体名称" size="字体大小" color="字体颜色">
字体大小可选值为1——7,默认为3
例: 〈font face="黑体" size="4" color="#ff00ff">....</font>
<hr> 水平线
语法格式: <hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade>
noshade 无阴影,既实线
层〈div> <span>两种元素
<div>是块级元素,和段落元素<p>相似,不同的是两个<div>元素之间不会产生两个<p>元素之间的空行,
<span> 是行内元素,可以定义段落中部分文字的属性
语法格式: <div align="" style="">...</div>
align 设置层中元素的水平对齐方式
stule 设置元素应用css规范的属性
<div> 兼容性比<span>要好一点,最好使用<div>
语法格式:
<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border 边框宽度默认值为0,既没有边框
cellspacing 表格中单元格的边距大小,默认值为两个像素
cellpadding 表格中单元格之间的间距大小,默认值为两个像素
tr 元素
语法格式: <tr align="" bgcolor="">....</tr>
align 属性对齐方式,可选值如下:left,center,tight,默认为left
bgcolor 指定该行的背景颜色
td 元素
语法格式:
<td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor="" background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td>
align 属性的可选值有:left,center,right
valign 属性的可选值有:top,middle,bottom
rowspan 和 colapan: 跨行和跨列的数量,默认为1
框架
<frameset> </framset> 框架组标记
<frame> </frame> 框架标记
语法格式:
<frameset>
<frame></frame>
<frame></frame>
</franeset>
<frameset> </frameset>元素(双标签)
语法格式:
<frameset cols="" rows="" frameborder="" border="" framespacing="">
.......
</frameset>
属性:
cols 垂直切割窗口(如左右分割两个窗口)接受整数值,百分数,*(*代表占用余下空间)数值的个数代表分成的部分数目,要以逗号分隔。
rows 就是横向切割,将窗口上下分开,数值设置同上。
注:以上两属性尽量不要在同一个<frameset>标记中,因为王井(netscape)不支持,尽量采用多重分割。
frameborder 设置框架的边框,其值有0不要边框,1要边框。
border 设置框架边框厚度
framespacing 表示框架与框架间保留空白的距离
frame 元素(单标签)
语法格式:<frame name="" src="url" scrolling="yes/no" noresize>
属性:
name 框架名称,指定框架来做连接的目标窗口。
src 框架中要显示的网页文档url地址,每个个框架要对应一个html文档。
scrolling 是否显示滚动条,yes/no,auto是自动。
noresize 设置不让使用者改变这个框架的大小,
noframe 元素
指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息
语法格式:
<noframe>
......
</noframe>
<form> </form> 表单
语法格式:
<form action="url" method="get/post">
....
<input type=submit><input type=reset>
</form>
method 有两种提交方式 get, post
action 是指明处理该表单的程序位置,这样表单所填的资料才能传给cgi做处里,可设定此参数为action="mailto:lwr8494@163.com" 这样此表单所填的资料将会发送到这个邮箱地址。
method 是指传送信息给cgi等网络程序的方式。可选post方法, get方法,
申请表单用的是post搜索引擎用的是get
input 元素
语法格式: <input type="">
type 属性的可选值有:
text 单行文本框
value 文本框的初始值
size 文本框的长度
maxlength 可输入字符串最大的长度
radio 单选框
属性:name 单选框名称
value 内部值
checked 默认选定
checkbox 复选框
属性:name 复选框名称
value 内部值
checked 默认选定
reset 重置按钮
submit 确定按钮
属性:name 按钮名称
value 显示在按钮上的文字
password 密码框
属性与文本框的属性完全相同
file 文件域
属性:name文件域名称
size 文件域的长度
maxlength 文件域可接受的字符数量的上限
hidden 隐藏域
属性:name 隐藏域名称
value 内定值
image 图片域
属性:name 所要代表的按钮,可以是submit,reset,或其他.
src 按钮图片的url 地址
<select> 列表框
语法格式:
<select>
.....
<option>....</option>
.....
</select>
select 元素
语法格式: <select name="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框显示列表项的条数,如果指定了该参数,select元素是个列表,否则是一个下拉列表框
multiple 指定了这个参数,则表示该列表框可选择多项,否则只可选择一项
option 属性
语法格式: <option value="" selected></option>
value 该列表项的值
selected 如果设定了这个参数,默认为选定这一项
<textarea> 多行文本框
<textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>
属性:
name文本框的名称
cols 文本框的宽度
rows 文本框的高度
wrap 文本框的折行方式可选值有:
off 不保存换行信息
physical 强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出,
virtual 送出连续成串的字除非使用者按回车。
css 层叠样式表
引入层叠样式表的方法包括:
1,外联式样式表
2,内嵌样式表
3,元素内定
4,导入样式表
外联式样式表
例: <head>
<link rel="stylesheet" href="/css/default.css">
</head>
<body>
....
</body>
</html>
属性:
内嵌式样式表:
例: <html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素内定
格式:<p style="font-size:10.5pt">
导入式样式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css 的优先级
越接近目标的样式定义优先级越高,高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义
如果4种样式表对同一元素定义了不同的样式,那么他们的优先级顺序从高到低是,元素内定,内嵌样式表,导入样式表,外联样式表。
css 结构
例: td{font-size:10.5pt;color:#666666}
css样式包含两个基础部分,
选择符<td>和声明{font-size:10.5pt;color:#666666}
声明也有两部分组成:
属性font-size,color和值10.5pt,#666666
选择符分为6种
1、元素选择符
当页面上多个元素的样式相同时,可以将多个元素放在一起定义,中间以逗号分开
2、class(类)选择符
例: 〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井冈山地方官</p>
<p>九连环离开计划</p>
</body>
还有一种方法就是限定可以应用它的页面元素
例: 〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井冈山地方官</p>
<h1 class="red">九连环离开计划</h1>
</body>
3 、id选择符
与class选择符类似,只是把'.'换成'#'
例: <body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center" id="select">id选择符</td>
</tr>
</table>
</body>
</html>
我们看到在调用ID选择附时与CLASS选择附类似,只是将class=""换成了id="",方便页面脚本语言的调用
4 、关联选择符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center"><p>关联选择符</p></td>
</tr>
</table>
<p>关联选择符</p>
</body>
</html>
我们设定了在元素中<td>的元素<p>所包含文字的样式,只有在两个条件都满足是,样式在会起作用,
5、伪类选择符
是只能用在css选择符里,而不能用在html代码中的选择符
例:
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
〈/body>
</html>
正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱
6、伪元素选择符
与伪类选择符定义类似,目前被大多数浏览器支持的有两个:首行伪元素(first-line)和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的
例:首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
长度随浏览器窗口大小而改变
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上两种都只能应用于块状元素上
css规则
一、继承
例: <html>
<head>
<style type="text/css">
<!--
td{font-size:12pt}
p{color:red}
-->
</style>
</hesd>
<body>
<table width="300" border="1" height="150">
<tr>
<td align="center">
<p>css规则</p>
</td>
</table>
</body>
</html>
<p>为最高级<td>次一级,两种css用在一个属性元素上,相同的覆盖,不同的继承,
二、组合
例: td{font-size:12pt}
p1{font-size:12pt}
组合后
td,.p1{font-size:12pt}
三层叠
在样式里定义过后,在表格属性中又定义一次
<html>
<head>
<style type="text/css">
<!--
red{color:#ff0000 limportant}
-->
</style>
</hesd>
<body>
<table width="300" border="1" height="150">
<tr>
<td align="center" style="color:#0000ff" class="red">决撒地方官</td>
</tr>
</table>
</body>
</html>
css单位
分四大类:
1 长度单位
数值可以是整数,小数,正数,负数,0,后加单位(负值不要轻易使用)
换算关系:
1in(英寸)=6pc(派)
1in(英寸)=72pt(磅)
1in(英寸)=2.54(厘米)
1cm(厘米)=10mm(毫米)
1cm(厘米)=0.3937(英寸)
1pt(磅)=1/72in(英寸)=0.2478mm(毫米)
1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸
2 百分比单位
3 颜色单位
4 url单位
HTML语言笔记的更多相关文章
- R语言笔记
R语言笔记 学习R语言对我来说有好几个地方需要注意的,我觉得这样的经验也适用于学习其他的新的语言. 语言的目标 我理解语言的目标就是这个语言是用来做什么的,为什么样的任务服务的,也就是设计这个语言的动 ...
- R语言笔记4--可视化
接R语言笔记3--实例1 R语言中的可视化函数分为两大类,探索性可视化(陌生数据集,不了解,需要探索里面的信息:偏重于快速,方便的工具)和解释性可视化(完全了解数据集,里面的故事需要讲解别人:偏重全面 ...
- Scala语言笔记 - 第一篇
目录 Scala语言笔记 - 第一篇 1 基本类型和循环的使用 2 String相关 3 模式匹配相关 4 class相关 5 函数调用相关 Scala语言笔记 - 第一篇 最近研究了下scala ...
- Go 语言笔记
Go 语言笔记 基本概念 综述 Go 语言将静态语言的安全性和高效性与动态语言的易开发性进行有机结合,达到完美平衡. 设计者通过 goroutine 这种轻量级线程的概念来实现这个目标,然后通过 ch ...
- 014-预处理指令-C语言笔记
014-预处理指令-C语言笔记 学习目标 1.[掌握]枚举 2.[掌握]typedef关键字 3.[理解]预处理指令 4.[掌握]#define宏定义 5.[掌握]条件编译 6.[掌握]static与 ...
- 013-结构体-C语言笔记
013-结构体-C语言笔记 学习目录 1.[掌握]返回指针的函数 2.[掌握]指向函数的指针 3.[掌握]结构体的声明 4.[掌握]结构体与数组 5.[掌握]结构体与指针 6.[掌握]结构体的嵌套 7 ...
- 011-指针(上)-C语言笔记
011-指针(上)-C语言笔记 学习目标 1.[掌握]字符串常用函数 2.[掌握]指针变量的声明 3.[掌握]指针变量的初始化 4.[掌握]函数与指针 5.[掌握]指针的数据类型 6.[掌握]多级指针 ...
- 010-字符串-C语言笔记
010-字符串-C语言笔记 学习目标 1.[掌握]二维数组的声明和初始化 2.[掌握]遍历二维数组 3.[掌握]二维数组在内存中的存储 4.[掌握]二维数组与函数 5.[掌握]字符串 一.二维数组的声 ...
- 009-数组-C语言笔记
009-数组-C语言笔记 学习目标 1.[掌握]数组的声明 2.[掌握]数组元素的赋值和调用 3.[掌握]数组的初始化 4.[掌握]数组的遍历 5.[掌握]数组在内存中的存储 6.[掌握]数组长度计算 ...
- 008-进制-C语言笔记
008-进制-C语言笔记 学习目标 1.[掌握]include预处理指令 2.[掌握]多文件开发 3.[了解]认识进制 4.[掌握]进制之间的互相转换 5.[掌握]原码,反码,补码 6.[掌握]位运算 ...
随机推荐
- Python爬虫从入门到放弃(二十)之 Scrapy分布式原理
关于Scrapy工作流程回顾 Scrapy单机架构 上图的架构其实就是一种单机架构,只在本机维护一个爬取队列,Scheduler进行调度,而要实现多态服务器共同爬取数据关键就是共享爬取队列. 分布式架 ...
- Solr(五)Solr实现简单的类似百度搜索高亮功能-2代码
Solr高亮 一 在配置文件中,配置支持Ik分词器的Field 修改文件: cd /usr/local/tomcat/apache-tomcat-8.5.13/solr_home/Test/conf/ ...
- 常用 Http 的请求方法
第一次用markdown写博客,体验下 因为常用Http的几种请求方式,总结一下. 1.封装两个Http的最常用方法,叫做HttpHelper类. HttpPost: public static st ...
- JSR-303 Bean Validation 介绍及 Spring MVC 服务端参数验证最佳实践
任何时候,当要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情. 应用程序必须通过某种手段来确保输入参数在上下文来说是正确的. 分层的应用很多时候同样的数据验证逻辑会出现在不同的层,这样 ...
- CentOS6 安装Sendmail + Dovecot + Squirrelmail
本文记录在本地虚拟机CentOS6上搭建Sendmail + Dovecot + Squirrelmail 的Webmail环境的过程,仅仅是本地局域网的环境测试,不配置DNS, 也没有安全认证,Sq ...
- python基础===使用switch方法,减少使用if语句
def jia(x,y): return x+y def jian(x,y): return x-y def cheng(x,y): return x*y def chu(x,y): return x ...
- Oracle存储过程和函数使用方法
一.存储过程(PROCEDURE) 使用过程, 不仅可以简化客户端应用程序的开发和维护,而且可以提高应用程序的运行性能. CREATE [OR REPLACE] PROCUDURE procedur ...
- Oracle进程与系统进程
--Oracle进程与系统进程 --------------------------2013/11/25 这里讨论Linux/Unix环境下,oracle v$process与操作系统对应的关系. 系 ...
- 【leetcode】147. Insertion Sort List
Sort a linked list using insertion sort. 链表的插入排序. 需要创建一个虚拟节点.注意点就是不要节点之间断了. class Solution { public: ...
- Command "python setup.py egg_info" failed with error code 1一种问题的解决方法
问题描述:无论是你在pycharm中直接使用import and install命令,还是pip的时候出现了Command "python setup.py egg_info" f ...