[学习笔记]HTML基础

来源：互联网发布：mysql where 优先级编辑：程序博客网时间：2024/05/16 08:07

HTML概述

1. 什么是HTML

HTML：HyperText Markup Language超文本标记语言，是一种描述性的标记语言(不是编程语言)，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。它是由W3C组织所制定的一套专门用于显示网页的规范，不负责处理业务逻辑，只用于显示。

W3C：万维网联盟（World Wide Web Consortium），其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。

HTTP：Hyper Text Transfer Protocol，超文本传输协议。

2. HTML的发展历程

HTML2.0（1995）
HTML3.2（1997）
HTML4.0（1997）
HTML4.01、XHTML1.0（2000）
XHTML1.1（2001）
HTML5（2014）

目前比较常用的为HTML4.01或XHTML1.0，但是长远看HTML5将会大放异彩。

3. 开发工具

编辑器：如notepad++，editplus，sublime text等
IDE：如DreamWeaver（DW）

4. 编写规范

文件扩展名均为.htm或.html。
标签尽量使用小写字母，大多数都有开始和结束标签，成对使用。
文档主要结构以<html>开始，以</html>结束。
未来的HTML标准不允许没有结束标签，所以对于没有主体内容的标签，在末尾添加/表示结束
标签的属性只能写在开始标签内，属性值需要用""包围。
标签名和<间不能有空格。

HTML标签

1. 排版标签

注释标记
段落标签
<p align="center">段落内容</p>
属性：align（left、center、right）
换行标签
<br />
水平线标签
<hr align="center" size="2" width="70%" noshade />
属性：
align（left、center、right）
size：宽度
width：长度
noshade：去除阴影效果。
预格式化标签
<pre></pre>：把已经分好段落的文字预格式化
层标签（换行）
<div></div>
块标签（不换行）
<span></span>
居中标签
<center></center>：相对外层元素居中。

2. 字体标签

字体
<font color="red" size="12pt" face="宋体">文字</font>
属性：
color：颜色，可以使十六进制数，可以是RGB颜色，可以使英文单词。
size：大小，单位可以使像素px，磅数pt，或者无单位1~7。
face：字体
标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
加粗
<b>加粗内容</b>
<strong>强调内容</strong>
特殊字符
&lt：小于号
&gt：大于号
 ：空格
©：版权号
™：商标

3. 图片标签<img />

<img src="girl.gif" width="100" height="112" border="0" alt="beautiful girl" />
属性：
src：图像的路径,支持相对路径，绝对路径和网络路径
width：宽度
height：高度
border：边框
usemap：引用热点区域
alt：提示信息

图片的热点区域的引用

<img src="resource/2.jpg" width="100%" height="200px" border="1" alt="2014北京车展" useMap="#Map"/>
<map name="Map">
<area shape="circle" coords="322,108,50" href="resource/4.gif">
</map>

4. 清单标签

有序列表<ol></ol>
属性：
start：开始序号，值只能是数字。
type：序号的类型，支持英文字母，数字和罗马文。
无序列表<ul></ul>
属性：
type：序号的类型（disc，circle，square）
有序或无序列表的项<li></li>
自定义清单
dl：自定义清单
dt：自定义清单的标题头
dd：自定义数据

5. 超链接标签<a></a>

属性：

href：访问资源的位置（地址），地址也支持相对路径，绝对路径和网络路径，可以是mailto:xxxx@163.com。
target：在何处打开访问的URL。
_blank：打开一个新的窗口
_self：在自身打开
_top：在顶层窗口打开
框架名：在指定的框架中打开
name：给超链接起个名字，设定一个锚点，调用锚点使用href="#锚点的名字"。

示例：

<a name="top"></a>
<a href="1.html">跳转到1.html</a>
<a href="#top">返回顶部</a>

6. 表格标签

