|
|
HTML
l 什么是HTML？
构的。HTML 是超文本标记【标签】语言 (Hyper Text Markup Language)简写，是运行在浏览器【IE、谷歌浏览器、360浏览器等等】中的，用来制作页面结
HTML其实就是一些个标签，页面都是由这些个标签拼出来的。
标签基本结构
html其实就是一堆标签，会用就行。
标签的基本结构：
1. 标签都是由 < 和 > 括起来的
2. < 和 > 里面由标签的名字、属性名称和属性值组成：
3. 标签分为单闭合标签和双闭合标签
l 文件编码
我们在电脑上创建的每个文件都有一种编码，不同的编码能够显示不能的内容，比如：
u gb2312：简体中文
u big5：繁体中文
u gbk：中文【简体+繁体】
u EUC_KR：韩文
u utf-8：万国码【可以显示不同国家的语言】【我们以后创建的所有文件和程序都使用这种编码】
浏览器默认使用GBK的方式来解析utf-8的网页所以就乱码：
解决办法：我们可以在页面中使用meta标签通知浏览器使用utf-8编码来显示页面：
l 标准的HTML页面结构
一个标准的HTML页面需要有一个基本的HTML结构，如果不按这个结构来制作页面的话，页面会出现各种奇怪的问题。所以我们制作页面时都要按着这个基本结构来制作页面：
l doctype声明
<!doctype html>
页面的第一行一般要使用doctype来声明页面中使用的html的版本：
l 页面头信息
所有头信息的标签都应该写在<head> ... </head>这个标签中，在head中设置的内容是不会显示在页面中的。
v 页面标题
<title>页面标题</title>
v 页面编码
<meta charset=”utf-8”>
v 页面关键字和描述【SEO：搜索引擎【百度，谷歌】优化】,告诉搜索引擎这个网页是干什么，这样别人在百度、谷歌才更有可能把你的网页搜索出来
<meta name=”keywords” content=”页面关键字”>
<meta name=”description” content=”页面描述”>
说明：如果不写，也不是完全搜索不出来，写了更好【权重比较高】。
v 引入资源文件【css、js文件】
<script src=”js.js”></script>
<link rel="stylesheet" type="text/css" href="css.css">
l 页面主体
所有要显示在页面中的内容都应该写在<body> ... </body>标签中，所有主体中的标签都是由上至下【块级标签】、由左向右【行级标签】依次显示的。
页面主体中使用的标签分为行级标签和块级标签两类。
行级标签：a , img , span , label
块级标签：h1~h6 , div , ul , ol , dl , table , form , hr , p
行级标签特点：
① 和其他行级标签在同一行显示
① 一般标签的宽、高是由内容决定的，无法使用width和height设置【图片可以设置】
块级标签特点：
② 独占一行显示，不和其他标签在同一行
③ 标签可以使用width和height设置宽、高
扩展：可以使用CSS技术修改这些行为。比如把块级的放一行都可以使用CSS实现。
l 注释
注释：写在页面中的文本，用来对代码进行注解、说明用的，这些文本是不会被解析运行的，也不会显示在页面中，这些文本主要是给开发人员看的。
格式：<!-- 注释 -->
l 多余的空格和回车
在页面主体中的多个回车和空格都会被压缩成是一个空格显示出来：
如果想要显示多个空格，如果使用字符实体：“ ”
l 字符实体
在html中有一些特殊符号是显示不出来的如果要显示必须要使用字符实体：
l 标题标签
格式：<h1> 标题内容 </h1>
标题标签一共有六个h1~h6，分别代表：
h1：主标题
h2：副标题
h3：次副标题
......
l 段落标签
格式：<p> 一段的内容 </p>
当要在页面中显示一篇文章，并且文章要分段显示时，就使用p标签。
l 换行
格式：<br>
一段文字内的换行可以使用br标签。
l 超链接
格式：<a href=”跳转到的url地址” target=”打开窗口的位置”> 显示的文本 </a>
target=”_self”:本窗口打开【默认】
target=”_blank”：新窗口打开。
锚点
a标签除了能够跳到其他页面之外，还可以在页面内跳转，只需要在页面中设置一个锚点，就可以让a标签跳转到这个锚点所在的位置去。
做法：
1. 在一个位置上使用a定义一个锚点
2. 现在可以再写另外a标签，点击时跳到这个位置：
扩展：当只写#号不写锚点名字时跳到最顶部
发邮件
也可以在点击a标签时弹出客户端上安装的发邮件的软件来发邮件。
说明：如果没有安装软件，什么效果也没有。
l 图像
语法：<img src=”图片地址” width=”宽” height=”高” alt=”图片显示不出来时显示的文字” title=”鼠标放上时显示的标题” >
说明：可以只设置一个宽，高会自动按比例绽放，这样图片不会变形。
l 列表
无序列表
语法：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ul>
列表的用途：
1. 文章列表时：
2. 按钮列表时【列表是可以横过来的，而且前面的零点也可以去掉，需要CSS】
有序列表
语法：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
......
</ol>
二级列表
语法：
<dl>
<dt>一级列表项</dt>
<dd>二级列表项</dd>
<dd>二级列表项</dd>
......
<dt>一级列表项</dt>
......
</dl>
l div标签
语法：<div> 内容 </div>
我们一般使用div标签对页面进行分区、分块。一般需要div+css来对页面进行布局：
总结：我们制作一个大网站时一般首先要使用DIV+CSS页面整体进行布局，然后再把大区域再使用div细分成小的区域，然后再使用其他标签实现小的细节功能。
比如：例子把东西都放到页面中间的区域中：
1. 先使用div+css创建一个区域：
效果：
2. 把所有其他的标签放到这个div里面：
l span标签
语法：<span> 内容 </span>
行级标签，功能：把一段文字套起来，让这段文字区别于其他文字。
比如：一段文字中的某几个字红色显示：【span只有结合css时才会有效果】
l 表格
可以使用table标签在页面中制作行、列的表格。
语法：tr：定义行 td：定义列
<table border=”边框宽度” cellspacing=”单元格外边距” cellpadding=”单元格内边距”>
<tr>
<td>单元格</td>
<td>单元格</td>
.....
</tr>
....
</table>
合并单元格
横向合并 colspan
纵向合并
应用场景：一般使用在数据管理列表中：比如以下就是一个四行四列的表格，最后一行是四列合并成一列用来放翻页字符串：
table常用的几个属性【不过一般这些都可以使用CSS来控制】：
内边距：cellpadding
外边距：
单元格中的对齐：
align: left|center|right
valign: top|middle|bottom:
说明：table一般现在只用在数据列表中，平时页面中的一些很像表格的布局不用table，因为浏览器解析table的速度慢,比如这个很像，table但最好不用了。
管理数据时的数据列表使用：
l 表单
表单：用来收集用户填写的数据的，然后提交给服务器，让服务器上的PHP程序处理这些数据。
表单里的内容在放在<form> ... </form>中
语法：
<form method=”提交方式” action=”提交地址”
表单元素
.......
</form>
l 表单元素
所有的元素必须要有name属性。服务器要根据name才知道这个数据是干什么用的。
单行文本框
语法：<input type=”text” name=”名称” maxlength=”最大输入长度” size=”宽度” value=”默认显示的值”>
说明：以后所有的名字都使用字母、数字、下划线。别的东西有时也可以用，但是会出现些奇怪的问题。
密码框
<input type=”password” name=”名称” maxlength=”最大输入长度” size=”宽度” value=”默认显示的值”>
小技巧：一个全角空格宽和一个汉字相同。
单选框
<input type=”radio” name=”名称” value=”提交的值”> 显示的文本
复选框
<input type=”checkbox” name=”名称” value=”提交的值”> 显示的文本
隐藏域
在表单中看不到这个东西，但是提交表单时，这个值会提交到服务器上去。
<input type=”hidden” name=”名称” value=”提交的值”>
多行文本框
<textarea rows=”行数” cols=”列数” name=”名字”> 内容 </textarea>
扩展：一般可以使用第三方JS插件制作出在线编辑器【富文本编辑器】
下拉框
<select name=”名字”>
<option value=”提交的值”>显示的文本</option>
<option value=”提交的值”>显示的文本</option>
<option value=”提交的值”>显示的文本</option>
</select>
文件域
上传文件时使用的：
<input type=”file” name=”名字”>
注意：如果表单中有文件域，那么form必须1.是以post方式提交 2. 要添加enctype=”multipart/form-data” 属性。
按钮
1) 普通按钮：点击之后没有任何效果，一般用来调用JS代码用
<input type=”button” name=”名称” value=”按钮上显示的文本”>
2) 提交按钮：点击之后会提交表单中的数据到服务器
<button>显示的文本</button>
<input type=”submit” value=”按钮上显示的文本”>
3) 重置按钮：点击之后把清除表单中的数据
<input type=”reset” value=”按钮上显示的文本”>
表单元素其他属性
disabled=”disabled”：禁用 ：这一项不会提交到服务器【相对于表单中没有这个东西】
readonly=”readonly”：只读 ：值可以继续提交。
效果：都是不能填写数据，只能看到。
表单提交的两种方式
GET：
1. 表单中的数据都在URL后面提交的
2. 浏览器对URL长度有限制，所以不适合提交大表单数据
3. 不能提交图片
使用场景：制作搜索功能时的表单一般都使用GET方式：
POST：
1. 可以提交大数据
2. 可以上传文件
3. 提交的数据包装在http协议主体里面了
应用场景：当注册、登录、添加等等。
h5对表单的加强
H5有些浏览器不支持：
input输入框的加强：
type=”email”
type=”url”
type=”number”
type=”range”
type=”date”
type=”color”
l 框架集
框架集：分割窗口用的【从H5中删除去掉了】
横向分割
纵向分割
总结：框架集在HTML5之后已经不再推荐使用了，但是一些旧的后台模板中会使用这个。
a标签可以在不同的框架中跳转：
1. 为每个窗口起个名字：
2. 在a标签上使用target属性指明在哪个窗口打开：
效果：
l 内联框架
在一个窗口内部的某个位置再嵌入一个窗口：
<iframe src=”内联的页面地址”></iframe>
还可以设置表单提交到的窗口：
1. 为窗口起名：
2. 在表单上添加一个target属性指定提交到的窗口
扩展：可以使用这个东西模拟一个无刷新上传图片的功能。 |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-6-22 08:06:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