网页的重组,内容部分&lt

HTML

HTML解释:

HTML是菲律宾语Hyper Text
马克-up
Language(超文本标识语言)的缩写,他是一种制作万维网页面标准语言(标识)。约等于概念统一的条条框框(W3C),我们都来遵循他,那样就可以让浏览器依照标识语言的平整去解释它。

浏览器担当将标签翻译成顾客“看得懂”的格式,显示给顾客!

网页的咬合:

壹个网页平日由两局地构成即:

  • HTML(Hypertext
    Markup Language)
  • 和CSS(Cascade
    Style Sheets)

HTML担当描述网页的组织和内容(如标题,导航栏等) CSS则担当网页的表现(外观)(如背景颜色,字体样式等)。

<head>和</head>之间的内容,是元消息和网址的标题元音信经常是不显得出来的,不过记录了您这么些HTML文件的繁多吹糠见米的音讯
<body>和</body>之间的原委,是浏览器展现出来的,顾客寓指标页面效果。相当于说这里是网页的重视。也正是body的身躯之意
<html></html>是认证这些是贰个网页。告诉浏览器那些网页的上马三保了结。他带有了今后的八个因素。<head>和</head>|<body>和</body>

文书档案结构如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML介绍


  • 超文本标识语言(Hypertext
    Markup
    Language,HTML)通过标签语言来标识要显得的网页中的各种部分。一套准绳,浏览器认识的平整
  • 浏览器按梯次渲染网页文件,然后依据标志符解释和突显内容。但供给小心的是,对于差异的浏览器,对同样标签或许会有不完全同样的批注(兼容性)
  • 静态网页文件增添名:.html
    或 .ht
  • HTML 不是一种编制程序语言,而是一种标识语言
    (markup language)
  • HTML 使用标记标签来陈诉网页

DOCTYPE部分

Doctype告诉浏览器选取什么的html或xhtml规范来深入分析html文书档案

HTML语言须要三个专门的学问,当大家在首先行钦定了<!DOCTYPE
html>的时候,当浏览器去访谈大家的代码的时候就就根据HTML代码里钦点的专门的学业去读取和渲染给我们显示的页面。

为什么要采纳<!DOCTYPE
html>这一个去报告浏览器呢?

DOCTYPE模式:

我们先领悟一下DOCTYPE的格局

  • BackCompat:标准特出格局未张开(或叫奇异格局[Quirks
    mode]、混杂情势)
  • CSS1Compat:标准特别情势已张开(或叫严峻格局[Standards
    mode/Strict mode])

难点发生:

当Netscape4(译注:网景公司最初的浏览器)和IE4(微软公司早先时代的浏览器)完成CSS机制时,并不曾根据W3C建议的正式。Netscape4
提供了不佳的支撑,而IE4
即使接近标准,但依然无法完全正确的支撑典型。纵然IE 5 修复了IE4
多数的主题材料(bugs),可是依然继续CSS完毕中的其余故障(首借使盒模型(box
model)难题)。

为了有限扶助本人的网址在区别的浏览器中都能科学表现,网页开拓者不得不依附各种浏览器的自家的正式来利用CSS。由此大多数网址的CSS实现并未有符合W3C的正统。

只是随着规范一致性别变化得尤其首要,浏览器开拓商不得不面前遭遇叁个不便的取舍:慢慢服从W3C的正规是提升的大方向。不过改换现存CSS的落到实处,完整去依据标准,会使众多网址或多或少受到损害。倘诺浏览器猝然以科学的点子深入分析现成的CSS,陈旧的网址展现必然境遇震慑。

为此登时根据标准会时有发生难点,然而忽略标法规又会维持浏览器大战时(译注:微绵软网景之间的一段竞争)所产生的非常不佳。

杀鸡取卵方案:

  1. 同意网站开拓者能够选取他们所纯熟的方式。
  2. 依然采纳旧式法规展现陈旧的网址。