表格<table></table>
属性：
border：设置表格边框的大小
bordercolor：设置边框颜色
width：宽度
height：高度
align：设置表格的显示位置（center，left(默认），right）
cellspacing：单元格间距
cellpadding：控制内容与单元格边框的距离
表格行（tr，必须在table内）
属性：
align：设置表格的显示位置（center，left(默认），right）
表格单元格（td，必须在tr内）
属性：
align：设置表格的显示位置（center，left(默认），right）
colsapn：跨列
rowspan：跨行
标题头（th，必须在tr内）
表格标题（caption，必须在table内）

示例

<table border="1" width="300px" height="300px" align="center" cellspacing="5px" cellpadding="5px">
<caption>黑马训练营</caption>
<tr>
<td rowspan="5">安卓55期</td>
<td colspan="4">学生信息表</td>
</tr>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>姓名1</td>
<td>男</td>
<td align="right">18</td>
</tr>
<tr>
<td>2</td>
<td>姓名2</td>
<td>女</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>姓名3</td>
<td>男</td>
<td>23</td>
</tr>
</table>

7. 框架标签

框架集<frameset></frameset>（和body标签只能二选一）
属性：
cols：左右排列
rows：上下排列
cols和rows里面的值可以是像素，也可以是百分比，还可以是*
frameborder：是否显示边框（0、1）
noresize：设置框架不可重置大小，该值既是属性又是值
scrolling：设置是否使用滚动条（yes、no）
框架（frame，必须在frameset内）
属性：
name：指定每个frame窗体的名称,可以通过超链接控制每个窗体的显示内容
noresize：设置框架不可重置大小，该值既是属性又是值
scrolling：设置是否使用滚动条（yes、no）

示例

<frameset rows="20%,*,15%">
<frame src="1.html" name="topFrame" noresize />
<frameset cols="180px,*">
<frame src="2.html" name="toolFrame" scrolling="yes"/>
<frame src="3.html" name="mainFrame" />
</frameset>
<frame src="4.html" name="footFrame" />
</frameset>

内联框架<iframe />
属性：
src：嵌入内容的地址
name：内联框架的名字
width：宽度
height：高度
scrolling：设置是否使用滚动条（yes、no）
可以使用<a />超链接来切换内敛框架中页面显示。

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div><a href="frame1.html" target="pic">男士背包</a></div><br/>
<div><a href="frame2.html" target="pic">女士背包</a></div><br/>
<div><a href="frame3.html" target="pic">儿童背包</a></div><br/>
<hr/>
<div id="area">商品展示
<br/>
<iframe src="frame1.html" name="pic" width="450px" height="450px"></iframe>
</div>
</body>
</html>

8. 表单标签

8.1 表单标签<form></form>

属性：

action：请求到的地址
method：请求的方式（get、post）
get方式提交会显示在地址栏（默认）
post方式提交不会显示在地址栏
get和post提交是把表单输入域中属性的名称和值提交了，所以有名字的输入域，输入域的内容才会被提交。
enctype：请求正文的类型，默认：application/x-www-form-urlencoded

8.2 表单输入域<input />

属性：

type：类型，取值有10种。
name：输入域的名称，表单是否提交仅取决于是否定义了name属性。
value：输入域的值

type：

text：普通文本框
password：密码框
submit：提交按钮，有内置的提交事件
reset：重置按钮，有内置的重置事件
file：文件选择域
image：用于替代提交按钮，src属性是指定图像的位置。
radio：单选按钮，依据name属性来区分组，使用checked属性设置默认
checkbox：多选按钮，依据name属性来区分组，使用checked属性设置默认
button：普通按钮，需要事件的支持
hidden：隐藏域，用户不可见

8.3 下拉列表<select></select>

属性：

size：设置下拉列表显示的项数
multiple：支持多选

下拉列表项<option></option>（子标签）

属性：

selected：下拉列表的默认选择属性

8.4 文本域<textarea></textarea>

属性：

rows：显示的行数
cols：显示的列数

8.5 标注<lable></lable>

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

属性：

for：绑定表单元素

8.5 语义化标签

fieldset：语义化标签，在一个区域内表达一个事情。
legend：语义化内容的描述。

示例

9. 多媒体标签<embed />（HTML5支持）

属性：

src：多媒体内容地址
width，height：宽度和高度

10. 头标签<head></head>

title：指定浏览器的标题。
base：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
meta：可提供有关页面的基本信息
属性：
charset：设置文件编码，一般为"UTF-8"
link：定义文档与外部资源的关系。

0 0