python学习day12

html结构与标签

css样式

html结构之head

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

<head>

    <meta charset="UTF-8"> <!--页面编码-->

    <!--<meta http-equiv="REFRESH" content="20"> &lt;!&ndash;刷新&ndash;&gt;-->

    <!--<meta http-equiv="REFRESH" content="2; Url=http://www.baidu.com"> &lt;!&ndash;跳转&ndash;&gt;-->

    <meta name="keywords" content="百度,帮助,搜索"> <!--关键字-->

    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <!--模式选择-->

    <title>测试页面</title><!--标题-->

    <link rel="icon" href="favicon.ico"><!--标题图片-->

</head>

html标签之标签分类、符号

1、文档标签(10 个)：<html>、<head>、<body>、<title>、<meta>、<base>、<style>、<link>、<script>、<noscript>

2、框架标签(4个)：<frame>、<frameset>、<iframe>、<noframes>

3、布局标签(1个)：<div>

4、表格标签(10 个)：<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、<col>、<colgroup>、<caption>

5、表单标签(10 个)：<from>、<input>、<textarea>、<button>、<select>、<optgroup>、<option>、<label>、<fieldset>、<legend>

6、列表标签(6个)：<ul>、<ol>、<li>、<dl>、<dt>、<dd>

7、链接标签(1个)：<a>

8、多媒体标签(5个)：<img>、<map>、<area>、<object>、<param>

9、文章标签：<h1> - <h6> 、<p>、<br>、<span>、<bdo>、<pre>、<acronym>、<abbr>、<blockquote>、<q>、<ins>、<del>、<address>

10、字体样式标签：<tt>、<i>、<b>、<big>、<small>、<em>、<strong>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>、<sup>、<sub> 11、特殊标签(3个)：<!DOCTYPE>、、<hr>

备注：

1、当文档中使用了<frameset>标签和<body>标签是互斥的，两者不能同时使用生效。

2、<thead>、<tfoot>、<tbody>这三个标签必须一起使用，而且顺序是<thead>第一，<tfoot>第二，<tbody>第三。<tfoot>之所以排在<tbody>之前，据说是为让浏览器先渲染<tfoot>，这样当<tbody>中的单元格太多时不至于要等所有<tbody>单元格都渲染完再渲染<tfoot>。

3、<ul>无序列表，unordered list；<ol>有序列表，ordered list；<li>列表项，list item；<dl>定义列表，definition list；<dt>定义项，definition term；<dd>定义描述，definition description。

4、以下元素均是字体样式元素。<tt> <i> <b> <big> <small> 标签，以下元素都是短语元素<em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，短语元素标签都拥有确切的语义。

符号详见：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

html标签之a标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

<a href="http://www.baidu.com" target="_blank">百度</a>

<a href="test2.html" target="_blank">test2</a><!--targer作用是打开一个新的页面-->

<a href="#tt">跳转章节</a>  <!--通过识别id进行跳转-->

html标签之select标签

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

<select id="1">                         <!--一般都需要加id-->

    <option value="1">北京</option>   <!--一般都需要加value提交数据s时使用-->

    <option value="2">成都</option>

    <option value="3">上海</option>

</select>

<!--下拉框-->

<select size="2" multiple="multiple">   <!--size显示多个选项,multiple:多选-->

    <option>北京</option>

    <option>成都</option>

    <option>上海</option>

</select>

<select>

    <optgroup label="浙江">   <!--用于分组-->

        <option>杭州</option>

        <option>温州</option>

        <option>台州</option>

    </optgroup>

    <optgroup label="广东">

        <option>广州</option>

        <option>深圳</option>

        <option>珠海</option>

    </optgroup>

</select>

<select>

    <option>北京</option>

    <option>成都</option>

    <option selected="selected">上海</option> <!--selected选择默认值-->

</select>

html标签之input系列

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<input type="checkbox" checked="checked" />  <!--复选框,checked设置默认选中(单选框也可用）-->

<input name="gender" type="radio" />      <!--单选框,name相同才可以互斥-->

<input name="gender" type="radio" />      <!--单选框-->

<input type="text" />       <!--文本框-->

<input type="password" />   <!--密码框-->

<input type="button" value="btn" /> <!--按钮，value为按钮上的文字-->

<input type="submit" value="sub" /> <!--按钮-->

<input type="file" />   <!--选择文件，如果想要提交文件，需要在其所在的form标签中添加一个特殊属性-->

html标签之span标签

<span> 标签被用来组合文档中的行内元素。

<p><span>some text.</span>some other text.</p>

html标签之form标签

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

<form action="http://www.baidu.com"> <!--用于提交数据到后台-->

    主机：<input name="host" type="text">  <!--name用于提交后台后识别数据-->

    端口：<input name="port" type="text">

    用户：<input name="user" type="text">

    密码：<input name="passwd" type="text">

    <input type="button" value="提交">

    <input type="submit" value="提交表单">

</form>

html标签之label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<label for="cb1">婚否</label> <!--通过for与id属性进行关联-->

<input id="cb1" type="checkbox" />

html标签之ul标签

<ul> 标签定义无序列表。

<ul>

    <li>123</li>

    <li>123</li>

    <li>123</li>

    <li>123</li>

</ul>

html标签之ol标签

<ol> 标签定义有序列表。

<ol>

    <li>bbb</li>

    <li>aaa</li>

    <li>ddd</li>

    <li>ccc</li>

</ol>

html标签之dl标签

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl>

    <dt>标题</dt>

    <dd>内容</dd>

    <dt>标题</dt>

    <dd>内容</dd>

</dl>

html标签之table标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table border="1"> <!--表，border边框属性-->

    <thead>     <!--表头-->

        <tr>     <!--行-->

            <th>第一列</th>    <!--表头列-->

            <th>第二列</th>

            <th>第三列</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td colspan="2">h1,h2</td>     <!--内容列,colspan横向合并单元格-->

            <!--<td>h2</td>-->

            <td>h3</td>

        </tr>

        <tr>

            <td rowspan="2">a1,b1</td>  <!--内容列,rowspan纵向合并单元格-->

            <td>a2</td>

            <td>a3</td>

        </tr>

        <tr>

            <!--<td>b1</td>-->

            <td>b2</td>

            <td>b3</td>

        </tr>

    </tbody>

</table>

html标签之fieldset标签

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

<fieldset>

    <legend>登陆</legend>     <!--在默认边框的左上角显示文字-->

    <p>用户名：</p>

    <p>密码：</p>

</fieldset>

css选择器之类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

.bb{

    color: antiquewhite;

    font-size: 29px;

}

<div class="bb">ggggg</div>

css选择器之属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

a{

    color: antiquewhite;

}

根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

css选择器之ID选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式

#uu{

}

