黑马程序员6--HTML

来源：互联网发布：电话变声软件编辑：程序博客网时间：2024/06/06 05:26

HTML

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

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

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

3. HTML代码不区分大小写

4. HTML 代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

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

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

多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

格式：<标签名属性名=‘属性值’>数据内容</标签名>

<标签名属性名=’属性值’ />

操作思想：

为了操作数据，都需要把数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。

常用标签的使用

字体

1. 字体标签：<font>

例：<font size=5 color=red>字体标签示例</font>

注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。

2. 标题标签:<h1><h2>…<h6>

因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

3. 特殊字符:

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

“

™

空格

列表

1. 列表标签：<dl>

<dt>上层项目

<dd>下层项目

例：

<dl>

</dl>

效果：

黑马程序员--HTML - leon_hm - Leon的博客

列表中项目符号对应的标签

<ol>:数字标签(a A 1 i I)

<ul>:符号标签

<li>：具体项目内容标签。此标签纸在<ol><ul>中有效。

通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。

例：

</ol>

效果：

黑马程序员--HTML - leon_hm - Leon的博客

<ul>

</ul>

效果：

黑马程序员--HTML - leon_hm - Leon的博客

图像

图像标签<img>

例:<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字” />

align:属性定义图片的排列范式，bordr用来设置图像的边框。Src链接一个文件

图像地图:<map>

应用:当要在图像中选取某一部分作为链接的时候。如：中国地图每个省所对应的区域。

Map标签要和img标签联合使用。href是超链接。

</map>

注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

表格<table>

组成：标题标签:<caption>，给表格提供标题。

表头标签：<th>,一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

行标签:<tr>

单元格标签:<td>,加在行标签的里面。可以简单理解为，先有行，在行中再加入单元格。

格式：

</tr>

<tr>

</tr>

</table>

效果：

黑马程序员--HTML - leon_hm - Leon的博客

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT

和TBODY元素表示。

THEAD、TFOOT包含关于表格列的信息。

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

TBODY可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>

超链接

超链接标签:<a>

两种用法：

1. 超链接<a href=””>

例：

2. 定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

例：

<a href=”#标记”>返回标记位置</a>

注：使用定位标记时一定在href值的开始加入#标记名。

表单

表单标签:<form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签：接收用户输入信息。

其中的type属性指定输入标签的类型。

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

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

l 单选框radio 如：性别选择。

l 复选框checkbox 如：兴趣选择。

l 隐藏字段hidden在页面上不显示，但在提交的时候随其他内容一起提交。

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

l 重置按钮 reset将表单中填写的内容设置为初始值。

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

l 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

l 图像image 它可以替代submit按钮。

<select>:选择标签提供用户选择内容。如：用户所在的省市。size属性为显示项目个数。

<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选择。

<textarea>:多行文本框。如：个人信息描述。

<lable>:用于给各元素定义快捷键。

for属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

Accesskey属性：指定快捷键，此快捷键需要和alt建组合使用。

例：

表单提交：

1. 先定义form表单中的action属性值，指定表单数据提交的目的地（服务端）。

2. 明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get

get和post这两种最常用的提交方式的区别：

1． Get提交将数据显现在地址栏，对于敏感信息不安全。

Post可以不显示在地址栏。

2．地址栏中存放的数据有限，所以get方式对提交的数据体积有限制

Post可以提交大体积数据

3．对提交数据的封装方式不同：

Get：将提交数据封装到了消息的前，请求行中。

Post：将提交的数据封装到消息头后，数据体重。

注意：通常表单使用post提交，因为编码方便。

对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。

通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。

如果是get提交，request.setCaracterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后再进行GBK解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建议表单提交使用post。

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。

头标签

头标签都放在<head></head>头部分之间。包括：title basemeta link

<title>:指定浏览器的标题栏显示的内容

<base>:

href属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的超链接文件。

target属性：指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。

<meta>:

name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv属性：模拟HTTP协议的响应消息头。

例：

表示打开此页面2秒后自动转到新浪页面

<link>:

rel属性：描述目标文档与当前文档的关系

type属性：文档类型

media:指定目标文档在哪种设备上起作用。

例：

<marquee>让内容动起来。

direction 属性：left right down up

behavior 属性：scroll alternate slide

<pre>:可以将文本内容按在代码区的样子显示在页面上。

注册页面示例：

<html >
 <head>
  <meta charset="UTF-8">
  <title>注册页面</title>
 </head>
 <body>
<form action='http://127.0.0.1:10000' method='post'>
<fieldset> <!--fieldset标签， 组合表单中的相关元素-->
       <legend>注册区域</legend>
       <table border='1' bordercolordark='#0066FF' bordercolor='#0066FF' width='50%' align='left' cellpadding='10'cellspacing='0'>
                <caption>信息注册页面</caption>
                <tr>
                <td ><label for='user' accesskey='u' >用户名(U)：</label></td>
                <td><input id='user' name='user' type="text" /></td>
                </tr>
                <tr>
                <td>密码：</td>
                <td><input type="password" id='password' name='password' /></td>
                </tr>
                <tr>
                <td>确定密码</td>
                <td><input type="password" /></td>
                </tr>
                <tr>
                <td>性别：</td>
                <td><input type='radio' name='sex' value='male' />Male<input type='radio' name='sex' value='female' />Female</td>
                </tr>
                <tr>
                <td>技术：</td>
                <td><input type='checkbox' name='tech' value='java'/>Java
                    <input type='checkbox' name='tech' value='jsp' />Jsp
                    <input type='checkbox' name='tech' value='servlet' />Servlet
                </td>
                </tr>
                <tr>
                <td>国家：</td>
                <td>
                <select name='country' >
                          <option value='none'>--选择国家--</option>
                          <option value='ch'>中国</option>
                          <option value='en'>英国</option>
                          <option value='fr'>法国</option>
                </select>
                </td>
                </tr>
                <tr align='center' >
                <td colspan=2><input type='submit' value='提交数据' /> <input type='reset' value='清除数据' /></td>
                </tr>
       </table>
</fieldset>
</form>
 </body>
</html>

0 0