换句话说,全部的浏览器必要提供二种形式:奇异方式(即包容形式)服务于旧式准则,严苛格局服务周振天规准则。Mac平台的IE浏览器最早完毕那二种形式,Mozilla,
Safari、Opera和Windows平台的IE6也逐个完毕了那三种格局。WIndows平台的IE5和Netscape4则只提供了新奇形式。

选用选拔哪一类方式须要多少个触发器,而
“DOCTYP切换”
则用来此目标。依据标准:任何贰个(X)HTML文书档案必得怀有二个DOCTYPE(译注:DTD(文书档案类型定义)是一组机器可读的条条框框,它们提示(X)HTML文书档案中允许有怎么着,不容许有啥,DOCTYPE就是用来报告浏览器选取哪一类DTD,日常位于(X)HTML文书档案开始注明)用以告诉其余人
这些文书档案的品种风格

  1. 发出于法规浪潮此前的网页并未DOCTYPE注解。由此’未有DOCTYPE’意味着触发古怪方式:既依靠旧式的CSS准则渲染网页。
  2. 反倒,若是开荒者明显知晓包罗DOCTYPE,他们应当知道他们想要怎么办。因而超过八分之四的DOCTYPE注解将触及严刻方式:即基于规范的CSS准则渲染网页。
  3. 另外新的或不解的DOCTYPE将触发严酷方式。

 

 

网页的三结合

我们一向收看的网页平日由3个部分构成:

  • HTML(Hypertext Markup
    Language)
  • CSS(Cascade Style
    Sheets)
  • JavaScript

地点3个分级能够知晓为:视图、表现、行为(HTML可以精通为叁个卡通小人,CSS为它穿上美丽的行头,JavaScript让它变的能够跳舞)

head部分

 

1、Meta(metadata
information)

 提供关于页面包车型客车元音信,例:页面编码、刷新、跳转、针对查找引擎和革新频度的陈述和第一词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="refresh" content="5">  
    <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> 
    <meta name="keywords" content="博客,张岩林,帅哥,">
    <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
    <title>张岩林</title>
    <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  type="image/x-icon">
</head>
<body>

</body>
</html>

1>定义编码格式

<meta charset="UTF-8">  #定义编码为utf-8

2>刷新和跳转页面

<meta http-equiv="refresh" content="5">     # 5秒跳转

<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" />   #跳转至我的博客

3>关键字

驷不及舌字的功效:日常是让爬虫之类的任用程序,当他们在爬你的网址的时候,倘使您至于键字,那么他们会事先把第一字收音和录音到他俩的笔录中,比如百度:假使她们选定之后,他们搜寻你的主要性字的时候,就会找到大家的网站。

<meta name="keywords" content="博客,张岩林,帅哥,">

4>描述

譬喻新浪的陈述如下:

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5>title 

设置标签为张岩林

<title>张岩林</title>

图片 1

6>标签LogoLink

<link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  type="image/x-icon">

图片 2

7>导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css">

8>、Style

  1、在脚下文件中写Css样式

  2、在其它文件中写Css样式类似python的模块导入的方法把Css样式导入到当前文件中应用

9>、Script

  1、在当下文件中写JS

  2、在别的文件中写JS类似python的模块导入的措施把JS导入到当前文件中使用

 

 

HTML 结构

图片 3

  • <!DOCTYPE
    html> 告诉浏览器接Nash么的html也许xhtml来解析html文书档案
  • <html></html>是文书档案的开首标识和终止标志。此成分告诉浏览器其本人是一个HTML
    文书档案,在它们中间是文书档案的头顶<head>和重点<body>。
  • <head></head>元素出现在文书档案的开始部分。<head>与</head>之间的内容不会在浏览器的文书档案窗口呈现,可是中间的要素有万分首要性的含义。
  • <title></title>定义网页标题,在浏览器标题栏显示。 
  • <body></body>之间的文本是可知的网页主体内容

body部分

 

