HTML基本架构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
holleworld!!!
</body>
</html>
HTML基本标签
<h1>一级标题</h1>……<h6>六级标题</h6>
<p>段落标签</p>
<br>换行标签
<hr>水平线
超连接标签：<a href="需要连接的地址"></a>
图片连接：<img src="地址" alt="图片显示不出来显示的文字" width="宽度" height="高度">
表格标签：<table>
表格行标签:<tr>
表格列标签<td>
跨行标签:rowpan
跨列标签:colspan
其他标签:
块标签:<div>
跑马灯效果<marquee>
提示语效果<span>
HTML表单标签
<form> action提交的地址 method提交的数据
表单元素定义以inout为主
type="reset":重置按钮
type="button":普通按钮
type="submit":提交数据按钮
type="file":上传文件
type="checkbox"：复选框
type="radio":单选框
type="password":密码框
type="text":文本框
下拉列表:
下拉列表：<select> <option value="属性">属性</option></select>
多行文本域：<textarea rows="值" cols="值"></textarea>
表单域：<fieldset><legend>指定表单域的标题
HTML框架:<frameset>frameset不能与body标签同时存在于同一个页面(现阶段很少用此框架,一般用盒子(div))
HTML特殊符号:
大于：>、小于：<、&：与字符、"：引号、®：己注册、©：版权、&trade：商标、 ：空格
css
css是什么：
层叠样式表，css是对html进行样式修饰语言 Cascading Style Sheet
层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用
样式表：就是css属性样式的集合
css作用：
1、修饰html的 使其html样式更加好看
2、提高样式代码的复用性
3、html的内容与样式相分离 便于后期维护
css引入方式
方式一：内嵌样式是把css的代码嵌入到html标签中
语法：使用style属性将样式嵌入到html标签中，属性的写法：属性：属性值，多个属性之间使用分号“;”隔开（不建议使用）
内嵌样式：<div style="color:red;font-size: 100px;">向阳花</div> 方式二：内部样式是在head标签中使用style引入css
语法：1、使用style标签进行css的引入 <style type="text/css">属性：type：告知浏览器使用css解析器去解析
2、属性的写法：属性：属性值
3、多个属性之间使用分号;隔开
<style type="text/css">
div{color:red;font-size: 100px;}
</style>方式三：将css样式抽取成一个单独的文件，谁用谁就去调用
语法：创建css文件 将css属性写在css文件中
在head中使用link标签进行引入
属性的写法：属性：属性值
多个属性之间使用分号;隔开
<link rel="stylesheet" type="text/css" href="css文件路径"/>方式四：导入式（不建议过多使用）
<style type="text/css">@import url("css地址");</style>link与@import方式的区别：
1、link所有浏览器都支持 import部分低版本IE不支持
2、import方式是等待html加载完毕之后在加载
3、import方式不支持js的动态修改
css选择器
基本选择器
标签选择器：语法：html标签名{css属性}
类选择器：语法：.class的值{css属性}
id选择器：语法：id的值（是位置标识）{css属性}
优先级：id选择器>class选择器>标签选择器
其他选择器
伪类选择器：
完成状态 a:visited{css属性}
触发状态 a:active{css属性}
悬浮状态 a:hover{css属性}
静止状态 a:link{css属性}层级选择器/后代选择器：语法：父级选择器 子级选择器 {}
交集选择器：语法：标签类选择器/id选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集，第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，选择器之间不能有空格，必须连续书写；
并集选择器：语法： h1,p,div,.demo{css属性}
多个选择器通过逗号连接而成，利用并集选择器同时声明风格相同样式
属性选择器（不常用）：格式为：htm标签[属性=‘属性值']{css属性:css属性值;} 或者html标签[属性]{css属性:css属性值;}，
css属性
文字属性：
color 设置字体颜色
font-size 设置文字大小
font-family 设置文字字体
font-style 设置文字风格 italic 斜体 oblipue 倾斜
font-weight 设置粗细 bold 粗
line-height 行高
font-variant 变体 small-caps小 大字母
text-decoration underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
文本属性
color 颜色
text-indent 段落缩进
text-decoration none 关闭应用到这个元素上的所有装饰
underline: 添加下划线
overline:在文本的顶端画一个上划线
line-through:在文本中间画一个贯穿线
blink:让文本闪烁
text-align 文本对齐方式
word-spacing 字符间距
letter-spacing 单词或字母间距
line-height 单位px;
背景属性
background 设置背景属性
background-color 设置背景色
background-image:url(图片路径)设置背景图片
background-repeat 平铺方式 重复;
repeat-y:只在垂直方向都平铺
repeat-x:只在水平方向都平铺
repeat:在水平垂直方向都平铺
no-repeat:任何方向都不平铺
background-position 设置背景初始出现的位置 top 上 bottom 下 left左对齐 right右对齐 center居中对齐
background-attachment: fixed;(固定) scroll;(滚动) 跟随页面滚动
列表属性
list-style-type:decimal; g改变列表的标签类型
list-style-image:url(路径)用图像表示
list-style-position:inside:确定标志出现在列表项内容之外还是内容内部 outside内 、inside;(外)
尺寸属性
显示属性
显示属性display :none:不显示、block:块级显示、inline:行级显示
浮动属性
float 浮动 left：左浮动、 right：有浮动、 none：无浮动
clear 清楚浮动 left：清除左浮动、right：清除右浮动、both：清除浮动none：不清除
inherit 规定应该从父元素继承
定位属性
相对定位 position: relative; top(相对于上边界) right(相对于右边界) bottom(相对于下边界) left(相对于左边界)
相对于原来的位置 对其他元素没有影响
绝对定位 position: absolute; top(相对于上边界) right(相对于右边界) bottom(相对于下边界) left(相对于左边界)
相对于浏览器边框或者父元素位置
固定位置 position: fixed;
盒子模型
属性
外边距
margin：top上、right右、bottom下、left左
margin-top：外上边距
margin-right：外右边距
margin-bottom：外下边距
margin-left：外左边距
内边距
padding top right bottom left
padding-top 上外边距
padding-bottom: 右外边距
padding-left: 下外边距
padding-right: 左外边距
边框
边框
border-color 边框颜色
border-width 边框宽度
border-style 样式、solid:实线、double:空心线、dashed:圆点组成的边框、dotted:虚线组成的边框
css宽展属性
border-radius: px 创建圆角
box-shadow px px px color 添加阴影
background-size: px px 设置背景图像尺寸
background-image:为指定元素指定多个背景图像
text-shadow 5px 5px 5px color;添加文本颜色
display属性常用可能值
display:取值有三个：block,inline,none
block:将元素显示为块级元素，该元素前后会带有换行符
inline:默认，元素会显示为内联元素，该元素前后没有换行符
none:该元素不会被显示
overflow属性值
visible：默认值，内容不会被修剪，呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是流浪器会显示滚动条以便查看其余内容
auto：如果内容被修剪，则流浪器会显示滚动条以便查看其余的内容
扫一扫
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
