html基本标签元素

合集下载

css之html标签中常见的的inline、inline-block、block元素

css之html标签中常见的的inline、inline-block、block元素

css之html标签中常见的的inline、inline-block、block元素HTML中常见的inline、inline-block、block元素display常⽤属性值none:隐藏对象。

与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间inline:内联元素inline-block:内联块级元素block:块元素flex:弹性盒display:none与visibility:hidden的区别浏览器渲染的时候会涉及到重绘与回流的问题,前者隐藏后脱离⽂档流,不占据页⾯空间引发回流。

后者隐藏后还占⽤空间,只引起重绘。

因此优化的时候会有那么⼀条:建议⽤visibility:hidden替换display:none另外,vue中的v-show指令,切换的就是元素的display样式inline特点内联元素会在⼀条直线上排列,在同⼀⾏从左⾄右⽔平排列。

直到⼀⾏排不下,才会换⾏。

内联元素设置宽、⾼、margin和padding的上下⽆效(竖直⽆效)。

内联元素设置line-height,margin左右和padding的左右有效(⽔平有效)。

内联元素的宽⾼随标签⾥的内容⽽变化。

block 特点独占⼀⾏,多个block元素另起⼀⾏,默认情况下,block元素宽度⾃动填满其⽗元素宽度block元素可以设置width,height属性。

块元素即使设置了宽度,仍然是独占⼀⾏。

block元素可以设置margin和padding属性。

inline-block 特点#让block元素不再独占⼀⾏,多个block元素可以同排⼀⾏,且元素具有block的属性,可设置宽⾼常见块内元素<header></header><nav></nav><address></address><footer></footer><form></form><div></div><p></p><h></h><hr/><ul></ul><ol></ol><li></li><dl></dl><tr></tr><td></td><table></table><pre></pre><blockquote></blockquote>常见⾏内元素<a></a><span></span><textarea></textarea><br/><b></b><del></del><em></em><i></i><strong></strong><sup></sup><sub></sub>⾏内块级元素<img/>、<input/>、<select></select>。

简述html的常用标签及其作用

简述html的常用标签及其作用

简述html的常用标签及其作用HTML(Hypertext Markup Language)是用于创建网页的标准标记语言,它使用标签来定义网页的结构和内容。

以下是HTML中一些常用的标签及其作用:1. `<html>`:定义HTML文档的根元素。

2. `<head>`:定义文档的头部内容,包括页面的标题、字符编码等。

3. `<title>`:定义文档的标题,显示在浏览器的标题栏或标签上。

4. `<body>`:定义文档的主体部分。

5. `<h1>` - `<h6>`:定义标题,根据重要性和级别递减。

6. `<p>`:定义段落。

7. `<a>`:定义超链接,用于链接到其他页面或文档。

8. `<img>`:定义图像,用于在网页中显示图片。

9. `<ul>`:定义无序列表。

10. `<ol>`:定义有序列表。

11. `<li>`:定义列表项。

12. `<div>`:定义文档中的分割或部分。

用于组织网页布局。

13. `<span>`:定义文本的行内元素容器,用于设置特定部分的样式。

14. `<table>`:定义表格。

15. `<tr>`:定义表格的行。

16. `<td>`:定义表格的单元格。

17. `<form>`:定义表单,用于收集用户输入的数据。

18. `<input>`:定义表单中的输入字段。

19. `<textarea>`:定义表单中的多行文本输入字段。

20. `<button>`:定义按钮。

21. `<select>`:定义下拉列表。

22. `<option>`:定义下拉列表中的选项。

23. `<label>`:定义表单元素的标签。

HTML基础知识(块级标签,行内标签,行内块标签)

HTML基础知识(块级标签,行内标签,行内块标签)

HTML基础知识(块级标签,⾏内标签,⾏内块标签)块级元素:独占⼀⾏,对宽⾼的属性值⽣效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;⾏内元素:可以多个标签存在⼀⾏,对宽⾼属性值不⽣效,完全靠内容撑开宽⾼!其中还有⼀种结合两种模式有点的显⽰模式:⾏内块元素:结合的⾏内和块级的有点,不仅可以对宽⾼属性值⽣效,还可以多个标签存在⼀⾏显⽰;⾏内标签:包含a、span、em、strong、b、i、u、label、br;特点:可以多个标签存在⼀⾏,不能直接设置⾏内标签的⾼度、宽度、⾏⾼以及顶和底边距,完全靠内容撑开宽⾼!a标签:主要⽤来链接⼀个其他的⽹页;span标签:主要⽤来对⾏内的⽂字进⾏⼀些样式以及其他的操作;em标签:⼀般⽤来对⽂字进⾏强调,使⽤斜体体现出来;strong标签:⼀般⽤来对⽂字进⾏强调,使⽤加粗字体体现出来;img标签:图⽚引⽤标签,其中 src属性中写⼊图⽚的地址;var标签:JavaScript中命名变量的标签。

块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form;特点:独占⼀⾏,对⾼度、宽度、⾏⾼以及顶和底边距都可设置的属性值⽣效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;p标签:段落标签,段落⽂字使⽤,默认格式:段尾进⾏换⾏;div标签:划分块的主要使⽤标签;ul标签:⽆序列表的主标签,后⾯的标号为圆点(⿊⾊);ol标签:有序列表的主标签,后⾯⼀般跟有序的1,2,3,4,5...;li标签:列表中的主体使⽤标签dl标签:⾃定义标签的主标签;dt标签:⾃定义标签的表头;dd标签:⾃定义标签的表头的解释(描述)信息;h1~h6:6级标题标签、字体的⼤⼩依次变⼩。

⾏内块标签:img,input,textarea特点:结合的⾏内和块级的有点,不仅可以对宽⾼属性值⽣效,还可以多个标签存在⼀⾏显⽰;+++++++++++++++++++++++++++++++++++++++++各种标签之间的转换1、块级标签转换为⾏内标签:display:inline;2、⾏内标签转换为块级标签:display:block;3、转换为⾏内块标签:display:inline-block;各个标签之间的区别块标签:独⾃占领⼀⾏、可以进⾏宽⾼的数值的设定;⾏标签:在⼀⾏内显⽰、不可以进⾏宽⾼的数值设定;⾏内块标签:能和其他元素待在⼀⾏,能设置宽⾼;嵌套规则块标签可以套⾏标签,⾏标签不可以套块标签。

html5的基本标签

html5的基本标签

html5的基本标签HTML5的基本标签包括:1. `<html>`:定义HTML文档的根元素。