body里面分为两类标签:块级标签和内联标签。

1、块级标签:<p><h1><table><ol><ul><form><div>

2、内联标签:<a><input><img><sub><sup><textarea><span>

块级标签成分的特色
  ① 总是在新行上开端;
  ② 中度,行高以及异地距和内边距都可调控;
  ③ 宽度缺省是它的器皿的百分之百,除非设定三个大幅度。
  ④ 它能够容纳内联成分和另外块成分

内联标签成分的特色
  ① 和其余因素都在一行上;
  ② 高,行高及异地距和内边距不可改动;
  ③ 宽度就是它的文字或图表的上涨的幅度,不可更换
  ④ 内联成分只好容纳文本或然另外内联成分

对行内成分,须求专一如下 
  设置宽度width 无效。
  设置中度height 无效,能够通过line-height来设置。
  设置margin 只有左右margin有效,上下无效。
  设置padding
唯有左右padding有效,上下则不行。注意成分范围是增大了,可是对成分周边的剧情是没影响的。

 1、基本标签

  <hn>:
n的取值范围是1~6; 从大到小. 用来代表标题.

  <p>:
段落标签. 包裹的原委被换行.并且也上下内容之间有一行空白.

  <b>
<strong>: 加粗标签.

  <strike>:
为文字加上一条中线.

  <em>:
文字形成斜体.

  <sup>和<sub>:
上角标 和 下角表.

  <br>:换行.

  <hr>:水平线

   <div><span>

 废话没多少说,直接撸码剖判

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张岩林</title>
</head>
<body>
    <br>
    <hr>
    <h1>张岩林</h1>
    <h2>张岩林</h2>
    <h3>张岩林</h3>
    <h4>张岩林</h4>
    <h5>张岩林</h5>
    <h6>张岩林</h6>
    <hr>
    <p>段落标签1</p>
    <p>段落标签2</p>
    <hr>
    <b>加粗文字方法一</b>
    <br>
    <strong>加粗文字方法二</strong>
    <hr>
    <p>原价:<strike>299 </strike> 现价:10     文字中间加横线</p>
    <p><em>斜体字</em></p>
    <p> 2<sup>n</sup> 上角标</p>
    <p>h<sub>2</sub>o 下角标</p>
    <p>&lt; 小于号</p>
    <p>&gt; 大于号</p>
    <p>&copy; </p>
    <p>&reg;</p>

</body>
</html>

功用如下:

图片 4

2、图形标签<img>

  src:
要呈现图片的路径.

  alt:
图片并没有加载成功时的提醒.

  title:
鼠标悬浮时的唤醒信息.

  width:
图片的宽

  height:图片的高
(宽高七个性情只用一个会活动等比缩放.)

<img src="111426147.jpg" alt="图片加载失败" title="美女">

3、超链接标签(锚标签)<a>:

  href:要连接的能源路线格式如下: href=”http://www.baidu.com” 

  target: _blank :
在新的窗口展开超链接. 框架名称: 在钦定框架中张开连接内容.

  name:
定义三个页面包车型地铁书签.

  用于跳转 href :
#书签字称.

<a href="http://www.cnblogs.com/aylin/p/5608175.html"  target="_blank">猛戳这里</a>

再有一种本页标签跳转,通过定义ID来拓宽查找到剧情

<a href="#a">李白</a>
<div id="a" style="background-color: #197991">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>低头思故乡。</div>

4、列表标签:

  <ul>:
冬日列表

  <ol>:有类别表

         
 <li>:列表中的每一项.

  <dl>
定义列表

         
 <dt> 列表标题

       
   <dd> 列表项

<body>
    <ol>
        <li>无序一</li>
        <li>无序二</li>
        <li>无序三</li>
        <li>无序四</li>
    </ol>
    <ul>
        <li>有序一</li>
        <li>有序二</li>
        <li>有序三</li>
        <li>有序四</li>
    </ol>
    </ul>
    <dl>
        <dt>第一章</dt>
        <dd>1.1</dd>
        <dd>1.2</dd>
        <dd>1.3</dd>
        <dd>1.4</dd>
    </dl>

