内容部分&lt,那样就足以让浏览器依据标记语言的平整去解释它

HTML

HTML解释:

HTML是英文Hyper Text
Mark-up
Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。也等于概念统一的规则(W3C),大家都来遵循他,那样就能够让浏览器依照标记语言的条条框框去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式,显示给用户!

网页的整合:

三个网页一般由两有个别构成即:

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

HTML负责描述网页的布局和内容(如题目,导航栏等) CSS则承担网页的显现(外观)(如背景颜色,字体样式等)。

<head>和</head>之间的内容,是元音讯和网站的题目元消息一般是不显得出来的,不过记录了你那几个HTML文件的大队人马卓有成效的音信
<body>和</body>之间的剧情,是浏览器展现出来的,用户观察的页面效果。也正是说这里是网页的核心。也正是body的身体之意
<html></html>是验证这些是2个网页。告诉浏览器那个网页的发端和终结。他带有了后来的多少个成分。<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),但是依旧三番7遍CSS实现中的其它故障(主倘使盒模型(box
model)难点)。

为了保障自个儿的网站在分化的浏览器中都能科学彰显,网页开发者不得不依据种种浏览器的自个儿的科班来利用CSS。因而超过四分之二网站的CSS实现并未符合W3C的正儿八经。

然而随着标准一致性别变化得越来越首要,浏览器开发商不得不面临1个困难的挑选:逐步遵从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将触及严苛情势。

 

 

网页的构成

大家平日看看的网页一般由二个部分组成:

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

上边三个分级能够清楚为:视图、表现、行为(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>标签图标Link

<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

  壹 、在此时此刻文件中写Css样式

  贰 、在别的文件中写Css样式类似python的模块导入的点子把Css样式导入到当前文件中选择

9>、Script

  壹 、在时下文件中写JS

  贰 、在别的文件中写JS类似python的模块导入的格局把JS导入到当前文件中利用

 

 

HTML 结构

图片 3

  • <!DOCTYPE
    html> 告诉浏览器选用什么的html可能xhtml来解析html文书档案
  • <html></html>是文书档案的始发标记和了结标记。此成分告诉浏览器其自个儿是三个HTML
    文书档案,在它们之间是文书档案的底部<head>和主导<body>。
  • <head></head>成分出现在文书档案的启幕部分。<head>与</head>之间的剧情不会在浏览器的文书档案窗口展现,可是里面包车型客车成分有越发重要性的意义。
  • <title></title>定义网页标题,在浏览器标题栏彰显。 
  • <body></body>之间的文本是可知的网页主体内容

body部分

 

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

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

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

块级标签成分的表征
  ① 总是在新行上开端;
  ② 高度,行高以及外市距和内边距都可控制;
  ③ 宽度缺省是它的器皿的百分之百,除非设定1个肥瘦。
  ④ 它能够包容内联成分和其它块成分

内联标签元素的风味
  ① 和别的因素都在一行上;
  ② 高,行高及异地距和内边距不可变更;
  ③ 宽度正是它的文字或图表的肥瘦,不可变更
  ④ 内联成分只好容纳文本恐怕其余内联元素

对行内成分,供给注意如下 
  设置宽度width 无效。
  设置中度height 无效,能够通过line-height来设置。
  设置margin 唯有左右margin有效,上下无效。
  设置padding
只有左右padding有效,上下则不算。注意成分范围是增大了,然则对成分周围的内容是没影响的。

 一 、基本标签

  <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

贰 、图形标签<img>

  src:
要展现图片的路径.

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

  title:
鼠标悬浮时的唤起消息.

  width:
图片的宽

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

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

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

  href:要延续的能源路径
格式如下: href=”http://www.baidu.com” 

  target: _blank :
在新的窗口打开超链接. 框架名称: 在钦赐框架中开辟连接内容.

  name:
定义3个页面包车型大巴书签.

  用于跳转 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>

④ 、列表标签:

  <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

⑤ 、表格标签:
<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

陆 、表单标签(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>只是3个块级元素,并无实际的意思。重要透过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>

报表概念
报表是1个二维数据空间,叁个表格由若干行组成,一个行又有几多单元格组成,单元格里能够分包文字、列表、图案、表单、数字符号、预置文本和别的的报表等剧情。
报表最要紧的目标是显得表格类数据。表格类数据是指最契合协会为表格格式(即按行和列组织)的数码。

报表由 <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、田野先生set和 label标签。

表单属性

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

     method:
表单的提交方式 post/get暗中同意取值正是get

表单成分

基本概念:
HTML表单是HTML成分中比较复杂的有的,表单往往和本子、动态页面、数据处理等效用相结合,由此它是塑造动态网站很重点的始末。
表单一般用来采访用户的输入新闻
表单工作原理:
访问者在浏览有表单的网页时,可填写须要的音信,然后按有个别按钮提交。这么些音讯通过Internet传送到服务器上。 
服务器上特别的先后对那个多少举行处理,倘若有荒唐会回到错误音讯,并需求考订错误。当数码完整无误后,服务器反馈3个输入达成的音信

<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标签

<田野(field)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>

例子

相关文章

网站地图xml地图