HTML基础概述

1.html的简介（HyperText Markup Language:超文本标记语言，网页语言）
   *超文本：超出文本的范畴，使用HTML可以轻松实现这样操作
   *标记：HTML所有的操作都是通过标记来实现的，标记就是标签，<标签名称>
   *网页语言：
   *第一个html程序。
       -创建一个java文件.java
           **先编译，然后再执行
       -html后缀是.html .htm
           **直接通过浏览器就可以执行
           代码：<font size="5" color="red">这是我的第一个html程序！</font>

   *html的规范：
       1、一个html文件开始标签和结束的标签
           1、-定义一个Java方法{}
           -<html> 开始 </html> 结束

       2、html包含两部分内容
           (1)<head> 设置相关信息 </head>
           (2)<body> 显示在界面上的内容</body>
       3、html的标签有开视标签，也有结束标签
           标签成对出现
       4、HTML的代码不区分大小写
       5、有些标签没有结束标签
           -比如换行 <br/> 分割线<hr/>
   *html操作思想(***)
       网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签吧操作的数据封装起来
       通过修改标签的属性值实现标签内数据样式的变化。
       一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以是西安容器内数据样式的变化



HTML中常用的标签：
2、文字标签和注释标签
   *文字标签：修改文字的样式
       -<font></font>
       -属性：
           *size:文字的大小取值范围1-7，超出了7，默认还是7
           *color:文字颜色
               -两种表示方式：
                   **英文单词：red green blue black white yellow gray...
                   **使用16进制的数表示 #ffffff :RGB   三颜色调试出来的
                       -通过工具实现不同的颜色


   *注释标签：
       -Java注释集中？三种
       -HTML的注释：界面不会显示，但是源代码会出现

3、标题标签、水平线标签和特殊字符
   *标题标签：
       -<h1></h1> .....<h6></h6>
       -从h1到h6，到校依次变小，同时会自动换行
   *水平线标签
       -<hr/>
       -属性：
           **size：水平线的粗细取值范围1-7
           **color：水平线的颜色
       -代码：
           <hr size="6" color="blue"/>
   *特殊字符：
       -想要再页面上显示这样的内容 <html>:是网页的开始！
       -需要对特殊字符进行转义
           *< <
           *>   >
           *空格  
           *&   &
4、列表标签
   -比如现在显示这样的效果
       传智播客
           财务部
           学工部
           人事部
   ** <dl></dl>:表示列表的范围
       ** 在dl里面 <dt></dt>:上层内容
       ** 在dl里面 <dd></dd>:下层内容
   -代码：
       <dl>
           <dt>传智播客</dt>
           <dd>财务部</dd>
       </dl>
   -想要在页面上显示这样的效果
       1，财务部
       2，学工部

       a.财务部
       b.学工部

   **<ol></ol> :有序列表的范围
       -属性type:设置排序方式 1(缺省) a i
       **在ol标签里边<li>具体内容</li>
       <ol type="a">
           <li>财务部</li>
       </ol>
   -想要在页面上显示这样的效果
       特殊符号(方框)财务部
       特殊符号(方框)学工部
       **<ul></ul>:表示无需列表的范围
           属性：type：空心有circle、实心圆disc、实心方框square，默认disc
           在ul里边<li></li>
       -代码;
           <ul>
           <li>财务部</li>
           </ul>


5、图像标签(*******)
   *<img src="图片的路径">
       -src:图片的路径
       -width：图像的宽度
       -height：图像的高度
       -alt:图片上显示的文字，鼠标移动到图片上，停留片刻显示内容
           **有些浏览器下不显示(没有效果)
6、路径的介绍：
   *分类:两类：
   **绝对路径
       -c:\User\
       -http
   **相对路径
       -一个文件相对于另外一个文件的位置
       -三种：
           **html文件和图片在一个路径下边，可以直接写文件名称
           **在html中，使用相对路径下的
7、超链接标签：
   链接资源
       -<a href="链接到资源的路径">显示在界面上的内容</a>
           **href:链接的资源的地址
           **target:设置打开方式，默认是当前页打开
               -- _blank:在新窗口打开
               --_self:在当前页打开
       -当超链接不需要到任何的地址，在href里面加#

   定位资源符
       **如果想要定位资源：先定义一个位置
           <a name="top">顶部</a>
       **回到这个位置
           <a href="#top">回到顶部</a>
       **引入一个标签 pre：原样输出


