html学习笔记

发表于 | 分类于
| 字数统计: 3k 字

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

Html 超文本标记语言

  • 静态页面: 网页上的内容无法自动更新,需要通过手动在网页的代码里添加修改.
  • 动态页面: 网页上的内容可以自动更新,不用手动在网页的代码里添加或修改.
    web标准是网站所有标准的集合包括 结构(html) 样式(css)和行为(js)三部分
  • 常见web浏览器 1.Internet Explorer 2.Firefox 3.Opera 4.Safari 5.Google Chrome

  • 常见颜色

    1
    2
    3
    4
    Black   #000000  黑色    White   #FFFFFF   白色   Red     #FF0000  红色  Brown   #A52A2A   棕色
    Green   #008000   绿色   Blue    #0000FF   蓝色   Gray    #808080  灰色  Orange  #FFA500  橙色
    Purple  #800080  紫色    Yellow  #FFFF00   黄色   Silver  #C0C0C0  银色  Gold    #FFD700  金色
    Pink    #FFC0CB   粉色   Cyan    #00FFFF   青色

  • 常见的ASCII码 a-97 z-122 A-65 Z-90 0-48

页面结构

1
2
3
4
5
<!doctype html>   网页文档的第一句
<html> 	      网页文档的跟标签
<head>	      网页文档的头部信息
<title>       网页文档的标题
<body>	      网页文档的主体内容

标签分类

  1. 非可视化标签 标签不能在网页的内容区域可见
  2. 可视化标签 标签可以在网页的内容区域可见
    注:只有可视化标签,才能用css改变它
  3. 双标签 成对出现的标签
  4. 单标签 不能包含文本内容和子标签 写法 <img />
    ex:img meta link base input br hr

注意事项:

  • 单标记一定要封死
  • 标记一定要按顺序嵌套
  • 属性的值要写在引号之间
  • 核心属性 id class style name
  • <!--html注释--> 注释内容不能写在标记内
1
2
3
4
5
6
7
8
<!-- 元信息标签  meta标签  页面描述信息 -->
<meta name="Generator"  content="Editplus" />       编辑工具
<meta name="Keywords"  content="关键字1,关键词2" /> 关键词(间隔用英文逗号)
<meta name="Description"  content="主要内容" />     描述
<meta name="Author"  content="小伟" />              作者
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta charset="utf-8" />      网页所使用的语言
<meta http-equiv="Refresh"  content="n;url=http://www.souhu.com" />  指定时间内跳转到指定的页面

网页实体

1
2
3
不间断空格  &nbsp;   < 小于号  &lt;    > 大于号  &gt;   圆角空格   &emsp;   & 和号  &amp;
"" 双引号  &quot;   '' 单引号  &apos;  ®  商标  &reg;  ©  版权    &copy;   人民币   &yen;
`&#12288;` 一个中文汉字的宽度空格

文本标记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
文字标题
<h1>标题</h1>  每个页面只可以有一个(seo) h1-->h6 逐渐减小
段落标签
<p>另起一行空一行</p>
<br/>   换行
<nobr/> 强制不换行
水平分隔线
<hr size="粗细" width="长度" align="位置" color="颜色" />
文字样式
<font size="字体大小" face="字体风格" color="文字颜色">文本标记</font>
保留格式标签
<pre>用来保留文本的空格和换行</pre>
文字标识标签
<b>加粗文字</b>    <strong>强调</strong>
<i>斜体</i>        <em>斜体</em>起强调作用
<u>下划线</u>      <s>带删除线</s>
<sup>上标</sup>    <sub>下标</sub>

超链接

1
2
3
4
5
6
7
8
9
10
11
<a href="目标文档的URL">超链接名称</a>
<a href="目标文档的URL" target="窗口打开方式" name="页面锚点名称" >内容</a>
<!-- target形式:_blank(在新窗口打开)  _self(在当前窗口打开(默认))  _parent(在父窗口打开)
_top(在最顶层窗口打开) framename框架名称 -->
<a href="#">空链接(当前页面)</a>
<a href="">会显示当前文件夹下的文件目录结构</a>
<a name="锚点名称">锚点</a>    定义锚点
<a href="#锚点名称">连接到锚点</a>
<a href="目标文档的url#锚点名称">其它文档的锚点</a>
<!-- URL  统一资源定位符 -->
<a href="mailto:873077939@qq.com">发送邮件</a>

