python之路——web基础(html+css)

时间:2021-12-27 15:25:31

HTML

1、概念

超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

2、标签

浏览器通过解析标签来获取html内容,标签包括属性、内容,标签可以嵌套标签;

标签分类:

    1、按闭合分类:自闭合标签(<meta charset="UTF-8">、<img src="" />)

            主动闭合标签(<title>老男孩</title>)

    2、按标签自有属性分类:块级标签------>独自占有一行(<div> <p> <h1-h6> <form> <menu> <pre> <table>)

                  行内标签----- >根据内容占空间,没有(margin属性)(<span> <a> <lable> <img> <textarea> <strong> <input> <select>)

htm标签结构:

1、html标签(<html> ... </html>)页面有且只能有一个,包含<head> <body>标签。

2、head标签(<head> ... </head>)           

        - <meta -> 编码,跳转,刷新,关键字,描述,IE兼容
         - <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
         - title标签
      - <link /> 导入css、jq等文件内容标签
      - <style />css属性标签
      - <script> javascript代码标签

3、body标签(<body> ... </body)

      - 符号标签:&nbsp--->空格;  &gt--->右侧尖括号;   &lt---->左侧尖括号标签;

      - 换行标签:<br />

      - 标题标签:<h1></h1> ------>  <h6> </h6>

      - 块级白板标签:<div> </div> ---->页面布局

      - 行内白板标签:<span> </span>

      - 表单标签:<form> </from>----> 嵌套input系列标签,input 标签属性:placeholder--->文本框默认显示,文本框还有email、url、tel、range(进度条)等制格式type属性

        - input标签: input type='text'     - name属性,value="赵凡"  【文本框】

              input type='password' - name属性,value="赵凡" 【密码文本框】

              input type='submit'   - value='提交' 提交按钮,表单 【提交表单信息按钮】

              input type='button'   - value='登录' 按钮 【登陆按钮】

              input type='radio'    - 单选框 value,checked="checked",name属性(name相同则互斥)【单选】

              input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)【多选】

              input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data" 【上传文件】

              input type='rest'     - 重置 【重置按钮】

              <textarea >默认值</textarea>  - name属性 【文本框】

              select标签            - name,内部option value, 提交到后台,size,multiple 【下拉选择】

      - a标签:- 跳转

          - 锚 href='#某个标签的ID' 标签的ID不允许重复

      - img图片标签<img />:src---> 图片路径,alt --->   ,title---->    ;默认有一个border=1px的边框

      - audio音频标签<audio src="" controls="controls" autoplay="autoplay"> </audio> 属性依次为:音频地址,控制,自动播放

      - video视频标签<video src="" controls="controls" autoplay="autoplay" loop="3"> </video> 属性依次为:音频地址,控制,自动播放,循环播放3次;

      - 有序列表标签<ol type=""></ol>,嵌套<li>您好</li> <li>您好</li> 默认顺序是123....,可以根据type来定义

  <ol>
<li>你好</li>
<li>你好</li>
</ol>

      - 无序列表标签<ul type=""></ul>,嵌套<li>您好</li> <li>您好</li> 默认顺序是.,可以根据type来定义,例:"disc"[实心圆点]   "circle"[空心圆点]  "square"[方形实心点]

      - 定义列表(问答形式)标签

<dl>
<dt>你是谁?</dt>
<dd>我是xxx</dd>
</dl>

      - 表格标签<table> </table>:属性border--->边框;cellpadding--->间距;cellspacing--->边框间距;colspan--->合并(列);rowspan--->合并(行)

<table border='1' width="400px">
<tr>
<th>选项</th>
<th>IP</th>
<th>PORT</th>
<th>状态</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>192.168.136.130</td>
<td>3021</td>
<td>在线</td>
</tr>
</table>

      - lable标签:用于点击文件,使得关联的标签获取光标,例:<label for="username">用户名:</label> --->> <input id="username" type="text" name="user" />

      - 缩写标签<abbr title="你好可怜啊啊啊啊啊">a</abbr>,显示a,鼠标放上去会显示title里的内容

      - 进度条标签<progress value="1" max="10"></progress>,当前显示占1/10 ,一格进度

      - 高亮显示标签<mark>...</mark>

      - 时间<time>...</time>

css

1、概念

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

2、编写css样式

a、在标签的style属性中写;

b、写在head里面 <style></style>标签中写样式

c、写在单独的css文件,在head里用<link href="css文件路径" type="text/css" rel="stylesheet" />引入

3、css选择器

(1)基本选择方式及优先级

  div{ }            等级c(标签共用)

  class=”c1“ .c1{ }      等级b (class可重复)

  id=”i1“ #i1{ }             等级a (class可重复)

  优先级按照abc的顺序排列,另标签上style优先,编写顺序,就近原则

(2)其他选择器

  - .c1 .c2 div{ }   --->  class="c1"标签下子标签class="c2"标签下的div子标签;

  - .c1+p{ } ----> c1标签下一个p标签

  - .c1~p{ } ----> c1后面同级p标签

  - div>p{ } ----> div标签的子标签p标签

  - a[title]{ } ----> 有title的a标签

  - .c1[n='alex']{ } ----> 对选择到的c1标签再通过属性再进行一次筛选

4、字体样式

  - font-size:字体大小

  - font-family:字体格式

  - font-weight:加粗

  - text-decoration:none 去下划线

  - color:颜色

5、div块级标签样式

    - height:高度

     - width:宽度

  - text-align:ceter, 内容水平方向居中

  - line-height,内容垂直方向根据标签高度

 

  - background-image:url() 以图片作为背景

  - background-repeat:no-repeat;图片不堆砌

  - background-position:图片的位子,可以background-position-x,-y来移动图片

  - background-attachment:fixed;固定图片位置

  - background-coror:颜色

 

  - overflow:auto(滚动条);hiden(超出部分隐藏)

  - visibilty:hiden,块得隐藏

 

  - display:inline;块---->行

  - display:block;行---->块

  - display:inline-block;块&行

    行内标签:无法设置高度,宽度,padding margin
    块级标签:设置高度,宽度,padding margin

6、div块级标签位置

    - float:left&right 让标签浪起来,块级标签也可以堆叠;父标签管不住:<div style="clear: both;"></div>

  - position

      a、fixed;脱离文档流,固定在页面的某个位置,可以用top、left、right、bottom来调整位置

      b、relative;

      c、absolute;如果父标签做了定位,就相对于父元素定位,脱离文档流

 

盒子

 

1、盒子模型用于基础的网页布局

 

2、需要用到的一些属性:

 

        - padding:1px(上) 2px(右) 3px(下) 4px(左);或者(只有两个值1px 2px)[上下、左右]、(三个值1px 2px 3px)[上、左右、下]。用于调整块内内容与块的内边距。

 

    - margin:调整块与块之间的距离,数值方法与padding一样。

 

    - z-index:决定覆盖关系

 

    - display:none;隐藏块

 

    - opcity:0.5;透明度

 

    - font-shadow:10px 10px 10px #ccc;文字阴影

 

    - text-indent:10px;缩进

 

    - border-radius:10px;边框圆角

 

    - background-size:cover;背景铺满

 

    - box-shadow:块得阴影;