一、 网页基本结构标签
-
<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(也称万国码，基本包含全世界所有国家需要用到的字符，外国人访问中国网站不会出现乱码)
三、常用标签
-
<h1></h1>标题标签 双标签<h1>~<h6>六个等级网页标题 特点:1.加了标题的字会加粗，字号依次变大 2.一个标题独占一行 -
<p></p>段落标签 双标签特点:1.文本在一个段落中会根据浏览器的大小自动换行 2.段落与段落之间有空隙 -
<br/>换行标签 单标签 特点:简单的开始新的一行，跟段落一样，段落之间会插入一些距离 -
<strong></strong>加粗字体 或者， 推荐使用前者 语义更强烈 -
<em></em>倾斜字体 或者， 推荐用前者 语义更强烈 -
<del></del>删除线 或者,推荐用前者 语义更强烈 -
<ins></ins>下划线 或者,推荐用前者 语义更强烈 -
<div></div>无语义，用来布局 一行只能放一个div。大盒子 -
<span></span>无语义，用来布局 ，一行可以放多个。小盒子 -
<img>图像标签 单标签img标签属性
| 属性 | 属性值 | |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 替换文本 | 图像显示不出来的时候用文字替换 |
| title | 提示文本 | 鼠标放到图片上，提示的文字 |
| width | 像素 | |
| height | 像素 | 给图像设置高度 |
| border | 像素 | 边框粗细，写在css里 |
同一级路径<img src="baidu.gif">一级路径 <img src ="images/img.jpg"/>上一级路径1<img src="../img.jpg"> ../跳出文件夹跟图片在同一目录下,如果需要跳出文件夹那就是../../
绝对路径:
- 根据盘符决定（只有在自己的电脑上才能看见 ，几乎不用）
- 网络上的绝对路径http://地址是固定的
<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标签里）:
| 属性 | 属性值 | |
|---|---|---|
| align | left/center/right | 表格左对齐/居中/右对齐> |
| border | 1/" " | 1为有1px粗细的边框，“ ”为无边框，是默认值 |
| cellpadding | 像素 | 规定单元格边沿与其内容之间的空白，默认1px |
| cellspacing | 像素 | ，规定单元格之间的空白，默认2px |
| width height | 像素 | 规定表格宽度和高度 |
合并单元格步骤：
- 确定跨行还是跨列
- 跨行目标单元格是上面的，跨列目标单元格是左边的，在目标单元格处写上合并方式= 合并的单元格数量。例
<td colspan=“2”>跨列<td rowspan=“2”>跨行 - 删除多余单元格
五、列表 （用来布局的）
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>个数没有限制
应用：公司网站底部
六、表单
翻笔记本
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
