Web从入门到放弃-HTML总结(四)

为啥会有这个总结呢，原因就是上一篇可能会有遗漏的，所以做一个总结，算是总结+补漏吧！！

一、HTML基本标签：

水平分割线： 
<hr width="宽度" size="粗细" align="left、center,right"  noshade="noshade-变成实线" color="颜色"/>
超链接
<a href="#">当前本页面跳转--回到页面最上方</a><br />
<a href="##">当前本页面跳转--保持在原本的位置上(使用最多)</a><br />
<a href="javascript:;">当前本页面跳转--保持在原本的位置上</a><br />
    1.意味着脚本代码也是可以放在行间的----后期详解
    2.在传统JSP开发中过程中，a标签想要实现本页面跳转时使用#会报错，只能使用href="javascript:;"
说明：不加href属性时跟普通标签没有什么区别，所以实际开发时一定要带上href属性
target：属性定义超链接打开的方式 ，
    _self---当前页面打开，默认
    _blank---新窗口打开
    _parent:在父框架集中打开被链接文档
    _top:在整个窗口中打开被链接文档
如果 href 里面地址是一个文件或者压缩包，会下载这个文件
    <a href="img.zip"></a>
锚点链接：点击链接，可以快速定位到页面中的某个位置
    1.在链接文本的href属性中，设置属性值为 #名字
    2.找到目标位置标签，里面添加一个 id属性=刚才的名字

二、列表的使用：在实际开发时大多情况下是用来布局的，在网页上随处可见，使用率很高

1.有序列表
    <ol type="修改列表的修饰符，一般不直接使用，通过css修改">----有序列表模块
        <li type="只是修改修饰符，不改变顺序">列表项</li>
    </ol>
2.无序列表
    <ul type="disc-黑心圆点，circle-空心圆，square-实心矩形，none-去除">----无序列表模块
        <li type="只是修改修饰符，不改变顺序">列表项</li>
    </ul>
3.自定义列表
    <dl>----自定义列表模块
        <dt></dt>---列表描述(标题，分类)
        <dd></dd>---列表详情
    </dl>  

三、表格(table)：很重要(web1.0的时候，布局就是通过表格来排版的，web2.0时代排版使用DIV+CSS)，但也不重要(现在除了当成表格来使用以外，没别的用处)

<table width="定义整个表格(table)的宽度" height="定义整个表格(table)的高度" border="添加边框" 
    cellpadding="文本到单元格边框的内边距" cellspacing="单元格之间以及单元格到表格之间的间距" 
    bgcolor="整个表格添加背景颜色" background="整个表格添加背景图片">
    <caption>定义整个表格的标题</caption>
    <thead>--表个的头部分(只能有一个)
        <th>ID</th>--定义列标题---每一列对应的标题(样式：黑体加粗居中显示，标题单元格)
    </thead>
    <tbody>--定义表格的正文部分，一个表格里面可以有多个tbody
        <tr>--定义表格的行，一组tr代表一行
            <td>1</td>--定义普通的单元格
        </tr>
    </tbody>
    <tfoot>--定义表格的结束部分，实际开发不怎么用
        <tr>
            <td>1</td>
        </tr>
    </tfoot>
</table>
说明：实际开发时不会写tfoot模块，偶尔也会省略tbody,如果省略不写浏览器解析时会自动给添加上
行和单元格的属性：
    <tr bgcolor="整个行背景颜色" background="整个行背景图片">
        <td>1</td>
        <td>Onion1</td>
        <td bgcolor="整个单元格背景颜色" background="整个单元格景图片">17</td>
    </tr>
    <tr align="left,center,right---整行水平方向的显示位置">
        <td align="left,center,right---单元格水平方向的显示位置">2</td>
        <td>Onion2</td>
        <td>17</td>
    </tr>
    <tr valign="top,middle,bottom---整行竖直方向显示位置">
        <td valign="top,middle,bottom---单元格竖直方向显示位置">3</td>
        <td>Onion3</td>
        <td>17</td>
    </tr>
    <tr width="设置行的宽度(就相当于设置了整个表格的宽度)" height="设置行的高度(所有单元格)">
        <td width="设置单元格的宽度" height="设置单元格的高度(所有单元格)">3</td>
        <td>Onion3</td>
        <td>17</td>
    </tr>
表格合并单元格：
    <tr>
        <td rowspan="3">1</td>
        rowspan：纵向合并单元格(跨行合并)，合并完成之后需要删除多余的单元格
            删除个数 = 合并数-1
        <td>Onion</td>
        <td>17</td>
    </tr>
    <tr>
        <td colspan="3" >1</td>
        colspan：横向合并单元格(同行合并)，合并完成之后需要删除多余的单元格
            删除个数 = 合并数-1
    </tr>

四、表单是开发中很重要的一组标签，因为表单是唯一一个能获取用户信息的组件

