手足连学Python

By admin in 4858美高梅 on 2019年4月3日

html图像、相对路径和相对路径

HTML概述和中央协会

HTML概述和中坚构造

大旨布局

  • html
  • head
  • body

html图像

<img>标签可以在网页上插入一张图纸,它是单身行使的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载战败时展示的文字,以及对寻找引擎和盲人读屏软件的支持。

<img src="images/pic.jpg" alt="产品图片" />

HTML是什么?

HTML是 HyperText 马克-up Language
的首字母简写,意思是超文本标记语言,

style=”font-size: 1陆px”>超文本指的是超链接,标记指的是标签,是1种用来成立网页的言语,这种语言由1个个的价签组成,

style=”font-size: 1陆px”>用那种语言构建的文书保留的是1个文件文件,文件的恢弘名称叫html或许htm,

style=”font-size: 1陆px”>一个html文件正是三个网页,html文件用编辑器打开突显的是文件,可以用文件的法子编辑它,

style=”font-size: 1陆px”>假若用浏览器打开,浏览器会依据标签描述内容将文件渲染成网页,展现的网页可以从二个网页链接跳转到此外2个网页。

HTML是什么?

HTML是 HyperText 马克-up Language
的首字母简写,意思是超文本标记语言,

style=”font-size: 16px”>超文本指的是超链接,标记指的是标签,是1种用来制作网页的言语,那种语言由一个个的竹签组成,

style=”font-size: 16px”>用那种语言构建的文书保留的是三个文本文件,文件的扩展名叫html可能htm,

style=”font-size: 1陆px”>2个html文件正是二个网页,html文件用编辑器打开展现的是文件,能够用文件的法子编辑它,

style=”font-size: 1陆px”>如若用浏览器打开,浏览器会根据标签描述内容将文件渲染成网页,呈现的网页能够从1个网页链接跳转到其余2个网页。

底部标签 head

  • title 文书档案的标题
  • meta 定义元数据,属性:

http-equiv / content / charset / name
  • style 定义css样式
  • link 引入外部的css文本/设置文书档案的图标,属性:

type / rel(stylesheet) / href / dedia
  • script 里面定义js代码
  • base 属性 href target

相对路径和相对路径

像网页上插入图片那种表面文件,须求定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为相对地址和周旋地址。

  • 纯属地址:相对于磁盘的职责去稳定文件的地点
  • 相对地址:绝对于引用文件本身去稳定被引述的文件地方

纯属地址在整机文件迁移时会因为磁盘和顶层目录的改动而找不到文件,相对路径就从来不那一个难题。相对路径的概念技巧:

  • “ ./ ” 表示最近文件所在目录下,比如:“./pic.jpg”
    表示当前目录下的pic.jpg的图形,那么些应用时能够省略。

  • “ ../ ”
    表示方今文件所在目录下的上一流目录,比如:“../images/pic.jpg”
    表示当前目录下的上一流目录下的images文件夹中的pic.jpg的图形。

HTML是由:标签和剧情结合

style=”font-size: 1陆px”><title>这是文书档案中的标题</title>

HTML是由:标签和剧情结合

style=”font-size: 1陆px”><title>这是文书档案中的标题</title>

meta的应用

<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="keywords" content="8-12个用英文逗号隔开的关键字">
<meta name="deacription" content="80个字符串内的一句话">
<meta http-equiv="refresh" content="3;url=01.html">

html链接

HTML标签(标记)的语法:

标签是由”<“和”>”括起来

style=”font-size: 16px”>双标签:<标签名>….</标签名>

单标签:<标签名/>

HTML标签(标记)的语法:

标签是由”<“和”>”括起来

style=”font-size: 16px”>双标签:<标签名>….</标签名>

单标签:<标签名/>

格式排版 标签

  • hn h1~h6 标题
  • p 段落
  • br 换行
  • hr 分隔线 (间隔)
  • pre 按原来的作品显示 把空格、换行、tab 表现出来

html链接

<a>标签能够在网页上定义贰个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的晋升文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html">测试页面2</a>

HTML基本组织

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

HTML基本构造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

列表标签

  • ul 冬辰列表
  • ol 有体系表 属性 start revsersed (降速)
  • li 列表项
  • dl 定义列表
  • dt 定义列表项的 术语部分
  • dd 定义列表项的 术语解释部分

概念页面内滚动跳转

