html笔记

一.html基础

1.声明：<!DOCTYPE>

html也有多个不同的版本，只有完全明白页面中使用的确切html版本，浏览器才能完全正确的显示html页面。这就是<!DOCTYPE>的用处

2.html标签中 lang=“en/zh”  表示代码是英文还是中文显示 en指英文可以省略

3.header标签内部添加 <meta charset="UTF-8">  告诉浏览器以utf-8编码形式显示

4.元素划分

行元素：不换行 不能设置宽度和高度。即占用一整行，元素之间上下排列

块元素：换行能设置宽高

行内块：不换行 能设置宽高 （img input） 元素之间在一行显示

说明：默认文档流，块元素有宽和高属性的标记（img input）可以设置宽高，而行元素不能设置宽高

常用块元素：body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,table,tr,td,th,form,input,select,textarea

5.常用标记急实体（entity（特殊字符的替代写法））

&bnsp;不折叠空格

<p></p>段落标签

<h1></h1>标题标签1-6

<a></a>链接标签

<b></b> <strong></strong> 加粗

<i></i> <em></em> 斜体

<u></u>下划线

<s></s> <strike></strike>删除线

上标

下标

<span></span>行内元素

<hr>  水平分割线

<img src="图片url" alt=“当图片报错时候显示注释信息” title=“提示信息”>  建议使用alt属性 和title，SEO友好  seo（搜索引擎优化）

&lt;   <   less then

&gt;   >   great then

&amp;  &   连接符

&#39;  '   单引号

&quot; "   双引号

&reg;  ®   注册标记

&copy; ©   版权符号

6.链接标签

作用：用户在页面之间链接跳转的标签

 语法：<a href="目标地址" target=“打开链接方式常用_blank即在新的窗口打开，不加target属性打开的链接覆盖之前的网址” >显示内容</a>

注：当链接的地址是压缩文件时可实现下载功能

  eg：<a href="http://tmooc.cn"  accesskey="t" tabindex="2">达内tmooc</a>   

<a href="http://tmooc.cn"  accesskey="t" tabindex="1">bb</a>

<a href="http://tmooc.cn"  accesskey="t" tabindex="3">cc</a>

注：accesskey设置快捷键 设置链接的快捷键t当用键盘tab建来选择这三个链接时，先会选择bb 达内tmooc cc

锚点（书签）：页面内部跳转。即页面有多个标题，标题内容较多时候，点击标题能跳转到对应的标题内容

eg：

 <ul>

<li><a href="#b1">标题1</a></li>

<li><a href="#b2">标题2</a></li>

<li><a href="#b3">标题3</a></li>

 </ul>

 <h2 id="b1">标题1</h2>

 <p>内容1</p>

 <h2 id="b2">标题2</h2>

 <p>内容2</p>   

 <h2 id="b3">标题3</h2>

 <p>内容3</p> 

target中指定框架名称，意框架集名在窗口打开

eg：<a href="C:\Users\tarena\Zend\workspaces\DefaultWorkspace\psd1702\demo2.html" target="a1">aaa</a>

                     <iframe src="day03.html"  width="300"  height="200" name="a1"></iframe>

7.空白折叠现象：

1.在正文中多个连续空白会折叠显示一个空格

空白：回车字符，tab字符，空格字符

2.如果需要显示多个空格可以使用不可折叠空格： &nbsp;

3.段落内部的回车，可以使用但标记<br>或</br>

8.属性

1.在开始标签上定义

2.结构为 属性名=“属性值”

3.属性值一般有引号，可以是双引号或单引号

4.可以有多个属性，属性之间使用空格分隔，属性没有先后次序

5.通用属性（所有标签可以使用属性）

algin 文本显示方式

title   提示文本

id 元素的唯一ID

style 元素的内联样式

class 元素的css类

tabindex 改变用键盘tab选择的顺序

onclick 事件属性

bgcolor 背景颜色  background背景颜色表示样式表中的样式

9.网页编码问题

网页的存储编码与网页在浏览器中显示编码不一致将造成乱码问题，如：保存网页使用的utf-8，显示网页时候用的jgb，则出现乱码

解决方法：网页的保存编码与显示的编码保持一致，在网页head标签中使用meta标签，设置当前网页的保存编码，浏览器根据meta标签解析网页时候，就不会乱码了。

10.相对路径和绝对路径

绝对路径：http://tmooc.cn/script/img_v2/logo_v3.png 就是绝对路径

优势：支持跨站图片链接（盗图）不占流量

相对路径：logo_v3.png

优势：简洁方便，但费流量

必须与网页部署在相同位置（相同网站）即网页和图片在一个文件夹内

11.列表

无序列表（unorder list）

<ul type="列表类型"> type=disc实心圆（默认） circle 空心圆 square 实心矩形

<li>

<li>

</ul>

ul定义列表的整体，li用于定义列表中的一个项

eg：<ul>

<li>aaa

<li>bbb

</ul>

有序列表 <ol><.ol>

<ol type="列表类型" start=“起始编号”> type=1 数字（默认） a 小写字母 A 大写字母 i 小写罗马数字

<li>

<li>

</ol>

定义列表 dl-dt-dd组合

dl元素定义列表

dt定义列表项目

dd定义列表描述信息

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

12.表格 table

tr 表格行 td 表格单元格 th 表格头部单元格

表格可以划分为3个部分，表头 表主体和表尾

表头行分组：<thead></thead>

表格主体：<tbody></tbody>

表尾部：<tfoot></tfoot>

表格常用属性

width 设置表格宽度

height 设置表格高度

bgcolor 设置背景颜色

background 设置表格背景图片

bordercolor 设置表格边框颜色

