python5 html

最新推荐文章于 2024-01-03 14:06:52 发布

礼拜天吃芋圆

最新推荐文章于 2024-01-03 14:06:52 发布

阅读量317

点赞数

分类专栏： python 开发

本文链接：https://blog.csdn.net/weixin_38636668/article/details/94767244

版权

python 开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、常见的html元素
1.html的作用：定义整个页面"长"成什么样子，相当于网站的骨架。
2.html搭骨架的标签：
标题标签：h1~h6
容器标签：div :定义大的模块
段落标签：p ：段落
行内标签：span ：元素内容可以在同一行显示，是个行内元素
跳转标签：a ：跳转，有个href属性，属性中放网络路径，点击时会跳转到指定的网络路径中
还有一个属性叫target，target属性值有 _self _blank,打开新窗口是否是当前窗口
图片标签：img ：src属性，要显示图片的路径，可以是本地路径也可以是网络路径。alt属性，在图片显示不出来的时候，要显示的文字
换行标签：br ：多个行内元素在同一行时，如果需要换行可以使用这个标签
分割标签：hr ：显示一条分割线 ,width 设置分割线宽度,size：设置线的高度

列表标签：
不显示列表类型：list-style值为none
有序列表：ol ：标签中嵌套li标签，li标签中放列表项,列表项前面的类型type设置，常见类型：数字,a,A,I,i

无序列表：ul ：无序列表中列表项也是li标签包裹，前面类型不是数字、字母、I这些，是点,常见类型：disc，square，circle
图文混排：dl ：用来显示标签项不用li，使用 dt,dd
dt:放标题部分
dd:放内容部分

块级元素和行内元素
块级元素：独占一行，标签的宽是浏览器屏幕的宽，高度由内容决定，常见的块级元素:div, p, ul, li, dl

行内元素：不独占一行，同一行可以放多个行内元素，行内元素的宽是由内容决定的，高度也是由内容决定的。常见的行内元素： span, a, em, i

行内-块级元素：不独占一行，宽度可以自己设置。常见元素：input, button, img

改变元素属性方法：
display： block; 块级元素
inline; 行内元素
inline-block; 行内-块级元素
none; 把元素隐藏

4.标签
双标签：成对出现的，有开始标签，有结束标签。大部分标签是双标签，<div></div>
单标签：单个出现，写法<br /> <hr /> <input /> <img />

5.表格table

<table>
		<caption>表格标题</caption>	
		<tr> //行
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>列</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>	
	</table>

表格的属性：
border:边框，值为数字类型
cellpadding: 单元格内边距
cellspacing：单元格外边距
align:表格的对齐形式，可选值：left 左对齐
right 右对齐
center 居中
align属性如果写在table上，table表格相对浏览器页面的对齐方式；如果写tr上，td中的文字对齐方式
width: 设置宽度。如果在table，设置的是整个table的宽；如果在td上，设置对应列的宽

合并属性：
行合并：rowspan=5 把多行合并成一行
列合并：colspan=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
文本域： textarea
input标签属性：
placeholder 设置提示文字
name 设置input标签的提交数据键名
value 设置input标签的值
form标签属性：
action: url地址，数据提交的地址
method: 提交方式， get / post ，默认是get

二、css
2. css样式
css样式作用装饰html,使页面美化。
css样式的写法有三种：
第一种：行内样式
把样式写在标签内部，需要在标签中添加一个属性style，在style中定义样式
第二种：内部样式表
在head中定义一个style标签，在这个标签中写当前页面的样式
第三种：外部样式表
在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要使用link标签

css样式：
1.设置字体大小和颜色
font-size:12px;
color: 值可以是英文单词 red green yellow
是rgb() rgb(0,0,0) rgb(255,255,255)
是rgba() 带透明度的颜色值 rgba(0,255,123,0.3)
是#000

3.选择器：
id选择器：需要在标签上添加 id 属性，给id属性一个变量名

css中通过 #container 找到对应元素，然后可以设置样式
类选择器：需要在标签上添加 class 属性，给class属性一个变量名

css中通过 .box 找到对应的元素，然后设置样式
标签选择器：直接找标签的名称(div,span,a,p,input)，然后设置样式
通用选择器：* 代表所有
子集选择器：父级>子集
后代选择器：父级后代
伪类选择器：选择器:before/:after

:nth-child(n)
					 :nth-of-type(n)
				<div class='box'>
					<p><a></a></p>
					<p></p>
				</div>

				.box:before{

				}
				.box p:nth-child(2){
					选中第二个p标签
				}

注意：id选择器一次只能选中 1 元素，页面中id不能出现同名
class、标签选择器每次选中的是多个，class相同类名可以出现多次
nth-child/nth-of-type ：只适用于class/标签选择器,选中的是class/标签的兄弟元素

4.盒模型
content : 写入内容的地方
padding：内边距,撑开内容和边框直接的距离
border：边框
margin：外边距

块级元素、行内-块级元素可以设置宽高，这里设置的宽和高指的是content的宽高
padding/margin/border都是是四个方向上，四个方向上的值可以不同
四个方向：上为top 下为bottom 左为left 右为right
border由三个属性组成：宽度(border-width)、样式(border-style)、颜色(border-color)
border的简写方式：border:1px solid/dotted/dashed #000;
border-bottom:3px red solid;
padding/margin的简写：
第一种形式：只有一个值，这时四个方向都使用这个值 padding:10px;
第二种形式：两个值，这时上和下10px,左和右是20px; padding:10px 20px;
第三种形式：三个值，这时上10，左右20px，下30px padding:10px 20px 30px;
第四种形式：四个值，上10 ，右20 ，下30，左40 padding:10px 20px 30px 40px;