2. `<head>`:包含了文档的元数据信息,例如标题、字符编码等。

3. `<body>`:包含了文档的可见内容。

4. `<h1>` - `<h6>`:定义标题,从最高级的标题`<h1>`到最低级的标题`<h6>`。

5. `<p>`:定义段落。

6. `<a>`:定义超链接。

7. `<img>`:定义图像。

8. `<ul>`和`<li>`:定义无序列表和列表项。

9. `<ol>`和`<li>`:定义有序列表和列表项。

10. `<div>`:定义文档中的一个分区或节。

11. `<span>`:定义文档中的一个行内区域。

12. `<form>`:定义用户输入表单。

13. `<input>`:定义表单中的输入字段。

14. `<button>`:定义按钮。

15. `<table>`、`<tr>`、`<td>`:定义表格及其行、单元格。

16. `<video>`:定义视频。

17. `<audio>`:定义音频。

18. `<canvas>`:定义画布,用于绘制图形、动画等。

19. `<header>`:定义文档或节的页眉。

20. `<footer>`:定义文档或节的页脚。

以上只是HTML5的部分基本标签,还有很多其他标签可以用于创建和定义不同的元素和内容。

HTML重要标签总结归纳

HTML重要标签总结归纳

HTML 重要标签: (1)样式/节 ①<style> 实例:<html> <head><style type=”text/css”> h1 { color:red } p { color:blue } </style></head> <body><h1>Header 1</h1> <p>A paragraph.</p></body></html>定义和用法<style> 标签用于为 HTML 文档定义样式信息。

在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的,定义 style 元素的内容。

唯一可能的值是 "text/css"。

style 元素位于 head 部分中。

②<div>HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。

除此之外,由于它属于块级元素,浏览器会在其前后显 示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。

它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法。

<table> 元素的作用是显示 表格化的数据。

实例:<html><body> <h3>This is a header</h3><p>This is a paragraph.</p> <div style="color:#00FF00"><h3>This is a header</h3><p>This is a paragraph.</p></div> </body></html>定义和用法 <div> 可定义文档中的分区或节(division/section)。

HTML基本标签

HTML基本标签
★1. “<“、“>”与标签名之间不能有空格或其它字符。 2. 有的标签没有属性。
XHTML代码规范
(1)所有标签和属性的名字都必须使用小写; (2)所有标签都有一个相应的结束标签; (3)属性值必须加双引号; (4)显式定义属性值; (5)标签合理嵌套;
文本相关标签
文本相关标签
标题 文字缩进
字体标签
字体标签
…… <h2 align="center">如何加入“消费者保障服务”? 差点忘了,缩进还 </h2> 字体加了颜色 没实现呢? <p><font face=“宋体" size="2" color="#ff8424"> 您可以通过“我的淘宝”->“我是卖家”->“消费者保障服 务”申请加入。</font> </p> 字体名称 …… 字体尾标签
为什么要使用段落标签和换行标签
<html> 小新写的代码 <head> <title>淘宝网</title> </head> <body> <h2 align="center">如何加入“消费者保障服务”?</h2> 您可以通过“我的淘宝”->“我是卖家”->“消费者保障服务”申请 加入。在申请加入之前请先确认自己是否符合加入消费者保障服务的条 文字缩进 我也换行了 件,如果符合申请要求,您可以点击“申请加入”按钮提交申请。 然后进入“选择服务”页面,选择服务后点击“下一步”: 进入“阅读协议”页面,阅读后点击“同意以上协议,申请加入”,即 可看到申请成功,等待审核通知页面。 ………… </body> 我分段换行了哟 天啊!不是在HTML文档里排版分 </html> 段换行了吗,结果怎么都走了样?

html行级元素和块级元素标签列表分别有哪些

html行级元素和块级元素标签列表分别有哪些

html⾏级元素和块级元素标签列表分别有哪些⾏内元素列表:<a>标签可定义锚<abbr>表⽰⼀个缩写形式<acronym>定义只取⾸字母缩写<b>字体加粗<bdo>可覆盖默认的⽂本⽅向<big>⼤号字体加粗<br>换⾏<cite>引⽤进⾏定义<code>定义计算机代码⽂本<dfn>定义⼀个定义项⽬<em>定义为强调的内容<i>斜体⽂本效果<img>向⽹页中嵌⼊⼀幅图像<input>输⼊框<kbd>定义键盘⽂本<label>标签为<input> 元素定义标注(标记)<q>定义短的引⽤<samp>定义样本⽂本<select>创建单选或多选菜单<small>呈现⼩号字体效果<span>组合⽂档中的⾏内元素<strong>语⽓更强的强调的内容<sub>定义下标⽂本<sup>定义上标⽂本<textarea>多⾏的⽂本输⼊控件<tt>打字机或者等宽的⽂本效果<var>定义变量块级元素列表:<address>定义地址<caption>定义表格标题<dd>定义列表中定义条⽬<div>定义⽂档中的分区或节<dl>定义列表<dt>定义列表中的项⽬<fieldset>定义⼀个框架集<form>创建 HTML 表单<h1>定义最⼤的标题<h2>定义副标题<h3>定义标题<h4>定义标题<h5>定义标题<h6>定义最⼩的标题<hr>创建⼀条⽔平线<legend>元素为<fieldset>元素定义标题<li>标签定义列表项⽬<noframes>为那些不⽀持框架的浏览器显⽰⽂本,于 frameset 元素内部<noscript>定义在脚本未被执⾏时的替代内容<ol>定义有序列表<ul>定义⽆序列表<p>标签定义段落<pre>定义预格式化的⽂本<table>标签定义 HTML 表格<tbody>标签表格主体(正⽂)<td>表格中的标准单元格<tfoot>定义表格的页脚(脚注或表注)<th>定义表头单元格<thead>标签定义表格的表头<tr>定义表格中的⾏。

一、HTML中常用标签及属性

一、HTML中常用标签及属性