cellpadding 设置内边距（单元格边框与内容之间的距离）

cellspacing 设置外边距（单元格与单元格之间的距离）

border-collapse:seperate 默认分离2px| collapse 合并;

border-spacing:value; 单元格和单元格距离

说明:

        一般在全局样式中写下面：

      table{

        border-collapse:collapse;

        border-spacing:0;

      }

行属性：

align 设置水平对齐方式

bgcolor  设置背景颜色

valign   设置垂直对齐方式（top|middle|bottom）

合并单元格

colspan 列合并 从左边第一列向右合并

rowspan 行合并 从上面第一行乡下合并

13.表单Form

1.表单作用：手机或客户端的数据，然后发送到远程服务器

客户端：本地的浏览器

服务器：装有特定功能的计算机

2.格式

<form action="服务器的url.php" method="get默认值|post" name=“表单名”  enctype=“multipart/form-data” onsubmit="return 验证函数名（）">

。。。表单元素

</form>

说明：

a. action服务器的URL.php

b.method：数据传输方式

get：默认值，以名称/值对写在浏览器地址栏后面：xx.php?user=tom&pwd=123456      不安全，传小文件

post：以名称/值对在http请求头部传递  安全的，传大文件

c.c.enctype="multipart/form-data"  上传协议，表单中有上传项需要添加此属性

d.onsubmit="return 验证函数名（）"表单提交时候进行验证表单内容

3.表单元素

<input type="" name="名称" value=“值” required="required" 必填，不能为空/>

type值以及常用属性：

text 单行文本                          placeholder="提示信息" size="文本框宽度" maxlength="最大字符长度"

password 密码框 placeholder="请输入密码" size="文本框宽度"

radio 单选框 说明：一组功能相同的单选框名称要相同，指定value值，checked="checked" 指定初始值

CheckBox 复选框 说明：一组功能相同的复选框 名称相同,以数组形式存储多个值，例如tag[]；指定value属性值；初始值 checked="checked"

file 浏览框（上传）说明：传输方式必须是post；form 标记中添加  enctype="multipart/form-data"；multiple="multiple" 实现 多文件上传

submit 提交按钮按钮不需要name属性

button 普通按钮

reset 重置按钮

hidden 隐藏域 说明：向服务器传 名称/值 数据，而客户端无需理会

email：规定输入框邮箱，自动验证邮箱

url：规定输入框网页地址，自动验证网址

number：规定输入框数字

Date pickers (date,month,week,time,datetime,datetime-local)日期选择器

search：规定输入框为搜索

多行文本框

<textarea name="名称" value="值" cols="宽度" rows="高度"></textarea>

下拉列表框

<select name="名称">

<optgroup label="分组名称">  -->下拉列表框内分组不是必须的

<option value="值">...</option>

</optgroup>       

。。。

</select>

说明：a.初始值 selected="selected"

b.select 中 multiple="multiple" 实现多选 如果是多选name名称以数组形式存储 name=aa[] 

14.浏览器兼容问题

-moz- 火狐

-webkit-谷歌，safari

-o- opera

-ms- IE

说明：针对老版本浏览器中属性的兼容支持

例如：

border-radius：8培训；

-moz-border-radius：8px；

-webkit-border-radius:8px;

-o-border-radius:8px;

-ms-border-radius:8px;

二。WEB基础

1.工作默认：B(Browser浏览器)/S(Server服务器)

2.Browser浏览器: 向服务器请求页面,然后将服务器返回的结果解析标记显示出来。

(1)  主流浏览器
a. IE(Internet Explorer)
b. Chrome 谷歌
c. Firefox  火狐
d. safari  苹果浏览器
e. opera 欧朋
(2)  客户端浏览器

3.Server服务器: 安装特定功能软件的计算机。

(1) web 服务器:接受并且处理请求(HTTP Request)页面，然后将服务器结果返回(响应HTTP Response)客户端浏览器

(2)ftp 服务器

(3) 邮箱服务器

(4) 数据库服务器: MySQL数据库。。。

4.web服务器

(1)  apache ,IIS  ,tomcat,nginx 等

(2)  apache安装

a. 端口:计算机跟外界(计算机)沟通的通道

apache 默认端口号: 80

 ftp:默认端口号 21

MySQL: 默认端口号3306

 b.访问

远程访问：

http:// IP[:端口] ( 一个域名绑定多个IP)

http://域名[:端口] 

本地访问：

http://127.0.0.1[:端口]

http:// localhost[:端口]

c.  windows 下默认主目录 : htdocs文件夹

d.  默认首页: 自动执行的页面  index.html  index.htm index.php

e.  配置文件: windows 下  conf/httpd.conf

(a) Listen 80    端口

(b)  DocumentRoot "D:/apache/htdocs" 默认主目录位置

(c)  <Directory "D:/apache/htdocs">  浏览主目录位置

 说明: 将  (b) 和(c) 中的路径更改为目标路径即可以更改默认主目录位置.必须重启apache  才能生效

三快捷键及知识点

1. mstsc 打开远程桌面

2. window+E 打开我的电脑

5.<!-- -->Ctrl+Shift+/  html中注释快捷键 

6./**/  Ctrl+Shift+/          样式表注释

7.sublime软件中 !+tab 创建html格式

8.样式表中font缩写形式字体颜色不能写在内

9.父级div设置了宽高，如果子级div右浮动或其他布局（不占位）则需要在子级div设置相应高宽，因为子级脱离文档流不能继承父级里面的宽高

10.form表单提交数据的编码类型：enctype  (encoding type)

application/x-www-form-urlencoded(默认)代表表单只能提交字符信息

multipart/form-data代表表单不仅能提交字符信息，也可以提交字节信息(图片、文件等)