功能如下:

图片 5

5、表格标签:
<table>:

  border:
表格边框.

  cellpadding:
内边距

  cellspacing:
外边距.

  width: 像素
百分比.(最棒通过css来设置长宽)

  <tr>: table
row

         
 <th>: table head cell

       
   <td>: table data cell

  rowspan:
单元格竖跨多少行

  colspan:
 单元格横跨多少列(即统一单元格)

  <th>: table
header <tbody>(有的时候用): 为表格进行分区.

图片 6图片 7

    <table border="" cellspacing="1" cellpadding="20" style="text-align: center;height: 100px">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>班级</td>
            <td>数学</td>
            <td>语文</td>
            <td>英文</td>
        </tr>
        <tr>
            <td>001</td>
            <td>张岩林</td>
            <td>S1</td>
            <td>120</td>
            <td>109</td>
            <td>120</td>
        </tr>
                <tr>
            <td>001</td>
            <td>张林</td>
            <td>S1</td>
            <td>100</td>
            <td>19</td>
            <td>100</td>
        </tr>
        <tr>
            <td>001</td>
            <td>小康</td>
            <td>S1</td>
            <td>89</td>
            <td>100</td>
            <td>10</td>
        </tr>
                <tr>
            <td>001</td>
            <td>小虎</td>
            <td>S1</td>
            <td>10</td>
            <td>19</td>
            <td>12</td>
        </tr>
    </table>

code

作用如下:

图片 8

报表中还应该有合併单元格:

    <table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td colspan="3">1 2 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6 9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>

        </tr>
    </table>

图片 9

6、表单标签(django)<form>:

     
表单用于向服务器传输数据。

     
表单能够包括 input
元素
,举个例子文本字段、复选框、单选框、提交按键等等。

     
表单仍能蕴涵textarea、select、fieldset和 label
元素

 

1>.表单属性

  HTML
表单用于吸纳不相同类型的顾客输入,客户提交表单时向服务器传输数据,进而达成客商与Web服务器的竞相。表单标签,
要提交的装有剧情都应有在该标签中.

  action:
表单提交到哪.
常常针对服务器端多少个主次,程序接收到表单提交过来的多少(即表单成分值)作相应管理,比如https://www.sogou.com/web  

  method:
表单的提交情势 post/get 暗许取值 就是 get(信封)

  get:
1.交由的键值对.放在地址栏中url后边. 2.安全性绝对非常糟糕.
3.对交付内容的长短有限制.

  post:1.付出的键值对
不在地址栏. 2.安全性绝对较高. 3.对交付内容的尺寸理论上最佳制.

  get/post是大面积的二种诉求格局.

2>.表单成分

     <input>    
type:     text 文本输入框

     password
密码输入框

     radio
单选框

     checkbox 多选框
 

     submit 提交开关  
         

     button
按键(必要合营js使用.) button和submit的分别?

     file
提交文件:form表单须求加上属性enctype=”multipart/form-data”

图片 10图片 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知乎</title>