<div>123</div>

<div id="uu">123</div>

css选择器之后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

<div class="c3">

    <a id="i8">

        <div>

            <span class="c4"></span>

        </div>

        <span class="c4"></span>

    </a>

</div>

css选择器之选择器分组

选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。

可以将任意多个选择器分组在一起，对此没有任何限制。

css样式之backgroud属性

参数	描述	值
background-color	设置元素的背景色。	color-name color-rgb color-hex transparent
background-image	设置背景图像。	url(URL) none
background-repeat	设置背景图像是否及如何重复。	repeat repeat-x repeat-y no-repeat
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。	scroll fixed
background-position	设置背景图像的起始位置。	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

html样式之border属性

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width
border-style
border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

p

  {

  border:5px solid red;

  }

html样式之display属性

<div style="display: none;background-color: coral">asdf</div>

<!--隐藏标签-->

<span style="background-color: coral">asdf</span>

<span style="display: block;background-color: coral">asdf</span>

<!--内联标签变成块级标签-->

<hr/>

<div style="background-color: coral">asdf</div>

<div style="display: inline;background-color: coral">asdf</div>

<!--块级标签变成内联标签-->

display values

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	此元素会根据上下文作为块级元素或内联元素显示。
marker
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）

css样式之cursor属性

<h5>基础属性</h5>

<span style="cursor: pointer;">pointer</span>||<span style="cursor: help;">help</span>||<span style="cursor: wait;">wait</span>||<span style="cursor: move;">move</span>||<span style="cursor: crosshair;">crosshair</span>

<h5>自定义</h5>

<span style="cursor: url(image/favicon.ico),auto;">pointer</span>

可能的值

值	描述
url	需被使用的自定义光标的URL 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

html样式之float属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

<div style="background-color: cadetblue;widows: 300px;">

    <div style="background-color: coral;float: left;width: 20%; ">123</div>

    <div style="background-color: aqua;float: left;width: 50%">456</div>

    <div style="background-color: burlywood;float: right;width: 10%;">789</div>

    <div style="clear: both"></div>

</div>

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

html样式之position属性

定义和用法

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

<h5>fixed(固定，针对窗口)</h5>

<h5>abslute(绝对)</h5>

<h5>relative(相对)</h5>

<div style="height: 5000px;background-color: aquamarine;"></div>

<div style="position: fixed;;right: 40px;bottom: 60px;">返回顶部</div>

<div style="position: relative;background-color: cadetblue;height: 400px;width: 500px;">

    <div style="position: absolute;bottom: 50px;right: 30px;">定位</div>

</div>

可能的值

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

html样式之opacity属性

opacity 属性设置元素的不透明级别。

div

{

opacity:0.5;

}

可能的值

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

html样式之z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

img

  {

  position:absolute;

  left:0px;

  top:0px;

  z-index:-1;

  }

可能的值

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

html样式之padding属性

padding 属性设置元素的内边距。

padding 属性定义元素边框与元素内容之间的空间。

该属性可采取 4 个值：

如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。
如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 px，下内边距是 20 px。
如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。

<div style="height: 70px;border: 1px solid red;">

    <div style="height: 50px;background-color: aqua;padding-top: 10px;"></div>

</div>

<!--内边距-->

<!--padding:10px 20px 10px 11px-->

<!--        上    右   下   左-->

<!--padding:10px 20px-->

<!--        上下 左右-->

<!--padding:10px 上下左右都加-->

Possible Values

值

描述

padding

设置内边距。

值可以是：

百分比（基于父对象总高度或宽度的百分比）
长度值（定义一个固定的边距）
auto（浏览器设定的值）。

html样式之margin属性

margin 属性设置元素的外边距。

该属性可使用 1 到 4 个值：

如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px
如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。
如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。
如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。

<div style="height: 70px;border: 1px solid black;">

    <div style="height: 50px;background-color: slateblue;margin-top: 10px;"></div>

</div>

<!--外边距-->

<!--margin:10px 20px 10px 11px-->

<!--        上    右   下   左-->

<!--margin:10px 20px-->

<!--        上下 左右-->

<!--margin:10px 上下左右都加-->

Possible Values

值

描述

margin

设置外边距。

值可以是：

百分比（基于父对象总高度或宽度的百分比）
长度值（定义一个固定的边距）
auto（浏览器设定的值）。

简单属性选择

根据具体属性值选择

根据上下文选择元素

选择器分组

定义和用法

说明

Possible Values

相关文章