今天主要学习HTML
思维导图：
一．HTML入门
1.什么是大前端？
前端其实本质上就是将一个设计师设计好的视觉图转换成对应的网页素材或者界面，前端工程师不单单泛指网页开发，还包括了小程序的前端，APP的前端，WEB端的前端，一般利用的无非也就是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)想让图片等比例缩放只设置高（width:50%)即可
(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>
扫一扫
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