⼀、HTML中常⽤标签及属性⼀、HTML基础语法 ---> 单标签、双标签、块级元素、⾏内元素 单双标签其实就是HTML⽂档中标签书写的格式,页⾯中最常见的是双标签; 单标签就是只有⼀个标签,也就是⼀个空元素:meta、img、hr、br 双标签有开始标签和结束标签 块级元素:独占⼀⾏,对宽⾼的属性值⽣效,如果不给宽度,块级元素就默认浏览器的宽度,(即就是100%宽) 例如:div p ul h1~h6 ..... ⾏内元素:对宽⾼属性值不⽣效,完全靠内容撑开宽⾼,可以跟其他标签存在⼀⾏ 例如:span b strong em a img input ...... ⾏内块元素:结合⾏内和块级元素的特点,不仅对宽⾼的属性值⽣效,还可以跟多个标签存在⼀⾏ 例如:input img⼆、HTML中常⽤标签 ---> ⽂档头部<!DOCTYPE html><!-- 申明,这⾏以下的⽂档都是html⽂档 --><html lang="en"><head><!-- 设置字符集编码 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义⽹页头部 --><title>Document</title><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 shortcut icon:链接图⽚ type规定链接⽂档的类型 image/x-icon 图⽚类型 --><link rel="shortcut icon" type="image/x-icon" href=""><!-- link标签引⼊外部⽂件 rel定义⽂档与被链接⽂档的关系 stylesheet:层叠样式表 type规定链接⽂档的类型 text/css CSS样式表 --><link rel="stylesheet" type="text/css" href=""></head><body></body></html>三、HTML中常⽤标签 ---> ⽂本标签级属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 块级元素,段落标签 text-indent:段落缩进 1个em就是1个字体的长度; --><!-- font-size:字体⼤⼩设置 1px⼀个像素点⼤⼩;color:字体颜⾊;font-weight:bold 字体加粗;font-family:字体类型 --><p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p><!-- ************ --><!-- ⾏内元素标签 --><!-- 斜体标签1 --><em></em><!-- 斜体标签2 --><i></i><!-- 删除线标签 --><del></del><span></span><!-- ************ --><!-- 换⾏标签,单标签,内部没有属性,上⾯的段落、⾏内标签可以通过br换⾏ --><br><!-- 预格式标签,保留⽂本中的换⾏或者空格 --><pre></pre><!-- 标题标签,h1~h6,块级元素,从⼤到⼩,h1最⼤ --><!-- text-align:设置⽂本位置 left:靠左 center:居中 right:靠右 --><h1 style="text-align: center;"></h1><!-- background:背景颜⾊ height:标签⾼度 line-height:设置⾏⾼ --><h2 style="background: pink;height: 50px;line-height: ;"></h2><h3></h3><h4></h4><h5></h5><h6></h6></body></html>四、HTML中常⽤标签 ---> 超链接<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 去掉a链接下划线 */a{text-decoration: none;}/* 伪属性,⿏标移上字体变红,下划线显⽰ */a:hover{color: red;text-decoration: underline;}div{height: 1000px;background: pink;width:400px;}</style></head><body><!-- 链接标签 href:链接地址,"#"本页⾯跳转,默认⾃带下划线 --><a href="#">我是⼀个链接</a><!-- 图⽚链接 --><a href=""><img src="" alt=""></a><!-- 设置锚点定位 --><a href="top">页⾯顶部</a><div></div><a href="" id="top">回到顶部</a></body></html>五、HTML中常⽤标签 ---> 列表标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title><style type="text/css">/* 清空li样式;⽂化素质宽⾼;设置边框线 */ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;} /* 设置前⾯样式为图⽚,但是⽆法调整图⽚与⽂字的间距 */ul li{list-style: url(图⽚地址);}/* 伪元素;在⽂字前⾯设置图⽚与⽂字的间距 */ul li::before{content: url(图⽚地址);margin-right: 30px;}/* 伪元素;在⽂字前⾯设置图⽚与⽂字的间距 */ul li::after{content: url(图⽚地址);}</style></head><body><!-- 有序列表 --><ol><li>web前端</li><li>JavaScript</li><li>jQuery</li></ol><!-- ⽆序列表 --><ul><li>西⽠<ul><li>有籽西⽠</li><li>⽆籽西⽠</li></ul></li><li>苹果</li><li>西柚</li></ul></body></html>六、HTML中常⽤标签 ---> form表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title><style type="text/css">/* padding内边距 */input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;} /* border: none去掉按钮⾃带的边框线 */button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;} </style></head><body><!-- method在后端传输数据⽤到,传值⽅式get/post --><!-- action传值url地址 --><form method="" action=""><!-- type类型,输⼊域的类型:text⽂本型,password密码类型 --><!-- placeholder⽂本框内部的提⽰信息 --><input type="text" name="username" placeholder="请输⼊⽤户名"><br><input type="password" name="pwd" placeholder="请输⼊⽤密码"><br><button>登陆</button></form></body></html>七、HTML中常⽤标签 ---> 表格(table)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title><style type="text/css">/* 清除默认样式 */*{margin: 0px;padding: 0px;}/* border-collapse: collapse;合并多余的边框线 */table{border: 1px solid #ccc;border-collapse: collapse;}tr th{height: 200px;border: 1px solid #ccc;width: 100px;}tr td{height: 200px;border: 1px solid #ccc;width: 100px;}</style></head><body><table><!-- 表头定义⽤th --><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr><!-- 定义⾏⽤tr --><tr><!-- 定义列⽤td --><!-- colspan="5"合并5列 --><td colspan="5"></td></tr><tr><!-- 定义列⽤td --><!-- rowspan="2"合并两⾏,同时删除合并⾏的列 --><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>。

常见的html标签及含义

常见的html标签及含义

常见的html标签及含义HTML(Hypertext Markup Language)是用于构建网页结构的标记语言。

以下是一些常见的HTML标签及其含义:1.<!DOCTYPE html>:o定义HTML文档类型,通常位于文档的开头。

2.<html>:o HTML文档的根元素,包含整个文档的内容。

3.<head>:o包含文档的元信息,如标题、字符集设置、引用的样式表等。

4.<title>:o定义文档的标题,显示在浏览器的标题栏或标签页上。

5.<body>:o包含文档的主要内容,如文本、图像、链接等。

6.<h1> to <h6>:o定义标题,<h1>是最高级别,<h6>是最低级别。

7.<p>:o定义段落。

8.<a>:o定义超链接,用于创建从一个页面到另一个页面的链接。

9.<img>:o插入图像,用于显示网页上的图片。

10.<ul> 和<ol>:o<ul>定义无序列表,<ol>定义有序列表。

11.<li>:o定义列表项,用于在无序列表或有序列表中创建单个项目。

12.<div>:o定义文档中的块级元素,通常用于组织和布局页面的结构。

13.<span>:o定义文档中的内联元素,通常用于对文本的样式和行内元素进行分组。

14.<table>:o定义表格,包含表头、表体和表尾。

15.<tr>:o定义表格中的行。

16.<td>:o定义表格中的数据单元格。

17.<th>:o定义表格中的表头单元格。

18.<form>:o定义表单,用于用户输入和交互。

19.<input>:o定义输入字段,如文本框、复选框、单选按钮等。

20.<textarea>:o定义多行文本输入字段。

HTML基本标签及语法

HTML基本标签及语法

HTML基本标签及语法HTML简介什么是HTML本⽂素材来源于⿊马程序员Pink⽼师HTML 指的是超⽂本标记语⾔(Hyper Text Markup Language) ,它是⽤来描述⽹页的⼀种语⾔。

HTML 不是⼀种编程语⾔,⽽是⼀种标记语⾔(markup language)。

标记语⾔是⼀套标记标签(markup tag)。

Web 标准的构成主要包括结构(Structure)、表现(Presentation)和⾏为(Behavior)三个⽅⾯。

结构 --> 结构⽤于对⽹页元素进⾏整理和分类,现阶段主要学的是HTML表现 --> 表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式,主要指的是CSS⾏为 --> ⾏为是指⽹页模型的定义及交互的编写,现阶段主要学的是JavascriptWeb 标准提出的最佳体验⽅案:结构、样式、⾏为相分离。

简单理解:结构写到HTML ⽂件中,表现写到CSS ⽂件中,⾏为写到JavaScript ⽂件中。

HTML基本语法HTML基本⾻架标签名定义说明<html><\html>HTML标签页⾯中最⼤的标签,所有内容都包含在该标签内<body><\body>⽂档头部设置⼀些属性,以及引进⽂件样式<title><\title>⽂档标题浏览器所显⽰的⽹页标题<body><\body>⽂档主题基本上⼀个⽹页的所有页⾯元素都放进该标签内⼀个基本的⽹页⾻架<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div>我的第⼀个⽹页</div></body></html>基本语法概述1. HTML 标签是由尖括号包围的关键词,例如<html>。

HTML常用标签

HTML常用标签

HTML最常用标签(一)基本文档结构标签:1)<!-- -->:注释标签用来在源文档中插入注释。

