HTML常用标记

换行标记<br>单标签

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

<br> 标签是空标签(意味着它没有结束标签,因此<br></br>错误的)。

在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。

请注意,<br> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。

段落标记<p></p>

段落标记以<p>标记开头,以</p>标记结束。段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容,不受该标记的影响。

<P> 原是空一行标记。不需要 添加 </p>。

因为ie解析html不是很标准 所以当单独写<p>是可以识别的,但是xhtml里面是要双标签写的,这样写更符合w3c规范

粗体文本标签<b></b>

定义:<b> 标签规定粗体文本。

所有浏览器都支持<b>标签

标题标记

要在HTML页面中创建不同级别的标题,可以使用HTML语言中的标题标记。在HTML标记中,设定了6个标题标记,分别为<h1>至<h6>,其中<h1>代表1级标题,<h2>代表2级标题,<h6>代表6级标题等。数字越小,表示级别越高,文字的字体也就越大。

居中标记

HTML页面中的内容有一定的布局方式,默认的布局方式是从左到右依次排序。如果要想让页面中的内容在页面的居中位置显示,可以使用HTML中的<center>标记。<center>居中标记以<center>标记开头,以</center>标记结尾。标记之中的内容为居中显示。

扫描二维码关注公众号,回复: 5480780 查看本文章

文字列表标记

HTML语言中提供了文字列表标记,文字列表标记可以将文字以列表的形式依次排列。通过这种形式可以更加的方便网页的访问者。HTML中的列表标记主要有无序的列表和有序的列表两种。

无序列表是在每个列表项的前面添加一个圆点符号。通过<ul>可以创建一组无序列表,其中每个列表项以<li>表示

有序列表和无序列表的区别是,使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>,每一个列表项前使用<li>。有序列表中项目项是有一定的顺序的。

表格标签

1.表格标签<table></table>

1、width  设置表格宽度

2、height  设置表格高度

3、align  设置 表格 在其 父元素中的水平对齐方式,取值:left, center, right

4、border  设置表格边框的宽度,以px为单位的数值,px可以省略

5、cellpadding  单元格内边距,

                         单元格边框与内容之间的距离

6、cellspacing 单元格外边距,

                        单元格与单元格之间或者单元格与表格之间的 距离

7、bgcolor  背景颜色

2.标题标签<caption></caption>

默认它将居中显示在表格之上

作用:为表格定义标题

 位置:表格正上方居中显示

<table>

<caption>标题</caption>

 <tr>

     <td></td>

     <td></td>

 </tr>

</table>

3.定义表格的标题栏<th></th>

4.定义表格的行<tr></tr>

1、align   该行的内容 水平对齐方式     left、right、center
2、valign  该行的内容 垂直对齐方式    top、bottom、middle、baseline
                取值:top,middle,bottom
 3、bgcolor

5.定义表格的列<td></td>

1、width
2、height
3、align :

left、right、center

4、valign :

top、bottom、middle、baseline

5、bgclor
6、colspan  

作用:规定单元格可横跨的列数。

语法:<td coaplan = "value">

所以浏览器都支持 colspan 属性。

没有浏览器支持 colspan="0",这个值有特殊的意义。

7、rowspan  设置单元格跨行

align和valign属性均是规定表格相对于周围元素的对齐方式,区别就在于:
1、align属性趋向于左右对齐,其值包含:left、right、center

在HTML 4.01 中,不赞成使用 body 元素的 align 属性;在 XHTML 1.0 Strict DTD 中,不支持 body元素的 align 属性。请使用CSS中的float属性代替。
2、valign属性趋向于垂直对齐,其值包含:top、bottom、middle、baseline
所有浏览器都支持 valign 属性。
基线(baseline)是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同的基线。该值的效果常常与bottom值相同。不过,如果文本的字号各不相同,那么baseline的效果会更好。

HTML表单标记

1.表单标记<form></form>

用于创建一个表单

1.action属性:

该属性用来指定处理表单数据程序的URL地址,即表示当前表单中的内容提交给哪个页面进行处理

2.method属性:

表示当前表单提交的方式,常见的有get和post方式,默认是get提交

该属性用来指定数据传送到服务器的方式,get属性值表示将输入的数据追加在action指定的地址后面,并传送到服务器。

post会将输入的数据按照HTTP协议中的post传输方式传送到服务器。

get和post的区别和使用

Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE。URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP中的GET,POST,PUT,DELETE就对应着对这个资源的查,改,增,删4个操作。到这里,大家应该有个大概的了解了,GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。细细描述,大概有下面几点:

1. get是从服务器上获取数据,post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。

3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。

5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。

6. 在ASP中,服务端获取GET请求参数用Request.QueryString,获取POST请求参数用Request.Form。在JSP中,用 request.getParameter(\"XXXX\")来获取

3.name属性

指定表单的名称

4.onSubmit属性

用于指定当用户单击提交按钮时触发的事件

5.target属性

指定输入数据结果显示在哪个窗口

属性值:

_blank:表示在新窗口中打开mu'b目标文件(指定action的URL在新开的浏览器窗口中)

_parent:表示在上一级窗口中打开,一般使用框架页时经常使用(指定action的URL在父级浏览器窗口中)

_self:表示在同一个窗口中打开,该项一般不用设置(指定action的URL在当前浏览器窗口中)

_top:表示在浏览器的整个窗口中打开,忽略任何框架(指定action的URL在顶级浏览器窗口中)

2.表单输入标记<input>单标签

input中id和name属性的区别:

id是唯一标识符,不允许有重复值可以通过它的值来获得对应的html标签对象。相当于人的身份证具有唯一性

name:控件的名字,一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是,当我们需要把这个控件所关联的数据传递到数据库时,就必须要设置 name 属性。相当于人的姓名,可以重名。

id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

id:作为标签的唯一标识。
name:作为可与服务器交互数据的HTML元素的服务器端的表示。

input标签的type属性值:

HTML5新增的属性值:color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

下拉列表框列表框标记<select></select>

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
使用<option>标记向列表中添加内容

猜你喜欢

转载自blog.csdn.net/weixin_42350237/article/details/88077542
今日推荐