天天看点
返回

JavaWeb第一天/12.30

一、HTML标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="java-php-python-c" />
<meta name="description" content="这是一个家做Java开发的软件公司" />
<title>head标签</title>
</head>

<body>
   <marquee behavior="slide" direction="down" scrollamount="">你好 HTML</marquee>
</body>
</html>

二、文本标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本标签</title>
</head>

<body>
  <!--标题标签：h1-h6-->
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
  <!--水平线标签-->
  <hr/>
  <!--换行标签-->
  文本标签：<br/>
  超链接标签
  <br/>
  <!--段落标签：闭合标签 p-->
<p>
第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次第一次
</p>
<p>
第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次第二次
</p>
<!--段落缩进标签：blockquote-->
<blockquote>
解释第二次：解释内容解释内容解释内容解释内容解释内容解释内容
</blockquote>
<!--滚动标签:marquee
    滚动属性：
       behavior：滚动方式：默认交替滚动
       direction：滚动方向：left right up down
       scorllamount：滚动速度，默认6，值越大滚动速度越快
-->
<marquee behavior="slide" direction="right" scrollamount="6">2018年的第一场雪</marquee>
<br/>
<!--上下标的标签（sup上标签，sub下标签）-->
y等于x的平方： y=x<sup>2</sup>  &nbsp; 水的化学方程式：h<sub>2</sub>o
<a name="标记"></a>
<pre>
          凉州词 
              作者
葡萄美酒夜光杯,欲饮琵琶马上催.
醉卧沙场君莫笑,我是流氓我怕谁.
</pre>
<br/>
<!--有序列表： ol  li：列表选项
     ol默认的属性：type：默认类型:数字从1开始
-->
NBA全明星：
   <ol type="1">
       <li>欧文</li>
       <li>詹姆斯</li>
       <li>韦德</li>
   </ol>
<hr/>
<!--无序列表
    ul和li
    ul属性：type：默认实心圆点
-->
学生管理系统：
<ul type="square">
    <li>选课管理</li>
    <li>学生管理</li>
    <li>教学管理</li>
</ul>
<!--块标签和行内标签-->
<div>div</div>
<span>这是一个行内标签</span>
<!--架构标签：公司人员分配：dl dt dd-->
XX公司整体架构：
<dl>
   <dt>技术经理</dt>
     <dd>工程师1号</dd>
     <dd>工程师2号</dd>
     <dd>工程师3号</dd>
   <dt>财务经理</dt>
     <dd>出纳1号</dd>
     <dd>出纳2号</dd>
     <dd>出纳3号</dd>
</dl>
<br/>
<!--居中标签-->
<center>我在中间啦</center>
<!--斜体标签-->
<em>你好，我是斜体啊</em>
<br/>
<!--粗体标签-->
<strong>粗体字体</strong>
<br/>
<center>
<font color="#0033FF" size="+6" face="Tahoma, Geneva, sans-serif">个性字体</font>
</center>
</body>
</html>

三、练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习</title>
</head>

<body>
   <h1>清平乐·年年雪里</h1>
   朝代：<em>宋代</em> &nbsp;&nbsp;作者：<strong>李清照</strong>
   <hr/>
   原文：
   <pre>
年年雪里,常插梅花醉,挼尽梅花无好意,
赢得满衣清泪!
今年海角天涯,萧萧两鬓生华.
看取晚来风势,故应难看梅花.
   </pre>
</body>
</html>

四、超链接标签