注释会被浏览器忽略。

您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。

2)<!DOCTYPE>:<!DOCTYPE> 声明位于文档中的最前面的位置,处于<html> 标签之前。

此标签可告知浏览器文档使用哪种HTML 或XHTML 规范。

3)<html>:此元素可告知浏览器其自身是一个HTML 文档。

4)<head>:<head> 标签用于定义文档的头部,它是所有头部元素的容器。

5)<base>:标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。

6)<meta>:<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

包含在<head>标签中。

7)<title>:<title> 元素可定义文档的标题。

8)<body>:body 元素定义文档的主体。

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。

)(二)文本、字体、字号、线条、行控制、超链接、图像相关标签:9)<b>:呈现粗体文本效果。

10)<i>:显示斜体文本效果。

11)<br>:<br> 可插入一个简单的换行符。

12)<font>:<font> 规定文本的字体、字体尺寸、字体颜色。

13)<h1> -- <h6>:<h1> - <h6> 标签可定义标题。

<h1> 定义最大的标题。

<h6> 定义最小的标题。

HTML常用标签属性汇总

HTML常用标签属性汇总

HTML常用标签属性汇总1.全局属性:- class: 为当前HTML元素指定一个或多个类名- id: 为当前HTML元素指定唯一的标识符- style: 为当前HTML元素指定样式属性,如颜色、字体、大小等- title: 为当前HTML元素指定鼠标悬停时显示的文字提示2.文本相关属性:- align: 用于指定文本在元素中的对齐方式,如left、right、center等- dir: 用于指定文本的方向,如ltr、rtl等- lang: 用于指定文本的语言,如en、zh等- translate: 用于指定是否需要对文本进行翻译处理3.超链接相关属性:- href: 用于指定链接地址,可以是相对路径或绝对路径- target: 用于指定链接在何处打开,如_blank、_self、_parent、_top等- rel: 用于指定链接与当前页面之间的关系,如nofollow、noopener等4.图像相关属性:- src: 用于指定图像的路径- alt: 用于指定图像显示失败时的替代文本- width: 用于指定图像的宽度- height: 用于指定图像的高度5.表格相关属性:- border: 用于指定表格边框的宽度- cellpadding: 用于指定表格的内边距- cellspacing: 用于指定表格的间距- rowspan: 用于指定单元格的行合并- colspan: 用于指定单元格的列合并6.表单相关属性:- action: 用于指定表单提交的URL地址- method: 用于指定表单提交的方式,如GET、POST等- name: 用于指定表单的名称- value: 用于指定表单元素的默认值7.多媒体相关属性:- autoplay: 用于指定音频或视频自动播放- controls: 用于指定音频或视频是否显示控制条- loop: 用于指定音频或视频是否循环播放- poster: 用于指定音频或视频的封面图像8.其他常用属性:- disabled: 用于指定元素是否禁用- readonly: 用于指定元素是否只读- required: 用于指定元素是否为必填项- maxlength: 用于指定元素输入的最大长度。

HTML5中常用的标签(及标签的属性和作用)

HTML5中常用的标签(及标签的属性和作用)

HTML5中常⽤的标签(及标签的属性和作⽤)1、标签:<!DOCTYPE>作⽤:声明是⽂档中的第⼀成分,位于<html>标签之前。

2、标签:<html>作⽤:此元素可告知浏览器其⾃⾝是⼀个HTML⽂档。

属性:manifest:值(url)为脱机使⽤定义缓存信息。

3、标签:<head>作⽤:标签⽤于定义⽂档的头部,它是所有头部元素的容器。

属性:profile:值(URL)⼀个有空格分隔的URL列表,这些URL包含着有关页⾯的元数据信息。

4、标签:<title>作⽤:元素可定义⽂档的标题。

属性:dir:值(rtl,ltr)规定元素中内容的⽂本⽅向。

lang:值(language_code)规定元素中内容的语⾔代码。

xml:lang:值(language_code)规定XHTML⽂档中元素内容的语⾔代码。

5、标签:<body>作⽤:元素定义⽂档的主体。

属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使⽤,请使⽤样式取代它。

规定⽂档中活动链接(active link)的颜⾊。

background:值(URL)不赞成使⽤。

请使⽤样式取代它。

规定⽂档的背景图像。

bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中的背景颜⾊。

link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中未访问链接的默认颜⾊。

text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中所以⽂本的颜⾊。

vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中已被访问链接的颜⾊。

