当前位置 : 主页 > 网页制作 > html >

Html基础标签

来源:互联网 收集:自由互联 发布时间:2021-06-12
视频与音频标签 Controls : 控制面板显示(显示播放按钮) Poster : 海报(未播放前显示的画面) Autoplay : 是否自动播放(true 是,false否) Width : 宽度设置 Height : 高度设置 图像标签标签

视频与音频标签

分享图片

 

 

 

Controls : 控制面板显示(显示播放按钮)

Poster : 海报(未播放前显示的画面)

Autoplay : 是否自动播放(true 是,false否)

Width : 宽度设置

Height : 高度设置

分享图片

 

图像标签标签 img

分享图片

 

 

 

alt :当图片显示不出出来进行描述说明

title :当图片悬停在图片上的提示信息

 

水平线标签 hr: <hr/>

列表标签

1.  有序列表 ol  li:

分享图片

 

 

 

2.  无序列表:ul  li:

分享图片

 

 

 

3.  定义列表 dl dt dd :

dl :定义一个列表    dt:定义术语标签(可以放置文字或图片)

dd :定义描述标签(对dt的内容进行描述说明)

分享图片

 

 

 

标题标签:<h1>…….<h6>

段落标签:<p></p>

换行标签:<br/>

加粗标签:<b></b>

超链接标签:<a></a>

 分享图片

href:表示要链接的目标文件的路径

target:表示链接目标文件的打开方式

             默认值:_self (自身窗口打开)

             新建一个窗口打开:_blank

             target=”name” (name表示内嵌框架ifram 的name的属性值):在内嵌框架中打开

说明:超链接可包裹文字和图片

特殊字符:

  &nbsp; :空格

       &amp; :连接符&

       &gt; :大于

       &lt; :小于

       &copy; :版权符号

       &reg; :注册商标

跨多个字符标签:<span></span>

分享图片

Style :给标签添加样式

                   color:red :设置字体颜色为红色

                   Font-weight:bold :给文字字体加粗

         锚连接:通过a超链接实现锚链接,链接当前页面的指定位置

                            【可以模拟实现回到顶部效果】

                             href="#":此处的#号表示链接至当前页面

                           

                            问题:如何应用锚链接模拟回到顶部效果

                                     第一步:在指定去向的顶部之处添加以下代码

                                     <a name="锚记的名称">文字或图片</a>  name:锚记的名称

                                     第二步:在点击底部位置添加以下代码

                                     <a href="#锚记的名称">链接的内容(文字或图片)</a>

分享图片

 

表格标签:table tr td

table (表格标签)

                   tr (行标签)【行:row】

                   td (单元格标签)【单元格:cell】

分享图片  表示一行三列的表格

在水平方向跨列(在水平方向上合并单元格) colspan

                   col:column列

                   span:跨

                   注意:合并只能合并单元格

                   语法:colspan="跨的单元格的数量(包括自身)"

                   align:表示水平对齐方式(左中右)left center right

                   valign:表示垂直对齐方式(上中下)top middle bottom

分享图片

 

 

 

在垂直方向跨行(在垂直方向上合并单元格) rowspan

分享图片

 

在使用表格时要注意的问题:

                            1)表格中只有单元格才能放置内容(文字、图片、音频、视频....

                            2)跨列为水平方向,跨行为垂直方向

                            3)表格即可跨列且同时能跨行

                            4)从哪行哪列开始跨那最终合并的单元格则从属于当前行

                            5)表格可以实现嵌套

                            6)表格的应用场景(when)

                                     . 网页中的某处内容有规整形式,则可以考虑使用表格实现

                            7)表格不怎么推荐使用:

                                     . 因为表格过于结构固定化,不能灵活实现效果

                                     . 一但表格比较复杂,代码比较多,嵌套比较深,维护麻烦

                            8)在实现应用表格是遵循的技巧

                                     . 尽量使用最少的行与最少的列实现最佳效果,减少合并

 

 

分区标签:<div></div> 常用语页面布局

使div居中:margin:0 auto;

分享图片

 

内嵌框架(iframe):点击的连接在内嵌框架中打开

分享图片

 

Form表单

表单是在网页中提供一个图形用户界面,用于采集用户的信息并提交至远程服务器

表单标签:

a)      <form></form>

b)      Form表单的两个重要属性

 action :指提交的URL(指定表单采集数据提交至服务器处理)

 method:表单提交方式(get 显示提交和post 隐式提交)

分享图片

 

表单的相关元素:

         输入标签:input根据属性type 的类型不同从而显示不同的效果

         文本框:<input  type=”text”  name=”名称”/>

         隐藏域:<input  type=”hidden”  name=”名称”/>

         密码框:<input  type=”password”  name=”名称”/>

         单选按钮:<input  type=”radio”  name=”名称”/>

分享图片

文件域:<input  type=“file”  name=” uploadfile”/>

 分享图片

 

复选框:<input  type=”checkbox”  name=”checkbox”/>

分享图片

 

 

 

下拉列表:select + option

分享图片

 

 

 文本域:textarea

分享图片

 

普通按钮:<input  type=”button”  value=”提交”/>(普通按钮只能人为赋予功能)

         特殊按钮:<button>提交</button>(该按钮默认功能与submit一样)

         提交按钮:<input  type=”submit”  value=”提交”/>(提交表单的功能)

         重置按钮:<input  type=”reset”  value=”重置”/>(清空表单数据的功能,默认值除外)

         图像按钮:<input  type=”image”  src=”图像按钮的来源路径”/>(功能与submit一样)

 

         容器框:fieldset和legend元素

Fieldset元素被用作表单元素的一个容器,它被包含的元素周围显示一个细边框的盒子。Legend元素放在fieldset元素内部,在盒子上加上一个标题。

 

 分享图片

 

Html5表单元素

         电子邮件输入框:<input  type=”email”  name=”email”/>

         Web地址输入框(url:<input  type=”url”  name=”url”/>

         数值输入框:<input  type=”number” name=”num”/>

分享图片

日期输入框:<input  type=”date”  name=”date”/>

         搜索输入框:<input  type=”search” />

         数字滑动框:<input  type=”range” />

         颜色选取:<input  type=”color” />

数据列表:datalist

分享图片

 

Input 输入标签新增属性

         自动获得鼠标焦点:autofocus

         输入时提示信息:placeholder

         必须输入的字段:required

         取消表单验证:novalidate

        防止修改字段内容:disabled / readonly

网友评论