文章目录
- 一、HTML介绍
- 1.概念
- 2.运行方式
- 3.快速入门
- 4.注意事项
- 5.html基本结构
- 二、HTML标签
- 1.html标签/元素说明
- 2.html标签注意事项和细节
- 3.font字体标签
- 4.字符实体
- 5.标题标签
- 6.超链接标签
- 7.无序列表ul/li
- 8.有序列表ol/li
- 9.图像标签(img)
- 绝对/相对路径知识点
- 10.表格标签
- 跨行跨列表格
- 11.表单标签
- （1）基本语法
- （2）应用案例
- （3）input标签
- （4）select/option/textarea标签
- （5）表单综合案例
- （6）表单格式化
- （7）表单提交注意事项
- 12.div标签
- 13.p标签
- 14.span标签
- 课后作业
- 作业1
- 作业2
一、HTML介绍
1.概念
（1）HTML（HyperText Mark-up Language）即超文本标计语言，可以展示的内容类型很多
（2）HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
（3）HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容
2.运行方式
（1）本地运行，即在本地计算机上直接打开HTML文件
（2）远程访问，即用户通过互联网访问远程服务器上的HTML文件
3.快速入门
运用idea，编写hello.html，运行效果如下：
- 是注释，快捷键为：Ctrl + /
<!--hello.html--> <!--文档类型说明: 使用html--> <!DOCTYPE html> <!--使用语言的地区 en表示英国美国(en-US简写成en)--> <html lang="en"> <!--html头--> <head> <!--charset文件的字符集--> <meta charset="UTF-8"> <!--文件标题--> <title>html快速入门</title> </head> <!--body体，主体部分--> <body> <!--内容--> hello, world! </body> </html>
4.注意事项
（1）HTML文件不需要编译，直接由浏览器进行解析执行
（2）可以选择的浏览器，是你电脑已有的浏览器，如果选择了电脑没有的浏览器，会报错
5.html基本结构
二、HTML标签
1.html标签/元素说明
（1）html标签用两个尖括号"<>"括起来
（2）html标签一般是双标签，如
和
前一个标签是起始标签，后一个标签为结束标签（3）两个标签之间的文本是html元素的内容
（4）某些标签称为"单标签"，因为它只需单独使用就能完整地表达意思，如
如果要进行换行，需要使用浏览器能够识别的标签，即
标签，而不是在内容中按回车，插入换行符
（5）html元素指的是从开始标签到结束标签的所有代码
2.html标签注意事项和细节
（１）标签不能交叉嵌套
（２）标签必须正确关闭
（３）注释不能嵌套也不报错
（４）html语法不严谨，有时候标签不闭合，属性值不带""也不报错
<!--tag_detail.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html标签使用细节</title> </head> <body> <!-- 1.不能交叉嵌套--> <!-- <div><span></div></span> 错误用法--> <!-- 2.标签必须正确关闭--> <span>jack</span> <!-- 3.注释不能嵌套--> <!-- 4.html语法不严谨，有时候标签不闭合，属性值不带""也不报错--> <font color="red">张飞</font> <font color=royalblue>关羽</font> <br/> </body> </html>
3.font字体标签
- font标签是字体标签，可以用来修改文本的字体、颜色、大小（尺寸）
- 注意：标签的属性顺序不做要求
- 应用实例：创建font.html，在网页上显示北京，并修改字体为微软雅黑，颜色为蓝色
<!--font.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font字体标签</title> </head> <body> <!--1.color属性 修改颜色--> <!--2.face属性 修改字体--> <!--3.size属性 修改文本大小--> <font size="40px" face="微软雅黑" color="blue" >北京</font> </body> </html>
4.字符实体
-
在网页上显示一些特殊的符号，称为字符实体（也叫符号实体）
-
常用的特殊字符：
（1）< ：<
（2）> ：>
（3）空格： 
-
应用实例：创建char-entity.html，将
标签以文本的形式显示在页面
<!--char-entity.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符实体</title> </head> <body> jack <!-- 浏览器会将<hr />解析成一条线--> <hr /> smith <hr/><br/> smith1 smith2 hsp<br/> smith1 smith2 hsp </body> </html>
- 字符实体一览表
5.标题标签
标题使用<h1> - <h6>标签进行定义，<h1>定义最大的标题，<h6>定义最小的标题
- 应用实例：演示标题1到标题6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <!--align属性: 对齐属性--> <!--left: 左对齐(默认)--> <!--center: 居中--> <!--right: 右对齐--> <h1>标签1</h1> <h2>标签2</h2> <h3 align="center">标签3</h3> <h4>标签4</h4> <h5>标签5</h5> <h6 align="right">标签6</h6> </body> </html>
6.超链接标签
-
超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件、甚至一个应用程序
-
应用实例：创建link.html，链接到搜狐网站
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接标签</title> </head> <body> <!--a标签: 超链接标签 href属性: 设置连接的地址 target属性: 设置那个目标进行跳转 _self: 表示当前页面(默认值), 即使用当前页替换目标页 _blank: 表示打开新页面来进行跳转 --> <a href="http://www.sohu.com">搜狐</a><br/> <a href="http://www.sohu.com" target="_blank">搜狐2</a><br/> <!--点击超链接, 打开邮件--> <a href="mailto:1942305430@qq.com">联系管理员</a> </body> </html>
7.无序列表ul/li
-
基本语法
<ul typr="属性值"> <li>列表内容</li> </ul> <ul>设定符号款式，其值有三种（默认为type="disc"），如下： type="disc" 列项符号为实心圆点 type="circle" 列项符号为空心圆 typr="square" 列项符号为空心正方形 -
应用实例
<!--ul_li.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表ul/li</title> </head> <body> <!--ul: 表示无序列表--> <!--li: 列表项--> <!--type属性: 指定列表项前的符号--> <h1>五虎将</h1> <ul type="square"> <li>关羽</li> <li>张飞</li> <li>赵云</li> <li>马超</li> <li>黄忠</li> </ul> </body> </html>
8.有序列表ol/li
-
基本语法
<ol type="属性值" start="起始值"> <li>列表内容</li> </ol> 注： （1）<ol>称为顺序列表标签，<li>则用以表示列表项目，称编号列表 （2）<ol type="i" start="4"></ol> type设定数目款式，其值为五种（默认为start="1"） （3）i可以取以下值中的任意一个： 1 阿拉伯数字 1, 2, 3, ... a 小写字母 a, b, c, ... A 大写字母 A, B, C, ... i 小写罗马数字 i, ii, iii, ... I 大写罗马数字 I, II, III, ... -
应用实例
<!--ol_li.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表ol/li</title> </head> <body> <!--ol: 表示有序列表--> <!--li: 列表项--> <!--type属性: 指定列表项前的符号--> <h1>五虎将</h1> <ol type=""> <li>关羽</li> <li>张飞</li> <li>赵云</li> <li>马超</li> <li>黄忠</li> </ol> </body> </html>
9.图像标签(img)
-
img标签可以在html页面上显示图片
-
应用实例：使用img标签显示一张风景照
<!--img.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body> <!-- img标签: 图片标签，用来显示图片 src属性: 可以设置图片路径 width属性: 设置图片的宽度 height属性: 设置图片的高度 border属性: 设置图片边框大小 alt属性: 设置当指定路径找不到图片时，用来替代显示的文本内容 相对路径: 从工程名开始算 绝对路径: 盘符:/目录/文件名 --> <!--./imgs/1.png表示当前路径下的imgs文件夹下的1.png--> <!--在进行图片缩放时，建议指定width 或 height即可，浏览器或按比例缩放--> <img src="./imgs/1.jpg" width="400"> <br/> <img src="./imgs/1.jpg" height="150" border="10px"> <br/> <img src="./imgs/2.jpg" alt="找不到图片"> </body> </html>
绝对/相对路径知识点
-
在web中路径分为相对路径和绝对路径两种
-
相对路径： . 表示当前文件所在的目录
…表示当前文件所在的上一级目录
文件名：表示当前文件所在目录的文件，相当于./文件名./可以省略
-
绝对路径：正确格式是htttp:// IP地址:port /工程名/资源路径，如: http://localhost:63342/html/imgs/1.jpg
错误格式是盘符:/目录/文件名
10.表格标签
-
基本语法
<table border="边框宽度" cellspacing="空隙大小" cellpadding="填充大小"> </table> -
应用案例：显示3行3列的表格
<!--table.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!-- table标签: 表格标签 border: 设置表格标签 width: 设置表格宽度 height: 设置表格高度 align: 设置表格相对于页面的对齐方式 cellspacing: 设置单元格间距 tr: 行标签 th: 表头标签 td:单元格标签 align: 设置单元格文本对齐方式 b标签: 加粗标签 --> <table width="500" border="6" align="center"> <tr> <th>名字</th> <th>住址</th> <th>年龄</th> </tr> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table> </body> </html>
跨行跨列表格
<!--table2.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨行跨列表格</title> </head> <body> <!-- 合并项: colspan="列数" 合并行: rowspan="行数" cellspacing: 指定单元格间的空隙大小（0表示没有空隙） bordercolor: 指定表格边框的演示 border: 表格边框 width: 表格的宽度 思路: 1.先把整个表格的完整行和列, 展示出来5*3 2.再使用合并的技术, 来处理 3.如果是16进制的颜色, 前面# --> <table border="1" width="500" cellspacing="0" bordercolor=#F2C9F8> <tr> <td colspan="3" align="center">星期一菜谱</td> </tr> <tr> <!--合并行, 跨行row--> <td rowspan="2">素菜</td> <td>青草茄子</td> <td>花椒扁豆</td> </tr> <tr> <td>小葱豆腐</td> <td>炒白菜</td> </tr> <tr> <td rowspan="2">荤菜</td> <td>油焖大虾</td> <td>海参鱼翅</td> </tr> <tr> <td>红烧肉<img src="./imgs/2.png" width="100"></td> <td>烤全羊</td> </tr> </table> </body> </html>
11.表单标签
（1）基本语法
<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form> 星号*部分可以为GET, 也可以是POST(默认是get) url表示定位一个web资源的路径, method主要有两种get, post
（2）应用案例
<!--form_login.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- 1.form 表示表单 2.action 提交到哪个页面 3.method 提交方式, 常用get和post 4.input type=text 输入框 5.input type=submit 提交按钮 6.input type=reset 重置按钮 小技巧: 为了让"密码"与上面的汉字对齐, 输入全角的空格即可 --> <h1>登录系统</h1> <form action="ok.html" method="get"> 用户名:<input type="text" name="username"><br /> 密 码:<input type="text" name="username"><br /> <input type="submit" value="登录"> <input type="reset" value="重置"> </form> </body> </html>
<!--ok.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录成功</title> </head> <body> <h1>恭喜你, 登录成功!</h1> </body> </html>
（3）input标签
（4）select/option/textarea标签
（5）表单综合案例
<!--form_login.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单综合案例</title> </head> <body> <!-- form标签就是表单 input type=text 是文件输入框, value设置默认显示内容 input type=password 是密码输入框, value设置默认显示内容 input type=radio 是单选框, name属性可以对其进行分组 checked="checked" 表示默认选中input type=checkbox 是复选框, checked="checked"表示默认选中 input type=reset 是重置按钮, value属性 是按钮上的文本 input type=submit 是提交按钮, value属性 是按钮上的文本 input type=button 是按钮, value属性 是按钮上的文本 input type=file 是文件上传域 input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息不需要用户参与, 就可以使用隐藏域(提交的同时发送给服务器 select标签 是下拉列表框 option标签 是下拉列表框中的选项 selected="selected" 设置默认选中 textarea 表示多行文本输入框(起始标签和结束标签是默认值) rows属性 设置可以显示几行的高度 cols属性 设置每行可以显示几个字符宽度 注意: 1.一定要给input元素设置name属性, 否则, 数据提交不到服务器 2.checkbox是复选框, 如果希望是同一组, 保证name属性一致 3.checkbox、select、radio 提交的数据是value属性的值 --> <form action="ok.html" method="get"> 用户注册信息<br/> 用户名称: <input type="text" name="username"><br/> 用户密码: <input type="password" name="pwd1"><br/> 确认密码: <input type="password" name="pwd2"><br/> 请选中你喜欢的运动项目: <input type="checkbox" name="sport" value="basketball">篮球<br/> <input type="checkbox" name="sport" value="football" checked>足球<br/> <input type="checkbox" name="sport" value="handball" checked>手球<br/> 请选中你的性别: <input type="radio" name="gender" value="male">男<br/> <input type="radio" name="gender" value="female" checked>女<br/> 请选中你喜欢的城市: <select name="city"> <option>--选择--</option> <option value="cd">成都</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select><br/> 自我介绍: <textarea rows="6" cols="30"></textarea><br/> 请选择你的文件(头像)<input type="file" name="myfile" value="选择文件"><br/> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>
（6）表单格式化
<!--form_format.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单格式化</title> </head> <body> <form action="ok.html" method="get"> 用户注册信息<br/> <table> <tr> <td>用户名称:</td> <td><input type="text" name="username"></td> </tr> <tr> <td>用户密码:</td> <td><input type="password" name="pwd1"><br/></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="pwd2"><</td> </tr> <tr> <td>请选中你喜欢的运动项目:</td> <td><input type="checkbox" name="sport" value="basketball">篮球 <input type="checkbox" name="sport" value="football" checked>足球 <input type="checkbox" name="sport" value="handball" checked>手球</td> </tr> <tr> <td>请选中你的性别:</td> <td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女</td> </tr> <tr> <td>请选中你喜欢的城市:</td> <td> <select name="city"> <option>--选择--</option> <option value="cd">成都</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select> </td> </tr> <tr> <td>自我介绍:</td> <td><textarea rows="6" cols="30"></textarea></td> </tr> <tr> <td>请选择你的文件(头像)</td> <td><input type="file" name="myfile" value="选择文件"></td> </tr> <tr> <td><input type="submit" value="提交"/></td> <td><input type="reset" value="重置"/></td> </tr> </table> </form> </body> </html>
- 表单用来提交数据，表格用来显示数据
（7）表单提交注意事项
-
action属性 设置提交的服务器地址/资源
-
method属性 设置提交的方式GET(默认值)或POST
-
表单提交的时候，数据没有发送给服务器的三种情况：
① 表单的某个元素项（如: text, password）没有name属性值
② 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
③ 表单项不在提交的form标签中，即忘记把表单元素加到里面
-
checkbox、select、radio 提交的数据是value属性的值
-
checkbox是复选框，可提交多个值, 但是name是统一的，如：都为sport，sport=XX&sport=XX
-
提交的数据，一定要放在form标签内，否则数据不会提交
-
Get请求的特点
① 浏览器地址栏中的地址是: action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
② 不安全
③ 它有数据长度的限制（不同浏览器的规定不一样，一般2k）
-
POST请求的特点
① 浏览器地址栏中只有action属性值, 提交的数据是携带在http请求中，不会显示在地址栏，
② 相对与GET请求要安全，因为数据藏在请求体里
③ 理论上没有数据长度的限制
12.div标签
(1) <div>标签可以把文档分割为独立的, 不同的部分 (2) <div>是一个块级元素, 它的内容自动地开始一个新行
- 应用案例
<!--div.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div标签</title> </head> <body> hello world <div> <h3 style="color: blue">This is a h3</h3> <a href="http://www.baidu.com">go to 百度</a> </div> </body> </html>
13.p标签
(1) <p>标签定义段落 (2) p元素会自动在其前后创建一些空白
- 应用案例
<!--p.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>p标签</title> </head> <body> hello world <p>段落1</p> <p>段落2</p> <p>段落3</p> </body> </html>
14.span标签
(1) span标签是内联元素, 不像块级元素（如:div标签、p标签）有换行的效果 (2) 如果不对span应用样式，span标签没有任何的显示效果 (3) <span>标签经常用于对网页中的特定文本进行样式化 (4) 语法: <span>内容</span>
- 应用案例
<!--span.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>span标签</title> </head> <body> <!-- 1.span标签是内联元素(内嵌元素、行内元素), 没有换行效果 2.如果不对span应用样式，span标签没有任何的显示效果 3.使用span标签往往是为了单独去控制某个关键的内容 --> 你的购物车有<span>10</span>件商品<br/> 你的购物车有<span style="color: red; font-size: 40px">10</span>件商品 </body> </html>
课后作业
作业1
需求：编写代码，创建homework01.html显示如下网页
<!--homework01.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>员工表格</title> <!--简单体验CSS--> <style type="text/css"> /*设置表格边框，去掉空隙*/ table, tr, td, th { border: 2px solid blue; border-collapse: collapse; } /*设置表格的背景色，表格文字居中*/ table { background-color: #CCCCCC; text-align: center; } </style> </head> <body> <!--做成块,一起居中--> <div align="center"> <h1>雇员薪资信息</h1> <table border="1" width="600"> </table> <tr> <th>编号</th> <th>名字</th> <th>性别</th> <th>薪水</th> <th>职位</th> <th>email</th> </tr> <tr> <td>111</td> <td>张三</td> <td>男</td> <td>8000.00</td> <td>程序员</td> <td>zhangsan@163.com</td> </tr> <tr> <td>112</td> <td>李四</td> <td>男</td> <td>9000.00</td> <td>经理</td> <td>lisi@163.com</td> </tr> <tr> <td>113</td> <td>王五</td> <td>男</td> <td>5000.00</td> <td>清洁工</td> <td>wangwu@163.com</td> </tr> </table> </div> </body> </html>
作业2
需求：编写代码，创建homework02.html显示如下网页
<!--homework02.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>课程表</title> <style type="text/css"> table, tr, td { border: 1px #3678EF solid; text-align: center; } table { border: 2px #3678EF solid; } </style> </head> <!--分析: 有8行8列--> <body> <table border="1" width="600"> <tr> <td>项目</td> <!--跨5列--> <td colspan="5">上课</td> <!--跨2列--> <td colspan="2">休息</td> </tr> <tr> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr> <!--跨4行，下面的单元格就没有了--> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <!--跨4行--> <td rowspan="4">休息</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> <tr> <td>化学</td> <td>语文</td> <td>体育</td> <td>计算机</td> <td>英语</td> <td>计算机</td> </tr> <tr> <td>政治</td> <td>英语</td> <td>体育</td> <td>历史</td> <td>地理</td> <td>计算机</td> </tr> <tr> <!--跨2行--> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>地理</td> <td>计算机</td> <!--跨2行--> <td rowspan="2">休息</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> </table> </body> </html>
<td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> <tr> <td>化学</td> <td>语文</td> <td>体育</td> <td>计算机</td> <td>英语</td> <td>计算机</td> </tr> <tr> <td>政治</td> <td>英语</td> <td>体育</td> <td>历史</td> <td>地理</td> <td>计算机</td> </tr> <tr> <!--跨2行--> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>地理</td> <td>计算机</td> <!--跨2行--> <td rowspan="2">休息</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> </table>
