没有合适的资源?快使用搜索试试~ 我知道了~
首页韩顺平 轻松搞定网页设计html (DIV CSS) javascript视频笔记(全).doc
韩顺平 轻松搞定网页设计html (DIV CSS) javascript视频笔记(全).doc
5星 · 超过95%的资源 需积分: 13 59 下载量 138 浏览量
更新于2023-03-16
评论 2
收藏 8.07MB DOC 举报
韩顺平 轻松搞定网页设计html (DIV CSS) javascript视频笔记(全).doc
资源详情
资源评论
资源推荐
韩顺平html第二讲
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<!-1-><font color=red>hello world</font> <!-- 使 用 <font
color=red></font>来调整字体颜色-->
</br>
<!-2-><font size=7 color=blue>hello world1</font> <!-- 使 用 <font
size=7></font>来调整字体大小,但是size里面的取值是1—7-->
</br>
<!-3-><font style="font-size:150px" color=yellow>hello world2</font> <!--使用CSS中
<font style="font-size:40px"></font>将字体调整更大-->
</br>
<!-4-><p><font color=cyan>为字体更换颜色4</font></p>
<b> <font color="red">hhhhh</font></b>
<!-5->
</body>
</html>
韩顺平html第三讲
Html 的超链接:
例子:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!--*****************html 超链接案例***************-->
<!--*****************html 超链接默认格式***************-->
<a href="http://www.sohu.com">超链接</a> </br> <!--超链接基本格式-->
<!--**target 常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**-->
<a href="http://www.sohu.com"target= "-blank">在新窗口打开</a> <!--超链接在新窗口下打开文件--></br>
<a href="http://www.sohu.com"target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br>
<a href="mailto:yanli457352797@hotmail.com">给自己写信</a>
</body>
</html>
Html 图片元素(标记):
<img src ="图片路径" width="宽度" height=”高度” ></img>
案例:(网页上显示图片)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
</head>
<body>
<!--*****************图片元素***************-->
<img src ="a.jpg" width="100" > <!--***********插入图片************-->
<a href="http://www.sohu.com"><img src ="a.jpg" width="100" ></a> <!--***********图片链接************-->
<img src ="http://img.blog.163.com/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400"
>
<img src ="a.jpg" width="100" border="10" > </img> <!--*******border 表示为插入的图片加上边框******
**-->
</body>
</html>
Table 表格:
<!--<table border=”边框宽度 “cellspacing”两个列行间的距离大小” cellpadding”各行列间的内容被填充" align="表格的
位置" bgcolor="设置表格背景颜色"></table <!--**tr 表示行,td 表示列,<tr align="设置字体对齐方式</tr>"***-->
案例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
</head>
<body>
******************表格,为表格添加背景****************</br>
<!--<table border=”边框宽度 ”cellspacing”空隙大小” cellpadding”填充大小" align="表格的位置" bgcolor="设置
表格背景颜色"></table>-->
<table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan">
<tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr 表示行,td 表示列,<tr align="设
置字体对齐方式</tr>"***-->
</table>
</body>
</html>
韩顺平html第四讲
合并单元格:
colspan=跨行列数
roespan=跨列行数
<head>
<title> 表格</title>
***********菜谱***********
<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180>
<tr align=center><td colspan=3>周一菜谱</td>></tr>
<tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr>
<tr align=center><td>豆腐</td>><td>白菜</td></tr>
<tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr>
<tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr>
</head>
<body>
</body>
</html>
注释:<tr align=center></tr>在此处表示字体的对齐方式
韩顺平html第五讲
无序列表(html 常用标记/元素-ui/li)
格式: Html 列表——无序列表
<ul type=”属性值”>
<li>列表内容</li>
</ul>
<ul>的属性设定(常用):
例如:<ul tyre=”square”>
Type=”squre”
设定符号款式,其值有三种,如下,默认为 Typr=”disc”
Type=”disc”时的列项符号是实心圆点
Type=”circle”时的列项符号为空心圆
Type=”square”时的列项符号为空心正方形
************无序列表代码例子*********
<html>
<body>
<ul type="circle">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
Html 列表——有序列表 ol 称顺序列表标记
<ol type=”属性值” start=”起始值”>
<li>列表内容</li>
</ol>的属性设定(常用):
例如:<ol type=”i” start=”4”></ol>
type=”i”
设定数目款式的值有 5 种:阿拉伯数字,a 小写字母,A 大写字母,i 小写罗马数字,I 大写
罗马数字
************有序列表代码例子*********
<html>
<body>
<ol type="1">
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
<ol type="1" start=”5”>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</body>
</html>
Html 框架标记(元素)frameset/frame
<Frameset frameborder=”边框大小” cols=”按照列的百分比,隔开”>rows=” 按照行的百分比
><Frame name=”给 frame 取名” src=”html 路径” noresize></frameset>
实例:
qq.html
<html>
<body bgcolor=blue>
歌词
</body>
</html>
ee.html
<html>
<body bgcolor=red>
费玉清
</body>
</html>
All.html
<html>
<frameset cols="20%,*" frameborder=100>
<frame src="qq.html" noresise name=”song” />
<frame src="ee.html" noresise=” noresise” name=”jun” / >
</frameset>
</html>
注释:all.html 中不能带 body 标记
综合案例:
all.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<frameset rows="30%,*" border="0">
<frame src="top.html"noresize/>
<frameset cols="20%,*">
<frame src="left.html" border=0 noresize/>
<!--frame 元素中有一个属性,相当于给该 frame 取名-->
<frame src="right1.html"name="right"/>
</frameset>
</frameset>
</html>
top.html
<html>
<head>
<title> New Document </title>
</head>
<body >
<img src="logo1.jpg" ></img>
</body>
</html>
Left.html
<html>
<head>
剩余63页未读,继续阅读
w1464525673
- 粉丝: 2
- 资源: 63
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 27页智慧街道信息化建设综合解决方案.pptx
- 计算机二级Ms-Office选择题汇总.doc
- 单链表的插入和删除实验报告 (2).docx
- 单链表的插入和删除实验报告.pdf
- 物联网智能终端项目设备管理方案.pdf
- 如何打造品牌的模式.doc
- 样式控制与页面布局.pdf
- 武汉理工Java实验报告(二).docx
- 2021线上新品消费趋势报告.pdf
- 第3章 Matlab中的矩阵及其运算.docx
- 基于Web的人力资源管理系统的必要性和可行性.doc
- 基于一阶倒立摆的matlab仿真实验.doc
- 速运公司物流管理模式研究教材
- 大数据与管理.pptx
- 单片机课程设计之步进电机.doc
- 大数据与数据挖掘.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论6