python基础-第十篇-10.1HTML基础

  • htyper text markup language 即超文本标记语言
  • 超文本:就是指页面内可以包含图片、链接,甚至音乐,程序等非文字元素
  • 标记语言:标记(标签)构成的语言
  • 网页==HTML文档,由浏览器解析,用来展示的
  • 静态网页:静态资源,如:xxx.html
  • 动态网页:html代码有某种开发语言根据用户请求动态生成的

标签规则

  1. 是由一对尖括号包裹的单词构成,例如:<html> 所有标签中的单词不可能以数字开头
  2. 标签不区分大小写,<html>和<HTML>,推荐使用小写
  3. 标签分为两部分:开始标签<a> 和 结束标签</a>,两个标签之间的部分,我们叫做标签体
  4. 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如:<br/><hr/><input/><img/>
  5. 标签可以嵌套,但是不能交叉嵌套,<a><b></a></b>

标签属性

  1. 通常是以键值对形式出现的,例如:name = "nick"
  2. 属性只能出现在开始标签 或 自闭和标签中
  3. 属性名字全部小写,属性值必须使用双引号或单引号包裹
  4. 如果属性值和属性名完全一样,直接写属性名即可,例如 readonly

 

<head>标签

  <title>

<title>你好明天</title>

 

  <base/>  标签为页面上的所有链接规定默认地址或默认目标

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/>
 7     <base target="_blank" />
 8 </head>
 9 <body>
10  
11 <img src="o_s.png" alt="图片加载失败。。。"/>
12 <a href="http://cnblogs.com/suoning/">nick blogs</a>
13  
14 </body>
15 </html>
16  
17 # 上面这段代码中,<img>标签的src属性是一个相对路径,因为<head>中通过base标签设置了链接的默认地址,
18 所以img的src实际的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
19 同样的,<a>中只是指定了href,并未指定target属性,所以也会使用base中设置的target属性的值。
View Code

 

  <link/>  引用外部文档,常见于引用外部样式。重要属性有三个:rel,href,type

  • rel  规定文档与被链接文档之间的关系
  1. rel = “dns-prefetch”  预先解析缓存文档中使用的域名,目的是为了提高网页访问速度,使用场景:在一个网页频繁还是用其他域名资源时。
  2. rel = “shortout icon”或rel = “icon”   在收藏或标题栏上用于显示的图标。注意:IE浏览器只支持ico格式,为了兼容IE,图片文件采用ico格式
  3. rel = “stylesheet”  引用外部样式表
  4. rel = “nofollow”  用于指示搜索引擎不要追踪(爬虫抓取),减少垃圾链接。用于<a>标签,使用场景:网页不被信任或是不希望被搜索引擎录入的网站
  •  href  资源路径(相对路径/绝对路径)
  • type  规定被连接文档的MIME类型,用于明确文件的打开方式,例如:ico文件  image/x-icon
<link rel="icon" href="http://www.jd.com/favicon.ico">

 

  <meta/>   定义关于HTML文档的元数据。重要的属性有三个:http-equiv、name、content

  • http-equiv  把content属性值关联到http头部
  1. Content-Type(浏览器接收的文档类型,一般是text/html)
  2. refresh(网页刷新,以秒为单位)
  3. expires(设置网页到期时间,一旦过期,必须到服务器上重传)
    <meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
    <meta http-equiv="Refresh" content="2">
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
    <meta http-equiv="expires" content="6 Jun 2016"/>
  •  name  把content属性关联到一个名称
  1. keywords(搜索关键字,用于搜索引擎抓取信息的显示)
  2. description(搜索到网站后显示的网页内容简述)
  3. author(站点制作者信息)
  4. generator(用以说明生成工具)
<meta name="keywords" content="搜索关键字">
<meta name="description" content="简要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以说明生成工具">
  • content  定义与http-equiv或那么属相相关信息,是必要的属性

 

