【黑马程序员】Java基础学习技术博客——HTML

最新推荐文章于 2024-08-29 00:02:03 发布

方谋富

最新推荐文章于 2024-08-29 00:02:03 发布

阅读量718

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_14807095/article/details/38153119

本文详细介绍了HTML的基本概念和使用方法，包括标签的种类及用途、如何创建网页结构、使用表单进行用户交互等内容。

　------- android培训、java培训、期待与您交流！ ----------

一、Html概述

1，Html就是超文本标记语言的简写，是最基础的网页语言。

2，Html是通过标签来定义的语言，代码是由标签所组成。

3，Html不区分大小写。

4，Html由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>所组成。

5，头部分是给html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

6，体部分是真正存放页面数据的地方。÷

二、Html要点

1，Html语言是解释性语言不需要编译，是一边解释一边执行

2，和其他高级语言注释标签不同，Html的注释标签为“”。

<html>
  <head>
    <title>
	这是我的测试页面
    </title>
  </head>
  <body>
     <!-- 这是注释内容不显示-->
     <font size=7 color="red">这是我的页面内容</font>
  </body>

</html>

3，html的标签由两种：一种是有开始有结束的，用于封装内部数据。

另一种是有开始直接内部结束的功能性标签比如换行标签<br/> 分割线标签<hr/>

标签的操作思想：

Html语言的强大之处在于：提供标签将数据封装，给数据提供标识，这样就可以方便的对数据进行操作。

html操作指的就是用标签中的属性来完成对数据的操作，标签就相当于一个容器。

4，几种常用容易忘记的常用标签：

标题标签：<h1><h2>.....<h6> 因为标题是文本中的常用内容，为了方便操作而定义的，其实就是加粗和放大的组合。

特殊字符：如果想要在网页上显示一些特殊符号，比如< > &等。因为这些特殊符号在代码中容易被浏览器所解释识别所以用上一些特殊方式

来表示。这些特殊符号全部由“&”开头，“；”结束

<	小于	<	lt是less than的缩写
>	大于	>	gt是great than 的缩写
&	&符号	&	amp是ampersand的缩写英文意思是&符号
"	双引号	"	quot英文是引用的意思
©	版权	©	copyright版权的意思
®	已注册商标	®	register已注册商标
™	商标（美国）	™
×	乘号	×	倍数
÷	除号	÷	减少

空格   sp表示space的意思

列表标签：

首先确定列表标签的范围<dl></dl>,在范围中有上层标签<dt>和下层标签<dd> 下层标签<dd>有缩进效果

带有标识的项目列表 <ol>和<ul>里面都由<li>封装并且<ol>和<ul>都具备缩进效果。

图像标签：

<img>内部闭合的标签 align：属性定义图片的排列方式，border用来设置图片的边框。src连接一个文件 alt为图片说明文字

表格标签：

表格是最常用的标签，用于对数据进行格式化

表格由行所组成，行由单元格所组成。表格中默认都由一个tbody标签。早期由于网速太慢，为了增强用户上网体验tbody可以让让用户一段一段浏览网页。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>

<table border="1" bordercolor="blue" cellpadding="2" cellspacing="0" width="300" height="200" align="center">
 <tr>
  <th>单元格一 </th>
  <th>单元格二 </th>
 </tr>
 <tr>
  <th>单元格一 </th>
  <th>单元格二 </th>
 </tr
</table>
</body>
</html>

如果想要单元格文字居中可以将<th>改为<td>，如果想要一个单元格占一行可以设置<th colspan=“2”> 如果想占一列可以设置为rospan="2"

超链接：<a>

<a> href = "http： www.sina.com.cn" target="_blank">新浪网站</a>

当被点击后，会启动引擎所对应的解析程序去查找制定主机。

1，线去找本地的hosts文件，如果没有就会去找找到该主机对应的IP地址。

2，去公网DNS服务器上找对应的IP地址。

当吧http：改成thunder：就会启动迅雷去解析查找所对应的主机文件

3，可以通过设置属性值target=_blank来打开新的页面。

超链接的另一个作用：定位标记（需要注意的是标记的属性值前面要加上#加以区分,不然会启动本地文件引擎去解析）

超链接的另一个重要应用：