6、标签:<h1>到<h6>标签作⽤:<h1>-<h6>标签了定义标题。

HTML标签总结

HTML标签总结

HTML标签一。

HTML基本标签<head>//头部标签<title></title>//标题标签,显示在浏览器的上部<body></body>//网页的正文,如浏览器显示的文字,图像,表格等都在此标签中书写。

它有很多属性。

如下:link:设置页面超链接文本的颜色alink:设置鼠标正在点击时的超链接文本的颜色。

vlink:设置鼠标点击后超链接文本的颜色.bgcolor:设置页面背景颜色background:设置页面背景图片leftmargin:设置左边距rightmargen:设置右边距topmargen:设置上边距bgproperties:设置页面背景图像为固定,不随页面滚动而滚动text:设置页面文本颜色</head>二。

一些基本标签<font></font>//文字标签,中间嵌入文字,其属性有face:设置文字的字体,如face="仿宋_GB2312"size:设置文字的大小,如size="5"color:设置文字的颜色,如color="#000000"<b></b>用于加粗文字<i></i>用于使文字变为斜体<u></u>用于使用下划线<em></em>用于强调文本,一般显示为斜体<strong></strong>用于特别强调的文本,显示为粗体<cite></cite>用于印证或者举例,通常为斜体<code></code>用于指出文字显示的一段代码。

<small></small>用于规定文本以小号字显示<big></big>用于规定文本以大号字显示<samp></samp>放在该标签中的文字以计算机常用的字体样式显示,即宽度相等的字体<kbd></kbd>用于存放用户从键盘输入的文字<var></var>放在该标签中德文字用来表示变量,通常显示为斜体<sub></sub>下标字标签,显示的文字如下标字<sup></sup>上标签,与下标签相反,显示的文字为上标<del></del>删除字标签,通常文字上带有横线<abbr></abbr>缩写标签,一般一段英文中,用于显示每个单词的首字母,其属性如下:title:用于代表英文的全部内容,如title="Apple Banana Cat",其显示内容为:ABC <bdo></bdo>:文字方向标签,用于设置文字方向,其属性只有一个:“dir”dir="ltr" or dir="rtl"用于表达文字是从左边往右边书写还是右边往左边书写<br>换行符标签<p>换段落标签,其属性如下align:用于段落文本的对其方式<!-****-->注释标签<!-****--><pre></pre>预格式文本,用于将文本按输入的格式输出<backquote></backquote>缩排标签,标签中的文字会自动缩进几个空格<hr>水平线标签,用于显示水平线,其属性如下:size:用于设置水平线的长度,如size="3cm" size="15"width:用于设置水平线的宽度,单位为像素align:用于设置水平线的额对其方式color:用于设置水平线的颜色noshade:取消水平线的3d阴影三。

html的基本标签含义

html的基本标签含义

<html>:表示html文件的起始和终止,<html>标签在首行,</html>标签在最后一行,两个要一起使用,网页中其他内容都要放在这两个标签之间。

<head>:表示网页的头部标签,用来定义文件的头部信息,与<html>标签一样,也是<head></head>成对使用。

<body>:表示出文件主体区,<body></body>之间是网页的主题内容和其他用于控制文本显示方式的标签。

<title>:网页标题,用于定义浏览器窗口标题栏上的文本信息,可以是网页的标题名或创作信息等网页说明信息。

<hr>:用于显示水平线,使页面看起来更整齐明了。

<pre>:将内容以原始格式显示。

<address>:标注联络人XX、、地址等信息。

<blockquote>:区段引用标签。

<!————>:注释标签,使用注释标签的目的是为网页代码中不同局部加上说明,方便日后的修改。

注释的内容是不会在浏览器上显示出来的,如<——要注释的内容——>。

<p>:文本段落,可以用align属性设置left、center、right 3种对齐方式。

<br/>:强制换行,没有完毕标签,在网页中产生换行效果。

<center>:使文字或其他网页元素居中显示。

<marquee>:文本或图片移动显示,属性direction用来指示移动方向。

<dl>、<dt>、<dd>:<dl></dl>标签创立无序列表,<dt></dt>定义上层工程,<dd>、</dd>定义下层工程,<dt>、</dt>和<dd></dd>标签一定要放在<dl></dl>标签中才能使用。

html常用标签整理

html常用标签整理

html常⽤标签整理html⽂档结构1<!DOCTYPE html>2<html lang="zh-CN"> #这个lang表⽰语⾔,zh-CN中⽂的意思,整个⽂档的内容以中⽂为主,如果以英⽂为主,就写成lang='en'34<head>5<meta charset="UTF-8">6<title>css样式优先级</title>7</head>8<body>910</body>11</html>1.<!doctype html>声明为html5⽂件,必须是html⽂档的第⼀⾏,在<html>标签之前;2.<html>、</html>是⽂档开始和结束的标记,是HTML页⾯的根元素,在它们之间是⽂档的头部(head)和主体(body);3.<head>、</head>定义HTML⽂档开头部分,内容不会在浏览器窗⼝显⽰,包含⽂档元(meta)数据,配置信息等,是给浏览器看的;4.<title>、</title>定义了⽹页标题,在浏览器标题栏显⽰(修改⼀下title中的内容,然后看⼀下浏览器,你就会发现title是什么了);5.<body>、</body>之间的内容是可见的⽹页主体内容;注意:中⽂⽹页需要使⽤<meta charset="utf-8">声明编码,否则会出现乱码;有些浏览器是gbk,需⼿动设置为 <meta charset="gbk">;html标签格式1.html标签是由尖括号包围的关键字,如:<html>,<div>,<span>等;2.html标签通常是成对出现,如:<div></div>,第⼀个是开始,第⼆个有斜线的是结束;3.有些标签是单独呈现的,如:<br/> 、<hr/>、<img src="222.png">;4.标签⾥⾯带有若⼲属性,也有不带的;标签语法:<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名><标签名属性1=“属性值1” 属性2=“属性值2”…… />html注释:<!--注释内容--> #找到⼀⾏内容ctrl+/能快捷注释,注释的内容不会在⽹页上显⽰出来head内常⽤标签meta标签: 01.<meta>元素可提供有关页⾯的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词; 02.标签位于⽂档的头部,不包含任何内容,提供的信息⽤户是看不见的;meta标签组成: http-equiv属性和name属性: 1.http-equiv属性:相当于http的⽂件头作⽤,向浏览器传回⼀些有⽤的信息,正确显⽰⽹页内容,与之对应的属性值content,content中的内容是各个参数的变量值;<!--2秒后跳转到对应的⽹址,注意引号--><meta http-equiv="refresh" content="2;URL=https://"> #如果把URL和后⾯的内容去掉,就是2秒钟刷新⼀次,做了解;<!--指定⽂档的编码类型--><meta http-equiv="content-Type" charset=UTF8"><!--告诉IE以最⾼级模式渲染⽂档--><meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的⼀个全新的浏览器,其实就是告诉IE浏览器,你按照最⾼标准来渲染我的页⾯,做了解; 属性:主要⽤于描述⽹页,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息⽤的;<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"><!-- 关键字,也就是别⼈是可以通过这些关键字搜索到我的这个⽂章的,搜索引擎就是能够这个content内容来帮别⼈搜索到你的这个⽂档的,SEO就是专门做这些搜索优化的;--> <meta name="description" content="xxxxxpythonxxx学习"> #是对这个⽂档的描述,在百度⼀些内容的页⾯上,f12打开看看body常⽤标签基本标签不加标签的纯⽂字也是可以在body中写的<b>加粗</b><i>斜体</i><u>下划线</u><s>删除</s><p>段落标签</p> #独占⼀个段落<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><!--换⾏--><br><!--⽔平线--><hr> #就是单独个⼀个⽔平线每次加上⼀些内容,记得保存再刷新⼀下才会显⽰出效果来;常⽤特殊字符div标签和span标签这两个标签没有特别的样式,<div>xxxx</div>,<span>xxx</span>这是两个标签最⼤的特点,可以通过CSS来控制,⽹站中多数是他们;div标签⽤来定义⼀个块级元素,并⽆实际的意义。

