---恢复内容开始---
一、HTML概述
1.什么是HTML
HTML是用来描述网页的一种语言
2.建立HTML文件
3.HTML注释
<!-- 注释内容 -->
4.HTML网页基本结构
<!--第一行是声明文档 告诉我们的浏览器以什么html版本解析我们的代码--> <!DOCTYPE html> <!--html是我们网页当中最大的标签--> <html> <!--head 头 主要是来写不直接显示在页面当中的内容 一般是做网页的一些设置--> <head> <!--来设置网页编码格式--> <meta charset="UTF-8"> <!--是设置网页的标题--> <title>我的第一个网页</title> </head> <!--body体 主要来写显示在页面当中内容--> <body> 欢迎小伙伴们来听我的html课程 </body> </html>
5.HTML标签结构
HTML标记标签通常被称为HTML标签（HTML tag）
6.HTML元素
“HTML标签”和“HTML元素”通常都是描述同样的意思，一个HTML元素包含了开始标签与结束标签
7.HTML属性
二、HTML常用标签
1.HTML常用的块级标签（块级元素）
独占一行
有默认样式
<table border="1" cellpadding="10px" cellspacing="0" width="800px" height="700px"> <!--这是表格第一行--> <tr> <!--这是表格中的列--> <th colspan="4">这是表头</th> </tr> <!--这是表格第二行--> <tr valign="top" align="center"> <td rowspan="2">这是第二行的第一列</td> <td>这是第二行的第二列</td> <td>这是第二行的第三列</td> <td>这是第二行的第四列</td> </tr> </tr> <!--这是表格第三行--> <tr > <!--<td>这是第三行的第一列</td>--> <td>这是第三行的第二列</td> <td>这是第三行的第三列</td> <td>这是第三行的第四列</td> </tr> </table>
2.HTML常用的行级标签（行内元素）
不独占一行
<a href="链接地址">链接文本</a>
<!--链接标签 a标签 href属性,跟的是要跳转的网址 target :_blank 在新窗口打开跳转的页面 --> <!--<a href="http://www.baidu.com">百度</a>--> <a href="./复习.html" target="_blank">跳转到本地的文件(复习.html)</a> <!--路径问题 在实际开发当中建议使用相对路径 ./当前目录 ../上目录--> <!--绝对路径 在windows当中绝对路径的根是我们文件所在的盘符 C:\Users\admin\Desktop\TLXY-前端课件代码\复习.html -->
<img src="图片地址" >
<!--图像标签 img(但标签 不需要闭合) src: 图片的地址(网络资源或者本地资源) alt:用于图片加载失败的替代文字 (必须存在) title:鼠标选题在图片上的提示信息(可写可不写) width:设置图片的宽度 height:设置图片的高度 注意:一般我们只给图片宽度或者只设置高度,那高度或者宽度会等比例放大或者缩小 --> <img src="http://pic1.win4000.com/wallpaper/9/56fcd25dbb4a8.jpg" width="200px" height="200px" alt="这是图片标签" title="这是一张美女高清大图"> <!--<img src="./images/56fcd25dbb4a8.jpg" alt="这是一张美女大图">-->
加粗b 、strong:具有强调意义
斜体i 、em:具有强调意义
<b>src:</b> 图片的地址(网络资源或者本地资源)<br> <i>alt:</i>用于图片加载失败的替代文字 (必须存在) <br> <strong>title</strong>:鼠标选题在图片上的提示信息(可写可不写) <br> <em>width:</em>设置图片的宽度 <br>
3.常用的实体字符
4.表单标签
表单是一个包含表单元素的区域。通过from来定义表单区域
<form action="" method="post" enctype="multipart/form-data"> </form>
表单控件
type:指定我们吃的表单类型(普通文本 密码框 单选框 多选框)
必须要填写 name属性
value :设置默认值
{username:1234,sex:0,love:[l,z,p],xl:0}
用户名: <input type="text" name="username" value="" placeholder="请输入用户名"> <br>
密 码: <input type="password" name="password"> <br>
<!--单选框 type="radio" 必须有name属性和value属性,并且一组单选框name属性的值必须相同--> 性别: <input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="0"> 女
<!-- 多选框 type="checkbox" 必须指定name属性和value属性,并且一组多选框name属性的值要相同 --> 爱好: <br> <input type="checkbox" name="love[]" value="l" checked> 篮球 <br> <input type="checkbox" name="love[]" value="z"> 足球 <br> <input type="checkbox" name="love[]" value="p"> 品乓球 <br>
<!--select 下拉选项框必须配合option来使用--> 学历: <select name="xl" > <option value="0">小学</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">大学</option> </select>
<!--文件上传 type="file" 一般用于文件上传--> 请选择上传文件: <input type="file" name="file">
请输入个人说明: <br> <textarea name="text" id="">请输入个人信息</textarea>
<!--按钮 type="submit"--> <input type="submit" value="确定" > <br> <button>提交</button>
<!--重置按钮--> <input type="reset" disabled>
<!--隐藏域 hidden 不需要用户查看和填写的信息 --> <input type="hidden" name="id" value="0">
<form action="" method="post" enctype="multipart/form-data"> <!-- 表单控件 type:指定我们吃的表单类型(普通文本 密码框 单选框 多选框) 必须要填写 name属性 value :设置默认值 {username:1234,sex:0,love:[l,z,p],xl:0}--> 用户名: <input type="text" name="username" value="" placeholder="请输入用户名"> <br> 密 码: <input type="password" name="password"> <br> <!--单选框 type="radio" 必须有name属性和value属性,并且一组单选框name属性的值必须相同--> 性别: <input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="0"> 女 <br> <!-- 多选框 type="checkbox" 必须指定name属性和value属性,并且一组多选框name属性的值要相同 --> 爱好: <br> <input type="checkbox" name="love[]" value="l" checked> 篮球 <br> <input type="checkbox" name="love[]" value="z"> 足球 <br> <input type="checkbox" name="love[]" value="p"> 品乓球 <br> <!--select 下拉选项框必须配合option来使用--> 学历: <select name="xl" > <option value="0">小学</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">大学</option> </select> <br> <!--文件上传 type="file" 一般用于文件上传--> 请选择上传文件: <input type="file" name="file"> <br> 请输入个人说明: <br> <textarea name="text" id="">请输入个人信息</textarea> <br> <!--按钮 type="submit"--> <input type="submit" value="确定" > <br> <button>提交</button> <br> <!--重置按钮--> <input type="reset" disabled> <!--隐藏域 hidden 不需要用户查看和填写的信息 --> <input type="hidden" name="id" value="0"> </form>
---恢复内容结束---
原文：https://www.cnblogs.com/Allenzyy/p/10371414.html