欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javaweb第一天 HTML

程序员文章站 2022-03-26 21:46:46
...

一，HTML语言介绍

（一），HTML是超文本标记语言
**
（二），HtML语言的特点**
1，HTML不需要编译，浏览器可以直接解析
2，HTML的后缀名为.html 或者.htm
3，分为<>head>和< body> 两大部分
4，标签不区分大小写，但是要求用小写
5，大部分标签是双标签成对出现，又有个别的单标签

二，HTML常见的标签

(一)，标题标签< h1 >****，双标签
1，标题标签从< h1 >内容体< /h1>依次到< h6 >内容体< /h6>；
2，< h1 >定义的标题最大，< h6 >定义的标题最小

(二)，标题标签< hr/ >****，单标签
< hr >标签在页面中创建一条水平的分割线，用于定义主题的变化，属性size，noshade
size：定义水平线的高度
noshade：没有阴影，表示纯色

(三)，字体标签< font >****，双标签
< font >字体< /font >
用于设置字体的大小，颜色等
属性size，color

(四)，格式标签（字体标签）****，双标签
字体加粗：< b > < /b >< strong > < /strong >
字体偏斜：< i > < /i >和< em > < /em >

(五)，段落标签< p>****，双标签
< p >段落字体< /p >
< br >是换行标签，是单标签
空格：&nbsp；
< ins >< /ins >下划线标签
< del >< /del >删除线标签

(六)，图片标签< img>****，单标签
< img src=“图片的相对路径或者绝对路径”，title=“鼠标指向时提示” ，alt=“图片加载失败时的显示文字”>

三，HTML列表功能

(一)，< ul >和< ol >标签
1，< ol > 有序标签 子标签是< li >

<body>
<ol>
    <li>潇洒走一回</li>
    <li>偏偏喜欢你</li>
</ol>
</body>

2，< ul > 无序标签 子标签是< li >

<body>
<ul>
    <li>潇洒走一回</li>
    <li>偏偏喜欢你</li>
</ul>
</body>

(二)，超链接标签< a >

<body>
    <a href="www.baidu.com" target="_blank">链接的名字</a>
</body>

href:访问目标的url（目标的链接）
target：_blank 在新页面打开
_self 在本页面打开

四，表格标签

<!--表格-->
 	 <table border="1" bgcolor="red"  width="800px" align="center" cellspacing="0px" cellpadding="0px">
  
   <tr>
    	 <td align="center">第一行的第一个单元格</td>
         <td  align="center">第一行的第二个单元格</td>
   </tr>
       <tr>
          	 <td  align="center">第二行的第一个单元格</td>
            <td  align="center">第二行的第二个单元格</td>
       </tr>

  </table>

表格的属性
border：表格边框的宽度
width：表格的宽度
cellppadding：表格边缘与内容之间的空白
cellspacing：单元格之间的空白
bgcolor：表格的背景颜色
colspan：列合并 写在li标签中
rowspan：行合并 写在li标签中
align：单元格内容对齐方式，left，right，center
表格第行用< th>代替< td > 字体加粗默认居中
表格的标题标签：< caption>标题内容< /caption>
表格的结构标签
< thead >< /thead >表头
< tbody>< /tbody >表身
< tfoot>< /tfoot >表尾

合并案例

<table border="1">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>

    <tr>
        <td rowspan="2">张三</td>
        <td>数学</td>
        <td>98</td>
    </tr>

    <tr>
        <td>英语</td>
        <td>90</td>
    </tr>

    <tr>
        <td rowspan="2">李四</td>
        <td>数学</td>
        <td>95</td>
    </tr>

    <tr>
        <td>英语</td>
        <td>92</td>
    </tr>


</table>

代码实现结果
javaweb第一天 HTML

五，音视频标签和框架标签

**(一)，音频标签 **

<!--表示音频的标签-->
 <audio  controls  >
     <source  src="video/2.mp3">
 </audio>

**(二)，视屏频标签 **

 <video controls  height="200px" loop>
     <source src="video/1.mp4"  ></source>
 </video>

属性
control：显示属性
loop：循环播放
< source src=“播放的地址” >

**(三)，框架标签 **
案例展示
主界面代码

    <frameset rows="20%,*">
       <!--上面部分-->
        <frame src="top.html">
        <!--下面部分,嵌套2个-->
        <frameset cols="30%,*">
            <frame src="left.html">
             <frame src="center.html" name="aa">
        </frameset>

    </frameset>

跳转界面代码忽略

上部分代码

<body>
    <img src="img/6.jpg" height="100%" width="100%">
</body>

下部分的左部分代码

<body>
    <ul style="list-style-type: none; margin: 0px;  padding: 0px" >
        <li><a href="a.html" target="aa">商品管理</a></li>
        <li><a href="b.html" target="aa">订单管理</a></li>
    </ul>

</body>

下部分的右部分代码忽略

实现界面
点击左边的链接，在右边的窗口显示新的界面
javaweb第一天 HTML

六，单词

form：表单
action:行动(提交的路径)
method：方法(提交的方式)
input：输入
type：类型
text：文本(文本输入项)
password：密码
radio：单选按钮
checkbox：复选框
file：文件(文件上传项)
hidden：隐藏字段
reset：重置(重置按钮)
button：按钮(普通按钮)
name：名称(元素名称)
value：值(输入项的内容)
size：大小(可以是文字字体的大小，也可以是输入框的宽度)
checked：被选中
readonly：只读
disabled：不可用的
maxlength：最大长度(输入框可以输入的最大长度)
select：选择(下拉列表项)
option：条目(下拉列表项)
textarea：区域(文本输入域)
submit：提交(提交按钮)
selected：选择(下拉列表被选中)

相关标签： 学习 入门

上一篇： fastjson对json的处理

下一篇： Java基础知识章节梳理（二十）

推荐阅读