目录
HTML默认元素
HTML基本元素
HTML表格元素
HTML列表元素
HTML表单元素
HTML默认元素
<!DOCTYPE html><!--告诉浏览器要处理的是html文档-->
<html lang="en"><!--文档中html的开始，其中lang是html的一个语言属性，这里默认en是英语的意思-->
<head><!--头元素，在html下面，提供有关文档内容和标注信息-->
<meta charset="UTF-8"><!--meta标签的charset属性是编码的意思-->
<title>默认元素</title><!--title元素是标题的意思-->
<!--标签和元素的区别：在这里<title>是一个标签，而 <title>默认元素</title>是一个元素-->
</head><!--这是head元素的结束-->
<body><!--body元素里的内容可以在网页直接输出，当然了body里面也有很多元素-->
<h1>hello world</h1>
hello world
</body><!--body元素的结束-->
</html><!--html元素的结束-->运行结果
HTML基本元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本元素</title>
</head>
<body>
hello world1
<br><!--这是换行的意思-->
<a hb>hello world4</b><!--这是粗体的意思--><br>
<em>hello world5</em><!--这是斜体--><br>
<u>hello world6</u><!--这是下划线--><br>
<s>hello world7</s><!--这是删除线-->
</body>
</html>运行结果：
HTML表格元素
创建表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<table border="1px"><!--这是表格标签,border属性是边框的大小，并设为1px，px是像素的意思-->
<thead><!--这是表头标签-->
<tr><!--这是行标签-->
<th>账号</th><!--这是标题列元素有加粗-->
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody><!--这是表体标签-->
<tr>
<td>123</td><!--这是列元素-->
<td>aaa</td>
<td>123</td>
</tr>
<tr>
<td>456</td>
<td>bbb</td>
<td>456</td>
</tr>
<tr>
<td>789</td>
<td>ccc</td>
<td>789</td>
</tr>
</tbody>
<tfoot><!--这是表脚标签-->
<tr><!--这是行标签-->
<td>账号</td><!--这是标题列元素有加粗-->
<td>姓名</td>
<td>密码</td>
</tr>
</tfoot>
</table>
</body>
</html>运行结果：
合并表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并表格</title>
</head>
<body>
<table border="1px">
<tr>
<th rowspan="2">合并行</th><!--合并行单元格，把改行及下面一个位置也占了-->
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
<tr>
<td colspan="2">合并列</td><!--合并列单元格，意思是该列的该元素占两个位置，即把后面的位置也占了-->
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
</body>
</html>运行结果：
HTML列表元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表元素</title>
</head>
<body>
<ol><!--该标签是有序列表-->
<li>aaa</li><!--该元素表示列表中的项-->
<li>bbb</li>
<li>ccc</li>
</ol>
<ol reversed><!--该标签的reversed元素是降序的意思-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ol type="a"><!--该标签是有序列表,默认是1,2,3升序，这里设置为a,b,c-->
<li>aaa</li><!--该元素表示列表中的项-->
<li>bbb</li>
<li>ccc</li>
</ol>
<ol>
<li>ol的嵌套</li>
<ol type="a">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ol>
<ul><!--这是无序标签-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>运行结果：
HTML表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<form><!--该标签用于为用户输入创建HTML表单-->
<input><!--单行文本框-->
<br><br>
<input type="text"><!--默认是text属性，不写也行-->
<br><br>
<input type="text" value="hello"><!--value属性是初始化赋值-->
<input type="text" placeholder="请输入账号"><!--placeholder属性是占位，有提示作用-->
<input type="text" placeholder="请输入账号" maxlength="8"><!--maxlength是输入的最大长度-->
<br><br>
<input type="text" placeholder="请输入账号" size="50"><!--size属性是文本框的大小-->
<input type="text" value="hello" readonly><!--readonly属性是只读的，该文本框的内容不能编辑-->
<br><br>
<input type="password" placeholder="请输入密码"><!--这里是密码，不在文本框中显示具体内容，而是******-->
<br><br>
<textarea rows="3" cols="15">helloworldgfffffffffffffffffffffffffhgfhghdgfgjoiiiiiiiiypoipyoiypoiuy
ohfgjhjhgjhgd</textarea><!--textarea元素是多行文本框,rows属性是行的意思,cols属性是列-->
</form>
</body>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<form>
<button>按钮</button><!--这种写法可以跟js合作，用来绑定事件-->
<input type="button" value="按钮"><!--这是button元素，即是按钮的意思，但是没有与js合作功能-->
<input type="submit" value="按钮"><!--只是提交表单-->
<br>
<input type="range" min="-100" max="100" step="100" value="-100">
<!--这是一个滑表默认在0的位置,min是最小值，max是最大值，step是每滑动一下移动的值，value是设置初始值-->
<br>
<input type="number" min="-100" max="100" value="0"><!--可以用上下调节数值-->
<br>
<input type="checkbox">选择1<!--这是一个选择复选框, 选了之后还能取消选中-->
<input type="radio">选择2<!--该选择复选框选择之后就不能取消了-->
<br>
<input type="radio" name="a" checked>a<!--name是实现了三选一，checked属性是默认先选中一个-->
<input type="radio" name="a">b
<input type="radio" name="a">c
<br>
你喜欢干什么
<select><!--选择框，只能选择下面的东西-->
<option>写代码</option>
<option>读书</option>
<option>玩游戏</option>
</select>
<br>
<input type="text" list="123">
<datalist id="123"><!--选择框，下面的东西会优先提示，你也可以输入其他的-->
<option>写代码</option>
<option>读书</option>
<option>玩游戏</option>
</datalist>
</form>
</body>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<form>
<input type="email"><!--在这里进行识别email-->
<input type="tel"><!--在这里进行识别tel-->
<input type="url"><!--在这里进行识别url-->
<br>
<input type="date"><!--这个是日期-->
<br>
<input type="color"><!--这个是颜色-->
<br>
<input type="search"><!--搜索文本框-->
<br>
<input type="hidden" value="123"><!--这个是隐藏的，但是传输的时候还是存在的-->
<input type="image" src="网络头像.JPG" width="120px"><!--嵌入图片按钮并设置大小，高度会默认-->
<br>
<input type="file" multiple><!--这里是上传文件,multiple属性可以上传多个文件-->
</form>
</body>
</html>运行结果：
