web(三)html标签

标签的层级特性

  闭合的html标签内可以包含一个或多个子标签,因此html的标签是一个多叉树的数据结构,多叉树的根是html标签。

标签的属性描述

  每个标签都具备一组公用或当前标签独有的属性,属性的作用是描述标签的外观行为或识别当前标签的标识。

属性的声明语法

  <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

标签的公用属性

  所有标签都具备的属性。

  class:规定当前元素所引用的样式类名称。

  id:规定当前元素在网页上的唯一标识,一般在css、js中会根据id检索当前元素。

  name:当前元素在文档上的名称,可以重复。

  style:规定当前元素的显示样式,取值为css样式表。

  title:规定当前元素的标题,类型为文本,可在工具提示中显示。

    以上是html4标准常用的公用属性

标签功能分类

  布局标签:控制子元素所在位置,并不独立显示。

  文本标签:用来显示文本的标签。

  框架标签:在网页内嵌入其他子网页的标签。

  超链接标签:超链接标签。

  图片以及图像映射:用来显示图片、图像的标签。

  表单类标签:用来控制用户输入的一组标签。

  表格标签:用来按照一定长度、宽度显示的表格标签。

  默认显示分类:Html标签具备的默认显示方式(table系列具备特殊方式)。

    块级元素( block )展示方式 独立占有一行,宽度缺省值为100% 大小、内边距、外边距可以调整。

    内联元素( inline )展示方式 不独立占有一行 大小、内边距、外边距不可以调整,取决于内容的大小。

    内联块级元素( inline-block ) 一个可以调整大小的内联元素

  1、布局标签

    目的是控制子元素所在位置,并不独立显示的html标签。

    常用布局标签

    p标签:是段落(paragraph)的缩写,包裹的内容为一个段落的文字或修饰文字的文字标签,默认自带内边距,块级元素。

    div标签:一般配合css对网页内大块区域进行布局。块级元素。布局作用

    span标签:一般用来包裹非特殊显示文本进行,内联元素。

    列表标签:是这一组样式相同,功能相同的元素的集合,列表不同于表格(多行多列)。

      列表标签的分类

         1)自定义列表:用来表示一组无序的、具备标题的列表数据。(<dl><dt>标题</dt><dd>内容</dd></dl>)

         2)有序列表:用来显示有顺序的列表数据信息,可显示顺序号。

            ol标签:有序列表

            li标签:有序列表项

            type属性:规定列表的项目符号的类型,取值范围:A、a、1、i、Ι。

         3)无序列表 :用来显示无顺序的列表数据信息,可以设置列表符号。

            ul标签:无序列表,块级元素

            li标签:有序列表明细项,块级元素。

            type属性:列表的明细符号类型,取值范围 circle(空心圆)、disc(实心圆)、square(正方形)

     文本标签:用来修饰小段用于阅读的文字的标签。

        1)u标签:内容默认以下划线方式显示。

        2) strong标签:内容默认以强调文字方式显示。

        3)em标签:内容默认以一般强调文字显示。

        4)h1—h6:标题文字标签,从h1到h6默认字体大小依次减少。

          h标签在搜索引擎搜索时优先级别较高

     框架标签

        iframe标签:该标签可以在当前网页上引入其他网页资源(支持引入非同源网页)。

          

      

     超链接标签

        A标签:又称为超链接标签,通过a标签可以访问(链接)到其他网页。

          <a href="http://www.baidu.com">百度一下</a></br>

          href的取值可以为如下两种类型。

              绝对路径:完整的网页访问路径,与当前网页位置无关。

              相对路径:需要访问的网页资源与当前网页资源路径的相对位置。

          锚点:超链接的一种,又叫命名锚记。在网页中的作用是快速定位器。

              锚点的声明

                  <a href="#jump">点我看看</a>

                  <p id="jump">我是该区域的相应内容</p>

                  <p name="jump">我是该区域的相应内容</p>

                  在老版本浏览器中最初都是使用name作为锚点位置的声明方式。

                  网页中name属性的取值不唯一,因此造成锚点定位不准,所以后期浏览器都支持使用id作为锚点声明位置。

                  Html5规范中已经声明取消name的锚点声明方式,建议使用id。

              跨网页的锚点访问:<a href="test.html#jump">跨网页锚点</a>

          链接到第三方资源

              

<a href="mailto:[email protected]">邮件</a>

<a href="tel:18310132010">电话</a>

<a href="sms:18310132010">短信</a>

<a href="a.mp4">视频</a>

          

          链接的打开方式:被访问的网页以哪种方式打开,使用target属性设置。

              target属性的取值范围

                _blank:在新窗口中打开链接文档

                _self:默认,在当前浏览器窗口中打开被链接文档。

                _parent:在父框架中打开被链接文档。

                _top:在当前网页的最顶层框架中打开被链接文档。

                framename:在指定的框架中打开被链接文档。

      

      图片以及图像映射

         图片标签(img):在网页上显示图片。

          

          

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>

          src与href的区别:Link、a标签使用href,其余使用src

        图片映射:将一个图片区域划分为若干个子区域,每个区域都可以设定为超链接。

          

