阅读模式:

JavaWeb-html的基础

阅读量:17  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:html的基础html(超文本标记语言),运行在浏览器端的静态解释型语言,JavaWeb基本概述html的基本标签htmlhtml是解释语言,浏览器容错的,可以有错误,编译器会自己解释网页上看到的内容都是写在里面的基本标签<!......

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="...">:插入图片(路径是于当前html同文件的存放图片文件名\图片名字)
                   该图片大小 在后面加 width="..."height="..."(宽、高)
                   alt:图片的提示

7.路径问题:相对路径(如上);绝对路径:就是它的路径

8.<h1>...</h1>:最多六个标题

9.列表
  -ol:有序列表
     type:显示类型:A,a,1,I,i(默认1)
     start:从多少开始
  -ul:无序列表
     type:dis,circle,square

10.字体设置:<u></u>:下划线
           <b></b>:加粗
           <i></i>?:斜体

11.下标:sub  上标:sup

12.<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="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="photo/R-C.jpg" width="24" height="24"></td>         添加图片
        </tr>
        <tr align="center">
            <td>菠萝</td>

            <td>15</td>
            <td>60</td>
            <td><img src="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="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.表单        form
19.<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="..."/>:表示提交按钮

   <input type="reset" value="..."/>:表示重置按钮

   <input type="button" value="..."/>:表示普通按钮
-->

代码实例

<!--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="male"/>男
            <input type="radio" name="gender" value="female" checked/>女<br>
       爱好:<input type="checkbox" name="hobby" value="basketball"/>篮球
            <input type="checkbox" name="hobby" value="football"/>足球
            <input type="checkbox" name="hobby" value="earth"/>地球<br>
       星座:<select name="star">
               <option value="白羊">白羊座</option>
               <option value="金牛" selected>金牛座</option>
               <option value="双子">双子座</option>
               <option value="天蝎">天蝎座</option>
               <option value="天秤">天秤座</option>
               <option value="射手">射手座</option>
               <option value="双鱼">双鱼座</option>
               <option value="摩羯">摩羯座</option>
               <option value="巨蟹">巨蟹座</option>
               <option value="水瓶">水瓶座</option>
               <option value="狮子">狮子座</option>
               <option value="处女">处女座</option>
            </select><br>
       备注:<textarea name="remark" rows="4" cols="40"></textarea><br>
       <input type="submit" value="注 册"/>
       <input type="reset" value="重 置"/>
       <input type="button" value="普通按钮"/>

   </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="frames/top.html"/>
    <frameset cols="15%,*",>
        <frame src="frames/left.html"/>
        <frameset rows="80%",*>
             <frame src="frames/main.html "/>
        </frameset>
    </frameset>
</frameset>
    
</html>

代码效果

iframe标签

<!--
21.iframe:在一个页面嵌入子页面
-->

代码实例:

<!DOCTYPE html>
<html lang="en">
<!--iframe-->
<head>
    <meta charset="UTF-8">
    <title>iframe的测试</title>
</head>
    
<body>
   这是Demo06页面的内容
   <iframe src="frames/top.html"/>
</body>
    
</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,img

2-1.html,head,tilt,mete,body,br,ul,ol,h1-h6,a,img,p,&nbsp;,div,span
2-2.table,tr,th,td
2-3.form(action="",method="post"),input type=”text,password,radio,checked,submit,button,reset“,select,textarea
...

-->
分享到:
相关阅读:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: