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

目录

• • 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>