超链接标签：<a></a>
       属性：
       href:连接到的资源文件（包含图片文件），也可以连接URL（统一资源定位符号）
       URI：表示互联网协议    URL：(http://)
       target:打开资源文件的方式
          _blank:新建一个窗口打开
          _self:在当前窗口打开
       超链接作用：
          ）可以连接到资源文件或者资源地址
          ）可以作为锚链接使用
          使用锚链接：
            在同一页面跳转：
              name属性：锚链接名称———打了一个跳转标记
              a：创建了一个跳转标记<a name="name"></a>
              b:跳转到标记<a href="#name属性值">开始跳转</a>
            在不同页面跳转：
               a:创建跳转标记
               <a name="name"></a>
               b:创建跳转链接
               <a bhref="xxx.html#跳转标记的name属性值"></a>
           常见协议：
           file://   链接到文件的话,如果前面没有写协议,默认就是file://就会在当前本地中找是否有这个文件,有就直接显示
           http://  http协议的执行流程,要求访问这个链接地址,首先要在c盘下有文件hosts中找是否有该域名对应的ip,如果有,本地打开,如果没有,就需要进行联网操作,来进行访问    
           thunder:// 迅雷软件的协议
           mailto:  邮件协议
           
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接标签</title>
</head>

<body>
<a name="top"></a>
<a href="文本标签.html#标记" target="_blank">超链接</a><br/>
<a href="../../JavaWeb资料/JavaSE_day26/html/code/1.jpg" target="_blank">图片文件</a><br/>
<a href="http://www.baidu.com" target="_self">百度链接</a><br/>
<a href="thunder://www.moive.com/fuchouzhelianmeng.avi">高速通道《复仇者联盟》</a><br/>
<a href="http://www.moive.com/fuchouzhelianmeng.avi">普通通道《复仇者联盟》</a><br/>
<a href="mailto:[email protected]">发邮件</a><br/>
<a href="#abc">跳转到第一次跳转</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--跳转标记-->
<a name="abc"></a>
第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转第一次跳转
<br/>
<a href="#top">[返回顶部]</a>
</body>
</html>

五、图像标签

<!--
   图像标签：空标签
   <img/>
   常用属性：
      src:链接到图片资源文件
      title：鼠标悬浮在图片上时，会显示提示文字
      alt：当图片资源失效时，会有替代文本
      width：图片宽度
      height：图片高度
-->
           
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标签</title>
</head>

<body>
   <img src="2.jpg" alt="这是一张美图" width="600px" height="600px" border="0" usemap="#Map" title="mm"/>
   <!--热点区域标签：在图上画的矩形：矩形的对角点可以确定矩形
   圆可以由圆心和半径确定
   可以在图片矩形和圆的位置跳转链接
   -->
   <map name="Map" id="Map">
     <area shape="rect" coords="189,225,292,281" href="超链接标签.html" target="_blank" />
     <area shape="circle" coords="252,419,46" href="hello.html" target="_blank" />
   </map>

</body>
</html>

六、转义字符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转义字符</title>
</head>
<!--<h1></h1>-->
<body>
&lt;h1&gt;你好世界&lt;/h1&gt;<br/>
生活不止眼前的苟且&nbsp;&nbsp;&nbsp;还有诗和远方<br/>
康师傅<sup>&reg;</sup>版权所有<sub>&copy;</sub><br/>
<h2>hello world
</body>
</html>

七、表格标签

<!--
  表格标签：table
  表头：th：加粗并自动居中
  行标签：tr
  单元格：td
  表格的标题：caption
  table常用属性：
     1）边框：border  设置为1px
     2）在浏览器中显示方式：align 常用值：left center right
     3）表格宽度：width
     4）表格高度：height

   行合并：rowspan
   列合并（列单元格合并）：colspan
-->
           
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head>

<body>
<table border="1px" width="400px" height="300px"
align="center" bgcolor="#33CCFF">
   <caption>学生成绩表</caption>
   <tr align="center">
      <th>姓名</th>
      <th>班级</th>
      <th>成绩</th>
   </tr>
   <tr align="center">
      <td rowspan="2">狗娃</td>
      <td>软工1班</td>
      <td>90</td>
   </tr>
   <tr align="center">
      <td>网络1班</td>
      <td>94</td>
   </tr>
   <tr align="center">
      <td>狗蛋</td>
      <td>软工1班</td>
      <td>96</td>
   </tr>
   <tr align="center">
      <td>狗剩</td>
      <td>软工2班</td>
      <td>88</td>
   </tr>
   <tr align="center">
      <td colspan="2">平均分</td>
      <td>92</td>
   </tr>
</table>
</body>
</html>
javaweb html
上一篇: 比Project好用的横道图自动生成软件，输入参数直接出图，爆赞
下一篇: 轻松学习Ionic （二） 为Android项目集成Crosswalk（更新官方命令行工具）

继续阅读