Python 三十二、HTML

HTML

HTML：htyper text markup language 超文本标记语言

超文本： 网页内可以包含 图片、连接、甚至音乐、程序等非文字元素。

标记语言：标记（标签）构成的语言

 

静态网页：静态的资源。例如xxx.html

动态网页：动态资源。html 代码根据用户请求动态加载生成的。

 

HTML 文档树形结构

标签

  • 使用尖括号包括的单词。 
  • 标签不区分大小写
  • 标签分为2个部分。开始标签<a> 和结束标签</a> . 两个标签之间的部分叫做标签体。
  • 有些标签功能比较简单，使用一个标签即可。这种标签叫做自闭和标签。例如</br> <hr/><input/><img/>
  • 标签可以嵌套<div><p></p></div>

标签属性

  • 标签以键值对的形式出现，例如 name="you",  calss = 'head_class'
  • 属性只能出现在开始标签或者自闭和标签中。
  • 属性名字全部小写。 属性值必须 使用双引号或者单引号。
  • 如果属性值和属性名一致。可以简写属性名称即可。例如readonly。  name="name"   ==> name

 

<!DOCTYPE html>标签

  • <!DOCTYPE html>标签 必须是文档的第一行。 所有的浏览器都支持。 它不是html的标签，是告诉浏览器使用哪个版本的html。
  • 没有结束标签
  • 大小写不敏感
  • 默认使用W3C

 

head标签

  <meta> : 常用属性有2个http-equiv 和name。不同的属性 有不同的参数值。

1： http-equiv : http的开头，用于向浏览器传递一些信息。 以帮助正确的显示网页

     与之对应的属性为content。 content的内容为属性的值

     下面的意思是5秒钟刷新一次。

    <meta charset="UTF-8" http-equiv = "refresh" content="5">

指定文档的字符格式

    <meta http-equiv = "content-Type" content = 'text/html'; charset="UTF-8" >

 

值描述
content-type 规定文档的字符编码。

实例：

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style 规定要使用的预定义的样式表。

实例：

<meta http-equiv="default-style" content="the document's preferred stylesheet">

注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
refresh 定义文档自动刷新的时间间隔。

实例：

<meta http-equiv="refresh" content="300">

注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。在 W3C's Web 内容可访问性指南 中使用 "refresh" 会到导致失败。

 

 

    2：name

     展示针对网页的描述。 下面第一个显示 网页被检索的关键字。第二个展示网页被检索的时候展示的描述信息。

    <meta name = "keywords" content = "搜索关键字，html，meta，meta属性" >
    <meta name = "description" content = '网页被检索显示的内容描述'>

 

title 标签

    网页标题

link 标签

   使用外部的各种资源。有各种属性。其中rel 规定当前文档和被连接文档之间的关系。rel = “icon”  显示在标题上的icon

<title>网页标题名称</title>
<link rel="icon"  href="http://static.cnblogs.com/favicon.ico">

 

body标签

1、基本标签

     

<hn>: 标题大小，最小h6.

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

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

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

<em>: 文字变成斜体.

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

<br>:换行.

<hr>:水平线

 <div><span>

 1 <h1>文本大小</h1>
 2 <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.</p>>
 3 <b>加粗</b>
 4 <strong>: 加粗标签</strong>>
 5 <strike>: 为文字加上一条中线.</strike>>
 6 <em>: 文字变成斜体.</em>>
 7 2<sup>2</sup>>
 8 3<sub>2</sub>> #: 上角标 和 下角表.
 9 sssssssss<br>:换行sssssssssssss.</br>
10 <hr> 添加一个水平线

块级标签 block

  •   影响一个区域，独立一行
  •   缺省度是容器的100%
  •   可以容纳块级标签和内联标签
  •   高、宽可改变。

 

内联标签 inline

  •  和其他的标签在同一行
  •  高、行高、宽度均不可改变。无内边距和外边距
  • 只能内嵌其他内联标签和文本

inline-block