页面钦点义了“id”或许“name”的成分,能够由此a标签链接到它的页面滚动地点,前提是页面要丰裕高,有滚动条,且成分不能在页面顶部,不然页面不会滚动。

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

html文书档案规范

style=”font-size: 1陆px”>xhtml制定了文书档案的编撰规范,html伍可有的死守,也可整个死守,看支出要求。

一、全数的价签必须小写

手足连学Python。二、全体的性质必须用双引号括起来

③、全体标签必须关闭

style=”font-size: 1陆px”>四、img必供给加alt属性(对图纸的叙说)

html文书档案规范

style=”font-size: 1陆px”>xhtml制定了文书档案的编辑撰写规范,html五可有的死守,也可方方面面死守,看支出供给。

壹、全体的标签必须小写

二、全数的质量必须用双引号括起来

3、全数标签必须关闭

style=”font-size: 16px”>4、img必供给加alt属性(对图片的叙述)

文件标签

  • em 表示强调 表现为斜体
  • strong 表示强调(强烈) 表现为粗体
  • code 表示代码
  • var 表示变量
  • kbd 键盘的按键
  • abbr 缩写的始末 协作title
  • del 删除的情节
  • ins 插入的始末
  • small 小型文本,旁注
  • sub 下标字
  • sup 上标字
  • address 地址
  • q 短引用
  • blockquote 长引用

html列表

html注释:

style=”font-size: 一五px”>html文书档案代码中能够插入注释,注释是对代码的认证和表达,注释的内容不会突显在页面上,html代码中插入注释的艺术是:

<!-- 这是一段注释  -->

html注释:

style=”font-size: 一5px”>html文书档案代码中可以插入注释,注释是对代码的认证和分解,注释的内容不会显得在页面上,html代码中插入注释的章程是:

<!-- 这是一段注释  -->

超链接标签

  • a 标签 属性
    • href 钦命地址路径
    • title 提醒成效
    • target 新页面包车型大巴打开药格局 _self(本窗口打开,默许)
      _blank(新窗口打开)
    • download 直接下载
  • 超链接会受到 base 标签的震慑。 href属性钦点相对路径的规则,
    target会安装暗中同意的窗口打开药格局
  • a标签协作 name 属性 能够创制锚点
  • 超链接除了链接网页,也得以链接锚点

稳步列表

在网页上定义3个有号码的内容列表能够用<ol>、<li>合作使用来促成,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上转移的列表,每条项目上会按1、二、叁编号,有种类表在实际支付中较少使用。

HTML中Head头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

style=”font-size: 一5px”>HEAD标签里面负责对网页实行壹些安装以及定义标题,

style=”font-size: 壹五px”>设置囊括定义网页的编码格式,外链css样式文件和javascript文件等,

style=”font-size: 一5px”>设置的内容不会显得在网页上,标题标剧情会来得在标题栏

设置网页编码:<meta charset="utf-8"/>
关键字:<meta name="Keywords" content="关键字" />
描述:  <meta name="Description" content="简介、描述" />
网页标题:<title>本网页标题</title>
导入CSS文件:<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码:<style type="text/css">嵌入css样式代码</style>
JS文件或代码: <script >。。。</script>

HTML中Head头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

style=”font-size: 一伍px”>HEAD标签里面负责对网页进行1些安装以及定义标题,

style=”font-size: 一5px”>设置总括定义网页的编码格式,外链css样式文件和javascript文件等,

style=”font-size: 15px”>设置的内容不会展现在网页上,题指标情节会显得在标题栏

设置网页编码:<meta charset="utf-8"/>
关键字:<meta name="Keywords" content="关键字" />
描述:  <meta name="Description" content="简介、描述" />
网页标题:<title>本网页标题</title>
导入CSS文件:<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码:<style type="text/css">嵌入css样式代码</style>
JS文件或代码: <script >。。。</script>

URL地址

  • 联独财富一定符
  • 表示二个网络能源(网页,图片等)的地址

冬辰列表

在网页上定义3个无编号的始末列表能够用<ul>、<li>合营使用来贯彻,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在网页上扭转的列表,每条项目上会有贰个小图标,这几个小图标在分歧浏览器上彰显效果不一样,所以一般会用样式去掉暗中同意的小图标,若是须要图标,能够用样式自定义图标,从而达成在分化浏览器上呈现的效劳同样,实际花费中一般用那种列表。

HTML标题

