预备内容:---软件安装篇

-预备内容:—软件安装篇

1.记笔记工具----typroa
  • 文件名:为了区分计算机中的不同文件,而给每个文件设定一个指定的名称。由基本文件名(文件主名)和扩展名组成。

eg:SDN.docx 销售统计表.xlsx

不同的文件扩展名也不一样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaHmAz0l-1584704018721)(C:\Users\DELL\AppData\Local\Temp\1581996624939.png)]

2.截图软件的安装
-greenshot
3.sublimes—无需安装
  • 解压
  • 将解压后的文件复制到文件夹(自己选定:最好是C盘,因为有的软件下载重装之后就不能用了)下
  • 选择sublimes.exe发送到桌面快捷方式

HTML ,

一、HTML 简介
1.HTML是什么

HTML : Hyper Text Markup Language超文本标记(标签)语言

各种标签组成 ,用来制作网页 ,告知浏览器该如何显示页面

2.作用
  • 制作网页 ,控制网页和内容的显示
  • 插入图片 、音乐 、视频 、动画等多媒体
  • 通过链接检索信息
  • 使用表单获取用户的数据 ,实现交互
3.版本

W3C : World Wide Web Consortium互联网联盟 ,制定web技术的相关标准和规范的组织 ,HTML就是由W3C制定的标准

有两个版本 :HTML 4.0.1 和 HTML 5.0-----统称H5

官网 :https://www.w3cschool.com.cn

4.扩展名

HTML 文件的扩展名是以.html 或 .htm结尾的

eg:hello.html

二、HTML文档的结构

1.基本结构
1.1 简介
  • html标签是由尖括号括住的关键词,如,通常标签都是成对出现的。
  • 以为根标签 ,包含头部和主题部分
  • 头部提供关于网页的相关信息 , 如标题 、文档类型 、字符编码 、关键词等摘要信息
  • 主体部分提供网页要显示的内容 ,真正显示页面中的
  • 合理的缩进
  • 标签名不区分大小写 ,但一般用小写
1.2 开发工具

记事本 notepad,sublime,notepad++ ,Dreamweaver,VScode,Webstorm等

使用步骤:

1.新建文件(ctrl+N),然后保存(ctrl+N),指定扩展名 .html

2.编写html代码

3.在浏览器中打开文件进行验证效果

1.3 浏览器
  • 常见的浏览器IE微软,chrome谷歌,Firefox火狐,safari苹果
  • 浏览器的作用 :读取html文件,并以网页的形式进行显示
  • 浏览器不会直接显示html标签 ,而是使用标签来解释网页的内容
2.标签
2.1标签的组成

一个完整的html标签的组成:

<标签名 属性名="属性值">内容</标签名>

属性值要使用引号引起来,一般使用双引号

2.2标签的分类

根据标签是否关闭,分为 : 关闭型和非关闭型

  • 关闭型:有开始标签,也有结束标签,一般是成对出现的
1  <title>标题</title>
2  <body>主体</body>
3  <h1>一级标题</h1>
  • 非关闭型:只有开始标签,没有结束标签
1   <meta>
2   <br>
3   <hr>

根据标签是否独占一行,分为:块级标签和行级标签

  • 块级标签:显示为块状,独占一行
1  <h1></h1>
2  <hr>
  • 行级标签:
<span></span>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T2i5HLhL-1584704018722)(C:\Users\DELL\AppData\Local\Temp\1582247397065.png)]

2.3注释

注释在浏览器中不会显示,是用来标注解释html语句,但通过查看源代码可以看到

1   <!--注释内容--->
2.4实体字符

实体字符也称为特殊字符,用于显示一些特殊字符;如< > & 空格等

语法:

&实体字符的名称;

常用实体字符;

1  &lt;    <    小于号    less  than
2  &gt;    >    大于号    great than
3  nbsp;   空格   space在html中对于连续的空白字符(空格、缩进、换行等),在浏览器中显示时只能显示为一  个空格
4  &amp;    &   与
5  &quot;   "  双撇号
6  &copy;   版权符号     copyright
7  &reg;    注册符号     register
8  &times;  关闭符号 

注意:实体字符是严格区分大小写,即大小写敏感

2.5文档类型

在HTML文档的第一行,使用声明html文档的类型

用来告诉浏览器页面的html文档类型,简单来说,用来指定使用的html版本规范

目前基本上都使用的是html5,

三、常用标签

1.基本标签
标签含义说明
br换行标签非关闭型标签
p段落标签关闭型标签,块级标签,前后段落
h1、h2、h3…h6标题标签按照h1到h6逐渐变小,块级标签,并且文本会加粗显示
pre预格式化标签保留编码时的格式
div分区标签常用容器来使用,一般用于页面布局划分,块级标签
span范围标签默认情况下没有任何效果,一般用来设置行内的特殊格式
ol、li有序列表有顺序的项目列表
ul、li无序列表无顺序的项目列表
dl、dt、dd定义列表对术语、图片等进行描述和定义的列表
hr水平线标签非关闭性标签,块级标签
lmg图像标签非关闭型标签
1.1有序列表

ol:ordered list

li:list item

默认情况下使用阿拉伯数字,从1开始标记,可以通过属性进行修改

  • type属性:设置列表前的符号标记,取值,数字1(默认),字母a或A,罗马数字1或i

  • start属性:设置起始值,但必须是数字

    1.2无序列表

    ul:unodered list

    li:list item

默认使用实心圆作为标记符号,可以通过属性进行修改

type属性:设置列表前的标记符号,取值;disc实心圆(默认)、circle空心圆、square正方形,none不显示符号

1.3定义列表

dl:definition list

dt:definition title

dd:definition description

1.4水平线标签

hr:horizontal

常用的属性:

  • color颜色

    两种颜色

    ​ 颜色名称:blue、green、white、orange、red、pink等

    ​ 16进制的RGB:Red、Green、Blue 用法:#RRBGGBB 每种颜色是取值范围0-256,转换为16进制00-FF

    eg:#FF0000红色、#00FF00绿色、#0000FF蓝色、#0000黑色、#CCCCCC灰色、#FF7300橙色

  • size:粗细、数值

  • width宽度

    两种写法:

    ​ 像素,绝对值(固定值)

    ​ 百分比:相对值,相对于

  • align对齐

    取值:默认center居中 left right

    1.5 图形标签

    img:image
    常见的图片格式:.jpg .png .gif .bmp
    常见属性:

    • src:source指定图片的路径(来源),必选参数

    如果图片与html源代码在同一个文件夹中,可以直接书写图片的名称
    习惯上,会将多个图片存放到一个单独的文件夹中,如project\image,此时,需要在图片名称的前面添加 路径
    路径的分类:

    • 相对路径

    表示: ./当前路径 …/当前位置的上一级文件夹

    提示:…/image

    • alt:当图片无法正常显示时提示的信息
    • title:当鼠标停留在图片上时显示的提示信息
    • width/height:设置图片的宽度和高度

    默认情况下原始尺寸显示

    如果只设置其中一个,则另一个按比例自动缩放

    如果同时设置宽和高,可能会导致图片变形

    两种写法: 像素:绝对值(固定值)

    百分比,相对值,相对该标签所在的上一级父容器的宽度 的百分比

    2其他标签
    标签含义说明
    i斜体italic
    em强调的内容在浏览器中显示一般为斜体
    address地址在浏览器中显示一般为斜体,块级标签
    b加粗bold
    strong强调的内容在浏览器中显示时一般为加粗
    del删除线delete
    ins下划线
    sub下标
    sup上标
    bdo设置文本的方向通过属性 dir=“ltr”(left to right)“rtl”(right to left)从右到左
    abbr设置文字缩写通过title属性设置当前鼠标停留在文字上时显示的提示信息
    small相对于当前其他文字的字号减小一号
    big相对于当前其他文字的字号增大一号

为了更好的语义化

3.头部标签
  • meta定义网页的摘要信息,如字符条码,关键字,描述,作者等信息

  • title定义网页的标题

  • style定义网页内部的css样式

  • link引用外部的css样式

  • script定义或引用脚本

  • base定义基础路径

    默认以当前页面文件的所在位置为相对路径的参照

    4.标签嵌套

    一个标签中嵌套另一个标签

    标签不能乱嵌套,如以下标签的嵌套是错误的

    浏览器渲染后显示的页面代码与编码时有所不同

    chrome浏览器提供的开发工具:用来帮助开发人员查看和调试页面的

    如何打开:

    • 在页面中右键单击–>检查/审查元素/查看元素
    • 按F12

    常用工具:

    • Elements:从浏览器的角度来看页面,浏览器渲染页面时的结构
    • console:控制台,显示各种警告和错误信息
    • network:查看网络请求信息,浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间

    四.超链接

    1.简介

    使用超链接可以从一个页面跳转到另一个页面,实现页面之间的跳转

    当鼠标移动超链接文本上时,鼠标箭头会变成一只手

    超链接有三种类型:

    • 普通链接/页面间链接:跳转到另一个页面
    • 锚链接:跳转到锚点(同一个页面的某个位置)
    • 功能链接:实现特殊功能(发邮件,下载)
    2.基本简介

    使用标签创建超链接

    语法模式:

    1  <a href="链接地址" target="链接打开的位置">连接文本或图像</a>

    常见属性

    hre链接地址或路径:链接地址

    target链接打开的位置,取值:

    1 _self自身,当前,默认值 _blank空白、新的页面 _parent父层框架 _top顶层框架 自定义

    路径分类:

    • 相对路径

    相对于当页面所在的路径为参照,不是以根开始的

    ./ 当前路径

    …/ 表示上级路径

    • 绝对路径:

    以根开始的路径

    file:///D:/software/b.html

    https://www.baidu.com

    3.锚链接
    3.1 简介

    点击链接后跳转到页面的指定位置(锚点anchor)

    锚链接的分类

    • 页面内的锚链接
    • 页面间的锚链接
    3.2 页面内的锚链接

    步骤:

    1.定点锚点(标记)
    1    <a name="锚点名称">目标位置</a>
    
    2.锚点链接
    1     <a href="#锚点名称">链接文本</a>
    
    3.3页面间的锚链接
    <a href="目标页面#锚点名称">链接文本</a>
    
    4.功能链接
    5 URL
    5.1 简介

    URL:Uniform Resource Locator 统一资源定位器,用来定位资源所在的位置,常见的就是网址

    1 https://www.baidu.com/img/bd_logo1.png?     name=tom&age=2&sex=male
    2https://www.w3school.com.cn/html/html_quotation_elements.asp   
    3file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html 4http://www.sxgjpx.net 
    5 ftp://10.255.254.253/ 
    
    5.2 组成
    1  https://www.w3school.com.cn/html5/index.asp 
    2  http://www.sxgjpx.net 
    3file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html 
    4  ftp://10.255.254.253/ 
    5  https://www.baidu.com/img/bd_logo1.png
    

    一个完整的URL由8个部分组成:

    • 协议:prococol 如

      http:超文本传输协议,用来访问WEB网站Hyper text Transfer protocol

      https:更加安全的协议 SSL安全套接子层

      ftp文件传输协议,用来访问服务器上的文件,实现文件的上传和下载File Transfer protocol file:文件协议,用来访问本地文件

    • 主机名hostname服务器地址或服务器Netbios名称,如www.baidu.com ftp://10.255.254.254

    • 端口:port位于主机名的后面,使用冒号进行分隔

      不同的协议使用不同的端口,如http使用80端口,https使用的443端口,ftp使用20和21

      如果使用的是默认端口,则端口可以省略

      如果使用的不是默认端口,则必须指定端口http://59.49.32.213:7070/

    • 路径:path目标文件所在的路径结构,如:https://www.bilibili.com/video/av93425449//

    • 资源resource要访问的目标文件,如bd_logo1.png

    • 查询字符串:query string 也称为参数

      在资源后面使用?开头的一组名称/值

      名称和值之间以=分隔,多个表达式之间用&分隔,如:?name=tom&age=2&sex=male

    • 锚点anchor,在资源后面使用#开头的文本,如#6

    • 身份认证authentication,指定身份信息,如:ftp://账户:密码@ftp.bbshh010.com

    五.表格

    1.简介

    表格是一个规则的行列结构,每个表格是由若干行组成,每行是由若干个单元格组成

    table(表格)、row(行)、column(列)

    2.基本结构

    2.1 table标签

    用来定义表格