8、表格标签(*****重要的标签*****)
   *可以对数据进行格式化，使数据显示更加清晰

   *<table></table>:表示表格的范围
       -border:表格线
       -bordercolor:表格显得颜色
       -cellspacing:单元格之间的距离
       -width：表格的宽度
       -height：表格的高度
   **在table里面<tr></tr>
       -设置对其方式align:left center right
       ***在tr里面<td></td>
           -设置对其方式align:left center right
       ***使用th也可以表示单元格
           -表示可以实现剧中和加粗

   *代码：
       <table border='1' bordercolor="blur" cellspacing="0" width="200" height="150">
           <tr>
               <td></td>
           </tr>
       </table>
   *画图分析表格的写法：
       -首先定义一个表格的范围使用table
           -定义一个行使用tr
           -定义一个单元格使用 td
   **操作技巧：
       -首先数有多少行，数每行里面有多少哥单元格

   **表格的标题：
       <capation> </capation>

   **合并单元格
       -rowspan:跨行合并
       -colspan:跨列合并

10、表单标签(*****必须掌握)
   *可以提交数据到开心网的服务器，这个过程可以使用表单标签实现

   *<form></form>:定义一个表单的范围
       -属性
           **action :提交到地址，默认提交到当前页面
           **method: 表单提交方式
               -常用有两种： get 和post 默认的是get

           **面试题目：get 和post区别：
               1.get请求地址栏携带提交的数据，post不会携带(请求体里)
               2.get请求安全级别较低，post较高
               3.get请求数据大小的限制。post没有限制

           **enctype：一般请求下不需要这个属性，做文件上传的时候需要设置这个属性

   **输入项：可以输入内容或者选择内容的部分
        -大部分的输入项使用 <input type="输入项的类型"/>
        ******在输入项里边必须有一个name属性

        ***普通输入项：<input type="text"/>
        ***密码输入项：<input type="password"/>
        ***单选输入项：<input type="raido"/>
           -在里面需要属性 name
       —name的属性值必须要相同
       -必须要有一个value值
       -默认选项参数 checked="checked"

        ***复选输入项：<input type="checkbox"/>
           -在里面需要属性 name
       —name的属性值必须要相同
       -必须要有一个value值
       -默认选项参数 selected="selected"

        ***文件输入项(在后面上传时候用到)
           -<input type="file"/>
        ***下拉输入项：(不是在input标签里边的)
           <select name="birth">
           <option value="1991">1991</option>
           <option value="1996">1996</option>
           <option value="1997">1997</option>
       </select>
        ***文本域
       <textarea cols="10" rows="10"></textarea>

        ***隐藏项：存在代码中，不在页面显示
           <input type="hidden"/>

        ***提交按钮
           <input type="submit"/>
           <input type="submit" value="注册"/>


        ***使用图片提交
           <input type="image" src="图片路径"/>

        ***重置按钮
       <input type="reset" value="重置">

        ***普通按钮(和js一起使用)
           <input type="button" value=""/>

11使用表单标签练习


12其他常用标签
   b:加粗
   i:斜体
   u:下划线
   s:删除线
   pre:原样输出标签
   p:段落标签，比br多一行

   sub:下标
   sup:上标

   div:自动换行
   span:显示在一行

13html的头标签的使用
   *html两部分组成head 和body
   **在head里边的标签就是头标签

   ** title:在标签上显示的内容
   ** meta:设置页面的一些相关内容，设置定时跳转
       <meta http-equiv="refresh" content="3;url=hello.html"/>

   **base:设置超链接的基本设置:
       -可以同意设置超链接的打开方式
       <base target="_blank"/>

   **link标签：引入外部文件
       **css:可以使用link标签引入css文件
14、框架标签
   *<frameset>
        -rows:按照行进行划分
           **<frameset rows="80,*"> </frameset>
        -cols:
           **<frameset cols="80,*">
   *<frame>
        -具体显示的页面
           -<frame name="lower_left" src="b.html"> </frame>
   *使用框架标签的时候，不能在body里面，使用了框架标签，需要把body去掉

15、扩展a标签

猜你喜欢