html静态页⾯
0x00 什么是⽹页？
⽹页是⽹站中的-“页”，通常是HTML格式的⽂件，它通过浏览器来阅读。
⽹页是构成⽹站的基本元素，它通常由图⽚、链接、⽂字、声⾳、视频等元素组成。通常我们看到的⽹页，常见以 .htm 或 .hmtl 后缀结尾的⽂件，因此将其俗称为HTML⽂件。
什么是HTML？
HTML指的是超⽂本标记语⾔，它是⽤来描述⽹页的⼀种语⾔。
HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔。
标记语⾔是⼀套标记标签。
所谓超⽂本，有2层含义：
1、它可以加⼊图⽚、声⾳、动画、多媒体等内容（超越了⽂本限制）。
2、它还可以从⼀个⽂件跳转到另⼀个⽂件中，与世界各地主机的⽂件连接（超级链接⽂本）。
⽹页的形成
⽹页是由⽹页元素组成的，这些元素是利⽤html标签描述出来的，然后通过浏览器解析来显⽰给⽤户。
常⽤浏览器
浏览器是⽹页显⽰、运⾏的平台。常⽤的浏览器有IE、⽕狐（firefox）、⾕歌（Chrome）、Safari和Op
浏览器内核（渲染引擎）：负责读取⽹页内容，整理讯息，计算⽹页的显⽰⽅式并显⽰页⾯。
Web标准
为什么需要Web标准 遵循Web标准除了可以让不同的开发⼈员写出的页⾯更标准、更统⼀外，还有以下优点：
1、让Web的发展前景更⼴阔。
2、内容能被更⼴泛的设备访问。
3、更容易被搜寻引擎搜索。
4、降低⽹站流量费⽤。
5、是⽹站更易于维护。
6、提⾼页⾯浏览速度。
Web标准的构成
主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。
Web标准提出的最佳体验⽅案：结构、样式、⾏为相分离。
简单理解：结构写到HTML⽂件中，表现写到CSS⽂件中，⾏为写到JavaScript⽂件中。
0x01 HTML语法规范
基本语法概述
1、HTML标签是由尖括号包围的关键词，例如<html>
2、HTML标签通常是成对出现的，例如<html>和</hmtl>，我们称为双标签。标签中的第⼀个标签是开始标签，第⼆个是结束标签。
3、有些特殊的标签必须是单个标签（极少情况），例如<br/>我们称为单标签。
标签关系
双标签关系可以分为两类：包含关系和并列关系。
HTML基本结构标签
第⼀个HTML⽹页
<html>
<head>
<title>我的第⼀个⽹页<title>
</head>
<body>
你好！HTML
</body>
</html>
基本结构标签含义
标签名定义说明
<html></html>HTML标签页⾯中最⼤的标签，我们称为根标签
<head></head>⽂档的头部注意在head标签中我们必须要设置的标签是title
<title></title>⽂档的标题让页⾯拥有⼀个属于⾃⼰的⽹页标题
<body></body>⽂档的主体元素包含⽂档的所有内容，页⾯内容基本都是放到body⾥⾯的
HTML⽂档中的后缀名必须是 .html或.htm ，浏览器的作⽤是读取HTML⽂档，并以⽹页的形式显⽰出它们。
此时，⽤浏览器打开这个⽹页，我们就可以预览我们写的第⼀个HTML⽂件了。
⽹页的开发⼯具
Sublime：适合javascript开发，优点：快捷操作⽐较⽅便，打开速度⽐较快。
Sublime的使⽤
1、双击打开软件
2、新建⽂件（Ctrl+N）
3、保存（Ctrl+s），注意⼀定要保存为 .html⽂件
4、Ctrl+加号键，Ctrl+减号键可以放⼤缩⼩视图
5、⽣成页⾯⾻架结构
6、输⼊！按下Tab键
Sublime⼯具⽣成⾻架标签新增代码
1、<!DOCTYPE>标签
2、lang语⾔
3、charset字符集
⽂档类型声明标签
<!DOCTYPE>⽂档类型声明，作⽤就是告诉浏览器使⽤哪种HTML版本来显⽰⽹页。
lang语⾔种类
⽤来定义当前⽂档显⽰的语⾔
1、en定义语⾔为英语（英⽂⽹页）
2、zh-CN定义语⾔为中⽂（中⽂⽹页）
字符集（不写会乱码）
字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种⽂字。
在标签内，可以通过<meta>标签的charset属性来规定HTML⽂档应该使⽤哪种字符编码。
<meta charset="UTF-8"/>charset
0x02 HTML常⽤标签
标签语义
根据标签的语义，在合适的地⽅给⼀个最为合理的标签，可以让⽹页结构更清晰。
标题标签
<h1>-<h6>
段落标签
<p>我是⼀个段落标签</p>
换⾏标签
<br/>是个单标签，强制换⾏
<br/>
⽂本格式化标签
语义标签说明
加粗<strong></strong> 或者<b></b>更推荐使⽤<strong>标签加粗 语义更强烈倾斜<em></em> 或者<i></i>更推荐使⽤<em>标签加粗 语义更强烈删除线<del></del> 或者<s></s>更推荐使⽤<del>标签加粗 语义更强烈下划线<ins></ins> 或者<u></u>更推荐使⽤<ins>标签加粗 语义更强烈
<div>和<span>标签
<div>和<span>标签是没有语义的，它们就是⼀个盒⼦，⽤来装内容。
图像标签
在HTML标签中，<img>标签⽤于定义HTML页⾯中的图像。
语法：<img src='图⽚的源'alt="title="width="height="/>
src：图⽚的地址。
alt：当图⽚⽆法显⽰的时候，将alt后⾯的⽂字显⽰在图⽚的位置上。
title：当⿏标放到图⽚位置的时候显⽰提醒性⽂字。
路径
相对路径分类符号说明
同⼀级路径图像⽂件位于HTML⽂件同⼀级 如<img src="baidu.gif"/>
下⼀级路径/图像⽂件位于HTML⽂件下⼀级 如<img src="images/baidu.gif"/>
上⼀级路径…/图像⽂件位于HTML⽂件上⼀级 如<img src="../baidu.gif"/>
html网页设计 table
相对路径：以引⽤⽂件所在位置为参考基础，⽽建⽴出的⽬录路径
绝对路径：⽬录下的绝对位置，直接到达⽬标位置，通常是从盘符开始的路径
超链接标签
链接的语法格式
<a href="跳转⽬标（指定链接⽬标的url地址）"target="⽬标窗⼝的弹出⽅式（⽤于指定链接页⾯的打开⽅式）">⽂本或图像</a>
1、外部链接：<a href ="www.baidu">百度</a>
2、内部链接：<a href="index.html">⾸页</a>
3、空链接：<a href="#">⾸页</a>
4、下载链接：如果href⾥⾯地址是⼀个⽂件或压缩包，会下载这个⽂件。
5、⽹页元素链接：在⽹页中各种⽹页元素，如⽂本、图⽚、表格、⾳频、视频等都可以添加超链接。
6、锚点链接：<a href="#two">第2集</a>
<h3 ld="two">第⼆集介绍</h3>
注释
<!--注释语句-->
快捷键：
ctrl+/
特殊字符
重点：空格、⼤于号、⼩于号
0x03 表格
表格的基本语法
<table border=1>
<tr>
<td>单元格内的⽂字</td>
...
</tr>
...
</table>
表头单元格标签
<table>
<tr>
<th>姓名</th>
...
</tr>
...
<table>
单元格对齐
⽔平对齐
语法：allgn="center/left/right"
垂直对齐
语法：vallgn="top/middle/bottom"
单元格间距和填充
单元格间距：默认像素：2
单元格填充：默认像素：1
合并⾏（rowspan）
合并列（colspan）
0x04 列表标签
简介
表格⽤来显⽰数据，列表⽤来布局。
⽆序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
<ul></ul>中只能嵌套<li></li>
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
<ol></ol>中只能嵌套<li></li>
⾃定义列表
在HTML标签中，<dl>标签⽤于定义描述列表（或定义列表），该标签会与<dt>(定义项⽬/名字)和<dd>(描述每⼀个项⽬、名字)⼀起使⽤。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
<dl></dl>⾥⾯只能包含<dt>和<dd>
0x05 表单标签
为什么需要表单
使⽤表单⽬的是为了收集⽤户信息。
在我们⽹页中，我们也需要跟⽤户进⾏交互，收集⽤户资料，此时就需要表单。
表单的组成
在HTML中，⼀个完整的表单通常由表单域、表单控件（表单元素）和提⽰信息3个部分组成。
表单域
表单域是⼀个包含表单元素的区域。
在HTML标签中，标签⽤于定义表单域，以实现⽤户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action="url地址"method="提交⽅式"name=“表单域名称”>
各种表单元素控件
</form>
表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许⽤户在表单中输⼊或者选择的内容控件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。