常用实行:

  • border边框:默认值为0
  • width/height 宽度/高度
  • align 对齐方式,取值:left center right
  • bordercolor:边框颜色
  • gbcolor:背景颜色
  • background:背景图片
  • cell spacing:间距 单元格和单元格之间的距离
  • cellpadding:边距 单元格的内容与边界之间的内容
2.2 tr标签

用来定义行 table row

常见的属性:

  • align水平对齐 取值
2.3 td标签

用来定义单元格:table data

常用 属性:align valign bgcolor background

3.合并单元格

也成为表格的跨行和跨列

两个属性

  • rowspan

    设置单元格所跨的行数,如rowspan=“2” 表示跨2行

  • colspan

​ 设置单元格所跨的列数 如colspan=“” 表示跨4列

步骤:

1.所跨直的单元格中设置rowspan/colspan属性

2.将被跨越的单元格删除

注意:必须要保证每行的实际列数是相同的,否则表格可能会出现错乱

4.高级标签
4.1 caption标签

表格的标题标签

4.2 thead标签

表格的头部table head

4.3 th标签

表格的头部标题table head title

一般在thead中,设置头部标题,替代td标签,与td的区别,加粗和居中对齐

4.4 tbody标签

表格的主体 table body

4.5 tfoot标签

表格的底部table foot

6.表单

1.简介

表单是一个包含若干个表单元素的区域,用于获取用户的信息

表单元素是允许用户在表单中输入信息是元素,如:文本框、密码框、单选按钮、复选框、下拉列表、提交按钮等

2.表单的结构
2.1表单的语法
1   <form dction""mehtod">
       多个表单元素
2   </form>
2.2form标签

用来定义表单,可以包含多个表单元素

常用属性:

  • action:提交数据给处理,即处理数据的程序,默认为当前页面,并且以查询字符串的形式来表现
  • method提交数据的方式,取值有两种:get(默认)、post

​ get和post的区别:

​ get:以查询字符串形式提交,在地址栏中能够看到,长度有限制,不安全

​ post:以表单数据组形式提交,在地址栏中看不到,长度无限制,安全

  • enctype:提交数据的编码,取值:application/x-www-form-urlencode(默认)、mutipaty/form-data(上传文件)
3.表单元素

大多数表单元素都是使用标签来定义,用过设置type属性来定义不同的表单元素

1   <input type="表单元素的类型" name="名称" value="默认值" size="宽度">
表单元素是类型含义说明
text单行文本框省略时默认就是text
password密码框输入时以点号显示,安全
radio单选按钮只能选择其中的一个
checkbox复选框可以同时选择多个
submit提交按钮提交表单数据
reset重置按钮重置表单元素的初始值
image图像按钮可以使用图片作为按钮,也具有提交功能
button普通按钮默认情况下无功能
file文件选择器选择要上传的文件
hidden隐藏域在页面上不显示,但是会提交,可以用来存储数据
3.1单行文本框

常用属性:

  • name属性:名称,很重要,如果没有指定的name,则该表单的数据是无法提交的
  • value属性:当用户没有输入数据时,文本框中的默认值
  • size文本框的显示宽度
  • maxlength最大字符数,默认字符数没有限制
  • readonly:只读 readonly=“readonly”,可以简写readonly,即只写属性名
  • disabled:不可用,禁用disabled=“disabled”,可以简写disabled,完全被禁用

​ readonly和disabled的区别:readonly的数据会提交,而disabled的数据不会提交

​ 表单元素被提交的两个条件:1. 有name属性 2. 非disabled状态

3.2单选按钮

