HTML
---恢复内容开始---
一、HTML概述
1.什么是HTML
HTML是用来描述网页的一种语言
- 超文本标记语言（英语：HyperText Markup Language）是一种创建网页的标准标记语言
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签（markup tag）
- HTML文档包含HTML标签你及文本内容
- HTML文档也叫做web页面
- 使用HTML来创建自己的web站点，HTML运行在浏览器上，有浏览器来解析
2.建立HTML文件
- .html
- .htm
3.HTML注释
<!-- 注释内容 -->
- 编辑器快捷键 Ctrl + ？
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元素可以设置属性
- 属性一般添加在开始标签
- 属性一般以名称/值对的形式出现，比如：name=“value”
- 属性值必须用双引号引起来
- 标签都用小写字母
- 双标签必须要写闭合标签
二、HTML常用标签
1.HTML常用的块级标签（块级元素）
独占一行
- 有语义的HTML块级元素
有默认样式
-
- 标题（Heading）（通过H1～H6标签来定义的）
- 段落（通过p标签来定义）
- 列表
- 无序列表 ul，li
- 有序列表 ol，li
- 自定义列表 dl，dt，dd
- 表格
- 表格标签table声明一个表格，th表头 tr行 td列
- 属性：width 设置单元格的总体宽度；height 设置单元格总体高度；border 设置边框是否显示；cellpadding 设置表格中内容距离边框间距；cellspacing 设置表格和表格之间的间距
- 单元格合并：colspan 设置水平方向一个单元格占据的宽度；rowspan 设置垂直方向一个单元格占据的高度
- 单元格内容的对齐方式：align 水平对齐方式 ，默认靠左居中 center right； valign 垂直对齐方式 ，默认垂直居中 top bottom 如果给tr设置 会影响整行，给td设置，会影响单元格
<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>
- 无意义的块级元素 div
2.HTML常用的行级标签（行内元素）
不独占一行
- 有语义的行内元素
- HTML链接 a标签
<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 -->
-
- HTML图像
<img src="图片地址" alt="">
<!--图像标签 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>
- 无语义的行内标签
- span标签 配合css使用
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}
- 通过type属性定义不同类型的表单控件
- text 普通文本输入框
用户名: <input type="text" name="username" value="" placeholder="请输入用户名"> <br>
- passworld 密码输入框
密 码: <input type="password" name="password"> <br> - radio 单选按钮
<!--单选框 type="radio" 必须有name属性和value属性,并且一组单选框name属性的值必须相同--> 性别: <input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" value="0"> 女
- checked 多选按钮
<!-- 多选框 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 下拉框
<!--select 下拉选项框必须配合option来使用--> 学历: <select name="xl" > <option value="0">小学</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">大学</option> </select>
- file 文件上传选框
<!--文件上传 type="file" 一般用于文件上传--> 请选择上传文件: <input type="file" name="file">
- textarea 文本域
请输入个人说明: <br> <textarea name="text" id="">请输入个人信息</textarea>
- submit 提交按钮
<!--按钮 type="submit"--> <input type="submit" value="确定" > <br> <button>提交</button>
- reset 重置按钮
<!--重置按钮--> <input type="reset" disabled>
- hidden 隐藏域，要和表单一起提交的信息
<!--隐藏域 hidden 不需要用户查看和填写的信息 --> <input type="hidden" name="id" value="0">
- text 普通文本输入框
- 常用属性
- name属性：表单项名，用于存储内容值
- value属性：输入的值
- disabled属性：禁用属性
- readonly属性：禁用属性
- checked属性：选择框制定默认选项
- placeholder：提示
- 注意：
- from有两个必须存在的属性 action提交地址 metchod提交方式
- post：通过request body传参，参数不可见，参数没有大小限制
- get：通过url进行传参，参数可见，不安全，大小有限制
- 如果表单中含有文件上传，method提价方式必须为post，form中必须有enctype属性 enctype=“multipart/form-data”
- from有两个必须存在的属性 action提交地址 metchod提交方式
<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>
---恢复内容结束---
浙公网安备 33010602011771号