html
一、网页基本信息
-
html中 注释快捷键ctrl+/ <！-- 内容 -->
-
DOCTYPE ：告诉浏览器我们要使用什么规范
-
< head > 表示网页头部 < body >表示网页主体 < title > 网页标题 标签选项卡 < meta >描述性标签 用来描述网站信息 平时搜索关键字能搜找该网页，一般用来做SEO（搜索引擎优化）
二、网页基本标签
1.标题标签
< h1 > == < h6 > 表示一级标题~六级标题
2.段落标签
< p>
3.换行标签
< br/>
4.水平线标签
< hr/ >
5.字体样式标签
-
粗体 < strong >
-
斜体 < em >
-
删除线 < del >
-
下划线 < ins >
6.特殊符号
（用&开头，分号结尾）
-
空格 & nbsp ;
-
大于号 & gt ； 小于号 & lt ；
-
版权符号 & copy ；
7.图像标签
< img src="path" alt="图像加载失败" title="图1" width=... height=....>前两项为必填
src: 图像路径，分绝对路径、相对路径，可以直接找图片的网络路径
alt：图像如果加载失败，会返回这个,用括号中的文字来替换图像
title:鼠标悬停图片时，会显示的文字
8.超链接标签
-
文本超链接
< a herf="https://www.baidu.com" target="">百度一下< /a >
herf：跳转的链接
target：打开方式,新窗口还是当前窗口，_blank新窗口 _self当前窗口打开
< a>中间可填 链接的文本 < /a>
头两项是必填项
-
图像超链接
< a>中间也可嵌套img标签 实现图片链接< /a>
< a href="https://www.baidu.com" target=""> < img src="图片路径" alt="加载失败"> < /a >
-
空链接 就是还没想好跳转到那 用#代替href
< a href="#" target="">跳转 < /a >
-
锚链接
需要想要跳转的位置标签定义一个标记，然后在链接标签中href=”# 名字“来实现
<h6 id="top"> </h6>
<a href="#top">回到顶部</a> -
下载链接
< a href="XXX.zip" target="_self"> 点我下载文件 < /a >
-
邮件链接
< a href ="mailto:992349008@qq.com">点击联系我< /a>
-
qq链接
< a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">< img border="0" src="http://wpa.qq.com/pa?p=2:992349008:53" alt="请联系我" title="请联系我"/>< /a>
qq推广 复制代码即可
三、综合练习
四、功能标签
1.行内元素
一行内可以容纳多个行内元素。例如: span,a,strong....
2.块元素
一个块元素独占一行。例如：div,p,h....
3.列表标签
ul、ol 中只能嵌套li，但是li中可以嵌套别的标签
-
有序列表
<ol>
<li>第一行</li>
<li>第二行</li>
</ol> -
无序列表
<ul>
<li>第一行</li>
<li>第二行</li>
</ul> -
自定义列表
一般用于公司官网底部
<dl>
<dt>列表名称</dt>
<dd>列表选项</dd>
<dd>列表选项</dd>
</dl>
4.表格标签
<table border="1px">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
< table>: 表名以下是表格
< tr >:表格的行标签,一行一个tr
< td >:表格的列标签,包裹在行标签中
< thead >:表头标签,一定要包含tr使用
< tbody >:除了表头以外,其他标签在tbody中
以下是属性:
border:边框,默认是无边框
align:表格对齐方式,left,right,center
cellpadding:内边距,字与边框之间的距离,默认为1
cellspacing:外边距,单元格之间的距离,默认为2
合并单元格
跨行合并(列合并):rowspan="合并的数",在最上侧的单元格写合并代码
跨列合并(行合并):colspan="合并的数",在最左侧的单元格写合并代码
记得删除多余的单元格
<div>表格练习
<table border="1" cellspacing="0" cellpadding="3">
<thead>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>家庭地址</th>
</thead>
<tbody>
<tr>
<td>01</td>
<td>张三 </td>
<td>18</td>
<td>河北省承德市</td>
</tr>
<tr>
<td>02</td>
<td>李四 </td>
<td>18</td>
<td>河北省承德市</td>
</tr>
<tr>
<td>03</td>
<td>王五 </td>
<td>18</td>
<td>河北省承德市</td>
</tr>
</tbody>
</div>
<table border="1" cellspacing="0" cellpadding="3">
<thead>
<td colspan="4">个人信息</td>
<!-- <td>姓名</td>
<td>年龄</td>
<td>家庭地址</td> -->
</thead>
<tbody>
<tr>
<td rowspan="3">学生列表</td>
<td>张三 </td>
<td>18</td>
<td>河北省承德市</td>
</tr