预备内容:软件安装篇
-
记笔记的工具—typroa
注释:Ctrl+/ 插表格:ctrl+t
-
文件名:基本文件名.扩展名
Eg:SDN.docx 销售统计表.xlsx
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UZHyALyd-1583849079993)(.\image\记笔记1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aho18PU2-1583849079993)(.\image\记笔记2.png)]
2.截图工具的安装
①Greenshot
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pp5oJ2C2-1583849079994)(.\image\截图工具安1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-073FU6Ii-1583849079995)(.\image\截图工具2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YpVECKYH-1583849079995)(.\image\截图工具4.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FT9VCZXb-1583849079995)(.\image\截图工具4.png)]
3.sublimes—无需安装
①解压
②将解压的文件复制到C:/program files下
③选择sublimes.exe发送到桌面快捷方式
HTML
一、html简介
1.html是什么?
HTML:Hyper Text Markup Language超文本标记(标签)语言
各种标签组成,用来制作网页,告浏览器该如何显示页面
2.作用
- 制作网页,控制网页和内容显示
- 插入图片、音乐、视频、动画等多媒体
- 通过链接检索信息
- 使用表单获取用户数据,实现交互
3.html版本
w3c:world、wide、web consortlum互联网联盟,制定我们web技术的相关标准和规范的组织,html就是由w3c制订的标准
两个版本:html 4.5.1,html 5.0----通常h5
官网:https://www.w3school.com.cn/
4.扩展名
HTML文件扩展名.html或.htm结尾
eg:hello.html
<html>
<body>
<title>html技术</title>
</body>
<body>
大家好,欢迎学习html网页技术!
</body>
</html>
二、HTML文档结构
1.基本结构
1.1简介
- html标签是由尖括号括号的关键词,如
<html>
,通常标签都是成对出现的,如<html></html>
- 以
<html>
为根标签,包含<head>
头部和<body>
主体部分 - 头部提供关于网页的相关信息,如标题、文档类型、字符编码、关键词等摘要信息
- 主体部分提供网页要显示的内容,真正显示页面中的
- 合理缩进
- 标签名不区分大小写,但一般要小写
1.2开发工具
记事本notepad,sublime,notepad++,,dreamweaver,vscode,webstorm等
使用 步骤:
1.新建文件(ctrl+n),然后保存ctrl+s,指定扩展名.html
2.编写html代码
3,在浏览器中打开文件进行验证效果
1.3浏览器
常见的浏览器ie微软,chrome谷歌,firefox火狐,safari苹果
浏览器作用:读取html文件,并以网页的形式进行显示
浏览器不会直接显示html标签,而是使用标签来解释网页的内容
2.标签
2.1标签的组成
一个完整的html标签的组成:
<标签名 属性名=“属性值”>内容</标签名>
属性值要使用引号引起来,一般使用双引号
2.2标签的分类
根据标签是否关闭,分为:关闭型和非关闭型
- 关闭型:又开始标签,,也有结束标签,一般成对出现
<title>标题</title>
<body>主体</body>
<h1>一级标题</h1>
- 非关闭型标签:只有开始标签,没有结束标签
<meta>
<br>
<hr>
根据标签是否独占一行,分为:块级标签和行级标签
- 块级标签:显示为块状,独占一行
<h1></h1>
<hr>
- 行级标签:在行内显示,可以与其他文本内容在同行显示
<span></span>
<html>
<head>
<title>标签的组成</title>
<meta charset = "ytf-8">
</head>
<body bgcolor = "yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<hr>html简介,主讲:刘晓勇</hr>
<hr>
<h2>二级标题</h2>
<h1>哈哈<h1>呵呵
<hr>
<span>嘿嘿</span>
</body>
</html>
2.3注释
注释在浏览器中不会显示,是用来标注解释html语句,但通过查看源代码可以看到
<!--注释内容-->
2.4实体字符
实体字符也称为特殊字符,用于显示一些特殊符号:如
&实体字符的名称;
常用实体字符
< < 小于号 less than
>; > 大于号 great than
 ; 空格 space 在html中对于连续的空白字符(空格、缩进、换行等),在浏览器中只显示为一个空格
&; &与
"; "双撇号
© 版权符号 copyright
®; 注册符号 register
×; 关闭符号
注意:实体字符是严格区分大小写,即大小写敏感
2.5文档类型
在HTML文档中的第一行,使用<!DOCUTYPE HTML>声明html文档的类型用来告诉浏览器页面html文档类型,简单来说,用来指定html版本规范,目前基本上使用的都是html5,
三、常用标签
1.基本标签
标签 | 含义 | 说明 |
---|---|---|
br | 换行标签 | 非关闭型标签 |
p | 段落标签 | 关闭型标签,块级标签,前后段落之间有明显距离 |
h1、h2、…h6 | 标题标签 | 按照h1到h6逐渐变小 |
pre | 预格式化标签 | 保留编码时的格式 |
div | 分区标签 | 常用容器来使用,一般用于页面布局划分,块级标签 |
span | 范围标签 | 默认情况没有任何效果,一般用来设置行内的特殊格式 |
ol、li | 有序列表 | 有顺序的项目列表 |
ul、li | 无序列表 | 无顺序的项目列表 |
dl、dt、dd | 定义列表 | 对术语、图片等进行描述的定义的列表 |
hr | 水平线标签 | 非关闭型 |
1.1有序列表
ol:ordered list
li:list item
默认情况下使用阿拉伯数字,从1开始标记,可以通过属性进行更改
- type属性:设置列表前的符号标记,取值,数字1(默认),字母a或A,罗马数字I或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颜色
两种写法:
颜色名称:如red、green、blue、white、black、pink、orange等
16进制的RGB:red,Green Blue 用法:#RRBGGBB每种颜色的物质范围0-255,转换为16进制00-FF
eg:#FF0000红色,#00FF00绿色,#0000FF蓝色,#000000黑色,#CCCCCC,#FF7300橙色
-
size粗细、数值
-
width宽度
-
两种写法:
像素:绝对值(固定值)
百分比:相对值,相对于该标签所在的父容器的宽度的百分比
1.5图像标签
img:image
常见的图片格式:jpg、prg、gif、bmp
常见属性:
- src:scorce指定图片的路径(来源),必须选参数
如果图片与html源码在同一个文件夹中,可以直接书写图片的名称
习惯上,会将多个图片存放到一个单独的文件夹中,如project\lmage,此时,需要在图片名称的前面添加路径
路径的分类:
-
相对路径
表示:./当前路径
…/当前位置的上一级文件夹
提示:…/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.标签的嵌套
四、超链接
1.1简介
使用超链接可以从一个页面跳转到另一个页面,实现页面之间的跳转
当鼠标移动超链接文本上时,鼠标箭头会变成一只小手
- 普通链接/页面间链接:跳转待另一个页面
- 锚链接:跳转到锚点(同一个页面的某个位置)
- 功能链接:实现特殊功能(发邮件,下载)
2.基本用法
使用<a>
标签创建超链接
语法格式:
<a herf=“链接地址” target=“链接打开的位置”>链接文本或图像</a>
常见属性:
href链接地址或路径:链接地址
target链接打开的位置,取值:
_self自身,当前,默认值 _blank空白、新的页面 _parent父层框架 _top顶层框架 自定义
路径分类:
-
相对路径
-
相对于页面所在的路径为参照,不是以根开始的
./当前路径
…/表示上级路径
-
绝对路径:
以根开始的路径
3.锚链接
3.1简介
点击链接后跳转到页面的指定位置(锚点anchor)
锚链接的分类:页面内的锚链接
页面间的锚链接
3.2页面内的锚链接
步骤:
1.定义锚点(标记)
<a name="锚点名称">目标位置</a>
2.链接锚点
<a href="#锚点名称">链接文本</a>
3.3页面间的锚链接
<a href="目标页面#锚点名称">链接文本</a>
4.链接功能
5.1简介
一个完整的URL由8个部分组成:
-
协议:prococol如
http:超文本传输协议,用来访问WEB网站Hyper text Transfer protocol
https:更加安全的协议 SSL安全套接字层
ftp:文件传输协议,用来访问服务器上的文件,实现文件的上传个下载File Transfer protocol
file:文件协议,用来访问本地文件
-
主机名
五、表格
1.简介
表格是一个规则的行列结构,每个表格是由若干个单元格组成
table(表格)、row(行)、column(列)
2.基本结构
2.1table标签
用来定义表格
常用的属性:
- border边框,默认值为0
- width宽度 height 高度
- align对齐方式,取值:left(左) center (居中)right(右)
- bordercolor边框颜色
- bgcolor背景颜色
- background背景图片
- cellspacing:间距 单元格与单元格之间的距离
- cellpadding:边距 单元格内容与边界之间的距离
2.2tr标签
用来定义行:table row
常见的属性:
- align水平对齐 取值left、center、right
- valign垂直对齐 取值top、middle、bottom
- bgcolor背景颜色
- background背景图片
2.3td标签
用来定义单元格:table data
常用属性:align、valign、bgcolor、background
3.合并单元格
合并单元格也称为表格的跨行和跨列
两个属性:
-
rowspan
设置单元格所跨的行数,如rowspan=“2”表示跨越2行
-
colspan
设置单元格所跨的列数,如clospan=“4”表示跨越4列
步骤:
1.在跨中的单元格中设置rowspan/colspan属性
2.将被跨越的单元格删除
注意:必须保证好每行的实际列数是相同的,否则表格可能会出现错乱
4.高级标签
4.1caption标签
表格的标题标签
4.2thead标签
表格的头部标签table head
4.3th标签
表格的头部标题table head title
一般在thead中,设置头部标题,替代td标签,与td的区别,加粗和居中对齐
4.4tbody标签
表格的主体 table body
4.5tfoot标签
表格的底部table foot
六、表单
1.简介
表单是一个包含若干个表单元素的区域,用于获取不同类型的用户信息
表单元素是允许用户在表单中输入信息的元素,如:文本框
密码框、单选按钮、复选框
2.表单的结构
2.1表单的语法
<form action="" mehtod="">
多个表单元素
</form>
2.2form标签
用来定义表单,可以包含多个表单元素
常用属性:
-
action提交数据给处理,即处理数据的程序,默认为当前页面,兵役查询字符串的形式来表现
-
method提交数据的方式,取值:get(默认)、post
get和post的区别:
get以查询字符串的形式提交,在地址栏中能看到,长度有限制,不安全
post以表单数据组形式提交,在地址栏中看不到,长度五限制,安全
-
enctype提交数据的编码,取值:applicatiom/x-www-form-urlencode(默认) multipart/form-data(文件上传)
3.表单元素
大多数表单元素都是使用input
标签来定义,通过设置type属性来定义不同的表单元素
<input type="表单元素的类型" name="名称" vale"默认值" size="宽度">
表单元素的类型 | 含义 | 说明 |
---|---|---|
text | 单行文本框 | 省略时默认就是text |
password | 密码框 | 输入时以点号显示,安全 |
3.1单行文本框
常用的属性:
-
name属性:名称,很重要,如果没有指定name,则改表单元素的数据是无法提交的
-
vale属性:当用户没有输入数据时,文本框中的默认值
-
size:文本框的显示宽度
-
maxlength最大字符数,默认字符数
-
readonly:只读readonly,可以简写readonly=“readonly”,即只写属性名
-
disabled:不可用,禁用disabled=“disabled”可以简写disabled,完全被禁用
readonly和disabled区别:readonly的数据会提交,而disabled的数据不会提交
| 单行文本框 | 省略时默认就是text |
| password | 密码框 | 输入时以点号显示,安全 |
| | | |
| | | |
| | | |
| | | |
3.1单行文本框
常用的属性:
-
name属性:名称,很重要,如果没有指定name,则改表单元素的数据是无法提交的
-
vale属性:当用户没有输入数据时,文本框中的默认值
-
size:文本框的显示宽度
-
maxlength最大字符数,默认字符数
-
readonly:只读readonly,可以简写readonly=“readonly”,即只写属性名
-
disabled:不可用,禁用disabled=“disabled”可以简写disabled,完全被禁用
readonly和disabled区别:readonly的数据会提交,而disabled的数据不会提交