5.字体
font-family: 设置字体(宋体、微软雅黑)
font-size:字体大小
font-weight:字体粗细

6.背景
background
背景颜色：比背景图片更靠近底层。background-color:
背景图片：background-image:url(‘图片路径’)
背景图片大小：background-size:x轴方向 y轴方向
背景定位：background-position:x轴方向 y轴方向
背景重复：background-repeat:no-repeat; repeat-x; repeat-y;

7.其他小知识点：
宽：width
高：height
行高：line-height
文字对齐效果：text-align:center/left/right
溢出隐藏：overflow:hidden
垂直对齐方式：vertical-align：top
middle
bottom

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="shangou">
		<div class="container">
			<div class="head">
				<h1>小米闪购</h1>
			</div>
			<div class="content">
				<div  class='product_box shan'>
					<p class="time">18:00 场</p>
					<img src="images/flashpurchase.png" alt="" class="pic">
					<p class="txt">距离开始还有</p>
					<div class='djs'>
						<span class='hour'>01</span>
						<span class='mao'>:</span>
						<span class="hour">53</span>
						<span class="mao">:</span>
						<span class="hour">16</span>
					</div>
				</div>
				<div class='product_box carmmer'>
					<img src="images/1.jpg" alt="" class="pic1">
					<p class="product_info">米家小相机 黑色</p>
					<p class="product_td">清晰捕捉美好瞬间</p>
					<p class="price">
						<span class='now_price'>649 元</span>
						<span class='old_price'>699元</span>
					</p>
				</div>
				<div class='product_box dao'>
					<img src="images/1.jpg" alt="" class="pic1">
					<p class="product_info">米家小相机 黑色</p>
					<p class="product_td">清晰捕捉美好瞬间</p>
					<p class="price">
						<span class='now_price'>649 元</span>
						<span class='old_price'>699元</span>
					</p>
				</div>
				<div class='product_box computer'>
					<img src="images/1.jpg" alt="" class="pic1">
					<p class="product_info">米家小相机 黑色</p>
					<p class="product_td">清晰捕捉美好瞬间</p>
					<p class="price">
						<span class='now_price'>649 元</span>
						<span class='old_price'>699元</span>
					</p>
				</div>
				<div class='product_box tv'>
					<img src="images/1.jpg" alt="" class="pic1">
					<p class="product_info">米家小相机 黑色</p>
					<p class="product_td">清晰捕捉美好瞬间</p>
					<p class="price">
						<span class='now_price'>649 元</span>
						<span class='old_price'>699元</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

三、03_css浮动和定位
1.浮动（脱离文档流，浮动起来。作用和block-in相同）
让元素脱离文档流，“漂”起来。

文档流：前端页面在浏览器中展示时是从左上角开始排练，横向从左到右依次排练行内元素或行内块元素，纵向是从上到下依次排练块级元素。
浮动关键字：float: left / right

浮动后：元素会脱离文档流，"漂"在离它最近的上一个块级元素之后，变成行内-块级元素
元素浮动后一个问题：
浮动元素后面元素会受浮动影响，使用浮动后需要清除浮动
清除浮动方案：
1.添加一个空标签，给空标签设置clear属性 clear:left / right / both
2.给有浮动的元素添加一个父级元素，然后让父级元素清除浮动(overflow: hidden;)

2.定位
定位关键字：position
定位：相对定位、绝对定位、固定定位
相对定位(relative)：是元素本身相对自己的一个偏移量，但不脱离文档流
绝对定位(absolute)：是元素相当于父级(会有一个相对定位)的一个偏移量，是脱离文档流的
固定定位(fixed)：相当于浏览器窗口定位，不会随页面滚动发生位置改变，也是脱离文档流的

定位有四个方向：
top:相对顶部的偏移量
bottom:相对顶部的偏移量
left:相对左边的偏移量
right:相对右边的偏移量

hover属性：鼠标放上去的效果，鼠标离开后会恢复到原来的效果
元素:hover{
}

3.css3 转换、过渡、动画
转换：transform
位置转换：translate(x,y)
角度转换：rotate(20deg)
缩放： scale(x,y) 0~正无穷 0~1:缩小 1~正无穷：放大
翻转：skew()
过渡：transition
过渡类型：transition-property :all 所有的类型
过渡时间：transition-duration :秒单位的数字 5s
过渡曲线：transition-timing-function ：linear 匀速执行
: ease 先慢后快最后再慢
过渡延时：transition-delay ：秒单位的数字
动画：animation
动画名称：animation-name
动画执行时间：animation-duration
动画曲线：animation-timing-function
动画延时：animation-delay
动画执行次数：animation-iteration-count ：值可以是数字，infinite无限次数播放
动画播放周期：animation-direction
动画是否是播放状态：animation-play-state ： playing | paused
动画播放前和播放后的状态：animation-fill-mode

@keyframes:定义动画的关键帧
		@keyframes 名称:{
			from(0%):{

			}
			百分数(10%):{
			
			}
			to(100%):{

			}
		}

礼拜天吃芋圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录