简述html文件的基本标记组成。

简述html文件的基本标记组成。

简述html文件的基本标记组成。

HTML(Hypertext Markup Language)是一种用于创建网页内容的标记语言。

下面是HTML文件的基本标记组成:1. 标题(Title):用于显示网页标题,包含在网页内容的上方,用<title>标签包含。

2. 段落( paragraph):用于创建段落,使用<p>标签包含。

3. 图像(Image):用于创建图片,使用<img>标签包含。

4. 链接(Link):用于创建链接,使用<a>标签包含。

5. 表单(Form):用于创建表单,使用<form>标签包含。

6. 声明(Declaration):用于创建声明,使用<声明>标签包含。

7. 样式(Style):用于创建样式,使用<style>标签包含。

8. 脚本(Script):用于创建脚本,使用<script>标签包含。

这些标记组成了HTML文件的基本结构,可以根据需要对其进行修改和扩展。

以下是一些常见的HTML扩展:1. 链接到其他网页或文档:使用<a>标签创建链接,并在链接文本中包含目标网址。

2. 使用CSS创建样式:使用<style>标签包含CSS样式,可以定义字体、颜色、大小等。

3. 创建表单:使用<form>标签包含表单数据,可以使用<input>标签定义表单控件,如文本框、下拉列表等。

4. 使用JavaScript创建脚本:使用<script>标签包含JavaScript代码,可以执行各种操作,如添加动态效果、响应用户输入等。

5. 使用VR(虚拟现实)技术:使用VR技术可以创建沉浸式的用户体验,使用HTML5和虚拟现实框架创建VR应用程序。

HTML文件是创建网页的重要工具,可以帮助创建各种类型的网页,包括标题、段落、图像、链接、表单、样式和脚本等。

html基本标记组成

html基本标记组成

html基本标记组成如下:
1.标签(Tag):HTML标签是由尖括号(<>)包围的关键字,用于
描述网页中的文本、图片、音频、视频等内容。

例如,<p>标签
用于定义段落,<img>标签用于插入图片等。

2.元素(Element):HTML元素是指标签及其内容的总和。

例如,
<p>标签和其内容组成了一个段落元素。

3.属性(Attribute):HTML属性是用于提供元素额外信息的标记。

属性包括名称和值,用等号(=)连接。

例如,<img>标签中的
“src”属性指定了图像文件的URL。

4.文本(Text):HTML文本是指网页中的可读文本。

文本可以用于
描述网页的标题、段落、列表、链接等内容。

在HTML中,标签和文本通常组成元素,而属性则用于提供元素的额外信息。

HTML标记的正确使用可以使网页的结构更加清晰,易于阅读和维护。

html中各种标签和属性(最基础的基本都有)

html中各种标签和属性(最基础的基本都有)

