HTML基础做出属于自个儿的完善网页

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告诉浏览器采Nash么的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。因而当先1/2网址的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,他们相应通晓他们想要如何做。由此超越58%的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> 告诉浏览器选取什么的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标签

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

例子