html的操作思想：使用标签把要操作的数据包起来，通过修改标签的属性值来实现标签内数据样式的变化
1、标题标签：<h1></h1> ..........<h6></h6>大小依次变小，同时会自动换行
<h1>这是一个标题</h1>
<h6>This is tile</h6>
2、水平线标签：<hr/> 属性：size 水平线的粗细（范围1-7） color：颜色
<hr size="6" color="blue"/>
3、特殊字符： 需要对特殊字符进行转义 < :< > :> 空格: &： &； 
双引号“ ："
<h tml>:This is a tile
4、列表标签： 无序列表： <dl> </dl>:表示列表的范围 在dl内部<dt></dt>：上层内容 <dd></dd>：下次内容
<dl>
<dt>目录</dt>
<dd>标题1</dd>
<dd>标题2</dd>
<dd>标题3</dd>
<dd>标题4</dd>
</dl>
有序列表：<ol></ol>：有序列表的范围 属性 type ：设置排序方式：1（默认） a i 在ol标签中<li>具体内容</li>
<ol type="1">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ol>
<ol type="a">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ol>
<ol type="i">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ol>
特殊效果:<ul></ul>：表示无序列表范围 属性 ：type：空心圆（circle）、实心圆（disc）默认、实心方块（square） 在ul中 <li></li>
<ul type="">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<ul type="circle">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
5、图像标签： <img src="图片路径"/> width:图片宽度 height：图片高度 alt：图片上显示的文字，把鼠标移动在图片上，停留片刻显示内容（有些浏览器不支持）
<img alt="这是一个自拍" src="Image\28.png" width="200" height="200">
6、路径：
绝对路径：总路径
相对路径：一个文件相当于另外一个文件的位置
三种格式：
html文件和图片在一个路径下，可以直接写文件名称：28.png
图片在html的下层目录：Image\28.png
图片在html所在目录的上层目录： ../28.png
7、超链接标签：
链接资源： <a href="链接到资源的路径”> 显示在页面上的内容 target=设置打开的方式，默认是在当前页面打开（self）（blank：在一个新窗口打开） </a> 当超链接不需要链接到任何地址时，在href中加“#”
<a href="百度一下，你就知道.html" target="blank">这是一个超链接 </a>
定位资源：定义一个位置 <a name="top">顶部</a> 回到这个位置： <a href="#top">回到顶部</a> 引入一个标签pre: 原样输出
8、表格标签：<table></table> :表示表格范围 border:表格线 bordercolor="表格线的颜色" cellspacing="单元格直接的距离" width: 表格的宽度 height:表格的高度 表格的标题 <caption><./caption>
行：在table中<tr></tr>设置对齐方式align : left cencer right
列： 在tr中<td></td> 设置对齐方式align : left cencer right 使用th也可以表示单元格（居中 加粗）
<table border="1" bordercolor="red" cellspacing="0" width="200" height="150">
<caption>人员信息</caption>
<tr align="center">
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr align="center">
<td>00</td>
<td>张三</td>
<td>15</td>
</tr>
<tr align="center">
<td>01</td>
<td>李四</td>
<td>16</td>
</tr>
</table>
9、合并单元格： rowspan：跨行 colspan ： 跨列
<table border="1" bordercolor="red" cellspacing="0" width="200" height="150">
<tr align="center" >
<td colspan="3">人员信息</td>
</tr>
<tr align="center">
<td>00</td>
<td>张三</td>
<td>15</td>
</tr>
<tr align="center">
<td>01</td>
<td>李四</td>
<td>16</td>
</tr>
</table>
<table border="1" bordercolor="red" cellspacing="0" width="200" height="150">
<tr align="center" >
<td>id</td>
<td>name</td>
<td rowspan="3">16</td>
</tr>
<tr align="center">
<td>00</td>
<td>张三</td>
</tr>
<tr align="center">
<td>01</td>
<td>李四</td>
</tr>
</table>
10、表单标签
<form></form>：定义一个表单的范围 属性：action （提交内容的暂存位置） method：（表单提交方式）get、post get和post的区别（1、get请求地址栏会携带提交的数据，post不会携带（暂存在请求体中）；2、get请求安全级别低，post较高；3、get请求数据大小的限制，post没有限制） enctype：（一般请求下不需要这个属性，主要哟用于文件上传）
输入项：（在输入项里面需要一个name属性）
普通输入项 ：<input type="text"/>
密码输入项：<input type="password"?>
单选输入项：<input type="radio"/> 在里面的需要属性 name name属性必须要相同 必须有一个value值
默认选项：checked="checked"
复选输入项：<input type="checkbox"/> 在里面的需要属性 name name属性必须要相同 必须有一个value值
默认选项：checked="checked"
文件输入项：在后面上传时候用到） <input type="file"/>
下拉输入项：<select name="birth">
<option value="0">请选择</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select>
默认选项：selected="selected"
文本域：<textarea cols="10" rows="5"></textarea><br/>
隐藏项：（不会显示在页面上，但是存在于html代码里面) <input type="hidden" /><br/>
提交按钮：<input type="submit" value="注册" /> ？输入项name的值=输入的值&
使用图片提交： <input type="image" src="QQ截图20190224203015.png"/>
<body>
<form action="hello.html" method="post">
姓名: <input type="text" name="name" /><br/>
密码: <input type="password" name="pwd"/><br/>
性别: <input type="radio" name="sex" value="nv"/>女<input type="radio" name="sex" value="nan"/>男<br/>
爱好: <input type="checkbox" name="love" value="lan" />篮球<input type="checkbox" name="love" value="pai"/>排球 <input type="checkbox" name="love" value="zu"/>足球<br/>
文件: <input type="file"/ name="birth"><br/>
生日: <select type="bitrh">1""!1!!!!!
<option value="0">请选择</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select><br/>
自我描述: <textarea cols="10" rows="5"></textarea><br/>
隐藏项: <input type="hidden" /><br/>
<input type="submit" value="注册" />
</form>
</body>
file:///C:/Users/邵航/Documents/hello.html?name=aasasa&pwd=asas&sex=nv&love=lan&love=pai&love=zu&birth=
当method=“post”后
重置按钮：（回到输入项的初始状态） <input type="reset" value="重新注册"/>
普通按钮：（与js一起使用） <input type="button" value="普通按钮"/>
11、案例：使用表单标签实现注册页面
<body>
<form action="hello.html" method="post">
<h3> 免费开通人人网账号</h3>
<table border="0" cellspacing="0" width="100%">
<tr>
<td align="right">注册邮箱:</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td> </td>
<td>你还可以使用<a href="#">账号</a>注册或者<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码:</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td align="right">真实姓名:</td>
<td><input type="text" name="realname"/></td>
</tr>
<tr>
<td align="right">性别:</td>
<td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex" />女</td>
</tr>
<tr>
<td align="right">生日:</td>
<td>
<select>
<option value="1995">1995</option>
<option value="1996" selected="selected">1996</option>
<option value="1998">1998</option>
</select>年
<select>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
<option value="7">7</option>
</select>月
<select>
<option value="27">27</option>
<option value="28" selected="selected">28</option>
<option value="30">30</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我现在:</td>
<td>
<select>
<option value="study">正在上学</option>
<option value="work" selected="selected">正在工作</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><img src="QQ截图20190224212156.png"><a href="#">看不清换一张?</a></td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><input type="text" name="num"/></td>
</tr>
<tr>
<td> </td>
<td><input type="image" src="QQ截图20190224212207.png"/></td>
</tr>
</table>
</form>
</body>
12、html中的其他的常用标签的使用
b：加粗
s：删除线
u：下划线
i：斜体
pre：原样输出
sub：下标
sup：上标
p：段落标签 比br标签多一行
<body>
<b>该系统是根据东方本草公司业务流程定制开发的，</b>
<s>包括在线商城、会员管理、订单处理、</s>
<u>分销管理、财务报表等功能模块。</u>
<i>系统除具备线上线下功能外，</i>
<pre>重点解决会员管理及财务核算，</pre>
1<sub>200</sub><br/>
2<sup><300/sup>
<p>公司能根据实际情况调整各分配比例。</p>
<span>
<div>系统规划：对系统的划分，为系统今后的架构扩展性提供参考</div><div>需求核实：与客户确认该文档描述的场景和功能说明。</div>
制做UML系统用例和系统分析。核实非功能性需求
</span>
工作量估算：评估工作量。
</body>（css中使用）
div：自动换行
span：在一行显示
13、html的头标签的使用
在head里面的就是头标签
tile标签：表示在标签上显示的内容
<meta>标签：设置页面的一些内容
<meta name="keywords" content="马云，阿里巴巴，支付宝“/>
<meta http-equiv="refresh" content="3;url=注册页面.html"/>：三秒后跳转（用于注册页面）
base标签：设置超链接的基本设置
可以统一设置超链接的打开方式 <base target="blank"/>
link标签：引入外部文件（使用link标签引入css）
14、框架标签的使用
<frameset> rows:按照行进行划分（<frameset rows="80,*"> 、cols：按照列进行划分(<frameset cols="80,*">)
<frame> 具体显示的页面 (<frame name="top" src="top.html">)
注: 使用框架标签时，不能写在body里面。，使用了框架标签，需要把body去掉
如果在左边的页面超链接，想让内容显示在右边的页面中：
设置超链接里面的属性，target值设置成名字
<a href="other.html" target="right">图片</a>
#框架标签.html
<frameset rows="80,*"> //把页面划分为上下两部分
<frame name="top" src="top.html"> //上页面
<frameset cols="80,*"> //把下面部分划分为左右两部分
<frame name="left" src="bottom.html"> //左边的页面
<frame name="right" src="#"> //右边的页面
</frameset>
</frameset>#top.html
<body>
<img src="QQ截图20190225190622.png" width="100%" height="100%">
</body>#bottom.html
<body>
<h2><p><a href="other.html" target="right">图片</a></p></h2>
<h2><p><a href="表单.html" target="right">登录</a></p></h2>
<h2><p><a href="hello.html" target="right">欢迎</a></p></h2>
<h2><p><a href="注册页面.html" target="right">注册</a></p></h2>
</body> 
扫一扫
2085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
