网页制作入门
网页制作入门
声明：只是从其他地方总结，并非原创，为了方便大家查找，和翻阅，如有侵权可联系删除。
一个网页有很多标签组成，
双标签
单标签
HTML基本格式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
| 名称 | 功能 |
|---|---|
| html | 布局 |
| css | 样式 |
| javascripe | 交互 |
推荐学习网站代码的网址：www.w3school.com.cn
HTML部分
标题
一级标题
....六级标题
标题属性： align：水平对齐方式（left，center，right）块元素 占一行
行内元素 占元素的大小
无序列表
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
无序列表属性：
type：项目符号
disc：实心圆
circle：空心圆
square：空心方块
有序列表
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
有序列表属性：
type：编号类型
1，A，a，I，i
start：从第几开始编号
列表属性：
list-style：none去掉列表符号
链接
链接
链接属性：
href：目标文件路径
target：目标文件显示窗口
blank：在新窗口中打开目标文件
self：在当前窗口打开目标文件
parent：在父级窗口打开目标文件
top：在顶级窗口打开目标文件
图片
图片属性：
src：图片路径
align：图片水平对齐方式 left：左环绕
width：图片宽度 500
height：图片高度 500
border：图片边框粗细 1px
hspace：水平间距 10
vspace：垂直间距 10
引入css方法
嵌入式：通过
<head>
<style type="text/css">
div{width:500px;height；500px;border;solid 1px #000;}
</stule>
</head>
<body>
<div></div>
</body>
外联式：通过标记引入外部css文件
桌面新建css文件，在css里编写
<head>
<link href="1.css" rel=""stylesheet type="text/css" />
</head>
行内式：通过
<div style="width:500px;height；500px;border;solid 1px #000; "></div>
尺寸属性：
width：元素宽度 px单位不能省略
height：元素高度
字体属性：
font-size：文字大小
font-family：字体
font-style：italic斜体
font-weight：bold粗体
文本属性：
color：文本属性
text-decoration：文本修饰线
none 无
underline 下划线
overline 上划线
line-through 删除线
text-align：文本水平对齐方式
left；center；right
line-height：行高
text-indent：首行缩进 2am
letter-spacing：字间距
font简写：{斜体}{加粗}大小/行高 ‘字体’
边框属性
border:solid 1px #000;
none:无线
solid：实线
dashed：虚线
dotted：点状线
border-left:左边框线
border-right:右边框线
border-top:上边框线
border-bottom:下边框线
padding:1px 上下左右都是1px
内填充 1px 2px 上下1px 左右2px
1px 2px 3px 上1px 左右2px 下3px
1px 2px 3px 4px 上1px 右2px 下3px 左4px
背景属性
background-color:背景颜色
background-image:url();背景图片
background-repeat:背景平铺方式
no-repeat: 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position:背景定位
水平位置 垂直位置
简写background:背景色 背景图片 平铺方式 定位方式
浮动
float:浮动 left，right
clear:清除浮动 left，right，both
区块属性
display:如何显示元素
none 隐藏
block 块元素
inline 行内元素
overflow:当内容溢出时，如何显示
visible 可见
hidden 隐藏
scroll 出现滚动条
auto 自动
定位属性
position:元素定位方式
static 静态定位
fixd 固定定位，元素相对于窗口距离，不占空间
relative 相对定位，元素相对于自己看，占空间
absolute 绝对定位，元素相对于祖先定位元素，不占空间
left 左边距离
right 右边距离
top 上边距离
bottom 下边距离
继承性
font-size,font-amily,font-style,font-weight
color,text-align,text-decoration,text-index,letter-spacing,line-height
优先级
单个选择器
行内样式>id>class>标签