</head>
<body>
        <div style="background-color: aquamarine;height: 590px;width: 292px; margin: 0 auto;margin-top: 6%">
            <img src="QQ图片20160624092733.png">
            <br>
            <p style="text-align: center">与世界分享你的知识、经验和见解</p>
            <hr>
            <form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
                <p> 用 户 <input type="text" name="username"></p>
                <p> 密 码 <input type="password" name="passwd"></p>
                <hr>
                <p> 性 别 男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman"></p>
                <hr>
                <p> 爱 好
                    篮球<input type="checkbox" name="lanqiu" value="篮球">
                    足球<input type="checkbox" name="zuqiu" value="足球">
                    排球<input type="checkbox" name="paiqiu" value="排球">
                    台球<input type="checkbox" name="taiqiu" value="台球">
                </p>
                <hr>
                <br>
                城 市
                <select name="language"  >
                    <optgroup label="河北省">
                        <option value="保定市">保定市</option>
                         <option value="邯郸市">邯郸市</option>
                         <option value="承德市">承德市</option>
                    </optgroup>
                    <optgroup label="河南省">
                         <option value="洛阳市">洛阳市</option>
                         <option value="信阳市">信阳市</option>
                         <option value="郑州市">郑州市</option>
                    </optgroup>
                    <br>
            </select>
                <hr>
                <p style="text-align: center">备 注<textarea name="qq" style="height: 60px;width: 220px"></textarea></p>
                <p><input type="file" name="file_name" ></p>
                <hr>
                <p style="text-align: center"><input type="button" value="提交"> <input type="button" value="猛戳这里"></p>

            </form>
        </div>
<table >
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

</body>
</html>

from表单

功用有一点low,讲究看吗

图片 12

 

 上面我就来分析一下每种代码的意思:

图片 13

 

HTML 标签格式

图片 14

标签的语法:

<标具名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签字>
<标签名
属性1=“属性值1” 属性2=“属性值2”…… />

常用标签


<!DOCTYPE html>标签

<!DOCTYPE>
评释位于文书档案中的最前面包车型地铁位置,处于 <html>
标签在此以前。此标签可告知浏览器文书档案使用哪个种类 HTML 或 XHTML 规范。

功效:声明文书档案的深入分析类型(document.compatMode),防止浏览器的奇异情势。

document.compatMode:

  1. BackCompat:离奇格局,浏览器接纳自身的稀奇古怪格局深入分析渲染页面。
  2. CSS1Compat:标准情势,浏览器选拔W3C的标准解析渲染页面。

以此天性会被浏览器度和胆识别并利用,可是借使您的页面未有DOCTYPE的宣示,那么compatMode默许正是BackCompat

<head>内常用竹签

meta标签

meta介绍: 
  <meta>成分可提供关于页面包车型客车元新闻(meta-information),针对查找引擎和换代频度的描述和重大词。
  <meta>标签位于文书档案的底部,不分包别的内容。
  <meta>提供的新闻是顾客不可见的

meta标签的组成:meta标签共有二日性情,它们各自是http-equiv属性和name
属性,分歧的质量又有例外的参数值,这一个分歧的参数值就贯彻了不一样的网页成效。 

(1)name属性:
主要用来描述网页,与之相应的属性值为content,content中的内容根本是方便人民群众搜索引擎机器人查找音讯和归类音讯用的.

  <!--关键字设定,便于搜索引擎搜寻-->
  <meta name="keywords" content="IT, python, html, css">
  <!--对于页面的描述  -->
  <meta name="description" content="python学习之路" >

 (2)http-equiv属性:相当于http的公文头成效,它能够向浏览器传回一些得力的音信,以帮助科学地出示网页内容,与之对应的属性值为content,content中的内容其实正是逐条参数的变量值。
 

<!--设置页面刷新时间, 每两秒刷新一次 -->
  <meta charset="UTF-8" http-equiv="refresh" content="2">

<!--设置指定时间跳转页面,如下 2秒后跳转至百度-->
  <meta charset="UTF-8" http-equiv="refresh" content="2;url=http://www.baidu.com">

<!--设置兼容模式-->
  <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

任何标签

    <!--title-->
    <!--定义浏览器窗口标题-->
    <title> HTML</title>

    <!--base-->
    <!--定义页面上所有链接的默认地址或默认目标-->
    <base href="xxxxx">

    <!--link-->
    <!--导入.css的文件里的样式规则(与css结合使用)-->
    <link rel="stylesheet" href="xxx.css">
    <!--定义浏览器窗口的头像-->
    <link rel="icon" href="http://www.jd.com/favicon.ico"> 

    <!--script-->
    <!--定义脚本(与 javascript 结合)-->
    <script src="xxx.js"> </script>

    <!--style-->
    <!--直接定义css规则-->
    <style> </style>

