网站入门经典Html常用标签元素Word文档格式.docx
- 文档编号:269503
- 上传时间:2023-04-28
- 格式:DOCX
- 页数:11
- 大小:22.08KB
网站入门经典Html常用标签元素Word文档格式.docx
《网站入门经典Html常用标签元素Word文档格式.docx》由会员分享,可在线阅读,更多相关《网站入门经典Html常用标签元素Word文档格式.docx(11页珍藏版)》请在冰点文库上搜索。
最近常常宕机。
示例:
[Ctrl+A全部选择提示:
你可先修改部分代码,再按运行]
4.<
address>
标签是一个非常不起眼的小标签,但是这并不意味着它没有用。
顾名思义<
允许你在HTML中语义化标签。
这个小巧的标签将默认斜体显示标签内的内容,当然,使用样式可以很容易的改变默认的样式。
GlenStansberry
1234WebDevLane
Anywhere,USA
/address>
5.<
ins>
和<
del>
如果你想使用标签来显示编辑版本,<
正好适合。
顾名思义,<
用下划线高亮显示添加进来的内容,而<
用删除线显示被移除的信息。
John<
likes<
/del>
LOVES<
/ins>
hisnewiPod.
6.<
label>
貌似表单元素最容易忘掉何时标记文本。
对于表单元素,最常忘记的就是<
标签。
不仅仅是一个便捷的标记文本的方式,<
标签还能传递一个”for”属性来指定哪个元素将会被关联。
不仅易于用样式来控制,还允许你让标题可点击。
username"
用户名<
inputid="
type="
text"
/>
7.<
fieldset>
Fieldset是一个小巧的标签,你可以用来为你的表单元素添加逻辑分组。
标签就会在其内部的元素周围画一个框。
另外一点就是可以在fieldset里面添加<
legend>
标签来定义分组的标题。
form>
你比5年纪学生聪明吗?
/legend>
当然<
inputname="
yes"
radio"
value="
不知道<
no"
/fieldset>
/form>
8.<
abbr>
标签颇类似于<
标签,不同的是<
标签只用于定义缩写单词。
就像<
一样,你可以为这个标签定义一个title属性。
当用户将鼠标放到缩写文字上面时,全部内容就会在下面显示。
标签很少用,但是对于屏幕阅读者、拼写检查者以及搜索引擎是非常有用的。
abbrtitle="
脑残"
NC<
/abbr>
是一个不太文明的用语。
9.rel
Rel可以是一个极度有用的属性,任何HTML元素都可以应用一个rel属性。
它有助于传递没有另外指定的额外参数。
这对于在HTML中使用JavaScript的时候是非常有用的。
如果你有一个想要在行内编辑的链接,你可以添加:
arel="
clickable"
href="
page.html"
这个链接可编辑。
/a>
Javascript会寻找带有rel属性”clickable”的a链接,并应用一些Ajax并允许它在行内被编辑。
这只是你可以使用rel属性的众多技术中的一种用法,因为它的潜力是无止境的。
感兴趣的朋友可以深入研究一下W3C关于Rel的介绍。
10.<
wbr>
标签是一个难以相信的不出名的标签。
坦率的讲,我也很怀疑你们会接触到这个标签,因为它几乎从来没有用到。
(的确,在我写这篇文章之前我几乎没有见到过这个标签)。
事实上,这个标签算是一个软断行,允许你在某一行内指定一个断行点,表明在该点处可以断行,但是不是一定会断行,仅仅是在有需要断行的时候才会断行。
如果你想避免出现水平滚动条,那么使用这个标签是很棒的。
下面是一个200像素宽的box,没有定义overflow。
如果你想要实现相同的效果而不使用<
标签,你可以试一下&
#8203;
或&
shy;
。
据说这三个标签都未被所有浏览器完全支持。
你可以通过这篇文章来查看各个浏览器对着三个标签的支持情况。
PS:
颇困难的翻译了这篇文章,神飞深深的感受到了语义化的魅力以及HTML标签的强大,相信我们没有认识到的标签还有很多,结果,常见的标签大家都很熟悉,不常见的标签大家有都不会用。
正如之前我在一篇文章中阐述的那样,“语义化”很大的一部分是,在恰当的地方使用合适的标签,而不是一味的div下去。
如果,我们能够了解更多的HTML标签,我们就能写出更具语义的HTML代码,也能大大的降低我们写CSS的难度和工作量,并使我们的页面结构更趋合理。
Html常用标签元素
常用HTML标签元素结合及简介
html>
/html>
创建一个HTML文档
head>
/head>
设置文档标题和其它在网页中不显示的信息
title>
/title>
设置文档的标题
h1>
/h1>
最大的标题
pre>
/pre>
预先格式化文本
u>
/u>
下划线
b>
/b>
黑体字
i>
/i>
斜体字
tt>
/tt>
打字机风格的字体
引用,通常是斜体
强调文本(通常是斜体加黑体)
strong>
/strong>
加重文本(通常是斜体加黑体)
fontsize="
"
color="
/font>
设置字体大小从1到7,颜色使用名字或RGB的十六进制值
BASEFONT>
/BASEFONT>
基准字体标记
big>
/big>
字体加大
SMALL>
/SMALL>
字体缩小
STRIKE>
/STRIKE>
加删除线
CODE>
/CODE>
程式码
KBD>
/KBD>
键盘字
SAMP>
/SAMP>
范例
VAR>
/VAR>
变量
BLOCKQUOTE>
/BLOCKQUOTE>
向右缩排
DFN>
/DFN>
述语定义
ADDRESS>
/ADDRESS>
地址标记
sup>
/SUP>
上标字
SUB>
/SUB>
下标字
xmp>
...<
/xmp>
固定寬度字体(在文件中空白、換行、定位功能有效)
plaintext>
/plaintext>
固定寬度字體(不執行標記符號)
listing>
/listing>
固定寬度小字體
fontcolor=00ff00>
字體顏色
fontsize=1>
最小字體
fontstyle='
font-size:
100px'
無限增大
格式标志标签
创建一个段落
palign="
将段落按左、中、右对齐
br>
换行插入换行符
/blockquote>
从两边缩进文本
dl>
/dl>
定义列表
dt>
放在每个定义术语词前
dd>
放在每个定义之前
ol>
/ol>
创建一个标有数字的列表
ul>
/ul>
创建一个标有圆点的列表
li>
放在每个列表项之前,若在<
之间则每个列表项加上一个数字,
若在<
之间则每个列表项加上一个圆点
divalign="
/div>
用来排版大块HTML段落,也用于格式化表
MENU>
选项清单
DIR>
目录清单
nobr>
/nobr>
强行不换行
hrsize='
9'
width='
80%'
color='
ff0000'
水平線(設定寬度)
center>
/center>
水平居中
链接标志表格标志
ahref="
URL"
创建超文本链接
mailtEMAIL"
创建自动发送电子邮件的链接
aname="
name"
创建位于文档内部的书签
#name"
创建指向位于文档内部书签的链接
BASE>
文档中不能被该站点辨识的其它所有链接源的URL
LINK>
定义一个链接和源之间的相互关系
链接标记注解:
◆target="
..."
决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top
◆rel="
发送链接的类型
◆rev="
保存链接的类型
◆accesskey="
指定该元素的热键
◆shape="
允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly
◆coord="
使用像素或者长度百分比来定义形状的尺寸
◆tabindex="
使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点)
大部分标签可以运用时候通过CSS控制改变样式达到我们想要的布局效果。
html,head,body
属性设置:
标签的基本特点:
成对,嵌套关系,属性(属性名=属性值)
body的bgColor属性:
背景色(bgcolor="
red/#ff0000"
)
head中的标签
title
和meta
表示标题
meta
http-equiv="
content-Type"
content="
text/html;
charset=gb2312"
h1~h6
标题,h1最大
属性:
align{left|right|center}
P
段落
font
字体标签
size:
字体大小,最大为7,最小-7,符号表示相对大小,例如+3表示6号字
color:
颜色
face:
字体名称
pre
与格式化标签,保持代码原有格式输出
img
图像标签
src:
文件路径,有相对和绝对路径
alt:
替换文字
align:
文字相对这图片的对齐(垂直方向){top|middle|bottom}
height,width:
尺寸
a
超链接
name:
命名锚记
href:
链接目标,有相对和绝对之分
href="
mailto:
...."
:
邮件链接
#..."
:
锚链接
target:
打开目标,也就是在哪个窗口打开新的页面
{_self|_top|_parent|_blank|框架名称}
hr
水平线
线宽,或者粗细,等同于其他标签的height
width:
线的宽度,注意没有height属性
ul,ol,li:
列表
ul
无序列表
type:
列表类型{circle|square|disc}
ol
有序列表
列表类型{1,a,A,i,I}
marquee
滚动标签
direction:
滚动方向{up,down,left,right}
scrollamount:
滚动的跨度,每次滚动的距离
scrolldelay:
滚动演示,每次滚动的时间间隔
br
换行
table表示表格本身属性
表格自身的对齐方式,而不是里面内容的对齐方式{left,center,right}
height,width
border
background
bgcolor
cellpadding:
单元格边框和内容间距
cellspacing:
单元格之间的距离
tr
td
除了常规的背景,尺寸,对齐等属性
rowspan:
跨越行(合并行)
colspan:
跨越列(合并列)
table>
tr>
td>
1<
/td>
colspan="
2"
2<
3<
/tr>
4<
5<
6<
7<
/table>
form
表单标签,表示一个要提交数据的表单
name:
名称
action:
提交的目的地址
method:
{get|post}(三个方面有区别:
长度限制,安全性,效率)
input
type="
表示文本框
属性:
提交数据的名称
value:
默认值
size:
文本框显示出来的宽度
maxlength:
可以填入最多的字符个数
readonly:
是否为只读
password"
表示密码框
同文本框
单选按钮
name
value
checked:
是否默认被选中
注意:
如果要实现单选的效果,name属性必须一致,也就是说所有name相同的单选按钮只能选中其中一个
checkbox"
复选框
通单选按钮的属性
button"
普通按钮
代表要显示到按钮上的文字,等同winforms中的text属性
submit"
提交按钮
属性同普通按钮
reset"
重置按钮,所有数据恢复到初始值状态
textarea
多行文本框
属性
cols:
显示的宽度,以字符为单位
rows:
显示的高度,以字符为单位
通所有表单元素
没有改属性!
!
他的value写在标签内部
cols="
50"
rows="
6"
name="
copyRight"
请仔细阅读本说明<
/textarea>
select
代表下拉列表
option标签对表示下拉列表中的项
不会显示到选项中,要显示的内容写在option标签内部
option
value="
1"
第一学期<
没有那么属性,多个哦option共用一个select标签的name
selected:
默认选中的选项
frameset
框架集
列的拆分标准(cols="
100,30%,*"
行的拆分标准
frame
框架
scrolling:
是否出现滚动条
noresize:
是否可以调整大小
×
样式表******************************
样式表的分类和语法
行内样式:
标签
style="
样式名1:
样式值1;
样式名2:
样式值2;
....."
/标签>
内嵌:
style
text/css"
选择器代码
/style>
外部:
在css文件中写上选择器代码
导入的语法:
1、<
link
文件名"
rel="
stylesheet"
2、<
@import
url(文件名);
选择器
标签选择器(HTML选择器)
定义语法
P{
样式名:
样式值;
.....
}
使用:
被动选择,所有p标签的样式都被修改
类选择器
定义语法:
.class1{
标签的class属性来引用:
p
class="
class1"
id选择器
#ID1{
标签的ID属性来引用:
ID1"
伪类选择器
超链接的特殊状态下的样式规则
a:
hover
鼠标悬停
未访问
active
选中
visited
已访问
常用样式
字体修饰
记得写单位
font-family:
font-style:
斜体
text-align:
对齐{left|center|right}
color:
text-decoration:
{underline|none}
背景
background-color:
背景色
background-image:
背景图(url(文件名))
background-repeat:
背景平铺方式(no-repeat:
不平铺repeat-x:
水平方向平铺repeat-y:
垂直方向平铺)
方框
边框
border-style
border-width
border-color
边界
margin-top
margin-left
....
填充
padding-top
padding-rigSTB
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 入门 经典 Html 常用 标签 元素