今天主要学习HTML
思维导图：
一．HTML入门
1.什么是大前端？
前端其实本质上就是将一个设计师设计好的视觉图转换为网页，一般利用的无非也就是HTML+CSS+JS和一些框架
2.网页和网站的区别？
（1）网页：其实就是一个HTML文件，用于显示一个独立的效果
（2）网站：其实就算由很多个的网页组成的一个站点
3.网页的组成？
一个网页的组成包含了图片，文字，视频，音频，超链接，输入框...等相关组件组成
4.WEB标准：
了解一个组织（W3C国际万维网联盟）
结构标准（HTML）：相当于一个楼房的框架（人的骨骼）
表现标准（CSS）：在已经打好的框架上面对框架的内容进行美化（装修）（姑娘化妆）
行为标准（JS）：相当于整个框架上面能够运动的物品（姑娘跳舞）
5.浏览器：
市面上的常见的浏览器，IE,360浏览器，QQ浏览器，谷歌浏览器，火狐浏览器...
6.渲染引擎（内核）：
(1)一个HTML或者CSS代码写好之后，一定是给一个浏览器进行解析进行，而浏览器能否认识你的代码又必须依靠渲染引擎进行渲染
(2)目前在这个世界上，能够被市场认可的渲染引擎只有4个，ie trident/谷歌 blink/火狐 gecko/苹果webkit,作为一个前端开发者，我们无需去适配市面上所有的浏览器，我们只需要适配4个浏览器内核就可以了
7.结构标准（HTML）：
HTML也被称之为超文本标记语言
8.HTML的结构：
<!doctype html>文档声明标签（其实可以不写，具体要看我们HTML所设置的语法检查级别）
<html>根标签
<head></head>头部标签，这里面写的所有内容不会直接的出现在你的网页的主体，一般用于外部文件的导入以及网页的设置
<body></body>主体标签，这里写的任何的代码会被浏览器直接显示
</html>
9.如何编写HTML：
原则上，我们自己创建一个记事本，保证其后缀为html或者html就可以了
10.HTML的标签分类：
单标签：<!doctype html> <br/> <hr/>(单标签一般只用于某一个功能）
双标签：<title></title> <head></head>
单双标签：<a></a> </a>
11.HTML标签层级关系：
嵌套关系（父子）：<head><title></title></head>
并例关系（兄弟）：<head><body>
12.适合于前端的开发工具：
IDEA/sublime/webstrom/hbuider/记事本
13.HTML的基础标签：
换行标签：<br/>
水平线标签：<hr/>
删除：<del>
加粗：<b>或<strong>
斜体：<i>或<em>
下划线：<u>或<ins>
14.标题标签：
<h1>~<h6>数值越小则字号越大
h标签是独占一行，所有存在一个类似换行的效果，且H标签本身具备加粗（后期在实际编码当中会有一些坑 注意）
15.段落标签：
<p>段落标签一般是表示一个内容的段落，在实际当中我们甚至可以把他当做一个容器。段落标签其实本身也具备换行效果
16.HTML的特殊符号
(1)<:>
(2)>:<
(3)空格:
(4)引号:"(W3C的规范要求当中，要求HTML的属性值必须使用“”进行包裹，如果“”存在嵌套则使用“替代或者"替代)
(5)版权符合:©
(6)&(&的转义）:&
17.图片标签：
<img src=“ 图片地址 ”
alt=“提示的文字”当src图片显示不出来时alt才生效给用户的文字提示，但src显示图片出来时alt失效，不会显示出来
title=“图片上想显示的文字”当鼠标放在（或者悬浮）在图片时显示的文字提示
/>
18.设置图片大小：
(1)想让图片等比例缩放只设置高（height:)即可
(2)设置图片全屏显示设置宽（width:100%)
二.HTML基础
1.超链接标签
<a href=“跳转路径” target="打开方式" title="鼠标悬浮显示的文字内容">点击内容</a>
2.属性的解释
（1）href:需要跳转的路径,这个路径可以是任意的协议路径，也可以是本地路径。（如果是跳转到协议路径，请一定写好你的协议名，比如http://www.xx.xxx,否则默认跳转的就是本地路径）
（2）target：需要以何种方式打开窗口:
_blank（新开）
_self（覆盖）
（3）title:将鼠标悬浮至连接所显示的文字内容
<a href="xxx">
<img src=“xxx”>
</a>
3.锚链接
所谓的锚链接其实就是从一个页面A，跳转到页面A本身或者其他页面的指定区域位置。
创建步骤
（1）先从A页面创建一个a标签的跳转
（2）在A页面或者其他需要跳转的目标页面定义一个锚点(其实就是在标签里面顶一个id属性)
（3）在A页面的a标签指定跳转位置
A页面
<a href="b.html#test">xxx</a>
B页面
<p id="test>xxx</p>
-------
A页面
<a href="#test">xxx</a>
A页面
<p id="test>xxx</p>
4.列表
（1）无序列表：顾名思义，就是没有顺序编号的列表
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
(2)无序列表的type值：
type="square" 实心小方块
type="disc" 实心圆(默认)
type="circle" 空心圆
在实际的开发当中，一般不去定义使用什么样的列表效果，而是尽量取出默认效果，从而选择我们自定义的效果。
（3）有序列表：顾名思义，就是带有顺序编号的列表
<ol>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
(4)无序列表的type值：
type="i/I" 小写或者大写的罗马字符
type="a/A" 小写或者大写的字母
type="1" 数字(默认的)
start=" " 设置默认值的初始化内容
有序列表在实际的开发当中使用的极少(一般在问卷、考卷当中的业务当中使用的频繁)
5.定义列表
<!-- 定义了一个列表 -->
<dl>
<!-- 代表了列表的声明 -->
<dt>小民</dt>
<!-- 代表了声明下面的内容 -->
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
<dd>赵六</dd>
<!-- 第二组 -->
<!-- 代表了列表的声明 -->
<dt>小民</dt>
<!-- 代表了声明下面的内容 -->
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
<dd>赵六</dd>
</dl>
6.表格
所谓的表格跟我日常当中认识的表格其实急速一个道理，在HTML当中，常用的布局方式其实就是无序列表+表格+div。
（1）表格的书写
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
---------
<table>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
<tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
（2）常用属性
- border="1px":给表格、行、格设置边框(表格默认无边框线条)
- width="500px":给表格、行、格设置宽度(最终样式参考所设置的最大宽度)
- height="500px":给表格、行、格设置高度(最终样式参考所设置的最大高度)
- align="center|left|right":给表格、行、格设置内容的水平对齐方式(如果给table设置,则代表把表格是参考浏览器对齐)
- cellpadding="10px":设置单元格内容与单元表格边框的距离(一般先居中在设置，否则效果不理想)
- cellspacing="0px":设置单元格与单元格之间的距离
- clospan:在同一行上进行合并单元格
- rowspan:在同一列上合并单元
注意:合并单元的操作一定要定位从哪个位置开始合并，合并多少个就要删除多少个多余的单元格
三.HTML表单
1.何谓表单?
所谓的表单其实就是对用户的信息进行收集的一个组件。
2.表单语法
<form method="" action="">
<input type="" name="" value="" size="" maxlength="" checked="" />
</form>
3.属性解释:
form:定义表单域
method:提交方式
get:显式提交,表单的所有输入的信息会被最直接当成参数显式在浏览器的url当中
post:隐式提交,表单输入的所有数据不会在url提交,而是在传输当中利用头部的form data进行参数提交
action:表示你表单的数据需要传输到谁进行处理,一般这个参数都是后端开发者给前端的。
input:表单组件
type:组件类型
text:普通文本
password:密码文本
checkbox:多选框
radio:单选框(radio本身不具备任何的单选效果，如果要单选在需要给radio的name属性设置为同一个内容)
button:普通按钮(这个按钮不具备任何功能，一般是用于去主动调用js代码)
submit:提交按钮(点击之后会,所有的表单数据被立即的提交到指定action)
image:图片按钮(具备和submit一样的效果)
file：文件提交
name:给这个input取一个名字,一般js或者后端都是通过这个名字去取所在表单的值
size:表单输入框的长度(像素或者百分比作为参数,一般不用 直接使用css搞定)
id:给这个input取一个ID,一般js或者后端都是通过这个ID去取所在表单的值
maxlength:表单能输入的最大长度(一般不用,鸡肋)
checked:默认选中(只能用于radio和checkbox使用)
value:这个表单的默认内容
disabled:禁用组件
readonly:可读组件
hidden:隐藏组件
4.下拉列表框
<select name="ctiy">
<option value="hn">湖南</option>
<option value="bj" selected="selected">北京</option>
<option value="wh">武汉</option>
</select>
5.常用参数
- value:给这个选择项定义的值,后台可以根据这个值知道用户选择的是什么
- name:定义在select,主要让后台知道是哪个select传过来的参数。
- selected:选择某一个参数为默认选中项。
6.多行文本域
<textarea name="showtext" cols="50" rows="90">
文本内容
</textarea>
7.内联框架
所谓的内联框架就是泛指网页嵌套网页。
设置纵向布局,一个内嵌三个网页,分别占用25%,50%,25%的页面大小。
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
设置纵向布局,一个内嵌三个网页,分别占用25%,50%,25%的页面大小。
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
设置横向布局,进行内嵌继续嵌套
<frameset rows="10%,70%,*" border="1px" bordercolor="red" >
<frame src="frame_h.htm" scrolling="auto" noresize="noresize"/>
<frameset cols="15%,*" >
<frame src="frame_l.htm" noresize="noresize" scrolling="no" />
<frame src="frame_r.htm" noresize="noresize" scrolling="no" name="cf"/>
</frameset>
<frame src="frame_f.html" scrolling="yes" noresize="noresize"/>
</frameset>
8.frameset常用属性
- rows:横向布局
- cols:纵向布局
- border:边框粗细
- bordercolor：边框颜色
9.frame常用属性
- name:边框名字
- noresize:限制调整框架大小
- scrolling:是否显示滚动条（yes|no|auto）
- src：内嵌网页地址
10.使用iframe进行布局
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