超链接由默认的的字体样式，和默认的事件，想要让超链接按照指定的方式实现点击效果

1，取消默认点击事件。href="javascriptvoid(0)

2，通过注册事件，定义处理方式，按照自定义的方式运行 onclick="alert('我是超链接')"

<a href="javascriptvoid(0)" onclick="alert('我是超链接')">超链接的重要使用</a>

框架标签：可以对网页进行拆分

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<!--
框架标签的特点：可以将浏览器窗口分割成多个窗体，每一个窗体都可以显示一个单独的资源（网页，图片）
                            框架标签不可以放在head里面，也不可以放在body里面而是作为一个单独的部分存在
1，将窗体进行拆分：<frameset>
2,一旦拆分就会出现子窗体，子窗体标签：<frame>
-->

<!--先对窗体进行上下拆分，上面为30%，下面为全部-->
<frameset rows="15%,*">
    <!--明确上子窗体的页面-->
   <frame src="top.html"/>
   
   
   <!--对下窗体进行左右拆分,可以通过给左右窗口起一个名字来制定超链接打开所在的窗口位置-->
   <frameset cols="20%,*">
      <frame src="left.html" name="left"/>
      <frame src="right.html" name="right"/>
   </frameset>
</frameset>
<body>

</body>
</html>

top.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
 <h1><font color="red">欢迎来到我的论坛</font></h1>
</body>
</html>

left.html 可以通过target属性来指定来指定超链接窗口打开所在位置

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<ol type="I">
 <li><a href="C:\ProgramData\CyberLink\PhotoDirector\3.0\Sample Images\Cat.jpg" target="right">英雄联盟</a></li>
 <li><a href="C:\ProgramData\CyberLink\PhotoDirector\3.0\Sample Images\Cat.jpg" target="right">穿越火线</a></li>
 <li><a href="C:\ProgramData\CyberLink\PhotoDirector\3.0\Sample Images\Cat.jpg" target="right">地下城与勇士</a></li>
 

</ol>
</body>
</html>

right.html 用于显示左边超链接打开之后显示的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
 <h1>用于显示内容</h1>
</body>
</html>

画中画标签：

可以通过设置此标签的宽度和高度都为0来植入病毒网站

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
 <h1>用于显示内容</h1>
 <iframe src="1.html" height="0" width="0">这是iframe标签，如果你看到这句话说明你的浏览器不支持iframe标签</iframe>
</body>
</html>

表单标签：<form>

表单标签是最常用的标签，用于与服务器端的交互。
<input>:输入标签：接受用户输入信息。其中的type属性指定输入标签的类型。

文本框 text：输入的文本信息直接显示在框中

密码框 password：输入的文本以以原点或者星号的形式显示。

单选框 radio：性别选择

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
 <form >
 <!-- 输入组件 
 在写radio标签时，要注意起名称和分组，因为只有起了名称之后才可以提交到服务端，被服务端所解析，并且因为单选框所以两个名称应该是同组的。
  checked="checked"表示默认选择状态！
 -->
  <input type="radio" name="sex"  value="nan" />男 <input type="radio" name="sex" value="nv"/>女
 </form>
</body>
</html>

复选框 checkbox 比如兴趣选择

隐藏字段 hidden 在页面上不显示，但在提交的时候跟随其他内容一起提交，可以用这个属性来计算一些不需要用户看到的值。
重置按钮 reset 将表单中填写的内容设置为初始值。

提交按钮 submit 用于提交表单中的内容

按钮 button 可以为其自定义事件。

文件上传 file 后期扩展内容，会自动生成一个文本框

图像 image 它可以替代submit按钮提交数据。

<select>:选择标签提供用户选择内容。size 属性为显示项目个数。

 选择国家
   <select >
     <option name="none">--选择国家--</option>
     <option name="cn">--中国--</option>
     <option name="usa">--美国--</option>
     <option name="british">--英国--</option>
  </select>

记住：表单组件都需要定义name和value属性，目的是为了让服务器端获取客户端提交的数据。对于文本框和密码框可以不指定value属性，因为输入的内容就是value值

其他的标签：< marquee>：让页面动起来！

属性有direction和behavior

　------- android培训、 java培训、期待与您交流！ ----------