透过
<h1>、<h二>、<h三>、<h四>、<h5>、<h陆>,标签能够在网页上定义五种级别的题目。

style=”font-size: 一伍px”>陆种级别的标题表示文书档案的陆级目录层级关系,比如说:
<h1>用作主题目(最要紧的),其后是
<h二>(次首要的),

再其次是
<h三>,以此类推。搜索引擎会利用标题将网页的结构和内容编排索引,所以网页上应用标题是很重点的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

HTML标题

透过
<h一>、<h二>、<h三>、<h4>、<h五>、<h六>,标签能够在网页上定义八种级别的标题。

style=”font-size: 一伍px”>陆种级别的标题表示文书档案的6级目录层级关系,比如说:
<h壹>用作主标题(最要紧的),其后是
<h2>(次首要的),

再其次是
<h三>,以此类推。搜索引擎会使用标题将网页的结构和内容编排索引,所以网页上运用标题是很重大的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

绝对路径

  • 直白写文件名 表示同目录 等同于 ./
  • ../ 代表上壹层目录
  • ../../ 上1层的上1层

概念列表

概念列表平常用杨桴语的概念。<dl>标签表示列表的欧洲经济共同体。<dt>标签定义术语的难题。<dd>标签是术语的诠释。1个<dl>中得以有几个难点和平解决释,代码如下:

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

 

HTML段落,换行,字符实体

HTML段落,换行,字符实体

相对路径

  • http://www.baidu.com/index.html
  • http://www.itxdl.cn/demos.jpg

html段落

style=”font-size: 一5px”><p>标签定义三个文本段落,几个段子含有暗中同意的上下间距,段落之间会用这种默许间距隔离,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html段落

style=”font-size: 一5px”><p>标签定义一个文件段落,3个段子含有私下认可的光景间距,段落之间会用这种暗许间距隔开分离,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行

style=”font-size: 一伍px”>代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认那种换行,即使真想换行,能够在代码的段落中插入<br
/>来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html换行

style=”font-size: 一5px”>代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认那种换行,要是真想换行,可以在代码的段落中插入<br
/>来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

style=”font-size: 一伍px”>代码中成段的文字,假如文字间想空四个空格,在代码中空八个空格,

style=”font-size: 15px”>在渲染成网页时只会议及展览示一个空格,假使想呈现八个空格,可以运用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
    &nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

在网页上海展览中心示 “<” 和 “>”
会误认为是标签,想在网页上出示“<”和“>”能够运用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

html字符实体

style=”font-size: 一五px”>代码中成段的文字,借使文字间想空八个空格,在代码中空多个空格,

style=”font-size: 一五px”>在渲染成网页时只会显得2个空格,若是想体现多个空格,能够利用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
    &nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

在网页上出示 “<” 和 “>”
会误认为是标签,想在网页上显得“<”和“>”能够利用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

HTML块,含样式的竹签

HTML块,含样式的价签

html块

  1. div标签
    块成分,表示一块内容,未有具体的语义。
  2. span标签
    行内成分,表示1行中的一小段内容,未有现实的语义。

html块

  1. div标签
    块成分,表示一块内容,未有现实的语义。
  2. span标签
    行内成分,表示一行中的一小段内容,未有实际的语义。

含样式和语义的价签

  1. em标签
    行内成分,表示作品中的强调词
  2. i标签
    行内成分,原本从不语义,w三c强加了语义,表示专业词汇
  3. b标签
    行内成分,原本未有语义,w3c强加了语义,表示文书档案中的关键字依然产品名
  4. strong标签
    行内成分,表示卓越主要的内容
  5. del 删除线

含样式和语义的竹签

  1. em标签
    行内成分,表示作品中的强调词
  2. i标签
    行内成分,原本从不语义,w三c强加了语义,表示专业词汇
  3. b标签
    行内成分,原本从不语义,w三c强加了语义,表示文书档案中的关键字依然产品名
  4. strong标签
    行内成分,表示充裕首要的情节
  5. del 删除线

语义化的价签

语义化的标签,正是在布局的时候多使用语义化的价签,搜索引擎在爬网的时候能认得这么些标签,

明白文档的协会,方便网址的选择。比如:h一标签是表示题目,p标签是表示段落,ul、li标签是象征列表,

a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。

 

语义化的竹签

语义化的价签,就是在布局的时候多应用语义化的竹签,搜索引擎在爬网的时候能认得这一个标签,

