JavaWeb-html的基础

html的基础html(超文本标记语言)，运行在浏览器端的静态解释型语言，
JavaWeb基本概述

文章插图
html的基本标签html
html是解释语言，浏览器容错的，可以有错误，编译器会自己解释
网页上看到的内容都是写在里面的
基本标签

<!--1. html页面中由一对标签组成：<html></html><html>:开始标签</html>:结束标签2.<title>网页的标题页</title>3.可以在<meta charset="字符集">设置编码方式（写在<head>...</head>之间）4.<br/>:换行（开始标签和结束标签是同一个标签时/写在后面，表示单标签）5.<p>...</p>：表示段落标签（自动换行，且间距变大）6.<img src="https://tazarkount.com/read/...">：插入图片（路径是于当前html同文件的存放图片文件名\图片名字）该图片大小 在后面加 width="..."height="..."(宽、高)alt:图片的提示7.路径问题：相对路径（如上）；绝对路径：就是它的路径8.<h1>...</h1>:最多六个标题9.列表-ol:有序列表type:显示类型：A,a,1,I,i（默认1）start:从多少开始-ul:无序列表type：dis,circle,square10.字体设置：<u></u>:下划线<b></b>：加粗<i></i>?：斜体11.下标：sub上标：sup12.<span>...</span>：可以对其中的字进行特殊的修饰13.超链接:<a></a>href:链接的路径target：_self本窗口 _blank在一个新窗口打开 _parent在父窗口打开 _top在顶层窗口打开14.<div>...</div>:层(先了解)-->

html实体

文章插图
代码实例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--字符集的设置--><title>这是我的第一个网页</title></head><body> hello world!<br/>你好，世界<p>这里是一个段落</p><p>这里是第二个个段落</p><img src="https://tazarkount.com/read/photo/太原市徽.jpg" width="80"height="73" alt="这是一张图片"/> <h1>标题一</h1> 武林高手排行榜<ol type = "I" start="3"><li>扫地僧</li><li>萧远山</li><li>慕容复</li><li>虚竹</li><li>阿紫</li></ol>武林大会人员名单<ul type="square"><li>乔峰</li><li>阿朱</li><li>马夫人</li><li>白世镜</li></ul><u>你</u>喜欢吃<b>包子</b>还是<i>饺子</i>?<br>氧气化学是H<sub>2</sub>O<br>X的平方是X<sup>2</sup><br><span>特殊修饰...</span><a href="http://www.baidu.com" target="_blank">百度一下</a></body></html>

代码效果

文章插图
html的table（表格）标签基本标签

<!--17.表格：table一个表格<table></table>行tr列td(th:表头)一些属性（已经淘汰）border：表格边框的设置width：表格宽度cellspacing:单元格间距cellpadding：单元格填充tr中的属性 ：align => left/right/center(左对齐，右对齐，居中)rowspan:行合并colspan:列合并-->

代码实例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格标签的学习</title></head><body><table border="1" width="600" cellspacing="0" cellpadding="4">表格的设置<tr align="center"><th>姓名</th><th>门派</th><th>成名绝技</th><th>功力值</th></tr><tr align="center"><td>乔峰</td><td>丐帮</td><td>少林长拳</td><td>5000</td></tr><tr align="center"><td>虚竹</td><td>灵鹫宫</td><td>北冥神功</td><td>10000</td></tr><tr align="center"><td>扫地僧</td><td>少林</td><td>七十二项绝技</td><td>未知</td></tr></table>第二个表格<hr><table border="1" width="600" cellspacing="0" cellpadding="4"><tr align="center"><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr align="center"><td>苹果</td><td rowspan="2">5</td>合并列<td>20</td><td>100</td><td><img src="https://tazarkount.com/read/photo/R-C.jpg" width="24" height="24"></td>添加图片</tr><tr align="center"><td>菠萝</td><td>15</td><td>60</td><td><img src="https://tazarkount.com/read/photo/R-C.jpg" width="24" height="24"></td></tr><tr align="center"><td>西瓜</td><td>3</td><td>30</td><td>120</td><td><img src="https://tazarkount.com/read/photo/R-C.jpg" width="24" height="24"></td></tr><tr align="center"><td>总计</td><td colspan="4">280</td>合并行</tr></table></body></html>

代码效果

文章插图
html的表单标签表单：是一个容器，承载要发送给服务器的数据
文本框输入的内容就是value的值
基本标签