常用属性:

  • name 名称,多个radio的name属性值必须相同,才可以实现互斥(单选)
  • value:值
  • checked是否被选中,两种状态,选中,未选中,checked=“checked”,简写为checked
3.3复选框

常用的属性和radio相似

3.4文件选择器

常用属性:

  • name属性:名称
  • accept 设置可以选择的文件类型,用来限制上传文件的类型

​ 常用MIME格式字符串对资源类进行设置

​ 常用MIME格式

  • 纯文本:text/plain text/html text/xml
  • 图像:image/png image/gif image/jpeg
4.特殊表单元素
表单元素含义说明
select下拉列表
option列表选项
optgroup选项组用来对option进行分组
textarea文本域/多行文本框用来创建一个多行文本框
4.1下拉按钮

select 常用属性:

  • name 属性
  • size:下拉列表所显示的行数,同时显示多个选项
  • multiple:允许同时选则多个

option常用属性:

  • value 选项值
  • selected:设置默认选中的项

optgroup常用属性:

  • label 分组的标题
4.2文本域

常用属性:

  • name:名称
  • rows:行数
  • cols:列数
5.其他表单元素
5.1 label标签

为表单元素提供一个标签,当选中label标签中的文本时会自动将焦点切换到与之相关联的表单元素中

常用属性:

  • for必须将属性值设置为与之相关的表单元素的id属性值相同

注意:几乎所有的HTML标签都有id属性,且id值必须唯一

5.2button按钮

也表示按钮,与input按钮类似

语法:

1  <button type="按钮类型"></button> 

常用属性:

  • type按钮的类型:取值submit(默认)、reset、button

######5.3 fieldset和legend

fieldset标签,对表单元素进行分组

legend:对分组添加标题

7.内嵌框架
1.简介

使用iframe可以在一个页面中引用另一个页面,实现页面代码的复用、灵活

2.基本语法

语法:

<iframe src=""></iframe>

常用属性:

  • src引用的页面
  • width/height 高度/宽度 像素或百分比
  • frameborder 是否显示边框 取值:1(yes)0(no)
  • scrolling是否显示滚动条,取值 yes、no、auto(默认)
  • name为框架定义名称
3.在框架打开超链接
1  <ifrme name="hello"></iframe>

3  <a href="链接地址" target="hello">链接的文本或图像</a>
8.HTML简介
1.发展

w3c于1992年12月发布了HTML 4.0.1 标准

w3c于2014年10月发布了HTML 5标准

2.特点
  • 取消了过时的标签,如font、center等,他们仅限于展示外观
  • 增加了一些更加具有语义化的标签,如header、footer、aside等
  • 增加了一些功能标签,如audio、video、canvas等
  • 增加了一些表单控件,如Email、date、time、url、

search等

  • 可以直接在浏览器中绘图(canvas)、无需flash
  • 增加了本地存储的功能
3.兼容性

http://caniuse.com

提供了各浏览器版本对HTML5和css3规范的支持度

9.HTML5新增内容
1.结构相关的标签

用来进行页面结构布局,本身无任何特殊样式,需要使用css进行样式设置

  • article定义一个独立的内容,完整的文章
  • secyion定义文档的章节
  • header文章的头部、页眉、标题
  • fonter文章的底部、页脚、标注
  • aside定义侧边栏
  • figure图片区域
  • figcaption 为图片区域定义标题
  • nav 定义导航菜单

结构标签只是表明各部分的角色,并无实际外观样式,与普通的div相同

2.语义相关的含义
2.1mark标签

标注:用来突出显示文本,默认添加黄色背景

2.2time标签

定义时间和日期,便于搜索引擎智能查找

2.3details和summary标签

默认显示summary中的内容,点击后显示dateils中的内容

注意:并不是所有的浏览器都可以兼容,chrome、opera支持,Firefox、IE浏览器不支持

2.4meter标签

计数仪,表示度量

常用属性:

  • max定义最大值,默认为1
  • min定义最小值,默认为0
  • value定义当前值
  • high定义限定为高的值
  • low定义限定为底的值
  • optimun定义最佳值

规则:

1.如果optimum大于high,则表示值越大越好