<body>常用标签

body是主要内容的寄放地

标签分类

块级标签
块级成分在浏览器突显时,经常会以新行来早先(和了结)。

内联标签
内联成分在展现时日常不会以新行初阶。

图片 15图片 16

<!--格式-->
<hr>                             定义水平线
<h1></h1> to <h6></h6>           定义HTML标题
<p></p>                          定义一个段落
<br>                             换行
<b></b> and <strong></strong>    定义粗体文本
<em></em> and <i></i>            定义斜体文本
<strike></strike> and <s></s>    定义删除线
<sub></sub>                      定义下标文本
<sup></sup>                      定义上标文本
<u></u>                          定义下划线

<!--图像-->
<img src="url" alt="图片 17">           定义图像

<!--链接-->
<a href=""></a>                  定义一个链接
<link rel="stylesheet" href="">  定义文档与外部资源的关系
<nav></nav>                      定义导航链接

<!--列表-->
<ul></ul>                        定义一个无序列表
<ol></ol>                        定义一个有序列表
<li></li>                        定义一个列表项
<dl></dl>                        定义一个定义列表
<dt></dt>                        定义一个定义列表中的项目
<dd></dd>                        定义列表项目中的描述

<!--表格-->
<table></table>                  定义一个表格
<caption></caption>              定义表格标题
<th></th>                        定义表头单元格
<tr></tr>                        定义表格中的行
<td></td>                        定义单元

<!--样式-->
<div></div>                      定义文档中的节 块级
                    定义文档中的节 内联

<!--表单-->
<select name="" id=""></select>  定义选择列表
<input type="text">              定义输入控件
<label for=""></label>           定义input元素的标注
<textarea name="" ></textarea>   定义多行输入控件
<from></from>                    定义一个HTML表单,用于用户输入
<option value=""></option>       定义选择列表中的选项
<button></button>                定义按钮

常用标签

<div> and <span>

<div></div>

<div>只是二个块级成分,并无实际的意思。首要通过CSS样式为其予以差别的展现. 
<span></span>:
<span>表示了内联行(行内成分),并无实际的含义,主要通过CSS样式为其予以分裂的表现.

这多个成分是特意为定义CSS样式而生的。

图片 18

图表标签(img)

 图片 19

'''
src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

'''

超链接标签(锚链接)<a></a>

什么是超级链接?
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上
的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

图片 20图片 21

什么是URL?
URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分:为协议:http://、ftp://等 
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。

什么是URL?

# 跳转页面

 <!--在当前页面直接打开跳转页面  -->
  <a href="http://www.cnblogs.com/wangyuanming/">总有问题刁难朕博客</a>

  <!--打开一个新窗口,跳转页面-->
  <a target="_blank" href="http://www.cnblogs.com/wangyuanming/">总有问题刁难朕博客</a> 

  <!--锚点(页面内定位的效果)-->
  <!-- 跳转至锚点标签 -->
    <a href="#anchor">第三章</a>
    <div style="height: 1000px"> 为了达到跳转效果在跳转点和锚点之间加了1个1000px的块级标签</div>
    <!-- 定义锚点标签/id="anchor"-->
    <a name="anchor">第三章</a>

列表标签

<ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

图片 22图片 23

<!--无序列表-->
<ul type="square">
    <li> one</li>
    <li> two</li>
    <li>three</li>
</ul>

<!--有序列表-->
<ol>
    <li> one</li>
    <li> two</li>
    <li>three</li>
</ol>

<!--定义列表-->
<dl>
    <dt>one</dt>
    <dd>two</dd>
</dl>

例子

报表标签<table>

报表概念
报表是叁个二维数据空间,二个表格由若干行组成,贰个行又有多少单元格组成,单元格里能够分包文字、列表、图案、表单、数字符号、预置文本和任何的报表等剧情。
报表最重大的目标是显得表格类数据。表格类数据是指最相符组织为表格格式(即按行和列组织)的数据。