图片的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- gif:压缩位图格式支持透明背景可做动画  jpg:清晰度高加载快  png:透明的,容量小
bmp:清晰度不高 容量较大 -->
<!-- 图片四要素 -->
<img src="图片路径" alt="描述性文本" width="宽度" height="高度" />
<!-- alt   当不可见或加载不成功时显示的描述性文本 提供给搜索引擎用的  title 鼠标滑过时显示的文本 -->
<!-- 图片的位置 -->
<img src="路径" align="位置" />
<!-- align:bottom  底部  top 顶部   left 左边  right  右边  middle 中间 absmiddle 绝对中间 -->
<!-- 图片与文本间距 -->
<img src="路径" hsapce="水平间距" vspace="垂直间距"/>
<!-- 图片超链接 -->
<a href="url"><img src="图片路径"></a>
注:相对路径  相对于自己的目标文档位置
绝对路径  从盘符开始的路径 D:\tew\web\1.jpg
	从域名出发       http://bbs.moonseo.cn/image/logo.png
同一级目录  <img src="1.jpg" />或<img src="./1.jpg">
下一级目录  <img src="images/1.jpg" />
上一级目录  <img src="../1.jpg" />
不同目录    <img src="photo/1.jpg" />
<!-- 图片之间默认会有3px空隙  给img设置  display:block即可或更改vertical-align:middel -->

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 无序列表 -->
<ul type="disc|circle|square">
  <li>disc实心圆(默认)</li>
  <li>circle空心圆</li>
  <li>square小方块</li>
</ul>
<!-- 有序列表 -->
<ol type="1 a A i I" start="从第几个开始">
  <li>数字序列号</li>
  <li>大小写英文字母</li>
  <li>大小写罗马字母</li>
</ol>
<!-- 定义列表 -->
<dl>
  <dt>计算器</dt>
  <dd>用来计算的机器</dd>
  <dt>显示器</dt>
  <dd>以视觉方式显示信息的装置</dd>
</dl>
<!-- 注:dl  列表整体结构   dt  定义列表项的名称 dd 对dt的解释说明
   dt不能重复使用 dd可以重复多个   列表的嵌套应该将列表放在li里面 -->

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 表格  thead  tbody  th tr td
表格的属性 cellspacing 单元格与单元格之间的距离  border 边框
cellpadding 单元格与内容之间的距离
align   水平对齐方式
valign  垂直对齐方式
rowspan 合并行  删除后面所有合并行的最后一列
colspan 合并列  删除本行中的其他列之和等于总列数
bgcolor 背景颜色  background 背景图片优先于背景颜色
caption 表格标题(只能定义一个)   th  表头
rules="all"  合并边框线(不推荐)
rules="none" 不显示单元格之间的分割线 -->
<table>
  <caption>表格标题</caption>
  <tr>
    <td colspan="2">注释</td>
  </tr>
  <tr>
    <td rowspan="2">解释</td>
    <td>解释</td>
  </tr>
  <tr>
    <td>解释</td>
  </tr>