<body>标签

  标签分类:内联标签和块级标签

  • 块级标签:<p> <h1> <table> <ol> <ul> <form> <div>
  • 内联标签:<a> <input> <img> <sub> <sup> <textarea> <span>

block(块)元素的特点:

  1. 总是在新行上开始
  2. 高度、行高以及外边距和内边距都可控制
  3. 宽度缺省是它的容器的100%,除非设定一个宽度
  4. 可以容纳内联元素和其他块元素

inline(内联)元素的特点:

  1. 和其他元素都在一行上
  2. 高,行高及外边距和内边距不可改变
  3. 宽度就是它的文字或图片的宽度,不可改变
  4. 内联元素只能容纳文本或其他内联元素

对行内元素,需要注意如下:

  1. 设置宽度width无效
  2. 设置高度height无效,可以通过line-height来设置
  3. 设置margin 只有左右margin有效,上下无效
  4. 设置padding,只有左右padding有效,上下无效。注意元素范围是增大了,但是对元素周围的内容是没影响的

  基本标签

  • <h1>~<h6>  标题标签
  • <p>  段落标签,包裹的内容被换行,并且也上下内容之间有一行空白,其中style = “text-indent:2em”可以设置样式为首行缩进两个字符,另外<blockquote></blockquote>可以用来设置整个段落的缩进。
  • <b><strong>  加粗标签
  • <strike>  为文字加上一条中线
  • <u>  文字下方加下划线
  • <em><i>  文字变成斜体
  • <sup>he <sup>  上角标 和 下角标
  • <br>  换行
  • <hr>  水平线
  • <div>  块级标签。块常用于布局,行常用于显示内容。div的显示通常使用id或class来标识。id为唯一的标签标识,class为标签的类标识,div的大小是由内容来决定的,默认情况下,高度由内容的高度决定,宽度适应屏幕,可以容纳其他元素,是一个容器
  • <span>
<body>
    <h1>你好</h1>
    <h2>大家好</h2>
    美女好<b>美女好</b>
    <p>哇!美女啊,<br>去校花网</p>
    价格:<strike>998</strike> 18元
    <hr>
    alex<b><em>alex</em></b><em>alex</em>
    H<sub>2</sub>o
    <div>坚持</div>
</body>

 

  特殊符号

  &gt;    >

  &lt;    <

  &nbsp;  空格

  &quot;  引号

  &copy;  版权符号

  更多:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

 

  <a>  超链接标签(锚标签),重要属性有三个:href、target、name

  • href  超链接地址:可以是web上任意资源,包括图片,网页,样式,脚本文件等。href=‘#’时,表示被链接页面就是当前页面
  • target  文档打开时要显示的目标位置,属性值一般有:_blank(新窗口中打开)、_self(默认,在超链接所在的容器中打开)、_parent(在超链接的父容器中打开)、_top(整个容器中打开)、name(框架名称)
  • name  锚记名称,作用:跳转到文档的某个地方。返回首页
<body>
    <a href="#123">跳到尾部</a><br>
    <a href="http://baidu.com" target="_blank">喜欢我就点我吧</a>
    <p><a href="http://baidu.com">点我吧</a></p>
    <p><a href="http://baidu.com" target="_parent">点我</a></p>
    <a href="http://baidu.com" target="_top">就点我吧</a>
    <div style="background:red;height:1500px">就是你</div>
    <div id="123">跳到这里</div>
</body>

 发送邮件:

<a href="mailto:xxx@xx.com">邮件联系</a>

 发起qq临时会话

    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
    <p><a href="tencent://message/?uin=2183958037" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a></p>
 1 # 更多图片地址如下:
 2 # http://wpa.qq.com/pa?p=1:707321921:1
 3 # http://wpa.qq.com/pa?p=1:707321921:2
 4 # http://wpa.qq.com/pa?p=1:707321921:3
 5 # http://wpa.qq.com/pa?p=1:707321921:4
 6 # http://wpa.qq.com/pa?p=1:707321921:5
 7 # http://wpa.qq.com/pa?p=1:707321921:6
 8 # http://wpa.qq.com/pa?p=1:707321921:7
 9 # http://wpa.qq.com/pa?p=1:707321921:8
10 # http://wpa.qq.com/pa?p=1:707321921:9
11 # http://wpa.qq.com/pa?p=1:707321921:10
12 # http://wpa.qq.com/pa?p=1:707321921:11
13 # http://wpa.qq.com/pa?p=1:707321921:12
14 # http://wpa.qq.com/pa?p=1:707321921:13
更多图

 

  <img>  图形标签,行级标签,用来显示图片,重要属性有:src、title、alt、width、height、align

  • src  图片地址
  • title  鼠标悬浮在图片上的文字
  • alt  图片找不到时要替换的文字
  • align 图片周围文字的垂直对齐情况。常用的属性值有:top(顶部对齐)、middle(中部对齐)、bottom(默认,底部对齐)
  • width  图片的宽
  • height  图片的高(宽高两个属性只用一个,会自动等比缩放)
<body>
    <img src="1-160I00P938.jpg" title="美女中的美女哦" align="top">和美女在一起就是真爱
    <img src="1-160I00P938.jpg" title="美女中的美女哦" align="middle">和美女在一起就是真爱
    <p><img src="155.jpg" title="美女中的美女哦" alt="图片加载失败。。。"></p>
</body>

 

  列表标签

  • <ul>  无序列表标签,<li>列表中的每一项
  • <ol>  有序列表标签,<li>列表中的每一项

<li>主要的属性有:type、value两个

  1. type指明项目的类型,属性值有:A、a、l、i、1、disc(实心圆),square(实心正方形)、circle(空心圆)
  2. value表示序号值从几开始
  •  <dl>  定义列表
  1. <dt>  列表标题
  2. <dd>  列表项
<body>
    <ul>
        <li type="circle">a</li>
        <li type="1">b</li>
        <li>c</li>
    </ul>
    <ol>
        <li value="6">d</li>
        <li>e</li>
    </ol>
    <dl>
        <dt>标题</dt>
        <dd>第一项</dd>
        <dd>第二项</dd>
    </dl>
</body>

 

  <table>  表格标签

  • <table>属性
  1. border(表格边框)
  2. align(水平对齐方式)
  3. bgcolor(背景颜色)
  4. cellpadding(内边距,单元格与内容之间的距离)
  5. cellspacing(外边距,单元格的间距,设置为0时,表格变为实现表格)
  6. width(表格的宽度)
  • <caption>  表格的标题
  • <tr>  表格的数据行,table row
  1. <th>  表格的表头名称,与<td>不同在于文字采用加粗居中的形式显示
  2. <td>  单元格,用来显示表格内容
  • <thead>  表格头部,使结构更加分明
  • <tbody>  表格主体部分
  • rowspan  单元格竖跨多少行,作用在th或td上
  • colspan  单元格横跨多少列(合并单元格),作用在th或td上
<body>
    <table border="1">
            <caption>女神表</caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>女神</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>nick</td>
                    <td>可可西</td>
                </tr>
            </tbody>
    </table>
</body>

 

<form>  表单标签

  表单属性

  HTML表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。表单标签,要提交的所有内容都应该在该标签中。

  属性:action、method、enctype

  • action  表单要提交的地址,用于处理表单的内容
  • method  提交的方法,默认是get方式提交
  1. get:提交的键值对,放在地址栏中url后面,安全性相对较差,提交内容长度有限
  2. post:提交的键值对不在地址栏,安全性相对较高,对提交的内容长度理论上无限制
  • enctype  对表单数据进行编码,默认都是要编码的
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <input type="submit" value="百度一下">
    </form>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query">
        <input type="submit" value="搜狗搜索">
    </form>
</body>

 

  表单元素

<input> type属性

  • text  文本框输入(默认类型)
  • password  密码框

  size(指定表单元素的初始宽度,当type为text或password时,表单元素的大小以字符为单位)

  maxlength(type为text或password时,表示输入的最大字符数)

  readonly  只读

  placeolder  框内预置内容(灰色),写上内容时才消失

  • radio  单选按钮

  name(将name的值设置为相同值,才表示一组数据,才能实现单选功能)

  value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

  checked(是否被选中的状态)

  • checkbox  复选框

  name(名字要一样才是一组数据)

  value(提交到服务器的值)

  checked

  • file  文件域,上传文件(不同的浏览器表现形式不同),在form标签设置属性enctype=‘multiprt/form-data’
  • submit  提交按钮,用于提交表单
  • reset  重置按钮,清空表单的输入,恢复到表单默认的状态
  • button  普通按钮,常用于绑定事件
  • image  图片按钮,用于提交表单,与submit是一样的效果(src图片路径)
  • hidden  隐藏字段(value隐藏的内容)
  • color  颜色标签

 <textarea>  文本域标签。默认表示形式是可以输入很多行文本的文本框

  • name  表单提交项的key
  • cols  设置文本域宽度
  • rows  设置文本域高度,即行数

<select>  下拉框标签,使用时要结合<option>子标签一起使用

  • name  表单提交项的key
  • size  选项个数
  • multiple  多选
  • <optgroup>为每一项加上分组

<label>把元素与文本结合起来

  友好设计:不只是选中复选框才能选中并打钩,要求点击对应的文字也能选中该复选框。这种情况下要用到<label>标签的for属性(for=“id”即可)

<body>
    <form>
        <p>姓名<input type="text"></p>
        <label for="name">姓名</label>
        <input id="name" type="text">
    </form>
</body>

 <fieldset>  对表单中的相关元素进行分组

<body>
    <form>
        <fieldset>
            <legend>温馨提示</legend>
            <div align="middle">不要忘记点赞哦</div>
        </fieldset>
    </form>
</body>

 value:表单提交项的值

  对于不同的输入类型,value属性的用法也不同

  • type=“button”,“reset”,“submit”--定义按钮上显示的文本
  • type=“text”,“password”,“hidden”--定义输入字段的初识值
  • type=“checkbox”,“radio”,“image”--定义与输入相关的值

 

<body>
    <form action="" method="post" enctype="multipart/form-data">
        <p>用户名<input type="text" name="query"></p>
        <p>密码<input type="password" size="100" maxlength="6"></p>
        <p><input type="radio" name="sex" value="1">男</p>
        <p><input type="radio" name="sex" value="2">女</p>
        <input type="checkbox" name="hobby" value="bb">篮球
        <br>
        <input type="checkbox" name="hobby" value="fb">足球
        <br>
        <input type="button" value="按钮">
        <br>
        <input type="file" name="file_name">
        <br>
        <select name="IT">
            <optgroup label="IT">
                <option value="c++">c++</option>
                <option value="Java">Java</option>
                <option value="python">python</option>
            </optgroup>
        </select>
        <br>
        <select name="pro">
            <optgroup label="江西省">
                <option value="1">宜春</option>
                <option value="2">萍乡</option>
                <option value="3">南昌</option>
            </optgroup>
        </select>
        <br>
        备注
        <textarea name="textarea"></textarea>
        <p>
            <label for="in">姓名</label>
            <input id="in" type="text">
        </p>
        <p><input type="submit" value="提交"></p>

        <fieldset style="width:200px">
            <legend>python</legend>
            <input type="text">
        </fieldset>

    </form>
</body>

 

详见http://www.cnblogs.com/suoning/p/5614372.html

 

posted @ 2016-07-30 20:54  财经知识狂魔  阅读(400)  评论(0编辑  收藏  举报