报表由 <table>
标签来定义。种种表格均有若干行(由 <tr>
标签定义),每行被细分为多少单元格(由 <td> 标签订义)。字母 td
指表格数据(table
data),即数据单元格的内容。数据单元格能够蕴含文本、图片、列表、段落、表单、水平线、表格等等。

<!--基本结构-->
<table border="1">
         <tr>
                <th>标题</th>
                <th>标题</th>
         </tr>

         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>   

# 属性

<tr>: table row          代表行

<th>: table head cell  与td作用一样,只是字体加黑

<td>: table data cell   单元格内容

<caption>:                 定义表格标题

# table 属性:

    border:                    表格边框.

    cellpadding:             内边距

    cellspacing:             外边距.

    width:                    像素 百分比.(最好通过css来设置长宽)

    rowspan:                单元格竖跨多少行

    colspan:                 单元格横跨多少列(即合并单元格) 

图片 24图片 25

<table border="1" cellpadding="2px" cellspacing="2px">
      <caption>班级课程表</caption>
      <tr>
        <th>项目</th>
        <th colspan="5">上课</th>
        <th colspan="2">休息</th>
      </tr>
      <tr>
        <th>星期</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
      </tr>
      <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
      </tr>
      <tr>
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机</td>
        <td>英语</td>
        <td>计算机</td>
      </tr>
      <tr>
        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>计算机</td>
      </tr>           t
      <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="2">休息</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
      </tr>

    </table>

例子

表单标签<from>

 功能:表单用于向服务器传输数据,进而达成客户与Web服务器的交互

     
表单能够蕴涵input种类标签,譬喻文本字段、复选框、单选框、提交按键等等。

     
表单还足以包蕴textarea、select、田野(field)set和 label标签。

表单属性

     action:
表单提交到哪.日常针对服务器端三个主次,程序接收到表单提交过来的数目(即表单成分值)作相应管理,比方https://www.sogou.com/web

     method:
表单的提交格局 post/get默许取值就是get

表单成分

基本概念:
HTML表单是HTML成分中较为复杂的一些,表单往往和本子、动态页面、数据管理等功效相结合,因而它是制作动态网站很关键的开始和结果。
表单日常用来搜聚客商的输入新闻
表单专业原理:
访谈者在浏览有表单的网页时,可填写要求的音讯,然后按有些按键提交。那几个消息通过Internet传送到服务器上。 
服务器上非常的前后相继对那几个数据开展管理,假如有荒唐会回去错误音信,并须要勘误错误。当数码全部准确后,服务器反馈贰个输入完成的音信

<input>连串标签

图片 26图片 27

<1> 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别?

             file 提交文件:form表单需要加上属性enctype="multipart/form-data" 

            上传文件注意两点:

                     1 请求方式必须是post
                     2 enctype="multipart/form-data"

 <2> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别:name属性是和服务器通信时使用的名称;
           而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

                type="button", "reset", "submit" - 定义按钮上的显示的文本

                type="text", "password", "hidden" - 定义输入字段的初始值

                type="checkbox", "radio", "image" - 定义与输入相关联的值


checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

表单类型与天性

<!--文本域-->
<form>
  <div>*用户名<input type="text" name="user"></div>
  <div>*密码<input type="text" name="password"></div>
</form>

图片 28

<!--密码字段-->
<!--type:text, 用户输入是以明文显示的。如果输入密码,明文会很不安全,这时候就需要用到type: password类型了-->
<form>
  <div>*用户名<input type="text" name="user"></div>
  <div>*密码<input type="password" name="password"></div>
</form>

 图片 29

<!--单选按钮 (radio buttons)-->
<form action="">
  <input type="radio" name="sex" value="male">女 <br>
  <input type="radio" name="sex" value="female">男
</form>


