python day 21: HTML的基本元素及CSS

2019-11-02 16:01:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

python day 21: HTML的基本元素及CSS

Posted on 2019-11-02 21:10 bluestarpin 阅读(...) 评论(...) 编辑 收藏

目录

  • python day 21
    • 1. HTML
      • 1.1 常见的HTML元素

python day 21

2019/11/02

学习资料来自老男孩与尚学堂

1. HTML

1.1 常见的HTML元素

  1. HTML的作用:定义整个页面"长"成什么样,相当于网站的骨架。
  2. HTML搭骨架的标签:
    2.1. 标题标签: h1~h6
    2.2. 容器标签: div :定义大的模块
    2.3. 段落标签: p :段落
    2.4. 行内标签: span :元素内容可以在同一行内显示,是个行内元素
    2.5. 跳转标签: a :跳转,有两个属性,一个是href属性放网络路径,一点击就跳转到指定网络路径。另外一个属性是target,target属性值有self和blank,target属性指跳转时是否打开新窗口。
    2.6. 图片标签: img :src属性,要显示的图片的路径,可以是网络路径也可以是本地路径。alt属性,在图片显示不出来的时候,用文字显示。
    2.7. 换行标签: br :多个行内元素在同一行时,如果需要换行,就可以使用br标签。
    2.8. 分割标签: hr :显示一条分割线,width属性设置分割线宽度,size属性设置分割线的粗细,默认是1。
    2.9. 列表标签:

    • 不显示列表类型list-style值为None. style="list-style:none"
    • 有序列表:ol(order list),标签中嵌套li标签,li标签中放列表项内容,列表项前面的类型通过type属性设置,常见类型有:数字1(表示按数字排序),a(小写字母顺序),i(罗马数字顺序),I,A。默认是数字类型。
    • 无序列表:ul(unordered list),标签中嵌套li标签,li标签中放列表项内容,列表项前面的类型通过type属性设置,常见类型有disc,square,circle。
    • 图文混排:dl,用来显示标签项不用li,使用dt,dd. dt: 放标题部分;dd:放内容部分.
  3. 块级元素和行内元素
    3.1. 块级元素:特征是独占一行,块级元素标签的宽度是浏览器屏幕的宽,高度是内容决定的。常见的块级元素:div/p/ul/li/dl.
    3.2. 行内元素:特征是不独占一行,同一行可以放多个行内元素,行内元素的宽与高都是由内容决定的。常见的行内元素:span/a/em/i.
    3.3. 行内-块级元素:特点是不独占一行,且宽度可以自己设置。常见元素:input/button/img.
    3.4. 改变元素属性方法:display:block; 块级元素;inline; 行内元素inline-block;行内-块级元素;none; 隐藏元素
  4. 双/单标签
    双标签:成对出现的,有开始标签,有结束标签。大部分标签是双标签,<div>
    单标签:单个出现,写法<br>,<hr>,<input>,<img>。
  5. 表格table
    使用table标签制作一个表格。
    caption标签:在table里面嵌套使用,用来设置标题。
    tr行标签:在table里面嵌套使用,用来生成一行。
    th表头标签:在tr里面嵌套使用,用来设置表格的表头。
    td表格内容标签:在tr里面嵌套使用,用来生成表格的内容。
    table的属性:
    border:边框,值为数字,越大,边框越粗
    cellpadding:单元格内边距
    cellspacing:单元格外边距
    align: 表格中文字的对齐形式,可选值: left,right,center. 如果写在table标签上,就是table表格相对浏览器的位置。如果写在tr上,则是表格内容的对齐方式。
    width: 设置宽度,如果在table上,就是整个表格的宽度,如果在td上,就是列的宽度。
    合并属性:
    行合并:rowspan=2,表示合并2行,如果是5就表示合并5 行
    列合并:colspan=3,表示合并3列。

  6. 表单

form 表单标签
区域块:fieldset> legend设置区域块的名称
用户输入框:input type='text'
单选按钮: input type='radio'
多选按钮: input type='checkbox'
下拉框: select,嵌套使用option标签
密码: input type='password'
上传文件: input type='file'
范围数字:Input type='range'
提交: input type='submit'
重置: input type='reset'
按钮: button
input标签属性:
placeholder,用来设置提示的。
name, 设置input标签的提交数据键名
value,设置input标签的值
form标签属性:
action:url地址,数据提交的地址,不写默认是本机。
method:提交方式,get/post,默认是get。

  1. css样式

css样式的作用是装饰html,使页面美化
css样式的写法有有三种:
第一种:行内样式,指把样式写在标签内部,需要在标签中添加一个属性style,在style中定义样式。
第二种:内部样式表,指在head中定义一个style标签,在style标签中写当前页面的样式
第三种:外部样式式,指在html文件外创建.css结尾的文件,在文件中写css样式,引入页面需要使用link标签。
css的两个简单样式:
设置字体大小和颜色
font-size:12px(最小12px,最大无限制);
color:
值可以是英文单词red/black/green/yellow/whilt等,
还可以是rgb(),比如rgb(0,0,0),rgb(255,255,255)等
rgba(),带透明度的颜色值,rgba(0,255,123,0.3),a的取值范围是0-1,0表示完全透明。
还可以是十六进制写法#000。与rgb(0,0,0)是一样的意思。

  1. 选择器:

id选择器:
需要在标签上添加id属性,给id属性一个变量名,<div id="container">
id要具有唯一性,css设置样式时,通过#id名{}来添加样式。
类选择器:
需要在标签上添加class属性,给class一个变量名,<div class='box'>
class,不具备唯一性,可以存在多个,.classname来设置样式
标签选择器: 标签,不具备唯一性,设置样式时,通过标签名设置样式。
通用选择器:*代表所有
伪类选择器:<div class="box">
元素:before/:after,当前元素前后添加的分类,设置时.box:before{}
元素:nth-child(n)查找当前元素的第n个子集元素(n是按照子集元素在当前元素中的顺序是n),设置时.box:nth-child(2){}
元素:nth-of-type(n)查找当前元素的指定兄弟元素,设置时.box:nth-of-type(2){}
子集选择器:父级>子集
后代选择器:父级 后代

  1. 盒模型

任何一个标签都是一个盒模型,每个盒模型都有四个方向,是个矩形。
盒模型组成部分:
content:内容部分,经常设置宽高(块级/行内-块级元素有效,行内元素无效).
padding:内边距,内容部分和边框直接的距离。
border:边框
margin:外边距,撑开不同盒模型直接的距离。
块级元素/行内-块级元素可以宽高,这里设置的宽和高指的是content的宽度和高度
padding/border/margin都有四个方向可以设置,四个方向:上top,右right,下bottom,左left.
设置方式(简写时是按照上右下左顺时钟来取值的,盒子是上右下左):
9.1. 有四个值:上右下左四个方向的值: padding: 10px 20px 30px 40px;
9.2. 设三个值:上10,下30,左右20:padding: 10px 20px 30px;
9.3. 设两个值:上下10,左右20:padding: 10px 20px
9.4. 设一个值:上下左右都是这个值:padding: 10px;
margin:10px auto; 表示让元素在页面中水平方向上居中显示。
border的三个属性:
宽度:border-width
样式:border-style:solid(实线),dotted(点线),dashed(虚线)
颜色:red /#000/rgb()/rgba()
border的简写方式:border:1px solid #000; 可以单独设置某一个方向border-bottom:3px red solid;

  1. 字体

font-family:设置使用什么字体(宋体/微软雅黑),默认微软雅黑。
font-size :字体大小 16px;
font-weight:100/200/400/bold,字体的粗细。

11.背景

background:设置背景的复合属性
分开的属性有:
background-color:背景颜色 。背景颜色比背景图片更靠近底层。
background-image:背景图片,接收url属性,url('图片路径')
background-size:背景图片大小,两个属性:x轴方向,y轴方向
background-position:背景定位,x轴与y轴,原点左上角是(0,0)
background-repeat:背景是否重复。no-repeat;repeat-x;repeat-y;

  1. 浮动

浮动指让元素脱离文档流,“漂”起来.
文档流指:前端页面在浏览器中展示时是从左上角开始排列,横向从左至右依次排列行内元素或行内块元素,纵向是从上到下依次排列块级元素。
要使块级元素从左到右排列,可以display:inline-block,或使其浮动float.
浮动关键字:float,值为left/right.
浮动后:元素会脱离文档流,变成行内-块级元素,漂在其上方最近的块级元素后面。一般在浮动元素外部设置一个容器,使浮动元素嵌套在容器里面。
元素浮动后的一个问题:浮动元素后面元素会受浮动影响,所以使用了浮动后就要清除浮动。
清除浮动方法1:添加一个空标签,给空标签设置clear属性 clear:left/right/both,即清除左边/右边/两边的浮动效果
清除浮动方法2:给有浮动的元素添加一个父级元素,然后父级元素在style中设置overflow:hidden。

  1. 定位

定位关键字:position
定位分为三种:相对定位(relative)/绝对定位(absolute)/固定定位(fixed)
相对定位(relative):是元素本身相对自己的一个偏移量,但不脱离文档流,即原来的位置还是属于该元素。position:relative. 设置相对定位之后,可以设置4个方向的值。一般是作为父级来设置相对定位,为使用绝对定位做准备。body默认有相对定位
绝对定位(absolute):是元素相对于设置了相对定位的父级元素的一个偏移量,绝对定位之后是脱离文档流的。先浮起来。所以如果该元素的父级没有设置相对定位,则会往上找父父组,一直找到body元素。
固定定位(fixed):是相对于浏览器窗口的定位,不会随着页面滚动而发生位置位置改变。也是脱离文档流的。

  1. 其他知识点:

width:宽
height:高
text-align文字对齐方式:left/right/center
line-height:行高
vertical-align:top/middle/bottom垂直方向上对齐方式
overflow:hidden 溢出隐藏,文字超出容器范围隐藏文字


原文链接:https://www.cnblogs.com/lanxing0422/p/pythonday21.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端 JS 获取 Image 图像 宽高 尺寸

下一篇:CSS元素显示模式