明亮文书档案的协会,方便网址的重用。比如:h一标签是象征标题,p标签是表示段落,ul、li标签是代表列表,

a标签表示链接,dl、dt、dd表示定义列表等,语义化的价签不多。

 

HTML图片

HTML图片

html图片

<img>标签能够在网页上插入一张图纸,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载退步时显

示的文字,以及对寻找引擎和盲人读屏软件的协助。

<img src="images/pic.jpg" alt="产品图片" />

html图片

<img>标签能够在网页上插入一张图片,它是独自运用的竹签,通过“src”属性定义图片的地方,通过“alt”属性定义图片加载失利时显

示的文字,以及对寻找引擎和盲人读屏软件的扶助。

<img src="images/pic.jpg" alt="产品图片" />

相对路径和绝对路径

像网页上插入图片那种表面文件,需要定义文件的引用地址,引用外部文件还包蕴引用外部样式表,javascript等等,引用地址分为相对地址和相对地址。

  • 相对地址:相对于磁盘的职责去稳定文件的地方
  • 绝对地址:相对于引用文件本人去稳定被引述的公文地方

绝对地址在完全文件迁移时会因为磁盘和顶层目录的改观而找不到文件,相对路径就从未那么些题材。相对路径的概念技巧:

  • “ ./ ”
    表示如今文件所在目录下,比如:“./pic.jpg”
    表示当前目录下的pic.jpg的图样,那一个应用时得以简简单单。

  • “ ../ ”
    表示近年来文件所在目录下的上一流目录,比如:“..pic.jpg”
    表示当前目录下的上一流目录下的images文件夹中的pic.jpg的图片。

相对路径和相对路径

像网页上插入图片那种表面文件,须求定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为相对地址和相对地址。

  • 纯属地址:绝对于磁盘的职位去稳定文件的地方
  • 周旋地址:相对于引用文件本身去稳定被引用的文件地方

绝对地址在总体文件迁移时会因为磁盘和顶层目录的转移而找不到文件,相对路径就未有那一个题材。相对路径的概念技巧:

  • “ ./ ”
    表示最近文件所在目录下,比如:“./pic.jpg”
    表示当前目录下的pic.jpg的图形,这几个应用时得以大致。

  • “ ../ ”
    表示近期文件所在目录下的上一级目录,比如:“..pic.jpg”
    表示当前目录下的上一流目录下的images文件夹中的pic.jpg的图纸。

 

 

HTML链接

style=”font-size: 1伍px”><a>标签能够在网页上定义三个链接地址,通过href属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的唤起文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itxdl.cn/" title="跳转的it兄弟连网站">兄弟连</a>
<a href="2.html">测试页面2</a>

HTML链接

style=”font-size: 一5px”><a>标签能够在网页上定义3个链接地址,通过href属性定义跳转的地方,通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itxdl.cn/" title="跳转的it兄弟连网站">兄弟连</a>
<a href="2.html">测试页面2</a>

锚点:定义页面内滚动跳转

style=”font-size: 一5px”>页面内定义了“id”,能够经过a标签链接到它的页面滚动地方,前提是页面要丰盛高,有滚动条,且元素不能在页面顶部

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

锚点:定义页面内滚动跳转

style=”font-size: 15px”>页面钦命义了“id”,能够通过a标签链接到它的页面滚动地点,前提是页面要丰富高,有滚动条,且成分不可能在页面顶部

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

属性

  1. href必须,指的是链接跳转地址
  2. target: 表示链接的打开药情势: _blank
    新窗口
  3. title属性定义鼠标悬停时弹出的提示文字框

 

属性

  1. href必须,指的是链接跳转地址
  2. target: 表示链接的打开药情势: _blank
    新窗口
  3. title属性定义鼠标悬停时弹出的提示文字框

 

 

 

HTML列表

HTML列表

冬日列表

style=”font-size: 一五px”>在网页上定义1个无编号的内容列表能够用<ul>、<li>同盟使用来兑现,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 一五px”>在网页上扭转的列表,每条项目上会有3个小图标,这几个小图标在分裂浏览器上展现效果不一样,所以一般会用样式去掉私下认可的小图标,假若须求图标,能够用样式自定义图标,从而实现在不相同浏览器上展现的效劳一样,实际花费中1般用那种列表。

严节列表