<!--复选按钮(checkboxes)-->
<form action="">
  <input type="checkbox" name="choice" value="A">A <br>
  <input type="checkbox" name="choice" value="B">B <br>
  <input type="checkbox" name="choice" value="C">C <br>
  <input type="checkbox" name="choice" value="D">D
</form>

 图片 30

<!--提交按钮 (submit button) 用于登录等等..-->
<form action="">
  <div>*用户名<input type="text" name="user"></div>
  <div>*密码<input type="password" name="password"></div>
  <div><input type="submit" value="登录"></div>
</form>

图片 31

<!--<label> 标签为 input 元素定义标注(标记)。-->
<!--label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。-->
<!--<label> 标签的 for 属性应当与相关元素的 id 属性相同。-->
<!--"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值-->
<form action="">
  <label for="label_user">名字</label>
  <input type="text" id="label_user" name="user"> <br>
  <label for="label_pwd">密码</label>
  <input type="password" id="label_pwd" name="pwd">

</form>

<!--选中本地文件-file-->
<form action="">
  <input type="file" name="" id="">

</form>

 图片 32

<!--<button> 标签定义一个按钮。-->
<!--在 <button> 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。-->
<!--请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。-->
<form action="">
  <input type="button" value="button">
</form>

<!--重置按钮reset-->
<!--清空所输入的内容-->
<form action="">
  <input type="reset">
</form>

select连串标签

<select> 成分用来创制下拉列表。

<select>
成分中的 <option> 标签署义了列表中的可用选项。

<select> 成分是一种表单控件,可用于在表单中收受客户输入。

<select> 下拉选标签属性
    name:表单提交项的键.
    size:显示的选项个数
    multiple:multiple 该属性支持多选

   <optgroup>为每一项加上分组
     label: 为选项组规定描述。

   <option> 下拉选中的每一项 属性:
     value:表单提交项的值.
     selected: selected下拉选默认被选中

图片 33图片 34

<!--单选-->
<select name="" id="">
  <option value=""> 河南</option>
  <option value=""> 河北</option>
  <option value=""> 海南</option>
  <option value=""> 海北</option>
  <option value=""> 山东</option>
  <option value=""> 山西</option>
  <option value=""> 广东</option>
  <option value=""> 广西</option>
</select>

单选

图片 35图片 36

<!--多选-->
<select name="" id="" multiple>
  <option value=""> 河南</option>
  <option value=""> 河北</option>
  <option value=""> 海南</option>
  <option value=""> 海北</option>
  <option value=""> 山东</option>
  <option value=""> 山西</option>
  <option value=""> 广东</option>
  <option value=""> 广西</option>
</select>

多选

图片 37图片 38

<select name="" id="">
  <option value="" selected>--</option>
  <optgroup label="--南北--"></optgroup>
  <option value=""> 河南</option>
  <option value=""> 河北</option>
  <option value=""> 海南</option>
  <option value=""> 海北</option>
  <optgroup label="--东西--"></optgroup>
  <option value=""> 山东</option>
  <option value=""> 山西</option>
  <option value=""> 广东</option>
  <option value=""> 广西</option>
</select>

optgroup分组

多行文本框<textarea>

<form action="">
<textarea name="" cols="宽度" rows="高度" placeholder="描述信息...">
</textarea>

图片 39图片 40

# 1. textarea标签不要缩进
如:
<textarea placeholder="描述信息...">
</textarea>

# 2. textarea开始与结束标签之间不要有空行和换行
如:
<textarea placeholder="描述信息..."></textarea>

placeholder属性在textarea标签失效消除办法?

 图片 41

 fieldset标签

<田野先生set>
标签能够将表单内的连带要素分组。

<田野先生set>
标签会在相关表单成分周边绘制边框。

<fieldset>   
  <legend align="left|right|top|bottom"></legend>  : 属性规定 fieldset 中标题的对齐方式。


</fieldset>

图片 42图片 43

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

例子

相关文章