一、段落标签
//段落标签
<p>xxx</p>
//标题标签（h1-h6）
<h1>...</h1>
<h6>...</h6>
二、div span
1.<div> 大盒子 单独占一行
2. <span> 小盒子 一行上可以多个
三、img
<img src=“图片地址” alt=“下载失败时的替换文本” title = “提示文本”>
四、audio
在页面中插入音频
<body>
<img src="img/1.jpg" alt="" title="加油，冲冲冲">
<audio src="./music.mp3" controls></audio>
</body>
五、video
在页面中插入视频
<body>
<img src="img/1.jpg" alt="" title="加油，冲冲冲">
<audio src="./music.mp3" controls></audio>
<video src="./video.mp4" controls></video>
</body>
六、a
<a href=“跳转目标” target=“目标窗口的弹出方式” title=“鼠标滑过显示的文本”>链接显示的文本
<h4>外部链接</h4>
<a href="https://www.baidu.com">百度</a>
<h4>内部链接</h4>
<a href="demo.html">demo页面</a>
<h4>空链接</h4>
<a href="#">待定</a>
<h4>下载链接:链接地址是.exe文件，zip等压缩包</h4>
<a href="test.zip">下载文件</a>
七、特殊字符
八、table
table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
<table align="center" height="230" width="500" cellspacing="0" border="1">
<thead>
<tr>
<th>排名</th>
<th>关键字</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七天</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg" alt="xx"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<td>2</td>
<td>鬼吹灯</td>
<td><img src="down.jpg" alt="xx"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
九、合并单元格
合并行使用rowspan属性，合并列使用功能colspan属性。
十、列表
-
无序列表
-
有序列表
-
自定义列表
<dl>
<dt>联系我们</dt>
<dd>QQ</dd>
<dd>微信</dd>
<dd>电话</dd>
</dl>
十一、表单
一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成
1. 表单域
2. 表单元素
（1）<input>
<body>
<form action="demo.php" method="get" name="name1">
用户名<input type="text"><br>
密码<input type="password">
</form>
</body>
type可填内容 如下
除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- 特别注意：name 表单元素的名字, 要求 相同单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用
<body>
<form action="demo.php" method="get" name="name1">
用户名<input type="text" name="username" value="请输入用户名"><br>
密码<input type="password" name="pwd" ><br>
//name相同
性别 男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女"><br>
//name相同
爱好:吃饭<input type="checkbox" name="hobby" value="吃饭">
睡觉<input type="checkbox" name="hobby" value="吃饭">
打豆豆<input type="checkbox" name="hobby" value="打豆豆">
</form>
</body>
name 的主要作用就是用于区别不同的表单。
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<!-- button 结合js使用 -->
<input type="button" value="发送验证码"><br>
<!-- file上传文件 -->
<input type="file">
标签
一、<label>
标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到 或者 选择对应的表单元素上,用来增加用户体验.
二、<select>
<select>中至少包含一对<option>。- 在
<option>中定义selected ="selected"时，当前项即为默认选中项。
<body>
籍贯:
<select name="" id="">
<option>河北</option>
<option>山东</option>
<option selected="selected">火星</option>
<option>水星</option>
<option>金星</option>
</select>
</body>
三、<textarea>
使用场景: 当用户输入内容较多的情况下，我们就使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<body>
<form>
今日反馈
<textarea cols="50" rows="5">pink老师yyds
</textarea>
</form>
</body>
四、表单总结
-
表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.
-
这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<form>
<table width="500" >
<thead>
<td></td>
<td></td>
</thead>
<tbody>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan"><img src="images/man.jpg">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="images/women.jpg">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">--请选择年份--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option selected="selected">--请选择月份--</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<tr>
<td>婚姻状态</td>
<td><input type="radio" name="hunyin" id="no-marry" checked="checked"><label for="no-marry" >未婚</label>
<input type="radio" name="hunyin" id="yes-marry"><label for="yes-marry">已婚</label >
<input type="radio" name="hunyin" id="but"><label for="but">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="博士后"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="leixing" id="1"><label for="1">妩媚的</label>
<input type="checkbox" name="leixing" id="2"><label for="2">可爱的</label>
<input type="checkbox" name="leixing" id="3"><label for="3">小鲜肉</label>
<input type="checkbox" name="leixing" id="4"> <label for="4">老腊肉</label>
<input type="checkbox" name="leixing" id="5" checked="checked"> <label for="5">都喜欢</label>
</td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea>个人简介</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox">我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员，立即dengl</a></td>
</tr>
<tr>
<td></td>
<td>
我承诺
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
文档查阅
MDN : https://developer.mozilla.org/zh-CN/
W3C : http://www.w3school.com.cn/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
