整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

肖sir_html之基本使用(1)

、新建项目

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
  • background-image
  • background-size
  • background-position
  • background-repeat

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 属性
  • text-indent 属性
  • text-align 属性
  • letter-spacing 属性
  • text-decoration 属性
  • white-space 属性
  • line-break 属性

文本属性用于定义文本的样式,通过文本属性,可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示:

属 性

可 取 值

描 述

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 用于设置多行元素的空间量,可取值具体说明如下:

  • normal:取决于用户端。
  • number:数字乘以元素的字体大小。
  • length:指定长度用于计算高度。
  • %:计算值是给定的百分比值乘以元素计算出的字体大小。

例子,

<!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>

显示为,

、目录

  • HTML 基本概念
  • HTML 基本结构
  • HTML 基本标签

二、HTML基本概念

2.1、什么是 HTML

  • 超文本标记语言(Hyper Text Markup Language)
  • 描述网页的语言
  • 传输最简单的文本内容
  • 可以表达文字内容之外的语言——HTML1.0

2.2、HTML的发展

  • html1.0—-xhtml1.0( 过渡 )—-xhtml2.0( 放弃 )——html5

三、HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、HTML基本标签

4.1、标签和属性

  • 双标签:<标签名称></标签名称>
  • 单标签:<标签名 />

4.2、标签的属性

  • 基本格式:<标签名 属性1=“值1” 属性2=“值2”></标签名>
    • 标签可以拥有多个属性
    • 属性必须写在开始标签中,位于标签名后面
    • 属性之间不区分顺序
    • 标签与属性之间、属性与属性之间用空格隔开
    • 每个属性都有默认值,省略属性则表示使用默认值

4.2、HTML全局属性

  • class:规定元素的类名
  • id:规定元素唯一的id
  • lang:设置元素中内容的语言代码
  • style:规定元素的行内样式
  • title:规定元素的额外信息

五、HTML事件

5.1、HTML事件—窗口事件

  • 使用HTML事件触发浏览器中的行为,比如启动某一段JavaScript
  • 使用于body标签中
    • onblur:当窗口失去焦点时运行脚本
    • onfocus:当窗口获得焦点时运行脚本
    • onload:当加载文档时运行脚本

5.2、HTML事件—表单事件

  • form
    • onblur:当窗口失去焦点时运行脚本
    • onchange:当元素改变时运行脚本
    • onfocus:当窗口获得焦点时运行脚本
    • onreset:当表单重置时运行脚本,HTML5不支持
    • onselect:当选取元素时运行脚本
    • onsubmit:当提交表单时运行脚本

5.3、HTML事件—键盘事件

  • 键盘事件
    • onkeydown:当按下键时运行脚本
    • onkeypress:当按下并松开键时运行脚本
    • onkeyup:当松开键时运行脚本

5.4、HTML事件—鼠标事件

  • 鼠标事件
    • onclick:当单击鼠标时运行脚本
    • ondblclick:当双击鼠标时运行脚本
    • onmousedown:当按下鼠标时运行脚本
    • onmousemove:当鼠标指针移动时运行脚本
    • onmouseout:当鼠标指针移出元素时运行脚本
    • onmouseover:当鼠标指针移至元素之上时运行脚本
    • onmouseup:当松开鼠标按钮时运行脚本

5.5、HTML事件—多媒体事件

  • 多媒体事件
    • onabort:当发生中止事件时运行脚本

六、标签

6.1、注释标签

  • 标签: < !-- 注释内容 -- >
  • 作用:在源文档中插入注释。注释不会在浏览器中显示

6.2、文档标题标签

  • 标签:
  • 作用:
    • 定义浏览器工具栏中的标题
    • 提供页面被收藏时的标题
    • 显示在搜索引擎中显示的页面标题

6.3、标题标签

  • 标签:

  • 作用:
    • 用来定义HTML的标题
    • 用例定义最高等级的标题
    • 用例定义最低等级的标题
  • 属性:全局属性、事件属性

6.4、段落标签

  • 标签:
  • 作用:定义段落
  • 属性:全局属性,事件属性

6.5、容器标签1

  • 标签:
  • 作用:对行内元素进行组合,提供了一种将文本或文档的一部分独立出来的方式
  • 属性:全局属性、事件属性

6.7、容器标签2

  • 标签:
  • 作用:
    • 定义了HTML文档中一个分隔区块或一个区域部分
    • 经常与CSS一起使用,用于定义网页布局
  • 属性:全局属性、事件属性

6.8、图像标签

  • 标签:
  • 作用:定义HTML页面中的图像
  • 属性:
    • src:定义显示图像的URL(必选)
    • alt:定义图像的替代文本(必选)
    • title:鼠标悬停图像时显示的文本
    • width:图像的宽度
    • height:图像的高度
    • border:设置图像边框的宽度

6.9、超链接标签

  • 标签:
  • 定义超链接,从一个页面链接到另一个页面
  • 属性:全局属性、事件属性
    • href:规定链接的目标URL

6.10、列表标签

  • 标签:
<ul>
<li></li>
<li></li>
</ul>
  • 作用:
    • 定义无序列表
      * <ul>与<li>一起使用,创建无序列表
  • 属性:全局属性、事件属性

6.11、列表标签 - 有序列表

  • 标签:<ol><li>...</li><li>...</li></ol>
  • 作用:
    • 定义了一个有序列表,列表排序以数字来显示
    • 使用
    • 标签来定义列表选项
  • 属性:全局属性、事件属性

5.12、表格标签

  • 标签:
    • 表格:<table></table>
    • 行:<tr></tr>
    • 单元格:<td></td>
  • 作用:定义表格
  • 属性:全局属性、事件属性
    • border:定义表格是否有边框

6.13、表单域

  • 标签:<form></form>
  • 创建用户输入的HTML表单
  • 属性:全局属性、事件属性
    • action:指定接收并处理表单信息的服务器URL地址
    • method:表单数据提交的方式
    • name:指定表单的名称

6.14、表单标签

  • 标签:
  • 作用:定义了用户可以在其中输入的字段,输入字段可以通过多种方式改变,取决于type的属性
  • 属性、全局属性、事件属性
    • type:规定要显示input标签的元素的类型
      • text:单行文本(不可换行)
      • password:密码输入框
      • radio:单选框(配合name可以实现单选效果)
      • checkbox:复选框
      • button:普通按钮
      • submit:提交按钮
      • reset:重置按钮
      • image:图像形式的提交按钮
      • file:文件域,点击之后打开文件选择器
    • name:控件名称,name相同则表示为同一组数据
    • value:指定input元素的值
    • size:显示大小
    • checked:是否被选中
    • maxlength:控制输入的最大字符长度

6.15、文本标签

  • 标签:
  • 定义一个多行的文本输入控件
  • 属性:全局属性、事件属性
    • cols:规定文本区域内可见的宽度
    • disabled:规定禁用文本区域
    • name:规定文本区域的名称
    • readonly:规定文本区域为只读
    • rows:规定文本区域内可见的行
    • placeholder:规定一个简短的提示,描述文本区域内期望的输入值

6.16、下拉菜单

  • 标签:…
  • 作用:
    • 用来创建下拉列表
    • 中的标签定义了列表中的可用选项
  • 属性:全局属性、事件属性
    • isabled:当属性为true时,会禁用下拉列表
    • multiple:当属性为true时,可选择多个选项
    • name:定义下拉列表的名称
    • size:规定下拉列表中可见选项的数目

霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程,通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力,使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导,BAT 级别的测试管理大咖量身打造职业规划。