、新建项目
1、新建===web项目===输入项目名称====完成
二、新建html文件
在新建项目中新建html模板
输入文件名称:
三、认识基本格式
联想出基本格式:
四、编辑html文件
运行html,选择浏览器
五、html常用的快捷键
(1)ctrl+n+w web项目创建
(2)ctrl+n+h html文档创建
(3)ctrl+s 保存html页面(页面上如果未保存会显示*号)
(4)ctrl+r html运行
(5)ctrl+z 撤回
(6)!+tab键 联想基本格式
(7)ctrl+/ 注释和取消注释
(8)ctrl+鼠标滚轮, 字体方大和缩小
六、认识标签
(1)H标签(标题标签)
(2)p标签 (段落标签)
(3)img 标签(图片标签)
两种:第一种widows上传图片,第二种:网上图片链接
第一种
img中显示图片
img中引入图片
第二种:网上图片的链接:
(4) 标签(空格)
(5)em 标签表示斜体
(6)i 标签表示斜体
(7)br 表示换行
(8)b 标签表示加粗
(9) strong 标签表示加粗
(10)s 标签(删除线)
(11)u 标签 (下划线)
(12)font 颜色
(13)sub下标
(14)sup上标
1)背景样式属性,用于定义 HTML 元素的背景色、背景图片,同时还可以进行背景定位、背景图片重复、背景图片固定。
background-color 属性可以给指定标签元素设置背景色。
举个例子! 我们给 body 元素设置一个背景颜色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: yellowgreen;
}
</style>
</head>
<body></body>
</html>
background-image 属性可以把图像插入背景。background-size 属性可以给背景图设置大小。
举个例子! 我们给 body 元素设置一个背景图像。
wget https://labfile.oss.aliyuncs.com/courses/3773/moon.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
}
</style>
</head>
<body></body>
</html>
通过 background-position 属性,可以改变图像在背景中的位置。
background-position 属性,设置属性值为居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
background-position: center;
}
</style>
</head>
<body></body>
</html>
background-repeat 属性是用来设置背景图像是否平铺。
下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。
可 取 值 | 描 述 |
repeat | 背景图像将在垂直方向和水平方向重复(默认值) |
repeat-x | 背景图像将在水平方向重复 |
repeat-y | 背景图像将在垂直方向重复 |
no-repeat | 背景图像将仅显示一次 |
我们规定应该从父元素继承 background-repeat 属性的设置。
background-repeat 属性并设置值为不平铺:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body></body>
</html>
(2)文本相关的属性:
文本属性用于定义文本的样式,通过文本属性,可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示:
属 性 | 可 取 值 | 描 述 |
line-height | normal、number、length、% | 设置行高 |
text-indent | length、% | 设置文本缩进 |
text-align | left、right、center、justify、start、end | 设置对齐方式 |
letter-spacing | normal、length | 设置字符间距 |
text-decoration | line、color、style、thickness | 设置文本修饰 |
white-space | normal、pre、nowrap、pre-wrap、pre-line、break-spaces | 规定如何处理空白 |
line-break | auto、loose、normal、strict、anywhere、unset | 处理如何断开带有标点符号的文本的行 |
line-height 用于设置多行元素的空间量,可取值具体说明如下:
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>line-height 的使用</title>
<style>
div {
width: 300px;
height: 400px;
border: 1px solid;
font-size: 15px;
display: inline-block;
vertical-align: top;
}
.div1 {
line-height: 2; /*15 * 2*/
}
.div2 {
line-height: 30%; /*15 * 30% */
}
</style>
</head>
<body>
<div class="div1">
<p>“海水呀,你说的是什么?”</p>
<p>“是永恒的疑问。”</p>
<p>“天空呀,你回答的话是什么?”</p>
<p>“是永恒的沉默。”</p>
</div>
<div class="div2">
<p>“海水呀,你说的是什么?”</p>
<p>“是永恒的疑问。”</p>
<p>“天空呀,你回答的话是什么?”</p>
<p>“是永恒的沉默。”</p>
</div>
</body>
</html>
显示为,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<ul>
<li></li>
<li></li>
</ul>
霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程,通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力,使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导,BAT 级别的测试管理大咖量身打造职业规划。
*请认真填写需求信息,我们会在24小时内与您取得联系。