style=”font-size: 1⑤px”>在网页上定义一个无编号的故事情节列表能够用<ul>、<li>合营使用来落实,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 一伍px”>在网页上生成的列表,每条项目上会有二个小图标,这一个小图标在分歧浏览器上海展览中心示效果差别,所以一般会用样式去掉暗中同意的小图标,借使需求图标,能够用样式自定义图标,从而完结在分化浏览器上显得的法力等同,实际支付中貌似用那种列表。

 

 

HTML表格

HTML表格

table常用竹签

壹、table标签:声美赞臣(Karicare)个报表

4858美高梅,二、tr标签:定义表格中的1行

3、td和th标签:定义1行中的叁个单元格,td代表普通单元格,th表示表头单元格

table常用竹签

一、table标签:声宾博个报表

二、tr标签:定义表格中的一行

3、td和th标签:定义一行中的2个单元格,td代表普通单元格,th代表表头单元格

table常用属性:

一、border 定义表格的边框

2、cellpadding
定义单元格Nene容与边框的离开

3、cellspacing
定义单元格与单元格之间的距离

四、align
设置单元格中剧情的程度对齐方式,设置值有:left | center | right

伍、valign 设置单元格中内容的垂直对齐情势top | middle | bottom

陆、colspan 设置单元格水平统1

柒、rowspan 设置单元格垂直合并

table常用属性:

一、border 定义表格的边框

二、cellpadding
定义单元格内内容与边框的离开

叁、cellspacing
定义单元格与单元格之间的相距

肆、align
设置单元格中剧情的程度对齐情势,设置值有:left | center | right

5、valign 设置单元格中内容的垂直对齐方式top | middle | bottom

陆、colspan 设置单元格水平统1

七、rowspan 设置单元格垂直合并

 

 

HTML表单

style=”font-size: 15px”>表单用于收集分裂品种的用户输入,表单由分歧档次的标签组成,达成三个一定效能的表单区域(比如:注册),

style=”font-size: 15px”>首先应该用<form>标签来定义表单区域壹体化,在此标签中再采用差异的表单控件来落到实处不一致类其他新闻输入,

切实实现及注释可参看以下伪代码:

<!-- form定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式。 -->
<form action="http://www..." method="get">

    <!-- label标签定义表单控件的文字标注,input类型为text定义了一个单行文本输入框 -->
    <p>
        <label>姓名:</label>
        <input type="text" name="username" />
    </p>

    <!-- input类型为password定义了一个密码输入框 -->
    <p>
        <label>密码:</label>
        <input type="password" name="password" />
    </p>

    <!-- input类型为radio定义了单选框 -->
    <p>
        <label>性别:</label>
        <label><input type="radio" name="gender" value="0" /> 男</label>
        <label><input type="radio" name="gender" value="1" /> 女</label>
    </p>

    <!-- input类型为checkbox定义了单选框 -->
    <p>
        <label>爱好:</label>
        <label><input type="checkbox" name="like" value="sing" /> 唱歌</label>
        <label><input type="checkbox" name="like" value="run" /> 跑步</label>
        <label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
    </p>

    <!-- input类型为file定义上传照片或文件等资源 -->
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>

    <!-- textarea定义多行文本输入 -->
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>

    <!-- select定义下拉列表选择 -->
    <p>
    <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>

    <!-- input类型为submit定义提交按钮
        还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
        <input type="image" src="xxx.gif">
    -->
    <p>
        <input type="submit" name="" value="提交">

        <!-- input类型为reset定义重置按钮 -->
        <input type="reset" name="" value="重置">
    </p>

</form>

style=”font-size: 一伍px”>input表单项中的属性,能够提供type属性:表示表单项的类型:值如下``

    text:单行文本框

    password:密码输入框

    checkbox:多选框 注意要提供value值

    radio:单选框 注意要提供value值

    file:文件上传选择框

    button:普通按钮

    submit:提交按钮

    image:图片提交按钮

    reset:重置按钮, 还原到开始\(第一次打开时\)的效果

    hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

*name属性:表单项名,用于存储内容值的

*value属性:输入的值\(默认指定值\)

size属性:输入框的宽度值

maxlength属性:输入框的输入内容的最大长度

readonly属性:对输入框只读属性

*disabled属性:禁用属性

*checked属性:对选择框指定默认选项

src和alt是为图片按钮设置的

    注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空

    image图片按钮,默认具有提交表单功能。

placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
    该提示会在用户输入值之前显示在输入字段中。
    注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

HTML表单

