。## 一、 网页基本结构标签
<html></html>
页面中最大的标签 也称为 根标签-<head></head>
文档的头部, 在head标签中必须要设置的标签是title-<title></title>
文档的标题-<body></body>
文档的主体 页面的元素基本都是放到body里的## 二、html框架 -<!DOCTYPE>
文档类型声明标签 ,作用是告诉浏览器使用哪种HTML版本显示网页<!DOCTYPE html>
意思是当前页面采取的是HTML5版本来显示网页的 -<html lang="zh-CN">
中文网页 “en” 英文网页- 通过<meta>
标签的charest属性来规定HTML文档该使用哪种字符编码- charest常用的值有:GB2312(简体中文)、BIG5(繁体中文)、GBK(简体中文和繁体中文)、UTF-8(也称万国码,基本包含全世界所有国家需要用到的字符,外国人访问中国网站不会出现乱码)## 三、常用标签1.<h1></h1>
标题标签 双标签<h1>~<h6>
六个等级网页标题 特点:1.加了标题的字会加粗,字号依次变大 2.一个标题独占一行2.<p></p>
段落标签 双标签特点:1.文本在一个段落中会根据浏览器的大小自动换行 2.段落与段落之间有空隙3.<br/>
换行标签 单标签 特点:简单的开始新的一行,跟段落一样,段落之间会插入一些距离4.<strong></strong>
加粗字体 或者, 推荐使用前者 语义更强烈5.<em></em>
倾斜字体 或者, 推荐用前者 语义更强烈6.<del></del>
删除线 或者,推荐用前者 语义更强烈7.<ins></ins>
下划线 或者,推荐用前者 语义更强烈8.<div></div>
无语义,用来布局 一行只能放一个div。大盒子9.<span></span>
无语义,用来布局 ,一行可以放多个。小盒子10.<img>
图像标签 单标签 img标签属性
相对路径:图片相当于html页面的位置 -属性 属性值 src 图片路径 必须属性 alt 替换文本 图像显示不出来的时候用文字替换 title 提示文本 鼠标放到图片上,提示的文字 width 像素 height 像素 给图像设置高度 border 像素 边框粗细,写在css里 同一级路径<img src="baidu.gif">
-一级路径 <img src ="images/img.jpg"/>
-上一级路径1<img src="../img.jpg"> ../跳出文件夹跟图片在同一目录下,如果需要跳出文件夹那就是../../
绝对路径:- 根据盘符决定(只有在自己的电脑上才能看见 ,几乎不用)- 网络上的绝对路径http://地址是固定的11.<a></a>
超链接标签 双标签
语法格式:属性 属性值 herf url地址 必须属性,当标签应用herf属性时,它就具有了超链接功能 target _self /_blank 前者为当前窗口打开,为默认值。后者为新窗口打开 <a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
加了超链接的文字是蓝色的并且有下划线,鼠标放上去有小手 链接方式: - 外部链接<a href="http://www.qq.com">文本</a>
- 内部链接 网页内部页面之间的相互链接<a href="demo.html">公司简介</a>
- 空链接<a href="#">公司地址</a>
- 下载链接 :地址链接的是文件.exe 或者是 zip等压缩包形式<a href="img.zip">下载文件 </a>
- 网页元素的连接如文本、图像、表格、音频、视频 下面这个是给图像添加了超链接<a href=“http://www.baidu.com”><img src =“img.jpg”/></a>
- 锚点链接:点击链接,可以快速定位到页面中的某个位置 操作方法:在链接文本的href属性中,设置属性名为#名字的形式,如<a href =“#two”>第2集</a>
接着找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id =“two”>第2集介绍</h3>
## 四、表格标签:用来展示数据 ,不是用来布局的<table> <thead> <tr> <th></th> <th> </th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody></table>
- 表头单元格(加粗居中显示): 将第一行的单元格用标签 起强调作用表格属性(注意:这些属性要写在table标签里):
合并单元格步骤:1. 确定跨行还是跨列2. 跨行目标单元格是上面的,跨列目标单元格是左边的,在目标单元格处写上合并方式= 合并的单元格数量。例属性 属性值 align left/center/right 表格左对齐/居中/右对齐> border 1/" " 1为有1px粗细的边框,“ ”为无边框,是默认值 cellpadding 像素 规定单元格边沿与其内容之间的空白,默认1px cellspacing 像素 ,规定单元格之间的空白,默认2px width height 像素 规定表格宽度和高度 <td colspan=“2”>
跨列<td rowspan=“2”>
跨行3. 删除多余单元格## 五、列表 (用来布局的)1、无序列表 (常用 重要!!!)<ul> <li> </li> <li> </li></ul>
注意:ul之间只能当li标签,li里面可以放放任何标签2、有序列表 (不常用)<ol> <li> </li> <li> </li></ol>
注意:和无序列表一样3、自定义列表<dl> <dt>大哥 </dt> <dd>小弟</dd> <dd>小弟 </dd></dl>
注意:< dl></dl>
里面只能包含<dt>
和<dd>
,<dt>
和<dd>
个数没有限制## 六、表单翻笔记本