首页 > 代码库 > HTML基础全荟
HTML基础全荟
第一讲 html概述
1、认识HTML
<! DOCTYPE html>
<html>
<style></style>
<head><title></title></head>
<body>
<h1></h1>
//
<p></p>
</body>
</html>
2、图片路径
怎么加载图片 主要是写路径
<../ images/002.jpg>
几层几个../
<../../../201.gif>
这种指的是把链路地址跳出来
Alt 弹出框、
属性：宽高背景 透明度 内边距 外边距
为了保持图片的自然比例一般只改变宽度或者高度
不要写属性默认的单位
Title属性可以表示题目可以表示鼠标放在图片时所显示的文本
也可以表示弹出title=”小姐姐”
图片中的路径问题
相对路径：参照自身的位置定义的路径
绝对路径：在计算机里面的路径
3、行内元素、块元素、行内块元素的比较
块元素：p <br/> h1~h6 li ol dl dd dt div <hr/> form
行内块级元素 img input button
行内元素 <b></b> <strong></strong> <i></i> lable <em ></em> sup sub
第二讲 标签的使用
HTML文字排版标记
1、常见的标签：
<p></p> 双标记元素
<br/> 单标记标签
<h1>~<h6> 双标记元素
列表
<ul></ul> 无序列列表
<ol></ol> 有序列表
<li></li> 列表项
<dl></dl> 定义列表 定义列表至少有一条说明
<dt></dt> 表明术语要说明的对象
<dd></dd> 三个都是双标记元素
2、标签属性
Ul 的属性type=square可以把小圆点变成实心的方形
Ul 的属性type=circle可以把小圆点变成空心的小圆点
Ul 的属性type=none可以把前缀去掉
<strong></strong> <b></b> 都是加粗，但是第一个具有强调的意思
<div></div>是一个块级元素，
3、元素之间的嵌套
标签和标签的嵌套：块级元素里面可以嵌套任何的元素
块级元素里可以嵌套块级元素 <div><h3></h3></div>
块级元素可以嵌套行内元素 <div><strong></strong></div>
块级元素里面可以嵌套行内块级元素 <div><img src=http://www.mamicode.com/””/></div>
行内元素可以嵌套任何元素，除了块级元素。
行内元素嵌套行内元素 <b><i></i></b>
行内元素可以嵌套行内块级元素 <a href=http://www.mamicode.com/”#” ></a>
<hr/>是一个水平线
4、<div></div>
1. 是一个块级元素
2. 占据一行
3. 高度、行高、外边距和内边距都可以控制
4. 宽度始终与浏览器一样，与内容无关
5. 没有自带样式
5、<span></span>
1. 行内元素
2. 与其他元素在一行上、
3. 高、行高以及外边距内边距都可以改变、
4.. 宽度只与内容有关
5. 没有自带的样式是行内元素之容纳文本或者其他行内元素
6. 表现性元素
<big ></big><small></small>
6、特殊标签和结束标签
< sup></sup> 上标
<sub></sub> 下标
H4被淘汰的标签：center、 font 、 big、small\
特殊文字符号的使用
空格
< <
> >
? 版权
第三讲 链接的使用
1、超链接
1）超链接概述
a超练级的 href属性值是url路径
Target 目标 在新窗口中打开用属性值 _blank
Title(标题） 鼠标放在超链接上的时候 显示的文超链接了；里面没有#的话表示刷新本页面
任何标签都可以有id 但是id的值是唯一的
回到哪个地方 就是#ID 锚点
2）伪类
伪类： a:link:
a:visited
a:hover:
a:active:
LOVE HATE 爱恨原则
3）href的值
Href的值
1、另一个页面的值 相对路径和绝对路径
2、锚点 #ID 或者是 # name
3、值为空 刷新本页面
4）target的属性
Target 的属性 目标
1、_blank 在新窗口中打开
2、_top 在窗口顶部打开
4、-self 自己窗口打开
5、 _parrent 后三种在窗口中都是吧原来的窗口覆盖了
鼠标放在超链接上面显示的文本 title
所有的标签都可以加的属性：id
ID 唯一的
Style 行内样式 值是由冒号引出值是由多个属性名和属性值构成的，用分好个跨
使用电子邮件链接
<a href=http://www.mamicode.com/”mailto”>
网页中图片的分类
1、内容图片
2、修饰图片
三种格式
1. Gif 动图 支持透明 修饰类
2. Jpg jpeg ---色彩多不支持动图也不支持透明，是网页内容图片的首选
3. Png 内容或者修饰 支持透明效果最好 （考点）
2、热区的创 建<map>和<area> 难点要点
1）为图片的特定区域建立链接
Shape的取值
Circle
Rect
Poly
<area shape=”circle” coords/>
<img src="http://www.mamicode.com/2.png" usemap="#mymap"/>
<map id="mymap" name="mymap">
<area shape="circle" coords="100,100,50" href="http://www.mamicode.com/girl.html"/>
</map>
2）Map 必须有的属 id name
Map 必须有的属 id name
3）Area 必须有三个属性
确定形状 Shape
确定位置 coords
确定链接 href
3、框架的使用
1）行内框架
<iframe></iframe>
在body里面
2）框架集
只要用框架集不要再用body 或者不要在body里面写内容
<frameset cols / rows =” ”>
<frame src=http://www.mamicode.com/”” name=” ”/>
<frame src=http://www.mamicode.com/ “ ”/>
</frameset>
<frameset cols =”20%, * ”> 剩多少 *就是多少
<frame src=http://www.mamicode.com/”” name=” ”/>
<frame src=http://www.mamicode.com/ “ ”/>
</frameset>
不加边框 不加滚动条 不可移动
<frameset rows="200px,300px,*" frameborder=0 >
<frame src=http://www.mamicode.com/ "re.html" / scrolling="no">
<frame src="http://www.mamicode.com/girl.html" noresize/>
<frame src=http://www.mamicode.com/ "jin.html"/>
</frameset>
第四讲 软件和表格
1、Sublime软件的安装和快捷方法
1）快捷方法
生成html文档 点击纯文本 选择html 按英文的叹号 + tab
生成单个标签 标签名字+Tab
生成多个标签 标签名*个数 + tab
注释：选中要注释的内容 control+/
浏览的话就点击右键 会有在浏览器中打开 或者找路径
生成id为top的元素 <div id=”top”></div> div#top + tab
生成后代元素 用父元素名>子标签 + tab <div><a href=""></a></div>
Div*3>a tab
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
Div>a*3 tab
<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
有汉字用大括号
Div*3>a{hello}
<ul>
<li><a href="">hello</a></li>
<li><a href="">hello</a></li>
<li><a href="">hello</a></li>
</ul>
Ul>li*3>a{hello$} TAB
<ul>
<li><a href="">hello1</a></li>
<li><a href="">hello2</a></li>
<li><a href="">hello3</a></li>
</ul>
注意光标在最后面 全部是英文
倒序
Td*3>{hello$@-}
<tr>
<td>world5</td>
<td>world4</td>
<td>world3</td>
<td>world2</td>
<td>world1</td>
</tr>
Th*3>{hello$$$} tab
<th>hell0001</th>
<th>hell0002</th>
<th>hell0003</th>
<th>hell0004</th>
<th>hell0005</th>
回顾内容
超链接的属性 href的三个值 相对路径 锚点 值为空
Target的值
Title
所有的标签都可以加属性
嵌入式样式
1）Sublime Text 3 快捷键精华版
Ctrl+X：删除当前行
Ctrl+N：新建窗口
Ctrl+K+B：开关侧栏
Ctrl+/：注释当前行
Ctrl+Shift+/：当前位置插入注释
F11：全屏
Shift+F11：全屏免打扰模式，只编辑当前文件
Alt+F3：选择所有相同的词
Ctrl+Z 撤销。r
Ctrl+Y 恢复撤销。
2、表格
1）表格的基本结构
<table></table>
定义表格的基本框架
<tr></tr>
定义表格的行
<td></td>
定义表格中行内的单元格
<th></th>
定义表格中行内的单元格（标题），自动将文本加粗，居中对齐
2）合并单元格
Colspan rowspan
3）完整的表格标记
<thead></thead>
定义表头部分
<tfoot></tfoot>
定义表格脚注
<tbody></tbody>
定义表格主体
注意：<thead>和<tfoot>的内容要用<tr><td>要表示，不推荐直接表示
属性：
表格默认没有border 边框 如果要有的话就border
Cellspacing 单元格与单元格之间的距离
Th默认样式 加粗 水平居中 垂直居中
Td默认样式是左对齐 竖直方向垂直居中
Cellpadding 内边距
border
align
Bgcolor
<style=” 背景颜色怎么加
Alig n left center right
Valign top/ middle/bottom
第五讲 表单的的综合使用
Class不唯一 用 .
Div 唯一 用#
如果文本居中的话用 text-align:center
如果一块居中的话用 margin-right:auto;
Margin-left:auto;
1、表单
1）表单的概念及作用 （重难点）
表单是用来采集用户输入的数据，然后将数据提交给服务器
2）一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 Action 属性 定义明文还是密文
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：
包括提交按钮（提交到服务器）、复位按钮（重置）和一般按钮 （一般是没有东西
可以自定义）
表单标签 <from></from>
定义采集数据的范围
所有的标签都写到form表单里面
Url一般是服务器上面的某一个接口
<form action="url" method="get" ></form>
action=“” 服务器地址
method=“” get / post
Get提交 密码 用户名 都是明文 不安全 大小有限制 （ajax)
Post 是密文
高都是行内块级元素
<!-- action 是服务器上的某一个地址 表单要提交的路径
method 表单提交的方式 值：get post
get 不安全 大小有限制
post 安全 大小无限制
placehoder 默认的提示
type="text" 表示的文本类型
maxlength="3" 限制输入文本的长度单位是字数
size 表示大小 不用了解
form是块级元素
其他的可以加宽和高都是行内块级元素
name具有记忆功能
写提交按钮的时候 value的值最好写上，不同的软件显示不一样
关于method的不一样 地址栏会显示不一样的内容 get会有显示 post则不具有
-->
<!-- 文本框 type="text" -->
表单域对象
包含文本框 多行文本框登
文本框
文本框是一种让访问自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：
＜input type="text" name="..." size="..." maxlength="..." value="http://www.mamicode.com/..."＞
多行文本框
也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞
密码框
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：＜input type="password" name="..." size="..." maxlength="...“/＞
隐藏域
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：＜input type="hidden" name="..." value="http://www.mamicode.com/..."＞
复选框
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：＜input type="checkbox" name="..." value="http://www.mamicode.com/..."＞
单选框
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
代码格式：＜input type="radio" name="..." value="http://www.mamicode.com/..."＞
必须写上相同的name值才能每次选中一个
文件上传框
有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
代码格式：＜input type="file" name="..." size="15" maxlength="100"＞
下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式：
＜select name="..." size="..." multiple＞
＜option value="http://www.mamicode.com/..." selected＞...＜/option＞
...
＜/select＞
表单按钮 表单按钮控制表单的运作
提交按钮 提交按钮用来将输入的信息提交到服务器。
代码格式：＜input type="submit" name="..." value="http://www.mamicode.com/..."＞
复位按钮 复位按钮用来重置表单。
代码格式：＜input type="reset" name="..." value="http://www.mamicode.com/..."＞
一般按钮 一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：＜input type="button" name="..." value="http://www.mamicode.com/..." onclick="..."＞
3）Post和get概述
Post 大小无限制 安全
Get大小有限制 不安全
HTML基础全荟