学习渡一教育（html+css）视频 后自己的总结
Html部分
<html lang="ch"> //根标签
lang 告诉流浪器你的网页是什么语言的 告诉爬虫网页是什么内容的 seo技术
<head> //用来设置网页的一些属性
<meta charset="utf-8"/>
//charset编码字符集 gb2312 亚裔字符集 无法显示中文繁体 gbk 亚裔+繁体
unicode 万国码 utf-8(unicode升级版)
<meta content="关键字" name="keywords">//百度搜索关键字有更大的机会靠前,
<meta content="描述" name="description">
<title>
网页标题
</title>
</head>
<body>//给用户看的内容
<p>
段落标签 成段展示
</p>
<h1> //<h1 - h5>
标题标签
</h1>
<strong> 加粗标签</strong>
<em>斜体标签</em>
<del>中划线标签</del>
<address>地址标签</address>
<div>块级容器</div>
<span>行级容器</span>
<br> 换行
<ol type="1"><li></li><li></li></ol >
//有序列表 type = 1从1开始阿拉伯数字排序 a从b开始按小写字母排序 i按罗马数字排序 start="3" 从第几个开始排序
<ul><li></li><li></li></ul> //无序列表 type 前面标记类型
<img src="imgAddress"></img>
//img属性
//src图片地址 可以是 1.网上url 2.本地绝对路径 3.本地的相对地址
//alt图片丢失事展示的文字
<a href="#"></a>
//超链接 href 1.填写网络地址 2.填写html标签#id,点击定位到该标签 3.tel:电话号码 点击打电话 4. target 设置网页是新页面还是当前页
<form>//表单标签 发送数据使用 method = "get/post" action 数据接收地址
<input></input>
//属性
type:
text 文本输入框
password 密码框
submit 提交按钮
radio 单选框 使用相同name为同一组 需要与 value 搭配是使用才能传输数据 checked="checked" 默认选中(复选框也适用)
checkBox 复选框 (值会是啥呢????等下实验)
<select><option>菜单1</option><option>菜单2</option></select>
//下拉菜单
name:
数据名称
</form>
</body>
</html>
网页中的空格 回车都是文字分割符
html编码
注释<!-- 注释内容 -->
空格 < < > >
单标签
<br> 换行 <hr> 水平分割线
css 部分
1.引入css
行间样式 : <div style="color:red"></div>
页面级css: <head><style type="text/css">css代码<style></head> type 可省略
外部css:<link rel="stylesheet" type="text/css" href="css代码文件"> 可以引入多个外部css
2.css 选择器
id选择器 #idname{ css代码 }
class选择器 .classname{css代码}
标签选择器 div{css代码}
通配符选择器 *{css代码} 选中所有的标签 一般用来初始化
属性选择器 [propertyName="value"]{css代码} 有属性名的标签 值可以省略
父子选择器/派生选择器 div span{css代码} 选中的是 div 下面的 span标签 浏览器从右往左查询
直接子元素选择器 div>em{css代码} div的子元素是em的标签
并列选择器 div.classname{css代码} 标签选择器+class选择器
分组选择器 div,span{css代码} 共享css代码
伪类选择器 a:hover{css代码} a标签鼠标移入的样式
伪元素选择器 span::before{css代码} 在sapn之前
复杂选择器 权重相加
css权重 256进制
!important 无穷大
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
常用的css属性
font-size:16px; 字体大小
font-weight:bold; 加粗
font-style:italic; 斜体
font-family:字体样式
color:字体颜色 1.英文单词 2.颜色代码#ff4400 可缩写#f40 3.颜色函数rgb(0-255,0-255,0-255)
border:1px solid black; //边框大小 边框样式 边框颜色
width:10px; 宽度
height: 10pk;高度
text-align:left; 水平文字对齐方式 left左对齐 center中间对齐 right右对齐
line-height:10px; 行高
text-indent:2em;缩进2个字符
text-decoration:none; 线的样式 underline 下划线 overline 上划线 line-through 删除线 none没有线
cousor:help; 鼠标移入的光标样式
display:inline 元素类型 行级元素 块级元素 行集块元素
凡是带有inline的元素都带有文字特性(如文本分隔符)
行级元素(内联元素)inline：内容决定元素所占位置 不可以通过css改变宽高
如:<span>
块级元素block：独占一行 可以通过css改变宽高
如:<div>
行集块元素inline-block：内容决定大小 可以改变宽高
如:<img>
margin：外边距
padding：内边距
background-color:背景颜色
position:absolute; 定位(与left right组合使用) absolute 绝对定位 relative 相对定位 fixed 固定位置定位
left:(right)10px; 定位距离左边位置
top:10px; 定位距离上边的位置
absolute:脱离原来位置定位 相对于最近的有定位的父级进行定位 如果没有则相对于文档进行定位
relative:保留原来位置定位 相对于自己的原来的位置进行定位
一般来说:relative作为参照物(做父级) absolute定位
盒子模型 四部分
boder
padding
margin
内容区
注意:
margin: 垂直方向的父子是结合到一起的(取最大的)
当父物体:border-top有值时可以取消个改特性、或者触发bfc
如何触发一个盒子的bfc:
position:absolute;、display:inline-block、float:left/right;、overflow:hidden;
float:浮动元素产生了浮动流,(clear:both 属性可以清楚元素周边的浮动流 块级元素才能使用)
所有产生了浮动流的元素,块级元素看不到他们
产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素
单行文字溢出处理
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
主流浏览器(shell + 有自主研发内核)
IE、 内核 trident
Firefox、内核 Gecko
Safari、 内核Webkit/blink
Google chrome 内核Webkit
Opera 内核 presto
浏览器下载策略
浏览器同时下载html css javaScrip 文件 当网络差的时候会自动放弃下载css javaScript
扫一扫
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
