Html前端网页设计

HTML网页设计

第一天：初识HTML

主体部分

认识HBuilder软件
快捷键

1. ctrl+/ 注释代码
2. ctrl+y 恢复撤销
3. ctrl+x 剪切
4. ctrl+z 撤销
5. ctrl+c 复制
6. ctrl+p 在当前项目查找文件
7. ctrl+f 在当前文件查找字符串
8. ctrl+alt+f 在当前目录查找字符串
9. ctrl+k 格式化代码
10. ctrl+g 跳转到某行代码
11. ctrl+o 打开文件
12. ctrl+alt+s 保存所有文件
13. 鼠标左键+ctrl选中多行(可进行多行修改操作)

一、内部包含的部件
1、标题标签
例：

（内容） 双标签
改变文字大小，从大到小，黑体加粗
标签只许到6，7以后都是普通文字样式
2、段落、换行、注释
（1）段落

（内容）

双标签
代表段落文字标签
（2）水平线标签

---

可插入水平分割线
（3）换行

使段落文字换行
(4)居中
（内容） 双标签
(5)注释
<！—内容—>
或快捷键
3、格式元素

普通文本格式

粗体文本： 东软睿道
大号字： 东软睿道
大号字： 东软睿道
着重文字： 东软睿道
斜体字： 东软睿道
小号字： 东软睿道
加重语气： 东软睿道
下标字： _东软睿道
上标字： ^东软睿道
插入字： 东软睿道
删除字： 东软睿道
4、插入图片元素

src代表图像地址
alt代表图像的替代文字
title代表鼠标悬停时提示文字
width和height代表宽度和高度
5、列表
（1）无序列表

（2）有序列表

（3）定义列表definition list 第二天 CSS用于网页设计中字体、位置、颜色的设置 一、CSS样式表单 （1）外部引用样式 href代表文件路径 rel代表使用外部样式表 type代表文件类型 （2）内部样式 css代码写在 三、CSS文本属性 1、font-family 字体样式 2、font-size 字体大小 3、font-weight 字体加粗 4、 四、无语意元素 1、无语意标签 （1） 内联标签，可句中单独调用 （2）

块级标签 五、用来设置板块 #代表id . 代表class #top 代表

.top 代表

六、背景设置 background-color 元素背景颜色 background-image 元素背景图片 引用方法 background-rapeat 设置背景图片水平或垂直平铺 background-position 设置背景图片起始位置 七、文本样式 color 设置文本颜色 line-height 设置行间距离行高 text-align 设置文本的对齐方式 八、 list-style:none; /* 列表样式,去掉前面的圈 */ margin:0px;/* 去标头空白 */

/* 鼠标悬停时效果改变 /
#aaa li:hover{
background-color: darksalmon;
font-size: 18px;
color:aqua;
}
float: left;/ 浮动操作 /可进行横向排列
float:left;/ 浮动效果,让竖着的文字浮动变为一行 */

padding-left: 40px; 代表顶出的距离

margin-top 代表距离顶部的间距

margin-right: auto; /* auto为自动调节位置 */

border-radius:10px; /* 边框圆角程度 */

#menu li:hover{
background-color: darksalmon;
color: darkorchid;
border-radius:50px ;/* 鼠标悬停时边框形状 */
}

使网页之间链接

• 内容简介