html中各种标签和属性(最基础的基本都有)1、标题标签: h1~h6 ctrl+1~62、段落标签: p ctrl+shift+p3、换⾏标签: br shift+回车4、⽔平线: hr5、加粗标签: strong ctrl+b6、倾斜标签: em ctrl+i7、空格标签: &nbsp;8、图⽚标签:<img src=’图⽚路径’ alt=’图⽚加载错误提⽰⽂字’ title=’⿏标悬停⽂字’ width=’宽度’ height=’⾼度’ />9、超链接:<a href=’链接路径’ traget=’_blank’>⽂本/图⽚</a>10、锚链接:(1) 定义锚:给标签加id属性,id=”top”(2) 跳转到锚:<a href=”#top”>top</a>11、⾏级标签1.Strong2.Em3.A4.Img12、块级标签1.标题标签2.段落标签Display:inline-block设置元素具有⾏级标签和块级标签的属性.da dl dd p:nth-of-type(1):当dd下⾯的段落p有好⼏个的时候,你有只想给第⼀个段落p加样式的时候⽤到这个Float:浮动Z-index:层次 z-index:1⽐z-index:2 低⼀层设置div半透明的代码:opacity:0.7;设置div溢出隐藏的代码:overflow:hidden;设置css的动画效果:transition: all 0.5s linear1、linear:规定以相同速度开始⾄结束的过渡效果2、ease:规定慢速开始,然后变快,然后慢速结束的过渡效果3、ease-in:规定以慢速开始的过渡效果4、ease-out:规定以慢速结束的过渡效果5、ease-in-out:规定以慢速开始和结束的过渡效果设置css时图⽚在div中同⽐例放⼤或者同⽐例缩⼩:transform: scale(1.1)第⼆章1、⽆序列表标签: ul li2、有序列表标签: ol li3、定义列表标签: dl dt dd4、表格:(1) Table① Tr ⾏② Td 单元格③ thead标签:表格的表头④ Tbody标签:表格的主体(2) 合并⾏:rowspan(3) 合并列:colspan(4) 表格内部的框合并(双线框变单线框)border-collapse:collapse;5、视频播放(1) Video autoplay⾃动播放 control控制按钮① Sorce src=’视频的地址’1、内联框架(1) Iframe6、⽹页结构(1) 头部:header(2) 主体:section(3) 底部:footer第三章1、表单:<form method=post action=’提交的地址’>表单元素</form>2、表单元素:<input type=’表单元素类型’ name=’名称’ value=’默认值’ />(1) ⽂本框:type=text (⽤户名,编号....)(2) 密码框:type=password(密码)(3) 单选按钮:type = radio(选男还是选⼥)(4) 复选框:type=checkbox(爱好.....)(5) 数字:type=number(6) 电⼦邮箱:type=email(7) ⽹址:type=url(8) ⽂件:type=file(上传头像....)(9) 下拉列表框<select name=’city’><option>济南市</option><option>青岛市</option></select>(像选择城市,选择时间)(10) ⽂本域:<textarea cols=’列’ rows-’⾏’></textarea>(像个⼈简介之类的)(11) 图像按钮:type=image(注册选择的是点击图⽚就⽤到了这个)(12) 提交按钮:type=submit(⽴即注册)(13) 重置按钮:type=reset(重新注册)(14) 想让⽂本框中出现提⽰词语的话⽤这个:placeholder:”请填写正确的密码”;3、表单的⾼级应⽤(1) 只读(readonly="readonly")(2) 禁⽤()(3) 表达你的初级验证:placeholder(搜索提⽰)Required(⾮空)Pattern(正则表达式,就是⼿机号必须是11位之类的)第四章1、选择器(1) 标签选择器:直接⽤标签名字命名,不需要调⽤(2) 类选择器:.类名调⽤:class=’类名’(3) ID选择器:#名称调⽤:id=’名称’ id选择器⼀个页⾯只能⽤⼀次(4) 优先级:id>类>标签2、⾼级选择器(1) 层次选择器①后代选择器:E F②⼦选择器:E>F③相邻兄弟选择器:E+F④通⽤兄弟选择器:E~F(2) 结构伪类选择器① E:fist-child 取得第⼀个标签② E:last-child 取得最后⼀个标签③ E:nth-of-type(n) 取得第n个标签(3) 属性选择器① E[attr]:具有attr属性的E标签② E[attr=val]:具有attr属性且值等于val的E标签③ E[attr^=val]: 以val开头的.....④ E[attr$=val]:以val结尾的....⑤ E[attr*=val]:包含val的....第五章1. Color:字体颜⾊2. Font-size:字体⼤⼩3. Font-weight:字体粗细:bold粗,lighter细4. Font-family:字体样式5. Letter-spacing:字间距6. Line-height:⾏间距7. Width:宽度8. Height:⾼度9. Left左10. Right右11. Bottom下12. Top上13. Center中间14. Justify两端对齐15. Backgroun-color:背景颜⾊16. Text-align:⽔平对齐17. Text-indent:⾸⾏缩进18. Border-radius:10px设置边框⾓的弧度19. Text-decoration:none去掉超链接下划线20. Text-decoration:underline加上超链接下划线21. Text-shadow:color x-offset y-offset blur-radius(color阴影颜⾊x-offset沿横向移动y-offset沿纵向移动blur-radius阴影模糊)22. Font-style:italic倾斜23. Vertical-align:middle当图⽚和字⼀起,让字在图⽚的中间对齐时引⽤这个1. Margin:0px去掉外边距2. Padding:0px去掉内边距3. Margin:auto⽹页中的整个元素在⽹页中左右居中4. List-style:none去掉列表默认样式,去掉⼩⿊点5. A:hover⿏标悬停样式6. 背景图像:background-repeat属性 1.repeat:沿⽔平和垂直⽅向平铺2. no-repeat不平铺,只显⽰⼀次3. repeat-x横向平铺4. 3. repeat-x横向平铺4.3. repeat-y纵向平铺(background:url(图⽚) no-repeat 横向纵向)第六章⼀、盒⼦模型:border:边框border-color: #F00; 边框的颜⾊border-width: 10px; 边框的线条⼤⼩border-style 边框的线型边框的线型:solid实线double双实线dotted点线dashed虚线background: linear-gradient(to bottom, #cdcdff, #FFF)*背景颜⾊的渐变to bottom从上往下Border-top:#C0F 1px dotted意思是上边框颜⾊是#c0f 线条的宽度是1px⽤的是点线!⼆、圆:border-radius: 50%;实现圆的效果,三、box-shadow:2px 2px 10px #333; 阴影box-shadow:阴影⽔平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值阴影颜⾊;四、position:relative; /*相对定位*/ 相对于⾃⼰的位置发⽣了偏移,但是原来的位置还是占据!五、Position:absolute; /*绝对定位*/ 相对于⾃⼰的位置发⽣了偏移,但是原来的位置还是不占据!css获取li标签中的第⼏个标签选择器:1.li: first-child表⽰选择列表中的第⼀个标签2.li:last-child表⽰选择列表中的最后⼀个标签3.nth-child(3) 表⽰选择列表中的第3个标签4. nth-child(2n) 这个表⽰选择列表中的偶数标签,即选择第2、第4、第6…… 标签5. nth-child(2n-1) 这个表⽰选择列表中的奇数标签,即选择第1、第3、第5、第7……标签。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

试验2 常用HTML标签使用实验目的:使用HTML标签熟练编写静态页面。

由于所选教材未涉及这部分内容,此处列出常用的标签。

详细的标记用法请参考网站:/html/index.asp1. 文件标记(1) <html></html><html>标记表示HTML文件从此处开始,到</html>标记结束,这对标记处在最外层,网页的内容写在此标记内。

(2) <head></head>这对标记表示此处是HTML文档的文件头。

文件头内部的信息一般不会在浏览器的正文区显示。

此标记对内可以插入其他标记,如网页标题标记<title></title>。

(3) <body></body>这对标记表示此处是网页的主体,一般不能省略,标记体的内容在浏览器正文区中显示,例如文字、图片和超链接等。

2.排版标记(1) <!-- -->标记<!-- -->标记在HTML文件中作注释用,对网页中的代码作说明,可以放在网页中的任何位置。

注释内容会返回到客户端浏览器上,但不显示。

例如在浏览器中输入,查看源文件可以看到此类注释。

(2) <p></p><p></p>标记对用于标示一个段落,两个相邻的段落间有一空行的间隔。

(3) <br>这个标记没有结束标记,表示换行。

