本文是HTML学习笔记，介绍了HTML的基本概念、网页结构、浏览器识别的图片格式，以及常用的HTML标签，包括链接、图片、列表、表格和表单元素的使用方法，适合初学者入门。
HTML的相关知识
术语
- web 互联网
- w3c 万维网联盟，非盈利性的组织 w3.org 为互联网提供各种标准。
- XML 可扩展的标记语言：extension markup language，用于定义文档结构的。
什么是HTML
Hyper Text Markuo Language 超文本标记语言，定义网页中有什么。
HTML是w3c组织定义的语言标准：HTML是用于描述页面结构的语言。
结构：有什么东西，该东西表示什么含义？
基本网页结构
<!DOCTYPE html>
<html lang="en">
<!-- lang="en" 和下面的搜索关键字及描述是告诉搜索引擎爬虫我们的网站是关于什么内容的 -->
<head>
<!-- 字符集 万国码 -->
<meta charset="utf-8">
<!-- 把 content 属性关联到 HTTP 头部。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>网页的标题</title>
<!-- 搜索关键字及描述 -->
<meta name="description" content="这是一个你穿了就不想脱的衣服">
<meta name="keywords" content="服装">
<!-- 网页小图标 -->
<link href="favicon.ico" rel="shortcut icon">
<!-- 引入样式表 -->
<link href="css/index.css" rel="stylesheet" type="text/css">
<!-- 所有a标签都在新窗口打开 -->
<base target="_blank" />
</head>
<body>
</body>
<!-- 引入js -->
<script type="text/javascript" src="js/index.js"></script>
</html>
主流浏览器及内核
| 浏览器 | 内核 |
|---|---|
| IE | Trident |
| Firefox | Gecko |
| Google chrome | webkit/blink |
| Safari | webkit |
| Opera | presto |
网页中识别的图片格式
jpg、png、gif、webp
- webp 图片格式（大小变小，清晰度不变）
- 用js来判断是否支持.webp格式，支持就加载，不支持加载 .png、 .jpg
特殊字符设置
| 字符 | 设置 |
|---|---|
| < | < (less than) |
| > | > (great than) |
| 空格 | |
| & | & |
| © | © |
| " | " |
注释
快捷键Ctrl+/
- html 文档中的注释为：
<!-- --> - css文档中的注释为：
/* */ - js文档中的注释为：
//
常用标签
双标签
<div></div>、<span></span>容器（绑定化操作）<p></p>段落<h1></h1>—<h6></h6>，标题文字设置h1一般用于 logo、大标题， 一个页面只能有一个h1h2一般用于 副标题h3一般用于 页面中板块的标题h4一般用于 板块里的标题h5-h6一般少用 板块套板块
<a></a>超链接<b></b>、<strong></strong>加粗<u></u>、<ins></ins>下划线<i></i>、<em></em>倾斜<del></del>删除线<sup>2</sup>上标<sub>2</sub>下标
单标签
<img>图片<br>换行<meta>提供有关页面的元信息<hr />水平线，默认空心线，属性：noshade="noshade"实心线width="xx"绝对长度，不随窗口大小改变size="像素/百分比"值越大线越粗
注意：空格、回车在html中代表文本分隔符；
行级元素（display:inline;）
span、strong、em、a、del
特点：
- 内容决定元素所占位置
- 不可以通过css改变宽高
块级元素（display:block;）
div、p、ul、li、ol、form、address
特点：
- 独占一行
- 可以通过css改变宽高
行级块元素（display: inline-block;）
img
特点：
- 内容决定大小
- 可以改变宽高
元素嵌套规则
- 行内元素不能单独存在，必须嵌套在块级元素内；
- 行内元素不能嵌套块级元素；
- h1-h6、p、dt 里不能嵌套块级元素（如果p元素里嵌套块会被分割成两个p元素）
- div、li 可嵌套块级元素
注意：凡是带有inline的元素，都有文字特效（换行、空格会有被当成空格）；例：
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
解决办法：
- 把空格去掉；
- 给父级设置
font-size:0;子级再设font-size:XXpx;display：block; - 把图片设置为：
display：block;
链接(anchor 锚)
- link： 设置链接默认样式
- vlink：设置点击后链接样式
- hlink：设置鼠标悬停时链接样式
- alink：设置点击时链接样式
文字链接去掉下划线的方法：
text-decoration:none;
a标签中可以放很多东西，比如图片、文字、span等等；
图片链接
有蓝色边框（默认）
<a href="javascript:void(0)"><img src="1.jpg" /></a>
/*去掉蓝色边框的方法*/
img {
border: 0;
}
文字链接
<a href="#" target="new">文字</a>
外部链接
<a href="http://www.baidu.com" target="_blank">外部链接</a>
书签链接(锚点)
<div id="demo1"></div>
<div id="demo2"></div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
<a name="n1">锚点</a>
<a href="#n1">书签链接</a>
<!-- 其他页面跳转到锚点-->
<a href="a.html#n1">书签链接</a>
打电话
<a href="tel:138*******">给谁谁打电话</a>
发邮件
如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
下面是一个完整的实例:
<a href="mailto:***@imooc.com;***@qq.com?cc=***@qq.com;***@qq.com&bcc=***@qq.com&subject=观了不起的盖茨比有感&body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>
协议限定符
<a href="javascript:while(1){alert('让你手欠')}">你点我试试！</a>
图像的应用
- 插入图片：
<img src="路径" /> - img下的属性：
alt=""属性占位符，图片加载失败时显示；title=""图片提示符，鼠标移入时显示；src=""图片地址- 网上url
- 本地的相对路径
- 本地的绝对路径
- border 边框
- align 位置
- left 图在左，文字在右
- right 图在右，文字在左
- middle 文字在图片的居中对齐
- top 文字在图片的顶端对齐
- bottom 文字在图片的底端对齐（默认）
- hspace 图像距左右物件的距离
- vspace 图像距上下物件的距离
- 图片的鼠标移上或移过事件：
<p><img src="4.jpg" onmouseover="src='3.jpg'" onmouseout="src='5.jpg'" /></p>
路径知识
./代表当前目录、../代表上级目录
- 绝对路径：如：
"file://F:/taobao/images/1.jpg" - 相对路径：
- 图片和当前文件在同一级：
"./1.jpg" - 图片在当前文件上一级：
"./../1.jpg" - 图片在当前文件下一级：
"./images/1.jpg" - 图片在当前文件的同级不同目录下：
"./../images/1.jpg"
- 图片和当前文件在同一级：
表示当前目录的
./可以省略不写
无序列表
类型：type在ul和li中都可以写
type="disc"默认实心圆type="circle"虚心圆type="square"实心方块
去掉列表前的项目符号：
list-style:none;
<ul type="disc">
<li></li>
<li type="circle"></li>
<li type="square"></li>
</ul>
有序列表
type=""属性：- “1” 、数字
- “A” 、大写英文字母
- “a”、小写英文字母
- “Ⅰ”、大写的罗马数字
- “ⅰ”、小写的罗马数字
start="X"从X开始加序号reversed="reversed"倒序
<ol start="4" type="A">
<li>哈</li>
<li>呵</li>
<li>桃子</li>
</ol>
列表嵌套
<ol>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
</ul>
</li>
<li>第二章</li>
</ol>
定义列表
<!-- 表单的开始 -->
<dl>
<dt>表示一个项目标题</dt>
<dd>表示一个项目下更详细的内容</dd>
<dd>表示一个项目下更详细的内容</dd>
<dt>表示一个项目标题</dt>
<dd>表示一个项目下更详细的内容</dd>
<dd>表示一个项目下更详细的内容</dd>
</dl>
表格
<table>
<!-- tr代表行、td代表单元格，一行里有几个td就表示有几列 -->
<tr>
<th>列1，在th中设置标题栏，加粗</th>
<th>列2，设置标题栏，加粗</th>
</tr>
<tr>
<td>列1，在td中写内容，左对齐</td>
<td>列2，内容，左对齐</td>
</tr>
<tr>
<td>列1，内容，左对齐</td>
<td>列2，内容，左对齐</td>
</tr>
</table>
<table>属性border="像素"表格外边线collapse="collapse"边框变为细线border-color="#888"边框颜色cellspacing="像素/百分比"存储格框线宽度celpadding="像素/百分比"数据与框线距离width="像素/百分比"表格宽度height="像素/百分比"表格高度align="left"、"center"、"right"对齐方式bgcolor="英文/十六进制颜色数"背景颜色background="URL"背景图片table-layout:fixed;定义列宽的算法，fixed为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度
<td>、<tr>、<th>属性：width、height、bgcolor、align(水平)、valign(垂直)、top、middle、bottom、nowrap(不在单元格中换行)- 拆分与合并单元格
colspan="数字"向两边扩展栏位rowspan="数字"向下扩展栏位
table{
border-collapse: collapse;/*边框变为细线*/
border-color: #888;/*边框颜色*/
table-layout:fixed;/*定义列宽的算法，fixed为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度*/
}
form表单
<fieldset> </fieldset>边框
<form>
<fieldset>
<input type="text" name="">
</fieldset>
</form>
<legend></legend>表单标题
<form>
<fieldset>
<legend>表单标题</legend>
<input type="text" name="">
</fieldset>
</form>
<input >用户名，手机号，邮箱，验证码- type:
text：文本域password：密码域hidden： 隐藏域radio：单选checkbox：多选button：一般按钮image： 图像按钮file：文件，将文件、图等上传到指定位置submit：提交（默认文字）；value="登录"可以改变默认的文字reset：重置（默认文字）；value="xx"可以改变默认的文字
- type:
value="请输入您的手机/邮箱"栏位默认值size="50"栏位显示多少字符长度maxlength栏位输入的最大值readonly="readonly"只能看不能修改name="n1"名字标识，写了name才能把数据传出去
单选
用相同的名字来分组：
<p>
<label>选择性别：</label>
<input type="radio" id="maleInput" name="sex" value="male" checked="checked">
<label for="maleInput">男</label>
<input type="radio" id="femaleInput" name="sex" value="female">
<label for="femaleInput">女</label>
</p>
搜索框的例子：
<input type="text" name="username" value="请输入用户名" style="color:#999" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
多选
<p>
<label>兴趣爱好：</label>
<input type="checkbox" id="sing" name="interest" value="sing">
<label for="sing">唱歌</label>
<input type="checkbox" id="dance" name="interest" value="dance">
<label for="dance">跳舞</label>
<input type="checkbox" id="draw" name="interest" value="draw">
<label for="draw">画画</label>
</p>
图像按钮
<p>
<label> 图像按钮:</label>
<input type="image" src="images/border.png"/>
</p>
上传文件
将文件、图片等资源上传到指定位置
<p>
<label> 文件上传:</label>
<input type="file" name="file">
</p>
文本域
文字块（多行显示文本）textarea
rows="10"行数 --> 高cols="40"列数 --> 宽
<p>
<label> 个人介绍:</label>
<textarea rows="10" cols="40">
默认文字
</textarea>
</p>
下拉菜单
<p>
<label>选择居住地：</label>
<select name="selectArea">
<option selected="selected">海淀区</option>
<option>昌平区</option>
<option>顺义区</option>
<option>朝阳区</option>
<option>房山区</option>
</select>
</p>
form提交
<form method="传送方式" action="服务器文件">
method： 数据传送的方式（get/post）action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
<form method="post" action="save.php">
<label for="userName">用户名:</label>
<input type="text" id="userName" name="username" />
<label for="passWord">密码:</label>
<input type="password" id="passWord" name="pass" />
</form>
注意：
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上！）。
2、method:post/get的区别：
- Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
如下形式：http://www.imooc.com/test.asp?name=lilian&password=12345678- Get是不安全的，因为在传输过程，数据被存放在请求的URL地址中，这样就可能会有一些隐私的信息被第三方看到。
- Get方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，根据微软方面的说法，微软对用Request.Form()可接收的最大数据有限制，IIS4中为 80KB 字节，IIS5 中为 100KB 字节。
综上所述，请尽量用 Post 方法。
综合
<form>
<fieldset>
<legend>表单标题</legend>
<p>
<label>姓名：</label>
<input type="text" name="intName">
</p>
<p>
<label>选择居住地：</label>
<select name="selectArea">
<option selected="selected">海淀区</option>
<option>昌平区</option>
<option>顺义区</option>
<option>朝阳区</option>
<option>房山区</option>
</select>
</p>
<p>
<label>选择性别：</label>
<input type="radio" id="maleInput" name="sex" value="male" checked="checked">
<label for="maleInput">男</label>
<input type="radio" id="femaleInput" name="sex" value="female">
<label for="femaleInput">女</label>
</p>
<p>
<label>兴趣爱好：</label>
<input type="checkbox" id="sing" name="interest" value="sing">
<label for="sing">唱歌</label>
<input type="checkbox" id="dance" name="interest" value="dance">
<label for="dance">跳舞</label>
<input type="checkbox" id="draw" name="interest" value="draw">
<label for="draw">画画</label>
</p>
<p>
<label> 个人介绍:</label>
<textarea rows="10" cols="40">
默认文字
</textarea>
</p>
<p>
<label> 附件上传:</label>
<input type="file" name="file">
</p>
<p>
<input type="submit" name="submit">
<input type="reset" name="reset">
<input type="button" name="returnHome" value="返回首页">
</p>
</fieldset>
</form>
活动文字
<marquee> </marquee>活动文字，从右侧进来，向左移动（默认）
<marquee>
活动文字，从右侧进来，向左移动（默认）
</marquee>
directionleft;向左移动；right;向右移动；up;向上移动；down;向下移动；
<marquee direction="left">
效果与Behavior="scroll"一样，从右到左循环移动
</marquee>
<marquee Behavior="slide" direction="left">
效果与Behavior="slide"一样，从右到左,到头停止
</marquee>
<marquee Behavior="slide" direction="right">
从左到右,到头停止
</marquee>
<marquee Behavior="slide" direction="up">
从下到上,到头停止
</marquee>
bgcolor="英文/十六进制颜色数"背景颜色height="像素/百分比"高度width="像素/百分比"宽度scrollamount="数字"播放的速度（默认“6”）vspace="像素"上下两侧距离hspace="像素"左右两侧距离
<marquee Behavior="slide" direction="left" scrollamount="16" >
从下到上,到头停止
</marquee>
插入Flash
<embed src="flash.swf"></embed>
插入音乐默认生成播放器，要想隐藏默认播放器，要设置：hidden="true"
<embed src="1.mp3" width="100px" height="100px" hidden="true"></embed>
框架<frameset></frameset>
<frameset></frameset>把一个HTML文件划分成多个HTML文件:
noresize="noresize" 不可移动分割线
<frameset rows="150,*,100">
<frame src="a.html" name="top" noresize="noresize"></frame>
<frameset rows="150,*">
<frame src="b.html" name="left" noresize="noresize"></frame>
<frame src="c.html" name="right" noresize="noresize"></frame>
</frameset>
<frame src="d.html" name="bottom"></frame>
</frameset>
b.html
<ul>
<li><a href="#" target="right">1</a></li>
<li><a href="#" target="right">2</a></li>
<!-- 在c.html所在的区域显示新的链接-->
</ul>
扫一扫
5354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
