testing基础第二天
hbuilder操作
- 第一步:新建一个目录,用于存放写的html网页
- 3-code
- 第二步:把目录拖拽到hb的项目管理器中
- 第三步:鼠标选中在项目管理器中的目录名(一定要选中)
- 鼠标右键,选择新建html文件
- 鼠标右键,选择新建html文件
网页的骨架
- 全世界所有的html网页,都有一个相同且固定的框架,这就网页的骨架
html5必须写成这样
<html> 所有的网页内容必须写在html开始,/html结束内部<head> html文件的头<meta charset="UTF-8"> 指定网页中的字符集<title>百度2下,还是不懂title> 网页的在浏览器的标题head><body> 网页的内容必须写在body我的网页 body>
html>html标签
- html就是由标签组成的
- 标签名都是用
<>括起来的 - 单标签
- 只有一个
<标签名 />
- 双标签
- 一对,有开始,有结束
- <标签名>
注释
- 注释就是在html源代码中存在,但浏览器不会显示的内容
- 注释经常会用于给代码一个说明
- ctrl + / 可以快速的注释一行代码
<html><head><meta charset="UTF-8"><title>百度2下,还是不懂title> head><body> body>
html>html中的空格和回车
- 在html源代码中空格和回车不被浏览器所显示
- 多个空格,在浏览器中会显示一个空格
- 多个回车换行,在浏览器中会显示一个空格
- shift + enter 快速的生成一个br标签
- 如果要空一个汉字的宽度,写3个
- 如果要空一个汉字的宽度,写3个
<html><head><meta charset="UTF-8"><title>title>head><body>我今天 学习html<br />这里<br />要演示 回车和 空格body>
html>标题标签
- 一共有6级标题标签
- 是双标签,从h1到h6
- 没有h7这个标签
- 如果写了一个不存在的标签,浏览器会忽略这个标签
<html><head><meta charset="UTF-8"><title>title>head><body><h1>第一章h1><h2>第一节h2><h3>aaaah3><h7>bbbbbbbbbbh7> 如果写了一个不存在的标签,浏览器会忽略这个标签今天开始学习body>
html>段落标签
段落内容
<html><head><meta charset="UTF-8"><title>title>head><body><p>今天一天很高兴p>明天希望还能这么高兴<br />后天还高兴body>
html>文字效果标签
- b 文字加粗
- s 文字删除
- i 文字倾斜
- 双标签
<html><head><meta charset="UTF-8"><title>title>head><body>今天学习html<b>今天学习htmlb><s>今天学习htmls><i>今天学习htmli><br /><s>原价100000000s>, 现价1块body>
html>标签可以嵌套
标签不能交叉
嵌套后多个效果会叠加
<html><head><meta charset="UTF-8"><title>title>head><body>今天学习html<b>今天学习htmlb><s>今天学习htmls><i>今天学习htmli><br /><s>原价100000000s>, 现价1块<br /><b><s><i>今天学习htmli>s>b>body>
html>- strong-文字加粗
- del-删除线
- em-倾斜
<html><head><meta charset="UTF-8"><title>title>head><body>今天学习html<b>今天学习htmlb><s>今天学习htmls><i>今天学习htmli><br /><s>原价100000000s>, 现价1块<br /><b><s><i>今天学习htmli>s>b><br />测试内容<strong>测试内容strong><del>测试内容del><em>测试内容em>body>
html>布局标签
- div-大盒子
- span-小盒子
- 双标签
- 大盒子总是独占一行或多行
- 小盒子,小盒子里的文字有多少,小盒子就多大,一行可以出现多个小盒子
- 大盒子里面可以放大盒子, 也可以放小盒子
- 小盒子里面能放小盒子,但不能放大盒子
<html><head><meta charset="UTF-8"><title>title>head><body><div>大盒子1<br />aaaaaaaaaaaadiv><div>大盒子2div><span>小盒子1span><span>小盒子2span><div><span>大盒子里的小盒子1span><span>大盒子里的小盒子2span>div><span><div>aaaaaaaadiv><div>bbbbbdiv>span><span><div>aaaaaaaadiv><div>bbbbbdiv>span> <div><div>aaaaaaaaaaaaaaaaaaaaaaaaaaadiv><div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbdiv><span>小盒子span><div>大盒子div><span>小盒子span>div>body>
html>图像标签
- 单标签img
- 属性src指向图像文件的文件名
- 键值对
- 键=值
- src=“1.jpg”
- 让网页能显示图像
- 第一步:把图像文件拷贝到和html同一个目录下
- 第二步:在html文件中添加img标签,并且src属性的值为图像文件名
<html><head><meta charset="UTF-8"><title>title>head><body><img src="1.jpg"/>body>
html>img的宽度和高度
- width宽度
- height高度
- 宽度和高度的单位是像素
- 如果同时写的宽度和高度
- 图片会根据宽度和高度拉伸或者压缩
- 如果只写高度和宽度的其中一项,另一项会随着图片的原始比例自动缩放
<html><head><meta charset="UTF-8"><title>title>head><body><img src="1.jpg" height="600" width="10"/>body>
html>其他属性
- title-鼠标悬停提示文字
- alt-图片加载失败,显示文字
- 如果图片成功加载,alt就没有任何显示了
<html><head><meta charset="UTF-8"><title>title>head><body><img src="1.jpg" height="300" width="300" title="这是我的图片" alt="aaaaa"/>body>
html>img标签的属性-小结
- src
- width
- height
- title
- alt
课堂练习-图片标签
<html><head><meta charset="UTF-8"><title>title>head><body><div><img src="1.jpg" width="300" height="300"/><img src="fj.jpg" width="300" height="300"/>div><div><img src="fj.jpg" width="300" height="300"/><img src="1.jpg" width="300" height="300"/>div>body>
html>显示文件的不同路径
- 如果图像文件在html文件的下级目录
- 下级目录名/图像文件名
- 如果图像文件在html文件的上级目录
- …/图像文件名
<html><head><meta charset="UTF-8"><title>title>head><body><img src="../fj.jpg"/>body>
html>
<html><head><meta charset="UTF-8"><title>title>head><body><img src="tu/it.jpg"/>body>
html>
- 课堂练习
<html><head><meta charset="UTF-8"><title>title>head><body><img src="../2.jpg"/>body>
html>
<html><head><meta charset="UTF-8"><title>title>head><body><img src="img/1.jpg"/>body>
html>- 课堂练习
<html><head><meta charset="UTF-8"><title>title>head><body><img src="../img/1.jpg"/>body>
html>路径
- 相对路径
- 以html文件所在的目录为当前目录,计算路径总是从当前目录做为起点
- src=“1.jpg” html文件和图像文件在同一个目录
- src=“tu/1.jpg” 图像文件在当前目录的下级目录tu中
- src="…/1.jpg" 图像文件在当前目录的上级目录中
- src="…/tu/1.jpg" 图像文件在当前目录的上级目录的tu目录中
- 绝对路径
- 总是从盘符根目录开始
- 在html中不能书写绝对路径,只能书写相对路径
<html><head><meta charset="UTF-8"><title>title>head><body><img src="C:\file\teach\01基础班\基础班02\3-code\1.jpg"/>body>
html>超链接
- a 双标签
- 属性href=值
- 值是一个html网页,或者一个网站
- 如果是网站,一定要写协议名http
<html><head><meta charset="UTF-8"><title>title>head><body><a href="http://www.baidu.com">去百度a><br /><a href="我的第一个网页.html">看看我的第一个网页a>body>
html>- target="_blank"
- 在新窗口打开目标链接
<html><head><meta charset="UTF-8"><title>title>head><body><a href="http://www.baidu.com" target="_blank">去百度a>body>
html>超链接标签与其他标签混合效果
<html><head><meta charset="UTF-8"><title>title>head><body><a href="我的第一个网页.html">a标签 的练<br />习a><a href="http://www.baidu.com" target="_blank"><h1>第一节课h1>a><a href="我的第一个网页.html"><p>asdfsdfdsfsdfsfdsfssdfdsfsfdsfsfdsfdsfdssfddsfdsfdssdfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfsfdsfp>a><div><a href="文字标签.html">去到文字标签的网页a>div><div><a href="文字标签.html">去到文字标签的网页a>div><span><a href="文字标签.html">去到文字标签的网页a>span><span><a href="文字标签.html">去到文字标签的网页a>span><a href="http://www.baidu.com"><img src="fj.jpg"/>a>body>
html>- a标签href中的路径演示
<html><head><meta charset="UTF-8"><title>title>head><body><a href="../tu/1.html">显示图目录下的网页a>body>
html>课堂练习
- 思路
有两个html文件
a.html 有个超链接,点击到b.html a上面有个图片并且图片就是超链接
b.html 有个超链接,点击到a.html b上面有个图片,并且图片就是超链接
a.html
<html><head><meta charset="UTF-8"><title>title>head><body><a href="b.html"><img src="1.jpg" width="300" height="300"/>a>body>
html>b.html
<html><head><meta charset="UTF-8"><title>title>head><body><a href="a.html"><img src="2.jpg" width="300" height="300"/>a>body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！