<p></p>标记和<br>都能换行,但<br>换行后,上下两行的间距比较小,<p></p>标记换行后,上下两行有一空行的间距。

3.字体标记字体标记包括<STRONG>,<B>,<EM>,<I>,<FONT>等。

<font>标记用于定义字体、字号大小和颜色。

<font>标记的主要属性有face、size、color。

face属性用于设置字体,如:<font face=“宋体”>。

size属性用于设置字号,HTML中定义了7种字号,1号最小,7号最大,如:<font size=“4”>。

字号也可以用“磅”(px)表示。

color属性用于设置文本的颜色,color有三种方法来设定颜色,第一种方法用颜色名称,第二种方法用红、绿、蓝百分比的值来设定,第三种方法是用16进制的颜色代号还设定颜色。

如:<FONT COLOR=”RED”>红色字体设置</FONT><FONT COLOR=”RGB(70%,10%,30%)”>颜色设置</FONT><FONT COLOR=”#EF0000”>颜色设定</FONT>4.表格标记在网页中,表格主要分成排版表格和数据表格两种。

排版表格在浏览器中不显示边线,仅供排版、布局用。

数据表格在浏览器中显示边线或背景色,用于列表显示数据。

<table>标记表示表格的开始,</table>表示表格到此结束。

<tr></tr>表示表格中的一行。

<table></table>间如有n对<tr></tr>标记,表示此表格有n行。

<td></td>表示一行中的一列,一般写在<tr></tr>内。

<table>、<tr>、<td>间的嵌套关系为:<table><tr><td></td></tr></table>5.表单表单时系统和用户交互的重要手段。

用户在表单中填写数据,提交后,表单中的数据传递给后台程序处理,实现了客户端和服务器的交互。

(1)<form></form>标记<form>和</form>标记表示表单的开始和结束。

在表单标记中可以存放各种表单元素,如文本域、按钮等。

一个表单元素相当于一个变量,它的取值相当于变量的取值。

<form>标记中的id和name属性均为表单的ID名,用于在当前网页中标识表单,在当前网页中此ID名应该唯一。

<form>中action属性值为后台表单处理程序的URI。

<form>标记中的method属性标识数据的提交方式,一般有GET和POST两种方式。

GET方式将表单中的数据按照“变量名=变量值”的形式附加在URL的查询串中,各个变量之间使用“&”连接。

如:http://127.0.0.1:8080/exam.jsp?name=user1(2)文本域标记文本域表单的常见用法如下:<input name=”name” type=”text” id=”name” value=”123”/><input>标记表示此标记是写人标记,存储用户写入的信息。

标记中的id和name属性为文本域的ID名,type属性表示此写入标记的类型,value属性存储文本域的值。

多行文本框用文本域表单元素实现,它的HTML标记使用格式如下:<textarea name=”context”>内容说明</textarea>Name属性是文本区域的名字。

由于多行文本框可以输入较多的内容,所以把写入的内容存储在标记中。

(3)单选按钮标记在实际应用中的“性别”信息一班通过单选按钮采集,用户在给定的“男”和“女”两个选项中选择其中一个,相应的HTML代码如下:<input name=”sex” type=”radio” value=”男” checked=”checked”/><input name=”sex“ type=”radio” value=”女”/><input>标记中的type=”radio”属性表示此写入标记为单选按钮类型。

name=”sect”定义表单元素的名称,这两个单选按钮属于同一组,它们name属性的取值均为”sex”,称之为“同名单选表单”。

同一组的单选按钮具有互斥性,即只能是多选一操作。

value=”男”属性为单选按钮的取值,同组中的各单选按钮name属性值相同(同名),但value属性值不能相同(不同值)。

checked=”checked”表示当前此单选按钮被选中。

(4)复选钮标记在实际应用的“爱好”信息一般通过复选按钮采集,用户在列出的多个爱好中做出选择,可以选零个,也可以全选,相应的HTML代码如下:<input name=”hobby” type=”checkbox” id=”hobby” value=”篮球”/><input name=”hobby” type=”checkbox” id=”hobby” value=”羽毛球”/><input name=”hobby” type=”checkbox” id=”hobby” value=”排球”/><input name=”hobby” type=”checkbox” id=”hobby” value=”足球”/><input>标记中的type=”checkbox”属性表示此表单元素的类型为复选按钮。

name和id属性均为复选按钮的名称,这4个复选按钮同属于“爱好”组,它们的name和id值均为“hobby”(同名表单)。

value=”篮球”属性为复选按钮的值,同一组中不同复选按钮的value属性值不同。

(5)隐藏表单域列表表单元素预先把一组可供选择的数据存储在列表中,以下拉菜单或列表的形式供用户在其中选择,其中name是选项的提示文字,value才是选项的值。

它的HTML 代码如下:<input name=”loginname” type=”hidden” id=”loginname” value=”zhukai”/> (6)列表表单元素列表表单元素预先把一组可供选择的数据存储在列表中,以下拉菜单或列表的形式供用户在其中选择,其中name是选项的提示文字,value才是选择的值。

它的HTML 代码如下:<select name=”career” size=”3” multiple=”multiple”><option value=”001” selected=”selected”>公司员工</option><option value=”002”>在校学生</option><option value=”003”>公务员</option></select><select></select>表示此处为列表表单元素,name为表单元素的名字。

Size属性表示一次显示n个值,如果n=1则用下拉列表形式,n>1表示带滚动条的列表。

multiple=”multiple”属性表示此列表允许多选,没有此属性时表示单选。

<option></option>标记定义列表的一个列表项,标记体中的文字为提示汉字。

Selected属性表示此项是否已经被选定。

选定一个”name=value”可选项,提交表单后,只有value被提交,提示文字name不被提交。

(7)文件域表单元素文件域表单由一个文本域和一个按钮组成,单击按钮后会激活一个文件选择对话框,从本地磁盘中选择一个文件,被选中文件的路径极文件名自动填写在文本域中。

上传文件时,需要用到文件域。

文件域的HTML代码如下:<input name=”doc” type=”file” id=”doc” value=”c:\my1.txt”/>文件域用<input>标记实现,type=”file”表示这是一个文件域表单元素。

id和name属性均为文件域的名字,value属性为被选中文件的路径及文件名。

6.超链接<a>标记的href属性可以定义超链接,它的一般用法是:<a href=”next.htm”>下一页</a>href属性值为目标资源的URL,如果是空链接,则URL写为“#”。

相关文档
最新文档