太累了！计算机又累又卷还没有女朋友！太想抱怨了
目录
常用标签：
·<h1>~<h6>标题
·<p></p>段落
·<br/>换行
·<strong></strong>或<b></b>加粗
·<em></em>或<i></i>倾斜
·<del></del>或<s></s>删除
·<ins></ins>或<u></u>下划线
1.图像标签<img></img>
图像标签的属性：
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图片显示失败或的提示文字 |
| title | 文本 | 提示文本，鼠标放在图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
（1）src属性<img src="图像URL"/>：
src属性是img标签的必选属性，如果不选，img标签也没啥用，src用于指定图像的文件路径，将指定图像显示出来
图片src相对路径:
| 相对路径 | 符号 | 说明 |
| 同一级路径 | 图片文件位于HTML文件同一级 如<img src="mn.jpg"/> | |
| 下一路径 | / | 图片文件位于HTML文件下一级 如<img src="images/mn.jpg"/> |
| 上一级 | ../ | 图片文件位于HTML文件上一级 如<img src="../mn.jpg"> |
绝对路径：相对路径是正斜杆，而绝对路径是反斜杆
例如：<img src="C:\user\mn.jpg"/>
例如: 图片我放在了工程目录下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>大美女</h1>
<img src="mn.jpg">
</body>
</html>运行后：
写累了看看美女！！！！！！！！
（2）alt属性<img src="图像URL" alt="替换的文字">
alt属性的作用是当图像无法显示时跳出的提示文字
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>大美女</h1>
<img src="m.jpg" alt="看什么美女！代码打完了吗？">
</body>
</html>运行后：
（3）title属性<img src="URL" title="请关注小马哥吧！">
title属性用于设置当鼠标悬停于图片上时显示的文字
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>大美女</h1>
<img src="mn.jpg" alt="看什么美女！代码打完了吗？" title="请关注小马哥吧">
</body>
</html>运行效果：
2.连接标签<a></a>
基本语法：
<a href="跳转目标" target="目标窗口弹出的方式">文本或图像</a>（1）href 用于指定链接指向页面的url
（2）target 指定页面的打开方式，取值有_self,_blank,_parent,_top
·_self:默认值，意为在原窗口打开
·_blank:在新窗口打开
·_parent:在父框架打开
·_top:在整窗口打开
（3）链接方式：
外链接：链接到项目工程外
内链接：链接到项目工程内
空链接：<a href="#">空</a>
下载链接：
<!-- 下载链接 -->
<a href="人工智能第一次作业.zip">下载zip压缩包文件</a>
网页元素链接
点击图片，跳转到百度
<!-- 网页元素的链接 -->
<a href="http://www.baidu.com"><img src="hhh.jpg" alt="刘雨昕"></a>
3.锚点连接
用法：先创建命名锚点，给该标签一个id，链接到命名锚点，其href属性的值为#命名锚点的id值
例子：锚点链接时href要加上#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>大美女</h1>
<a href="#ljie">点击</a>
<img src="mn.jpg" alt="看什么美女！代码打完了吗？" title="请关注小马哥吧">
<a name="ljie">锚点链接</a>
</body>
</html>4.注释标签
<!--注释-->5.特殊标签
6.表格标签
(1)表格标签的格式：
<table>
<tr>
<td>需要显示的内容</td>
</tr>
</table>·table代表这个标签
·tr标签代表一行数据
·td标签代表单元格中的一个单元格
（2）<table>元素：
定义表格:
<table border=n align="alignment" bgcolor="clr">...</table>·border：用于定义表格的边框的宽度
·align：用于设置表格的对齐方式，align属性值有left，center，right
·bgcolor：用于执行表格的背景颜色
（3）<caption>元素：
用于定义表格的标题，例如：
<caption>马哥学java</caption>（4）<th>元素：
用于定义表头，如：
<th>...</th>(5)<td>元素：
用于定义单元格，如：
<td>...</td>6.1表格标签<thead>,<tbody>和<tfoot>
·thead 表格的头，用来存放标题之类的东西
·tbody 表格的身体，存放数据
·tfoot 表格的脚，放表格的脚注之类
表格本来是从上到下显示，但用thead/tbody/tfoot后，就可以按从头到脚的顺序显示，不会考虑代码的顺序，在一个table中，tbody可以出现多次，但thead和tfoot只能出现一次
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<caption>演示</caption>
<tfoot>
<tr>
<th>郭富城</th>
<td>男</td>
<td>歌手</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>刘德华</th>
<td>男</td>
<td>歌手</td>
</tr>
</tbody>
<thead>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</thead>
</table>
</body>
</html>效果：
虽然代码顺序先写了郭富城但采用了tfoot标签，所以最后显示
6.2合并单元格
（1）合并方式：
·跨行合并：rowspan=“合并单元格的个数”
·跨列合并：colspan=“合并单元格的个数”
（2）合并方法：
·跨行：以最上面的单元格为目标单元格
·跨列：以最左边的单元格为目标单元格
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<caption>合并单元格</caption>
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>效果:
7.列表标签
·无序列表的各个列表之间没有顺序级别之分
·<ul></ul>中只能嵌套<li><li>
·<li></li>之间相当于一个容器，可以容纳所有元素
无序列表：<ul>
<ul>
<li>华为</li>
<li>小米</li>
</ul>有序列表：<ol>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>自定义列表：<dl>
1.<dl></dl>中能包含<dt></dt><dd>和</dd>
2.<dt></dt>和<dd></dd>个数没有限制，最好是一个<dt></dt>对应多<dd></dd>
<dl>
<dt>四大天王</dt>
<dd>刘德华</dd>
<dd>郭富城</dd>
<dd>张学友</dd>
<dd>黎明</dd>
</dl>
例如：
8.表单标签<from>
form标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
创建表单的基本语法格式：
<from action="url地址" method="提交方式" name="表单名称">
各种表单控件
</from>1. action属性用来指定接收并处理表单数据的服务器程序的url地址
2.method用来设置表单数据的提交方式
Get方式为明文传输，数据量相对较少，不是很安全
Post方式为非明文传输，有请求体，数据量相对较大，比较安全
3.name用于指定表单的名称，用于区别同一个页面下的其他表单
8.1input标签的type属性
| 属性值 | 描述 |
| button | 定义可点击的按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像显示的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩藏 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会删除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符 |
例子：
8.2input标签的name和value属性
name和value是每个表单元素都有的属性值，主要给后台人员使用
格式：
<input type="属性" name="***" value="***">8.3inpu标签和checked和maxlength属性
1.checked属性主要针对单选框和复选框，主要用于打开页面时就可以默认选中某个表单元素
2.maxlength是用户可以在表单元素输入的最大字符数
例如：
用户名:<input type="text" maxlength="3"><br/> <!--最大字符为3-->
密码:<input type="password"><br/>
性别:男<input type="radio"> <!--默认女-->
女<input type="radio" checked="checked"><br/>
爱好:唱跳<input type="checkbox">
rap:<input type="checkbox">
篮球:<input type="checkbox" checked="checked"><br/> <!--默认篮球-->8.4lable标签
lable标签的主要作用是和其他表单属性关联，但鼠标点击lable标签时可以起到和点击表单属性一样的效果
建立关联方法：
方法1：
<lable for="关联id">关联</lable>
<input type="text" id="关联id">方法2：
<lable>关联<input type="text"></lable>例如：点击“a”时可以选中，点击后面的选择框也可以选中，但“d”没有lable标签，只能通过点击选择框选中
8.5select下拉列表
1.<select>中至少包含一对<option>
2.在<option>中定义selected=“selected”表示当前项为默认选中项
3.<option value="none" selected disabled hidden>请选择选项</option>,该类语句不出现在下拉框中，起到提示信息的作用，但默认显示
例如：
8.6文本域标签textarea
1.<textarea>标签创建多行输入框
2.cols=“每行中的字符数”，rows=“显示的行数”
语法：
<textarea rows="4" cols="10">
文本内容
</textarea>例如：
杀青！随手点个赞吧
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