</table>
<!-- 行的属性 height bgcolor background align valign 垂直对齐方式 -->
<!-- 注:表格基本样式控制
table{ border-collapse:collapse;// 将表格设置为单线条边框 }
table,td,th{border:1px solid black;//设置表格,行,列的边框 } -->

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!-- 表单由三部分组成:表单标签,表单域和表单按钮 -->
<form action="" method="" name=""></form>
<!-- name 表单名称  action:将表单提交的内容转到响应页面
method 表单提交数据的方式
  1.method="post"   将数据打包发送到所指的页面对于用户不可见相对安全大小不限
  2.method="get"    将提交的数据附加在地址栏上(默认),不安全,大小有限制
from的作用
a：直接提交表单  b:使用submit/reset按钮   c：便于浏览器保存表单  d：可以整体提取值 进行表单验证 -->
<!-- 单行文本框 -->
<input type="text" value="默认值" size="长度" maxlength="允许输入字符" />
<!-- 密码框 -->
<input type="password" />
<!-- 多行文本框 -->
<textarea  wrap="self off hard"(是否允许换行) cols="" rows=""></textarea>
<!-- 注:多行文本框不可拖动只能在css这设置resize:none; -->
<!-- 单选框 -->
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女">女
<!-- 注:单选框的name必须相同,value不能相同 -->
<!-- 复选框 -->
<input type="checkbox" name="ck1" checked="checked" />体育
<input type="checkbox" name="ck2" />文学
<input type="checkbox" name="ck3" />地理
<!-- 注:同一组的复选框name属性必须不同 -->
<!-- 下拉列表框 -->
<select  size="可见选项数目"  multiple="multiple(允许多选)">
  <optgroup label="中国">
    <option selected="selected">北京</option>
    <option>陕西</option>
  </optgroup>
  <optgroup label="美国">
    <option>纽约</option>
    <option>华盛顿</option>
  </optgroup>
</select>
<!-- 隐藏域 -->
<input type="hidden" name="hidden" value="" />
<!-- 文件域 -->
<input type="file" name="" enctype="multipart/form-data" />
<!-- 注:enctype 告诉表单在向服务器发送数据之前数据的编码方式
提交按钮 -->
<input type="submit" value="提交" />
<!-- 重置按钮 -->
<input type="reset" value="重置" />(恢复页面打开时的初始值)
<!-- 图像按钮 -->
<input type="image" src="url" />
<!-- 定义域 -->
<filedset>
  <legend>定义域标题</legend>
</filedset>
<!-- label 为input标签定义标注  将文字与input表单元素关联(绑定)起来
	当用户选择该标签时,会将焦点转到和标签相关的表单控件上,label标签的for属性
	应当与相关元素的id属性相同 -->
<input type="radio" id="man" /><label for="man">男</label>
<button>请点击我</button>
<!-- 在form表单中button默认值是submit提交 一般不再form中使用,而在不写form表单时可做提交按钮使用
注:文本框的限制  disabled 禁用(禁用后无法提交)  readonly 只读 -->

框架

1
2
3
4
5
6
7
8
9
10
11
<frameset clos=框架宽度(水平分割)  rows=框架高度(垂直分割)  border=框架边框粗细 frameborder="1/0" 是否显示边框></frameset>
<frame noresize="noresize" 框架边框不可拉伸 scrolling="yes/no" 框架是否显示滚动条 frameborder="1/0" 是否显示边框 />
<frameset clos="137,*">
  <frame src="1.html" />
  <framset rows="82,*">
    <frame src="2.html" />
    <frame src="3.html" />
  </frameset>
</frameset>
<!-- 框架链接 -->
<iframe src="" name="one" />   <a href="" target="one" ></a>

多媒体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- A:<marquee>会移动的文字(跑马灯)</marquee> -->
<marquee direction="right" behavior="alternate">会移动的文字(跑马灯)</marquee>
<!-- 方向:direction="left(默认),right,up,down"
方式:behavior="scroll(默认)循环滚动,slide只滚一次,alternate来回滚动"
次数:loop="n" 未指定的无限循环
速度:scrollamount="n"  数值越大,滚动越快(单位像素)
延时:scrolldelay="毫秒数" 滚动字幕停顿时间
背景颜色:bgcolor="滚动字幕背景颜色"
范围:height width
鼠标滑过:onmouseout="this.start()"  onmouseover="this.stop()" -->
<!-- B.<embed>多媒体元素插入 -->
<embed src=""  autostart="true/false" loop="true/false" />
<!-- C.<bgsound>背景音乐(只限IE) -->
<bgsound src="" loop="n/infinate" start="" />
-------------本文结束感谢您的阅读-------------
0%