前端基础——HTML
网页基础概念
1.网页&网站, 网站是网页的集合
2.HTML(超文本标记语言, Hyper Text Markup Language)
3.浏览器内核(渲染引擎)
4.web标准
| 标准 | 说明 |
|---|---|
| 结构 | HTML |
| 表现 | CSS |
| 行为 | JavaScript |
web标准最佳体验方案：==结构、样式、行为相分离==，即结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
HTML基础
语法规范
1.基本语法
1.HTML标签是由==尖括号包围的关键词==
2.HTML标签通常是成对出现的
3.有些特殊的标签必须是单个标签(极少情况)
2.标签关系
==包含关系&并列关系==
HTML基本结构标签
1.<!DOCTYPE>
<!DOCTYPE>文档类型声明，告诉浏览器使用那种HTML版本来显示网页
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
2.lang语言种类
en英语
zh-CN中文
主要是拿来触发浏览器的翻译功能
3.编码
<meta charset="UTF-8">HTML常用标签
1.语义标签
2.标题标签 <h1> - <h6>
标签语义：作为标题使用，并且依据重要性递减
3.段落标签和换行标签
段落标签：<p></p>
换行标签：<br/>
4.文本格式化标签
| 语义 | 标签 | |
|---|---|---|
| 加粗 | <strong></strong> |
<b></b> |
| 倾斜 | <em></em> |
<i></i> |
| 删除线 | <del></del> |
<s></s> |
| 下划线 | <ins></ins> |
<u></u> |
5.<div> 和 <span> 标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
div 表示分割、分区，span 表示跨度、跨距
div 一个占一行，一行可以放多个 span
6.图像标签和路径
<img src="图像url" />| 树形 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的时候显示的文字 |
| title | 文本 | 提示文本，鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图片的边框粗细 |
相对路径、绝对路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件的同一级 | |
| 下一级路径 | / | 图像文件位于HTML文件的下一级 |
| 上一级路径 | ../ | 图像文件位于HTML文件的上一级 |
7.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>| 属性 | 作用 |
|---|---|
| href | 必须属性，指定链接目标的url地址 |
| target | 指定链接页面的打开方式，_self是在当前窗口打开，_blank为在新窗口中打开方式 |
链接分类：
1.外部链接
<a href="http://a-egoist.gitee.io">我的博客</a>2.内部链接，网站内部各页面之间的相互链接，直接链接内部页面名称即可
<a href="index.html">首页</a>3.空链接：如果当时没有确定链接的目标时
<a href="#">空链接</a>4.下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件
<a href="img.zip">下载文件</a>5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置
<a href="#id">点击链接</a>
<h4 id="id">跳转目标</h4>8.注释标签和特殊字符
<!--这是注释-->在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
9.表格标签
表格标签
表格不是用来布局页面的，而是用来展示数据的
<table><!--用于定义表格的标签-->
<tr><!--只能嵌套在<table></table>中-->
<th>表头</th><!--表头单元格-->
<td>单元格内的文字</td><!--只能嵌套在<td></td>中-->
</tr>
</table>表格属性
表格相关属性一般通过CSS设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对其方式 |
| border | 1 或 “” | 规定表格单元是否拥有边框，默认为””，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格宽度 |
表格结构
<thead>标签 表格的头部区域，内部必须拥有<tr>标签，一般位于第一行
<tbody>标签 表格的主体区域，主要用于存放数据本体
合并单元格
合并单元格方式
1.跨行合并：rowspan=
2.跨列合并：colspan=
目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格的步骤
<td colspan="2">跨列合并单元格</td>
<td rowspan="2">跨行合并单元格</td>10.列表标签
列表是用来布局的
无序列表
<ul><!--<ul>标签中只能放<li>标签-->
<li>列表项1</li><!--<li>标签中可以放任何标签-->
<li>列表项2</li>
<li>列表项3</li>
</ul>有序列表
<ol><!--<ol>标签中只能放<li>标签-->
<li>列表项1</li><!--<li>标签中可以放任何标签-->
<li>列表项2</li>
<li>列表项3</li>
</ol>自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl><!--<dl>里面只能包含<dt><dd>-->
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
</dl>11.表单标签
表单组成
表单域、表单控件、提示信息
表单域
表单域是一个包含表单元素的区域
在HTML总，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>标签会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式(GET or POST)" name="表单域名称">
各种表单元素控件
</form>表单的控件(表单元素)
1.input输入表单元素
<input>标签用于收集用户信息
<input type="属性值" name="" value=""/>type属性设置不同的属性值用来指定不同的控件类型
<input>标签常用属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应该被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
单选按钮和复选框都要有相同的name值
<label>标签
<label>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
