网页的咬合,内容部分&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>是验证那个是一个网页。告诉浏览器这些网页的启幕和完工。他饱含了后来的八个要素。<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>标签图标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

  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>

块级标签元素的特点
  ① 总是在新行上起来;
  ② 中度,行高以及外地距和内边距都可决定;
  ③ 宽度缺省是它的容器的100%,除非设定一个升幅。
  ④ 它可以包容内联元素和其他块元素

内联标签元素的特征
  ① 和任何因素都在一行上;
  ② 高,行高及异地距和内边距不可改变;
  ③ 宽度就是它的文字或图片的宽度,不可改变
  ④ 内联元素只可以容纳文本或者其余内联元素

对行内元素,须求专注如下 
  设置宽度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、fieldset和 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标签

<fieldset>
标签可以将表单内的相关因素分组。

<fieldset>
标签会在相关表单元素周围绘制边框。

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

例子

相关文章