<form action="URL--提交数据的地方(一般时服务器或者接口)" method="提交数据的方式(GET--默认/POST)">--定义表单组件
    <fieldset>--定义表单的边框，没有width属性，所以无法直接通过HTML修改宽高(很少使用)
        <legend align="left、center、right">定义在表单边框上的标题信息</legend>
        <label for="user">账号：</label>--获取文本框的焦点，前提是for的属性值必须跟需要获取焦点的文本框的id值一致
        <input />--用来引入表单组件
        <input type="引用组件" id="唯一标识" name="后期往服务器端传数据时会使用" value="真正放数据的地方，往服务器端提交数据的属性" 
        placeholder="提示信息" maxlength="定义输入的最大字符个数" maxlength="定义输入的最小字符个数"/>
            type可引用的属性(组件)有：
                text---普通文本框
                password---密码框
                radio---单选框
                    在单选框中name属性很关键，起到分组的作用，同一个name属性值视为同一个组，同一个组内只能选择一个
                checkbox---复选框(多选框)
                    checked="checked"属性可以实现默认选中，适用于radio和checkbox,是一个布尔类型(true、false)
                button---普通按钮
                submit---提交按钮(默认有提交功能)
                reset---重置按钮(可以重置页面上表单输入的数据)
                file---文件上传(实现上传功能需借助JS，本地存储/服务)
                    multiple="multiple"--可多选
                hidden--隐藏(相当于一个占位符)，在实际开发时可能当下不需要文本框之类的饿，进行某个操作之后需要显示一个文本框用来输入数据，则通过hidden来占个位置
        <button>普通按钮标签，有默认提交的功能</button>
        <select>---下拉列表
            <option selected="selected" value="" multiple="multiple">下拉列表项</option>
                selected="selected"--实现默认选中的操作,是一个布尔类型(true、false)
                multiple="multiple"--可多选
        </select>
        <textarea rows="20--定义可输入的行数" cols="10---定义可输入的列数">文本域，可以输入很多数据内容</textarea>
    </fieldset>
</form>
    disabled----禁用
    <input type="text" name="" id="" disabled>
    <input type="text" name="" id="" disabled="true">
    <input type="text" name="" id="" disabled="disabled">

    readonly---只读
    <input type="text" name="" id="" readonly placeholder="文本框">
    <input type="text" name="" id="" readonly="true" placeholder="文本框">
    <input type="text" name="" id="" readonly="readonly" placeholder="文本框">

五、内嵌框架(嵌入框架)：

 <a href="跳转的目标路径" target="content--关联iframe的name属性">首页</a>
 <iframe width="800px" height="500px" src="默认框架中当前显示的页面" name="content--使用该属性与a标签关联"></iframe>

六、HTML(4)常用标签总结：

<html></html>-----定义整个网页
    <head></head>-----定义网页头部信息
    <meta />-----定义头部信息，编码格式，网页信息，网页关键字，作者信息等
    <title></title>----定义网页的标题
    <body></body>----网页的正文部分
    <hn></hn>----网页正文的标题(n=1~6)
    <p></p>----段落标签
    <span></span>----文本选择
    <br />----换行
    <hr />----水平分割线
    <strong></strong>----加粗
    <em></em>-----倾斜
    <img />----嵌入图片
    <a></a>----超链接
    <ul></ul>----无序列表块
    <ol></ol>-----有序列表块
    <li></li>----列表项(有序，无序)
    <dl></dl>----自定义列表块
    <dt></dt>----自定义列表描述
    <dd></dd>-----自定义列表详情
    <table></table>----定义表格块
    <thead></thead>----定义表头
    <th></th>-----定义列标题
    <tbody></tbody>----定义表体(表格数据部分)
    <tr></tr>----行
    <td></td>----单元格
    <tfoot></tfoot>---定义表尾
    <form></form>----定义表单模块
    <fieldset></fieldset>----定义表单的边框
    <legend></legend>-----定义表单的标题
    <input />----引用表单组件
    <select></select>-----定义下拉块
    <option></option>-----定义下拉项
    <textarea></textarea>-----定义文本域
    <button></button>-----定义普通按钮
    <iframe></iframe>-----内嵌框架
    <sup></sup>---上标
    <sub></sub>----下标
    <pre></pre>----预保留(会保留代码中的所有空格，换行等)
    <div></div>---分块标签(没什么实在的意义，但很重要，简历当中一般组合：DIV+CSS布局)

说明：要求你们对HTML的掌握程度，必须是随意默写，看到网页布局能潜意识知道是什么标签就可以了，对于HTML掌握这些标签太够了，毫无难度系数哦，重点在于记忆，剩下HTML5新增的标签，下下个文章在见吧！

 陆续更新中，如果有帮助到您，谢谢点赞，谢谢收藏，谢谢关注，谢谢支持，总之就是谢谢啦各位...........