<!--18.表单form19.<input type="text"/>:表示文本框，其中name属性是必须要写的，否则这个文本框的数据是不会发送给服务器的<input type="password">:表示密码框<input type="radio">：表示单选按钮，name属性值保持一直（保证互斥），checked默认选项<input type="checkbox">：表示复选框，name属性建议保持一致（服务器获取的是一个数组）select：表示下拉列表，每一个选项是option，value是属性发送给服务器的值，selected是默认选项textarea：表示多行文本框，value值就是开始结束标签之间的内容<input type="submit" value="https://tazarkount.com/read/..."/>:表示提交按钮<input type="reset" value="https://tazarkount.com/read/..."/>:表示重置按钮<input type="button" value="https://tazarkount.com/read/..."/>:表示普通按钮-->

代码实例

<!--Demo03的代码--><!DOCTYPE html><html lang="en"><!--表单--><head><meta charset="UTF-8"><title>表单标签的学习</title></head><body><form action="Demo04.html" method="post">昵称：<input type="text" name="nickName"/><br>密码：<input type="password" name="Pwd"/><br>性别：<input type="radio" name="gender" value="https://tazarkount.com/read/male"/>男<input type="radio" name="gender" value="https://tazarkount.com/read/female" checked/>女<br>爱好：<input type="checkbox" name="hobby" value="https://tazarkount.com/read/basketball"/>篮球<input type="checkbox" name="hobby" value="https://tazarkount.com/read/football"/>足球<input type="checkbox" name="hobby" value="https://tazarkount.com/read/earth"/>地球<br>星座：<select name="star"><option value="https://tazarkount.com/read/白羊">白羊座</option><option value="https://tazarkount.com/read/金牛" selected>金牛座</option><option value="https://tazarkount.com/read/双子">双子座</option><option value="https://tazarkount.com/read/天蝎">天蝎座</option><option value="https://tazarkount.com/read/天秤">天秤座</option><option value="https://tazarkount.com/read/射手">射手座</option><option value="https://tazarkount.com/read/双鱼">双鱼座</option><option value="https://tazarkount.com/read/摩羯">摩羯座</option><option value="https://tazarkount.com/read/巨蟹">巨蟹座</option><option value="https://tazarkount.com/read/水瓶">水瓶座</option><option value="https://tazarkount.com/read/狮子">狮子座</option><option value="https://tazarkount.com/read/处女">处女座</option></select><br>备注：<textarea name="remark" rows="4" cols="40"></textarea><br><input type="submit" value="https://tazarkount.com/read/注 册"/><input type="reset" value="https://tazarkount.com/read/重 置"/><input type="button" value="https://tazarkount.com/read/普通按钮"/></form></body></html>

<!--Demo04的代码--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单标签的学习</title></head><body><h1><font color="red">注册成功</font></h1></body></html>

代码效果

文章插图

文章插图
html-frameset-iframe标签（已淘汰）frameset标签frameset：无body标签

<!--20.frameset:表示页面框架，已经淘汰，只了解，不用掌握frame：表示框架中具体页面的应用-->

文章插图
代码实例

<!DOCTYPE html><html lang="en"><!--frameset--><head><meta charset="UTF-8"><title>Title</title></head><frameset rows="20%,*" frameborder="no">frameborder="no"：去边框<frame src="https://tazarkount.com/read/frames/top.html"/><frameset cols="15%,*",><frame src="https://tazarkount.com/read/frames/left.html"/><frameset rows="80%",*><frame src="https://tazarkount.com/read/frames/main.html"/></frameset></frameset></frameset></html>

代码效果

文章插图
iframe标签代码实例：

<!DOCTYPE html><html lang="en"><!--iframe--><head><meta charset="UTF-8"><title>iframe的测试</title></head><body>这是Demo06页面的内容<iframe src="https://tazarkount.com/read/frames/top.html"/></body></html>

代码效果：

文章插图
小总结：【JavaWeb-html的基础】

<!--总结：1.html是解释型的标记语言：不区分大小写2.html，head，tilt，mete，body，br，p，hr，div，table，form，u，i，b，sup，sub，&nbsp;，span，ul，ol，li，tr，th，td，h1-h6，input，select，textarea，img2-1.html，head，tilt，mete，body，br，ul，ol，h1-h6，a，img，p，&nbsp;，div，span2-2.table，tr，th，td2-3.form(action="",method="post")，input type=”text,password,radio,checked,submit,button,reset“，select，textarea...-->