目录
html基础
基础语法
html概念
HTML(Hypertext Markup Language)即超文本标记语言。
了解html发展史
- 93年(IETF)发布HTML1.0
- 95年(W3C)发布HTML2.0
- 96年(W3C)发布HTML3.0
- 97年(W3C)发布HTML4.0
- 99年(W3C)发布HTML4.0.1
- 00年(W3C)发布XHTML1.0
- 01年(W3C)发布XHTML1.1
- 04年(WHATWG)发布HTML5草案
- 08年(合并)HTML5正式版
- 14年HTML5定稿
HTML特点
- HTML不需要编译,直接由浏览器执行
- HTML是一个文本文件
- HTML文件必须使用html或htm为文件名后缀
- HTML大小写不敏感,HTML与html一样
开发工具
记事本、Word、DreamWeaver、Subline等。
基础语法
HTML基本结构
写在head标签内的所有内容在网页中不会显示出来,浏览器能看到的内容全都写在body标签内。
注释
<!-- 注释内容 -->
文档段落
DOCTYPE用于声明文档类型,<!DOCTYPE>声明必须放在HTML文档第一行,不是HTML标签。
网页编码设置
问题:当网页显示出现乱码时
解决:在<head></head>标签之间添加
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
这句话声明了网页使用什么语言和编码形式。
其中,http-equiv 声明文档类型,content 声明编码形式,国内常用编码是 utf-8、gb2312、gbk 等编码。
utf-8 支持简体中文、繁体中文、日文、韩文等;gb2312支持简体中文。
HTML 4.01 与 HTML5之间的差异
使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式
- HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5
<meta charset="UTF-8">
文字和段落标签
- 标题标签:<h1></h1>~<h6></h6>
- 段落标签:<p></p>,段落与段落之间会有一段空白以区分不同段落。
- 预格式标签:<pre></pre>,在此标签内输入的文本是什么形式的,在网页中就以什么形式展现。
align对齐属性值
- left:左对齐内容
- right:右对齐内容
- center:居中对齐内容
- justify:对行进行伸展,这样每行都可以有相等的长度。
修饰标签和特殊符号
- 斜体:<i>、<em>
- 加粗:<b>、<strong>
- 小于号或显示标记"<":<
- 大于号或显示标记">":>
- 已注册"®":®
- 版权"©":©
- 商标"™":™
- 不断行的空白:
列表标签
无序列表<ul>
其中列表项用<li>表示。
<ul>
<li>列表项</li>
<li>列表项</li>
……
</ul>
<ul>标签的type属性值
- disc:圆点
- square:正方形
- circle:空心圆
有序列表<ol>
列表项有先后顺序,其中列表项用<li>表示。
<ol>
<li>列表项</li>
<li>列表项</li>
……
</ol>
<ol>标签的type属性值
- 1:数字1、2
- a:小写字母a、b
- A:大写字母A、B
- i:小写罗马数字i、ii、iii
- I:大写罗马数字I、II、III
定义列表<dl>
应用场景:带摘要、新闻缩略图的列表
<dl>
<dt>定义项目</dt>
<dd>项目描述</dd>
<!-- dt与dd标签成对出现,并且是并列关系,不能嵌套 -->
</dl>
调试工具
快捷键F12
经验
开发中,ul和ol的编号去掉,使用图片代替。
图像和超链接
图像标签<img>
src属性是必填的,指明图片存放的路径。
alt属性用于网速太慢、src属性中的错误、浏览器禁用图像导致用户无法查看图像时,可以代替图像显示在浏览器中。
<img>标签引入图片时路径中的斜杠/和反斜杠\是一样的。
html路径分为相对路径和绝对路径,绝对路径要从盘符开始写起,相对路径是图片相对于网页的路径。
- 若html文件与图片文件位于同级文件夹,则相对路径为
<img src="pic.jpg" />
- 若图片位于html文件的上一级,则相对路径为
<img src="../pic.jpg" />
注意:../代表一个上一级,如上一级的上一级则表示为../../
- 若图片位于html文件的下一级,则相对路径为
<img src="文件夹名/pic.jpg" />
注意:创建的文件夹建议都用英文
超链接标签<a>
<a href="" >内容</a> <!-- 当链接为空时,点击超链接会刷新 -->
站内链接即本网站内的页面跳转,一般使用相对路径。
站外链接即从当前网站跳转到另一个网站中,一般使用绝对路径。
属性
- href—链接地址(href="#"为空链接)
- target—链接的目标窗口,有_self(在当前窗口打开)、_blank(创建新窗口,打开新页面)、_top、_parent
- title—链接提示文字,额外信息
- name—链接命名
锚链接
通过name属性定义锚的名称,实现点击链接直接定位到某个位置的效果。
<!-- 同一页面 -->
<a href="#锚名1" >目录1</a>
<a href="#锚名2" >目录2</a>
<a href="..." name="锚名1" >内容</a>
xxxxx
<a href="..." name="锚名2" >内容</a>
xxxxx
<!-- 不同页面 -->
网页1:<a href="网页名称#锚名" >...</a>
网页2:<a name="锚名" >...</a>
xxxxx
总结:定义锚的位置和锚名,设置寻找锚的链接。
邮箱链接
<a href="mailto:邮箱地址">...</a>
文件下载
<a href="下载文件的地址">...</a>
注意:下载文件要压缩;直接写下载的文件名,会打开文件。
html表格
基础表格
- <table>:表格
- <tr>:行
- <td>:单元格
- <th>:表头单元格(内容居中,加粗显示)
- <caption>:表格标题(居中显示)
以下是一个3×3的表格
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头标题1</th>
<th>表头标题2</th>
<th>表头标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tfoot>
</table>
表格操作
添加、删除第N列时,要把每行的第N个单元格删掉。
带结构的表格
表格划分三部分:表头、主题、脚注
- thead:表格的头(放表格的头),会在最开始显示
- tbody:表格的主体(放数据本体),会在中间显示
- tfoot:表格的脚(放表格的脚注),会在最后一行显示
使用带结构的表格目的是当网速太慢时,网页可以按照表格划分来逐部分加载。但这三个标签不会影响表格的展示。
表格属性
跨列(行)属性colspan(rowspan)
<td colspan="2">xxx</td> <!-- 表示将包括此单元格在内的2个单元格按跨列形式合并起来。 -->
<td rowspan="2">xxx</td> <!-- 表示将包括此单元格在内的2个单元格按跨行形式合并起来。 -->
表格嵌套
嵌套的表格必须放在<td>标签内
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头标题1</th>
<th>表头标题2</th>
<th>表头标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>
<!-- 表格嵌套 -->
<table>
<tr>
<td>xx</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tfoot>
</table>
表格布局
尽量少用表格嵌套、尽量少用跨行跨列,否则会增加代码维护的成本。
表单基础结构
form元素是块级元素,其前后会产生析行。
表单应用场景
表单元素
表单元素有:文本域、单选框、复选框、按钮、列表……
注意:表单本身不可见,所有表单内容要写在<form>标签内
input标签
点击submit类型的按钮,表单内容提交至服务器。
name属性用于表单元素命名,数据处理时,通过name名称来区分。
文本域和文件域
placeholder属性用来提示内容标签。
size属性设置文本域的宽度为多少个英文字符。
maxlength指用户输入得最大字符长度。
文件域file可以访问本机文件,并上传到服务器。
单选框和复选框
单选框radio用checked来设置默认选中值。
一组单选框若只能选择其中一个就要给它们起相同的name。
提交表单时上传的是<input>标签中value属性的值。
<!-- 单选框 -->
<input type="radio" name="sexual" value="1" checked />男
<input type="radio" name="sexual" value="2" />女
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="sing"/>唱歌
<input type="checkbox" name="hobby" value="read"/>阅读
图像域
图像域不单单是一个图片,而且和属性为submit的botton一样,有提交表单的功能。
<input type="image" name="xxx" src="..." />
隐藏域
用于有些信息不想让用户看到,又需要传递数据的情况。
<input type="hidden" name="xxx" value="xxx" />
按钮
<button>的三种类型
- button(多配合js使用)
- submit(点击提交表单)
- reset(清空表单恢复初始设置)
下拉菜单和列表标签
优点是节约空间。
<select> <!-- 下拉菜单开始 -->
<option value="1"> 列表项1 </option>
<option value="2"> 列表项2 </option>
<option value="3"> 列表项3 </option>
</select>
<select>标签属性
- name(设置下拉菜单和列表的名称)
- multiple(设置可选择多个选项)
- size(设置列表中可见选项的数目,设置了就是列表,不设置则是下拉菜单)
<option>标签属性
- selected(设置选项初始选中状态)
- value(定义送往服务器的选项值)
分组下拉菜单和列表标签
<!-- -->
<select name="xxx">
<optgroup label="group1">
<option value="..." selected>选项</option>
<option value="...">选项</option>
</optgroup>
<optgroup label="group2">
<option value="...">选项</option>
<option value="...">选项</option>
</optgroup>
</select>
多行文本域
<textarea>标签属性
- rows(设置文本内可见行数)
- cols(设置文本内可见列数)
表单页面调整
表单页面调整
表单提示文字一般右对齐,表单元素一般左对齐。
表单属性
<form action="" method="" name=""... >
表单元素
</form>
method属性的默认值是get,get会把表单信息暴露在url中,而post不会,它起到一定的保密性,因此用form表单提交密码之类的信息应该用post方法。
target属性的默认值是_self。
搭建网页结构
div和span标签
<div>标签是一个区块容器,其中可以包含段落、表格、图片等各种html元素。
<span>标签没有任何意义,只是为了应用样式。
<div>标签是块级元素,<span>标签是行内元素。
块级元素需要独占一行,每个块级元素都需要换行,一般用于搭建网页结构、布局。
行内元素在一行进行展示,不需要换行,一般用于样式的展示。
标签嵌套
标签嵌套规则
- 块级元素可包含行内元素和某些块级元素。
- 行内元素不能包含块级元素,只能包含其他行内元素。
- 块级元素不能放在<p>标签内,<p>标签是用来显示文字段落的。如果将块级元素放到<p>标签内,在浏览器中会自动将<p>标签内的块状元素脱离出来,改正这个错误。
- 有些特殊的块级元素只能包含行内元素,不能再包含块级元素。比如<h1>~<h6>、<p>、<dt>
- 块级元素和块级元素并列,行内元素和行内元素并列。
<div><h1></h1><p></p></div> <!-- 块级元素并列 正确 -->
<div><span></span><a href=""></a></div> <!-- 行内元素并列 正确 -->
<div><h1></h1><span></span></div> <!-- 行内元素和块级元素并列 错误 但也能正常显示 -->