📄 10_1. html note.txt
字号:
Html (1天)
一、Html简介
HTML 是一种标记语言
忽略大小写，语法宽松
使用 HTML 标记和元素，可以：
控制页面和内容的外观
发布联机文档
使用 HTML 文档中插入的链接检索联机信息
创建联机表单，收集用户的信息、执行事务等等
插入动画
开发帮助文件
HTML 标记的格式组成： <ELEMENT ATTRIBUTE = value>
ELEMENT: 元素 - 标识标记
ATTRIBUTE: 属性 - 描述标记
value: 值 - 分配给属性的内容
二、超链接
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
Protocol 协议类型
http –超文本传输协议<a href="http://127.0.0.1:8080/shopcart/index.html">
gopher –搜索文件
telnet –打开 telnet会话
ftp –文件传输协议
mailto –发送电子邮件 <A HREF="mailto:daillow@gmail.com">电子邮件连接
Host.domain 服务器的 Internet 地址
Port 目标服务器的端口号
Hypertext 用户必须单击才能激活链接的文本或图像
三、Html的基本标记
标题标记 <h1>~<h6> 标题标记，可显示六种大小的标题(1最大，6最小)
段落级标记 <ADDRESS> 可包含：到主页的链接,搜索字符串功能,版权信息,文档的作者、地址、签名等信息
<BLOCKQUOTE> 显示文档中的引用文本。用于较长的引用且显示为缩进式段落。
<PRE> 此元素用于预定义文本的格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。
块标记 <SPAN>定义段落内的内容块； <DIV>可以定义跨段落的内容块
字符级标记 (见下面的语法大全，字体效果)
列表 <li type=...> 指定符号type="disc"空心圆/"circle"实心圆/"square"方形
<OL TYPE="a/A/i/I"> 有序号的列表(内嵌<li>)(a/A用字母标示，i/I希腊字母标示)
<UL TYPE="disc/circle/square"> 无序号的列表(内嵌<li>)
从第n个值开始编号<OL START = n> type=数值：从1开始(任何数值都是这样)
OL与UL没区别；TYPE="a/A/i/I"就有序号，TYPE="disc/circle/square"就没序号
定义列表包含在<DL>标记内。<DT>标记用于指定要定义的术语，而<DD>标记用于对术语的定义。
水平标尺标记 <HR> 用于在页面上绘制一条水平线。它没有结束标记，且不包含任何内容。
字体标记 <FONT> 可以指定size、color、style(样式)等属性。
图像标记 <IMG> 语法为：<IMG SRC="URL">。 支持GIF(支持图形渐近,动画)； JPEG(.JPG)； PNG
使用META标记
1. 提供关于网页的信息
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="daillo"> <!--获得文档的作者名称-->
<META NAME="Keywords" CONTENT=""> <!--根据关键词生成响应-->
<META NAME="Description" CONTENT="noting Book"> <!--对网页的描述-->
2. 应用：关键词生成响应
<META http-equiv="Expires" content="Mon, 15 Sep 2003 14:25:27 GMT">
设置网页的到期值:响应 Expires: Mon, 15 Sep 2003 14:25:27 GMT
3. 自动刷新页面
<META http-equiv="Refresh" content="10; url=http://yourlink">
应用：如网上实时新闻报道。 content指每多少秒更新一次
4. 设置网页所使用的编码
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
设置网页使用gb2312: 页面显示中文(还可设置utf8等等) 应用：如在不同浏览器上正确显示中文。
在HTML文档中使用特殊字符(跟XML的一样)
> ==== > greater 大于 < ==== < litter 小于
&de; ==== ≥ 大于等于 ≤ ==== ≤ litter equal
≠ ==== ≠ not equal不等 ‍ ==== 空格
" ==== ” 双引 ' ==== ‘ 单引号
© ==== © 版权符号 ® ==== ® 注册商标
& ==== & 与符号
四、使用表<Table>
与表相关的标记
<TABLE>表标记 <tr>指定表格中的一行 <th>指定标题列 <td>指定表格中的单元格
在<TH>或<TD>标记中使用COLSPAN="n"表示跨n列(合并n列)；ROWSPAN="n"表示跨n行(合并n行)
border定义边框宽；cellSpacing定义单元格间距(单位像素)；cellpadding定义格边界与格内容的间距
<body bgcolor="#04D4F3" background="背景图片.jpg"><!--定义背景颜色和背景图片(图片在上层)-->
<form name="form1" action="regiester.jsp" method=post><!--action 文本要提交的地方-->
<TABLE height=30% cellpadding=5 border=3 align="center"><!-- table可定义整体外观 -->
<caption><h3>User Login</h3></caption> <!-- 表单的标题 -->
<tr bgcolor=blue style =font-size:20> <!-- tr 定义一行的属性-->
<th colspan=2>注册页 <!--colspan横向合并单元格，rowspan纵向；部分结束格式可不写-->
<tr><th/>用户名：<!-- 单行文本--> <!--th表示一行的标题，稍加粗点；td定义各个单元格-->
<td><input type="text" name="username"/></td></tr>
<tr><th/>密 码：<!-- 密码隐藏，不显示； 是空格-->
<td><input type="password" name="password"/></td></tr>
<tr><th/>性别：<!-- 单选选项--> <!-- checked 是默认值-->
<td>男<input type="radio" name="gender" value="male" checked/>
女<input type="radio" name="gender" value="female"/>
保密<input type="radio" name="gender" value="none"/></tr>
<tr><th/>学历：<!-- 下拉菜单选项-->
<td><select name="xueli" size="1">
<option value="blank"> <!--这行不写，显示空白；不知怎样定义自写选项-->
<option value="none">没上过学</option>
<option value="zxx"/>中小学
<option value="dz">大专
<option value="bk">本科
<option value="ss">硕士
<option value="bs">博士/博士后</option></td></tr>
<tr><th/>爱好：<!-- 多选选项 -->
<td>旅游<input type="checkbox" name="hobby" value="travel"/>
看书<input type="checkbox" name="hobby" value="book"/><br>
音乐<input type="checkbox" name="hobby" value="music"/>
交友<input type="checkbox" name="hobby" value="friends"/></td>
<tr><th/>照片：<!-- 浏览文件框 -->
<td><input type="file" name="photo" />
<tr><th/>自我介绍：<!--多行文本,这textarea不能用空标志-->
<td><textarea cols="17" rows="3"></textarea>
<tr align="center" bgcolor=blue>
<td/><input type="reset"/> <!-- 重置/刷新按钮 -->
<td/><input type="submit" value="提交"/> <!-- 提交按钮 -->
</TABLE></form></body>
五、在Html中使用多媒体
(在<body>中插入)
插入图片 <IMG SRC=./picture/cart.gif ALT="购物车">
插入声音 <BGSOUND SRC="E:\\解决方案\\音乐\\3.mid"> (windows的路径写法)
<bgsound src="上海滩.mp3">
音频/视频 <EMBED ALIGN=CENTER SRC= "\path\file name" AUTOSTART= "TRUE" >
六、表单的使用
用途：收集信息，发送给程序处理
ACCEPT="Internet media type"
ACTION="URL" 指定处理提交的表单的脚本的位置
METHOD = (GET | POST) 指定向服务器发送数据的方法。
<input>属性：
TYPE= 此属性指定表单元素的类型。可用的选项有 TEXT(默认；单行文本)、CHECKBOX(多选)、
RADIO(单选)、SUBMIT(提交)、RESET(重置)、FILE(浏览文件)、HIDDEN、
PASSWORD(显示特定符号的单行文本)、IMAGE(插图) 和 BUTTON。
VALUE= 此属性是可选属性，它指定表单元素的初始值
NAME= 此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们
MAXLENGHT= 此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的
CHECKED= 是Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时使用。
SIZE= 此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的
input-type (见属性 TYPE= )
除input外，其他输入元素：
TextArea 元素(属性：Cols、Rows、Size) 多行文本
BUTTON 元素(属性：Name、Value、Type)
SELECT 元素(属性：Name、Size、Multiple、option) 下拉菜单(单选)
七、框架(frame)
框架将 Web 浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。达到多个视图的效果。
<FRAMESET Rows Cols> 创建框架。 Rows分行；Cols分列。行列都分窗口时需要嵌套
<frameset cols="20%,*,20%"> 分割左中右三个框架；将左边和右边框架分割大小为20%；其余的自动调整
<frameset rows="20%,*"> 上下分割,将上面框架分割大小为20%；下面框架的大小浏览器会自动调整
<FRAME src="x.html"> 在 FRAMESET 元素内指定单个框架。 属性有Name、Src、Noresize、
Scrolling=yes|no、 Frameborder、Marginwidth、Marginheight
<NOFRAMES> 对那些不支持 FRAMESET 的浏览器使用的 HTML。 定义不出现分割窗口的文字
<IFRAME src="xxx.html"> 内嵌框架，不需要 frameset ，随处可用。
属性:Name,Width,Height,scrolling=auto,frameborder
HTML 语法大全！
********* HTML 对象(Object) ************
<!DOCTYPE> 指定了 HTML 文档遵循的文档类型定义(DTD)。
<!-- ... --> 批注
<a> 标明超链接的起始或目的位置。
<A HREF TARGET> 指定超级链接的分割窗口
<A HREF=#锚的名称> 指定锚名称的超级链接
<A HREF> 指定超级链接
<A NAME=锚的名称> 被连结点的名称
<acronym> 标明缩写词。
<address> 特定信息，如地址、签名、作者、此文档的原创者。
<applet> 在页面上放置可执行内容。
<area> 定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -