您的位置：首页 > Web前端 > HTML

html知识点

2016-06-12 17:07 357 查看

开始学习html…下了一个基础的demo, 一边看一边百度一边动手，，go go go~~~

1、target=”_blank”

_blank – 在新窗口中打开链接重新打开一个页面

_parent – 在父窗体中打开链接就是在该页面替换显示

_self – 在当前窗体打开链接,此为默认值效果同上

_top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)

一个对应的框架页的名称 – 在对应框架页中打开

2、超链接 a标签”

点击就会跳转到这儿

<a href="#link1">第1任</a><br />
●第1任(1789-1797)<a name="link1">这里是第1任的锚</a><br />

<a href="mailto:intel@qq.com" title="读者你好，单击这里可以发电子邮件。">给我发E-mail</a><br />
<a href="ftp://101.22.25.11" title="读者你好，欢迎进入FTP服务器。">连接FTP服务器</a><br />
<a href="telnet://101.22.25.11" title="读者你好，欢迎进入Telnet服务器。">连接Telnet服务器</a>

3、分割线 hr”

<hr size="50" color="770000"/>

4、文字滚动 marquee”

文字滚动示例（默认）：<marquee>这段文字向左移动</marquee>
文字滚动示例（向右）：<marquee direction="right" scrolldelay="500">这段文字向右移动</marquee>
文字滚动示例（向下，滚动方式为slide，速度为10）：<marquee scrollamount="10" behavior="slide">做人要厚道</marquee>
文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：<marquee scrollamount="2" behavior="alternate" loop="3">做人要厚道</marquee>
文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up"  bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>

5、上下标”

sup 上标  sub 下标
沁园春<sup>上标</sup>！<br />
数学指数的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
沁园春<sub>下标</sub>！<br />
数学底数的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
删除效果：<strike>我被删除了</strike>

6、上下标”

sup 上标  sub 下标
沁园春<sup>上标</sup>！<br />
数学指数的表示：2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr />
沁园春<sub>下标</sub>！<br />
数学底数的表示：log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr />
删除效果：<strike>我被删除了</strike>

7、段落对齐方式”

下面就是往右侧对齐的
<p align="right">电影双周刊：《无间道三：终极无间》评论专题</p>

8、特殊字符显示

标签的显示方法：<HTML><br />
引号的显示方法："英文半角双引号"<br />
商标的显示方法：™<br />
注册符号的显示方法：®<br />
版权符号的显示方法：©<br />
显示§<br />
显示×

9、列表

<li>是 list item 即列表项，但列表有很两种，所以外面得有 <ul> 或者 <ol> 用来区别无序列表（小点点）和有序列表（1,2,3...）。

10、插入图片知识点

title,鼠标移动到图片上就会显示该文字内容

插入图片（设置边框为10像素，加入文字提示）：<br />
<img src="img/img.jpg"  border="10" title="读者你好，这是一幅小猫的图片啊！" alt="sdlaf;as" /><br /><br />
插入图片（设置边框为10像素，改变图片的宽度和高度）：<br />
<img src="img/img.jpg"  border="10" width="350" height="180"/>

11、图片和文字对齐

图像顶部和同行文本的最高部分对齐<img src="img/img.jpg"  border="5" width="62" height="42" align="top"/><hr /><br/>

图像底部和同行文本的最低部分对齐<img src="img/img.jpg"  border="5" width="62" height="42" align="bottom"/><hr />

12、图片滚动

<marquee direction="down" scrollamount="10">
<center><img src="img/img.jpg" border="0"/></center>
</marquee>

13、对齐方式

align 水平对齐方式
align=center或left或right

valign 垂直对齐方式
valign=top或middle或bottom

14、表单、

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

点击复位按钮，就清空输入框的值

<form name="form_set" method="post" action="form_rec.asp">
<input type="button" value="表单内的普通按钮"/><br/>
<input type="text" name="txt" value="初始值"/>
<input type="reset" value="复位按钮"/>
<input type="submit" value="提交按钮"/>
</form>

<form name="form_set" method="post" action="form_rec.asp">
图像域（单击图片类似于单击提交按钮）：<br/>
<input type="image" src="img/fifa.jpg"/>
<hr/>
文件域（单击“浏览”按钮可以浏览本机文件）：<br/>
<input type="file"/>
<hr/>
隐藏域（在页面中不可见，但是可以装载须传输数据）：<br/>
<input type="hidden" name="txt" value="我是隐藏域中的值ddddddddd"/>
</form>

fieldset 元素可将表单内的相关元素分组。

标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

标签没有必需的或唯一的属性。

标签为 fieldset 元素定义标题。

<form name="form_set" method="post" action="form_rec.asp">
<fieldset>
<legend>用户基本资料</legend>
用户名<input type="text" size="10" maxlength="5" /><br />
密  码<input type="password" size="10" /><br />
</fieldset>
<fieldset>
<legend>用户信息资料</legend>
性    别<input type="text" size="10" /><br />
出生年月<input type="text" size="10" /><br />
所在城市<input type="password" size="10" /><br />
爱    好<input type="password" size="10" />
</fieldset>
<input type="submit" value="提交表单中所有数据">   <br />
<input type="reset" value="复位表单中所有数据">
</form>

15、CSS中出现的\9

css代码后面加"\9"的方式，只有IE浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器，来达到兼容浏览器的目的。

16、text-indent

text-indent 属性规定文本块中首行文本的缩进。可以控制文字的左移右移

16、cursor 鼠标样式

<span style="cursor: hand">手</span>
<span style="cursor: move">移动</span>
<span style="cursor: ne-resize">反方向</span>
<span style="cursor: wait">等待</span>
<span style="cursor: help">求助</span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航