内联-高度-宽度

 

2、图形标签

img 属性

  • src: 连接图片地址
  • alt：当找不到图片的时候，显示的文本
  • width：图片宽度
  • height：图片高度
  • title：悬浮在图片上的文本
<img src = '12.jpg' alt = 'lost' width = 100 height = 200  title = 'test'>

3、超链接标签<a>

  •  href: 要连接的资源地址
  • target：_blank 在新窗口打开。 默认在当前页面。
  • name：新的页面名称
  •  在当前页面id = abc 
<a href = "#abc">第二章</a>

 

4、列表标签

  • 有序列表 ol
  • 无序列表 ul
  • 自定义列表 dl
1 <dl>
2     <dt>河北</dt>
3     <dd>唐山</dd>
4     <dd>沧州</dd>
5 
6     <dt>河南</dt>
7     <dd>登州</dd>
8     <dd>嵩山</dd>
9 </dl>

 

5、表格标签 table

表格属性：

border：表格边框

cellpadding：内边距

cellspacing：外边距

width：宽度

rowspan： 合并横向单元格

colspan：合并竖向单元格

表格元素

      thead

tr

td

tbody

 

 

 1 <table border = 2px >
 2          <thead>
 3               <tr>
 4                     <td>第一列</td>
 5                     <td>第二列</td>
 6                     <td>第三列</td>
 7               </tr>
 8          </thead>
 9         <tbody>
10          <tr>
11              <td colspan="1">1,2</td>
12 
13              <td>3</td>
14          </tr>
15             <tr>
16              <td>4</td>
17              <td>5</td>
18              <td>6</td>
19          </tr>
20         <tr>
21              <td>7</td>
22              <td>8</td>
23              <td>9</td>
24          </tr>
25         </tbody>
26 </table>

 

6、表单form

表单用于接口用户输入，向服务器传输数据。

 

表单属性：

action： 表单提交到哪里。一般指向服务器端一个程序。程序接收到表单提交过来的数据在进行相应的处理。

method：表单提交方式。

   get： 提交的键值对显示在地址中。比较直观。安全性比较差。 且对内容有长度限制。 常用来在查询请求

   post： 提交的键值对不显示在地址栏中。比较安全，长度无限制。常用来做增、改请求。

 

表单元素

input

  type 

  • text    
  • password
  • radio
  • checkbox
  • submit
  • button
  • file。 如果使用file，需要在form的属性上添加 enctype="multipart/form-data"

 name

    表单元素的键值对的名称 。 name在和服务器传递信息的时候使用。id 是浏览器端使用的名称，该属性主要是为了方便客户端变成。 

 value

    表单元素的键值对的数值。和name一起使用，传递给服务器。

1    用户名   <input type = 'text'  name = "username"  value = '默认值'>
2     男 <input type = radio name = 'sex' value = 1>
3     女 <input type = radio name = 'sex' value = 2>
4 
5     <p><input type = "submit" > </p>
6     <p><input type = "file"></p>

select

  •  name：下拉框名称
  • size：选项个数
  • multipe：可以选择多个选项
  • option：每一个选项
  • optgroup：选项分组
  • <select name ="language" multiple = 'multiple'>
  • <option value = "1">java</option>
  • <option value = "2">python</option>
  • </select>

textarea

  •  name：表单提交项的键值
  • cols：文本域默认有多少列
  • rows：文本域默认有多少行

label：文本标签

  点击到标签上，光标自动的fous 到文本框中

  • <label>
  • <label for = 'aaa'>姓名</label>
  • <input id = 'aaa' type = 'text'>
  • </label>

fieldset

  文本域

  • <fieldset>
  • <legend>登陆</legend>
  • <input type = 'text'>
  • </fieldset>

readonly: 只读  readonly的属性和值相同，所以只写 readonly即可

 disabled: 所用input均可用

 

 

 

posted @ 2016-07-30 13:43  咖啡茶  阅读(114)  评论(0)    收藏  举报