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

python day 21

2019/11/02

目录

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

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

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上，则是表格内容的对齐方式。
   设置宽度，如果在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。

7. 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)是一样的意思。

8. 选择器：

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){}
子集选择器：父级>子集
后代选择器：父级 后代

9. 盒模型

任何一个标签都是一个盒模型，每个盒模型都有四个方向，是个矩形。
盒模型组成部分：
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;

10. 字体

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;

12. 浮动

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

13. 定位

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

14. 其他知识点：

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