html笔记
预备内容：软件安装篇
-
记笔记的工具—typroa
注释：Ctrl+/
-
文件名：基本文件名.扩展名
Eg：SDN.docx 销售统计表.xlsx
2.截图工具的安装
①Greenshot
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标签是由尖括号括号的关键词，如
,通常标签都是成对出现的,如 - 以
为根标签，包含头部和主体部分 - 头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键词等摘要信息
- 主体部分提供网页要显示的内容，真正显示页面中的
- 合理缩进
- 标签名不区分大小写，但一般要小写
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>
head>
标签的组成
<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文档中的第一行，使用声明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 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
gn、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