style=”font-size: 1五px”>表单用于收集分化品种的用户输入,表单由不一致品种的标签组成,落成三个一定作用的表单区域(比如:注册),

style=”font-size: 一5px”>首先应当用<form>标签来定义表单区域完全,在此标签中再利用分裂的表单控件来促成分歧类其他音信输入,

切实落到实处及注释可参看以下伪代码:

<!-- form定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式。 -->
<form action="http://www..." method="get">

    <!-- label标签定义表单控件的文字标注,input类型为text定义了一个单行文本输入框 -->
    <p>
        <label>姓名:</label>
        <input type="text" name="username" />
    </p>

    <!-- input类型为password定义了一个密码输入框 -->
    <p>
        <label>密码:</label>
        <input type="password" name="password" />
    </p>

    <!-- input类型为radio定义了单选框 -->
    <p>
        <label>性别:</label>
        <label><input type="radio" name="gender" value="0" /> 男</label>
        <label><input type="radio" name="gender" value="1" /> 女</label>
    </p>

    <!-- input类型为checkbox定义了单选框 -->
    <p>
        <label>爱好:</label>
        <label><input type="checkbox" name="like" value="sing" /> 唱歌</label>
        <label><input type="checkbox" name="like" value="run" /> 跑步</label>
        <label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
    </p>

    <!-- input类型为file定义上传照片或文件等资源 -->
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>

    <!-- textarea定义多行文本输入 -->
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>

    <!-- select定义下拉列表选择 -->
    <p>
    <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>

    <!-- input类型为submit定义提交按钮
        还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
        <input type="image" src="xxx.gif">
    -->
    <p>
        <input type="submit" name="" value="提交">

        <!-- input类型为reset定义重置按钮 -->
        <input type="reset" name="" value="重置">
    </p>

</form>

style=”font-size: 15px”>input表单项中的属性,能够提供type属性:表示表单项的类型:值如下``

    text:单行文本框

    password:密码输入框

    checkbox:多选框 注意要提供value值

    radio:单选框 注意要提供value值

    file:文件上传选择框

    button:普通按钮

    submit:提交按钮

    image:图片提交按钮

    reset:重置按钮, 还原到开始\(第一次打开时\)的效果

    hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

*name属性:表单项名,用于存储内容值的

*value属性:输入的值\(默认指定值\)

size属性:输入框的宽度值

maxlength属性:输入框的输入内容的最大长度

readonly属性:对输入框只读属性

*disabled属性:禁用属性

*checked属性:对选择框指定默认选项

src和alt是为图片按钮设置的

    注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空

    image图片按钮,默认具有提交表单功能。

placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
    该提示会在用户输入值之前显示在输入字段中。
    注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

 

 

HTML列表

HTML列表

冬季列表

style=”font-size: 一五px”>在网页上定义七个无编号的内容列表能够用<ul>、<li>合作使用来促成,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 壹伍px”>在网页上生成的列表,每条项目上会有2个小图标,那个小图标在分化浏览器上出示效果差异,

style=”font-size: 一5px”>所以1般会用样式去掉暗许的小图标,假诺急需图标,能够用样式自定义图标,从而达到在差别浏览器上出示的机能等同,实际费用中貌似用那种列表。

冬季列表

style=”font-size: 壹伍px”>在网页上定义贰个无编号的剧情列表能够用<ul>、<li>协作使用来落到实处,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 1五px”>在网页上扭转的列表,每条项目上会有3个小图标,这么些小图标在分化浏览器上海展览中心示效果不一致,

style=”font-size: 1五px”>所以壹般会用样式去掉暗许的小图标,假设需求图标,能够用样式自定义图标,从而完结在不一致浏览器上海展览中心示的功能1样,实际付出中一般用那种列表。

1如既往列表

style=”font-size: 壹5px”>在网页上定义2个有号码的内容列表可以用<ol>、<li>协作使用来贯彻,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

style=”font-size: 1伍px”>在网页上扭转的列表,每条项目上会按壹、贰、3编号,有体系表在实际上开发中较少使用。

其间type类型值:A a I i 1start属性表示起头值

有体系表

style=”font-size: 15px”>在网页上定义一个有编号的始末列表能够用<ol>、<li>同盟使用来促成,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

style=”font-size: 一5px”>在网页上生成的列表,每条项目上会按一、2、三编号,有种类表在实际支付中较少使用。

内部type类型值:A a I i 一start属性表示开首值

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有