当value值大于high时为绿色

当value值在high和low之间为黄色

当value值小于low时为红色

2.如果optimum小于low,则表示值越小越好

当value小于low时为绿色

当value在low与high之间时为黄色

当value大于high时为黄色

3.当optimum介于low和high之间,则表示low和high之间最好

当value在high和low之间为绿色,否则为黄色

2.5progress标签

技能读条、表示运行中的进度

常用属性:

  • value定义当前值
  • max定义完成的值
3.表单相关
3.1新增表单元素
  • Email接受邮箱
  • url接收url
  • tel接收电话号码,目前仅在移动设备上有效
  • search搜索文本框
  • number/range 接受数字/数字滑块,包含min,max,step属性
  • date/,onth/week/time/datetime 日期时间选择器,兼容性不会
  • color颜色拾取

作用:【range(范围)】

  • 具有格式校验的功能

  • 可以与移动设备键盘进行关联

3.2新增表单属性:

form标签的属性:

  • autocomplete是否启动表单的自动完成功能,取值:on(默认)、off
  • novalidate 提交表单时不进行检验,默认会进行表单检验
3.3新增表单元素属性:

新增表单元素属性:input/select/textarea等

  • pleaholder提示文字
  • requied是否必填
  • autocomplete是否启用该表单元素自动完成的功能
  • autofocus设置初始的焦点元素
  • pattern使用正则表达式(regexp),进行数据的校验
  • list使文本元素具有下拉列表的功能,需要配置datelis和option标签一起使用
  • form可以将表单元素写在标签元素的外部,然后通过该属性来关联到指定的表单
4.多媒体标签
4.1音频audio标签

在页面上插入音频,不同的浏览器对音频格式支持也不一样

audio常用属性:

  • src音频文件的来源
  • contols是否显示控制面板,默认不显示
  • autoplay 是否自动播放,默认不自动播放
  • loop是否循环播放
  • muted是否静音
  • preload 是否预加载,取值:none不预加载,auto预加载(默认)、metadata只预加载元数据

​ 如果设置了autoplay属性、preload无效

可以结合source标签使用,指定多个音频文件,浏览器会检测并使用第一个可用的音频文件

4.2 video标签

在页面中插入视频,不同的浏览器对视频格式的支持不一样

用法和audio标签基本相同,增加属性:

  • width/height 视频播放器是宽度/高度
  • poster 在视频加载前显示的图片

date/,onth/week/time/datetime 日期时间选择器,兼容性不会

  • color颜色拾取

作用:【range(范围)】

  • 具有格式校验的功能

  • 可以与移动设备键盘进行关联

3.2新增表单属性:

form标签的属性:

  • autocomplete是否启动表单的自动完成功能,取值:on(默认)、off
  • novalidate 提交表单时不进行检验,默认会进行表单检验
3.3新增表单元素属性:

新增表单元素属性:input/select/textarea等

  • pleaholder提示文字
  • requied是否必填
  • autocomplete是否启用该表单元素自动完成的功能
  • autofocus设置初始的焦点元素
  • pattern使用正则表达式(regexp),进行数据的校验
  • list使文本元素具有下拉列表的功能,需要配置datelis和option标签一起使用
  • form可以将表单元素写在标签元素的外部,然后通过该属性来关联到指定的表单
4.多媒体标签
4.1音频audio标签

在页面上插入音频,不同的浏览器对音频格式支持也不一样

audio常用属性:

  • src音频文件的来源
  • contols是否显示控制面板,默认不显示
  • autoplay 是否自动播放,默认不自动播放
  • loop是否循环播放
  • muted是否静音
  • preload 是否预加载,取值:none不预加载,auto预加载(默认)、metadata只预加载元数据

​ 如果设置了autoplay属性、preload无效

可以结合source标签使用,指定多个音频文件,浏览器会检测并使用第一个可用的音频文件

4.2 video标签

在页面中插入视频,不同的浏览器对视频格式的支持不一样

用法和audio标签基本相同,增加属性:

  • width/height 视频播放器是宽度/高度
  • poster 在视频加载前显示的图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值