1 <img src="1.png" usemap="#Map"/>
2
3 <map name="Map">
4
5  <area >
6
7  <area>//划分多个区域
8
9 </map>

area常用属性说明

1 <img src="1.png" usemap="#Map"/>
2 <map name="Map">
3   <area shape="circle" coords="64,36,19" href="eye.html"alt="眼睛">
4   <area shape="rect" coords="35,87,59,126" href="mouse.html" alt="鼻子">
5 </map>
时间: 2024-10-14 10:12:34

web(三)html标签的相关文章

web三种跨域请求数据方法

web三种跨域请求数据方法 以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.

一、变量.二、过滤器(filter).三、标签(tag).四、条件分支tag.五、迭代器tag.六、自定义过滤器与标签.七、全系统过滤器(了解)

一.变量 ''' 1.视图函数可以通过两种方式将变量传递给模板页面 -- render(request, 'test_page.html', {'变量key1': '变量值1', ..., '变量keyn': '变量值n'}) -- render(request, 'test_page.html', locals()) # locals() 就是将视图函数中的所有变量都传递给模板页面 2.模板页面中对变量的使用 def dtl(request): num = 3.14 ss = '大碗宽面' #

web day13 JSTL标签库(c标签,自定义标签),MVC设计模式,JavaWeb经典三层框架

JSTL 1. jstl的概述 *apache的东西,依赖EL * 使用jstl需要导入jstl1.2.jar * 四大库: > core:核心库,重点 > fmt:格式化:日期.数字 > sql:过时 > xml:过时 2. 导入标签库 *jar包 * 在jsp页面中:<%@taglib prefix="前缀" uri="路径"%> ---------------------- core --> c标签! 1. out和s

web.xml常用标签整理(不定期更新)

1 <?xml version="1.0" encoding="UTF-8"?><!-- 标明使用的XML版本和文档编码,此项必须位于第一行,之前是空行注释都不行 --> 2 3 <!-- 4 web.xml学名为配置部署文件,是web应用的入口文件,用于声明系统的各项配置,此文件不是必须的,但也只是最简单的静态项目才没有. 5 xml文件中大小写敏感,书写次序敏感,自上而下加载,所以配置此文件时要注意标签的顺序和大小写. 6 --&g

web基础----&gt;script标签的特殊使用

今天周末,首先祝大家过得开心.好了,今天要讲的就是怎样使用<script>去请求一个servlet,加载一些js资源以及额外的逻辑处理: 目录: JS的引入的几种方式 在script的标签中引入Servlet 动态引入JS的好处 友情链接 JS的引入方式 首先我们说一下,一般js引入到jsp或者html的几种方式: 直接document.write 但这样会把当前的页面全覆写掉 document.write("<script src='test.js'><\/scr

WEB APP 开发标签

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览: 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览: 第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式: 第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码 <meta content=”width=device-width, initial-scale=1.0,

js之oop &lt;三&gt;属性标签

读取属性标签 获取对象属性标签,用 Object.getOwnPropertyDescriptor方法.getOwnPropertyDescriptor(); 参数:属性所在对象(object),属性名(string) var obj = { code:2,element:"ele" }; Object.getOwnPropertyDescriptor(obj,"code"); //输出 { value: 2, writable: true, enumerable:

初学HTML 常见的标签(三) 列表标签

第三篇博客, 这次说的是插入链接类标签, 我们平常在网页中经常能看到蓝色的链接类标签, 或者是一张图片, 一个电邮, 这些都是插入链接类的标签起的作用. <a></a>链接标签 <a>链接标签可实现超链接, 它在网页中是无处不在的, 只要有链接的地方, 就会有这个标签, 它的语法和其他的标签不太相同, 对于初学者而言, 刚开始学的时候毕竟初学者并不在标签中添加属性等等, <a>的语法是 <a href = "目标网址" title

Java Web(七) JSTL标签库

在之前我们学过在JSP页面上为了不使用脚本,所以我们有了JSP内置的行为.行为只能提供一小部分的功能,大多数的时候还是会用java脚本,接着就使用了EL表达式,基本上EL表达式看似能满足我们的要求,它能够获取各种对象,各种值,并且还不会抛出NullPointerException之类的错误,但是EL表达式功能还是有限,例如不能遍历集合等,因此为了完善JSP,让其完全不使用java代码,就有了jstl标签库,使用jstl和EL的配合使用,基本上可以实现所有的功能,显示数据,遍历数据等. 一.为什么

web项目启动过程及web.xml常用标签的作用

<servlet> <servlet-name>CloudEra</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>