黑马程序员JS---HTML基础

最新推荐文章于 2024-10-04 17:48:48 发布

小平_2015

最新推荐文章于 2024-10-04 17:48:48 发布

阅读量1.1k

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/Ws11352369/article/details/17186353

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

HTML基础总结

----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------

1.概述

1.1 HTML

概念：HypertextMarkup Language，是用于描述网页文档的一种标记语言。

HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML是一门表现页面结构的标记语言

Html是Internet上用于设计网页的主要语言,网页可以由文本,图片,动画等内容组成,基础架构都是Html。

Html是一种标记语言,告诉浏览器以什么方式或者结构显示内容,作为初学者掌握HTML的一些常用标记即可。

1.2 XHTML

HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生语法要求更加严格的XHTML。

1.3 网页

要制作网页,就需要使用超文本标记语言以.html或者.htm结尾的文件,并将它们放到web服务器上

1:一旦把文件上传到web服务器,任何浏览器都可以通过互联网找到你编写的网页.

2:浏览器会从你的网页的HTML中了解显示网页所需要的所有内容.

3:大量计算机和其他设备(手机pda)都可以通过浏览器连接到互联网.

1.4 HTML的编辑环境

HTML编辑工具：

基本文本编辑软件：如记事本、Editplus等

所见即所得软件：如DREAMWEAVER

HTML文件结构：

一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。

该文件使用浏览器直接打开运行。

一个完整的页面文件包含：文档声明部分和正文部分。

2.HTML的语法

HTML是标记（标签）语言，所以语法的学习其实就是对一些W3C组织定义好的具有特定含义的标签的使用方法的学习。

2.1 标记（标签）

<></>

HTML用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TABLE”等。

2.1.1 格式

    标记在使用时必须用尖括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。
所以应当遵循：<开始标签> 标签体 </结束标签>
特点
标签的特点：不区分大小写，标签名是固定的。
例如<TABLE>表示一个表格的开始，</TABLE>表标一个表格的结束。如<TABLE>和<table>都是表示一个表格的开始。不区分大小写。

2.1.2 标签分类

带标签体的标签          如：  <p> XX </p>
不带标签体的标签 （单标签）     如： <br/>

2.1.3 标签属性

写在开始标签上的  名=“值”对代表该标签的属性 <font color=“red”></font>。
一个标签可以有多个属性，多个属性之间使用空格隔开。
注意：属性值最好使用单引号或者双引号引起来。
<font color="red">你好</font>
注意事项：
1:所有标记都要用<> 尖括号括起来
2:成对出现的标记,最好开始和结束标记同时写完.
3:HTML中不区分大小写
4:在html中空格回车无效,想要实现空格或者回车有专用标记,  <br>
5:标记中不要有空格.

2.2 HTML注释

HTML的注释只有一种就是<!—注释内容-->

3.HTML正文

HTML正文分为文档头和文档体两部分。文档头<head>可以定义标题,文字样式等等.文档体<body>定义要将要显示在浏览器中的各种信息。

案例：

<html>
<head>
   <title>这是我的第一个html</title> 
</head>
<body>
   <p>HelloWorld</p>
<body>
</html>

3.1 标签说明

3.2 文件头<head>

一个完整的html文件包括头部文件(head)和文件主体(body),头部标记是<head></head>。在这对标记中的内容为头部内容,HTML中的头部内容不直接在网页上显示。

可以用在head 部分的标签：<title>,<base>,<link>, <meta>, <script>, <style>, 以及文本标签

3.2.1 <title>

例如:title

代码：

<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
</body>
</html>

本例中：在<head><head>标签中中包含了<title></title>标签。<title>中的内容是网页的标题,没有显示在网页中,显示在了网页的标题栏上。

3.2.2 <base>

<base>标签为页面上的所有链接规定默认地址或默认目标。

HTML中的base只能放在head中,只能有一个基本网址.

href用于设置网页文件的链接地址,target用于页面显示的目标窗口.

<html>
<head>
<title>这是网页的标题</title>
<base href="http://edu.youkuaiyun.com/"></base>
<base target="_blank"></base>
</head>
<body>
<a href="/" target="_blank">黑马程序员</a>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

点击黑马程序员之后，会默认的跳转到http://edu.youkuaiyun.com/中，因为在base中设置了该url

<ahref="http://www.baidu.com">百度一下</a>该链接即使没有target 属性也在新窗口中打开.在base中设置了target

3.3 文件体<body>

我们可以可以直接在body中添加文件并编辑内容

<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
hello,world
</body>
</html>

但是这样的文本内容是用浏览器打开后没有任何的效果，想要换行，想要段落，等等怎么办？就需要学习文本标签了。

3.4 文本标签

标题(h1~h6)

<h1> - <h6> 标签可定义标题<h1>定义最大的标题。<h6>定义最小的标题。

<html>
<body>
<h1>黑马云七 1</h1>
<h2>黑马云七 2</h2>
<h3>黑马云七 3</h3>
<h4>黑马云七 4</h4>
<h5>黑马云七 5</h5>
<h6>黑马云七 6</h6>
</body>
</html>

注意：标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。

段落(p)

<p> 标签定义段落。p 元素会自动在其前后创建一些空白。

<html>
<body>
<p>这是段落一。</p>
<p>这是段落二。</p>
<p>这是段落三。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>

换行(br)

<br>回车换行

<br> 可插入一个简单的换行符。br标记没有任何内容,作用就是换行,所以是空的.由于没有内容所以只写一个<br>即可。

<html>
<body>
中国<br />
美国<br />
日本<br />
俄罗斯<br />
</body>
</html>

原样输出(pre)

pre 元素可定义预格式化的文本。

<html>
<body>
<pre>
        class Demo{
            public static void main(String[] args){
                System.out.println("hello,world");
            }
        }
        </pre>
<p>pre 标签很适合显示计算机代码：</p>
 
<pre>
        for (int i = 1; i<10;i++){ 
             System.out.println("hello,world");
        }
        </pre>
</body>
</html>

线条(hr)

水平分隔线（horizontalrule）可以在视觉上将文档分隔成各个部分

<html>
<body>
<p>hr 标签定义水平线：</p>
<p>第一段</p>
<hr />
<p>第二段</p>
<hr />
<p>第三段</p>
<hr />
</body>
</html>

文本列表(ul和ol)

列表标签：<dl>

<dt>：上层项目

<dd>：下层项目

<dl>
    <dt>黑马Java</dt>
        <dd>物联网</dd>
        <dd>安卓</dd>
    <dt>黑马程序员</dt>
        <dd>java</dd>
        <dd>.net</dd>
</dl>

效果：

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

<ul>：符号标签（○●■）

<ol>：数字标签（aA 1 i I）

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

<ul>默认的是●

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ul>
</body>
</html>

通过type属性更改项目符号可以更改项目符号，分别显示○●■

<html>
<body>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ul>
</body>
</html>

嵌套列表：

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
    <li>咖啡</li>
    <li>茶
    <ul>
        <li>红茶</li>
        <li>绿茶</li>
    </ul>
    </li>
    <li>牛奶</li>
</ul>
</body>
</html>

数字编号

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

案例：可以使用数字，字母，罗马字母等进行编号。

<html>
        <body>
        <h4>数字列表：</h4>
        <ol>
         <li>苹果</li>
         <li>香蕉</li>
         <li>柠檬</li>
         <li>桔子</li>
        </ol> 
        <h4>字母列表：</h4>
        <oltype="A">
         <li>苹果</li>
         <li>香蕉</li>
         <li>柠檬</li>
         <li>桔子</li>
        </ol> 
        <h4>小写字母列表：</h4>
        <oltype="a">
         <li>苹果</li>
         <li>香蕉</li>
         <li>柠檬</li>
         <li>桔子</li>
        </ol> 
        <h4>罗马字母列表：</h4>
        <oltype="I">
         <li>苹果</li>
         <li>香蕉</li>
         <li>柠檬</li>
         <li>桔子</li>
        </ol> 
        <h4>小写罗马字母列表：</h4>
        <oltype="i">
         <li>苹果</li>
         <li>香蕉</li>
         <li>柠檬</li>
         <li>桔子</li>
        </ol> 
        </body>
        </html>

3.5 字体(font)

设置文字的字体,字号,颜色

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

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

<html>
<body>
<h1><fontface="Courier New" ,size="6" ,color="#00aaaa">hello,world</font>
</h1>
<p></p>
</body>
</html>

3.6 特殊字符

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

4.表格标签

我们可以将表单想象为网格,表由行和列组成.

<table>标记表示表格,以<table>开始以</table>结束

<caption>标题标签,给表格提供标题。

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

<tr> 行标签

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

4.1 简单的表格

<body>
<table>
   <tr>
      <td> 姓名 </td>
      <td> 年龄 </td>
   </tr>
   <tr>
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>
</body>

效果图：

Border

我们可以做在table中使用border 以像素为单位,会在单元格和表的周围创建边框.如果将该值设置为0,或者没有使用该属性,就会出现上述的效果.

<table border=1>
   <tr>
      <td> 姓名 </td>
      <td> 年龄 </td>
   </tr>
   <tr>
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>

效果图：

Width

该属性可以指定表的宽度,单位是像素或者百分比.区别在于百分比百分比可以让

表格的宽度随浏览器窗口的大小变化

<table border=1 width="25%">
   <tr>
      <td> 姓名 </td>
      <td> 年龄 </td>
   </tr>
   <tr>
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>

效果图：

Align属性

可以指定center left right

<table border=1 align="center" width="25%">
   <tr>
      <td> 姓名 </td>
      <td> 年龄 </td>
   </tr>
   <tr>
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>

指定center会显示在浏览器中间，left,right分别是左与右

Caption属性

该标签必须直接放置到<table>标签之后，每个表格只能规定一个标题

<body>
<table border=1  align="center" width="25%">
   <caption>
   学员表
   </caption>
   <tr>
      <td> 姓名 </td>
      <td> 年龄 </td>
   </tr>
   <tr>
      <td> 胡志平</td>
      <td> 26 </td>
   </tr>
</table>

效果图：

<th>表头标签

th其实与td是同个等级的，也是代表了一个单元格,不过一般代表表头

粗体显示并居中.

<body>
<table border=1 align="center" width="50%">
   <caption>
   学员表
   </caption>
   <tr>
      <th> 姓名 </th>
      <th> 年龄 </th>
   </tr>
   <tr>
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>

效果图：

<tr>的align 属性

可以指定该行中所有单元格的内容的位置.<tr>的align 属性

<table border=1 align="center" width="50%">
   <caption>
   学员表
   </caption>
   <tr >
      <th> 姓名 </th>
      <th> 年龄 </th>
   </tr>
   <tr align="center">
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>

效果图：

<table>标签的cellspacing

单元格间距,单元格和边框之间的空格,单位是像素或者百分比

<table border=1 width="50%" cellspacing="10">
   <caption>
   学员表
   </caption>
   <tr >
      <th> 姓名 </th>
      <th> 年龄 </th>
   </tr>
   <tr >
      <td> 张三 </td>
      <td> 23 </td>
   </tr>
</table>

效果图:

<table>标签的cellspadding

单元格的边和它的内容之间的间隔,单位是像素或者百分比

<table border=1 width="50%" cellpadding="10">
   <caption>
   学员表
   </caption>
   <tr >
      <th> 姓名 </th>
      <th> 年龄 </th>
   </tr>
   <tr >
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>
</table>

效果图:

合并列-colspan属性

合并列合并单元格

<td>和<th> 的colspan属性

colspan属性用于指定一个单元格将跨越的列的数量.

 <caption>
   学员表
   </caption>
   <tr>
    <th colspan="2">个人信息</th>
    </tr> <tr >
      <td> 胡志平 </td>
      <td> 26 </td>
   </tr>

效果图：

合并行—rowspan

<td>和<th>的rowspan属性

<table border="1" align="center" width="25%"  cellpadding="10">
<tr>
<th>第一行第一列</th>
<th>第一行第二列</th>
</tr>
<tr>
<td rowspan="2">第二行每一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
</tr>
</table>

效果图：

注意：

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

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

TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

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

以下表格的书写可以提高表格在下载的显示效率

<html>
<head>
</head>
<body>
<table border="1">
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>XML基础</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <tdcolspan="2">备注：</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

效果图：

5.HTML表单

概念：表单，在网页中主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

表单以<form> 开始,以</form>结束,主要有一些表单控件(文本输入框,密码框,单选框,复选框,下拉列表,文本域,提交按钮等)

5.1 <form>的Action属性

action属性表明提交表单时如何处理数据,通常用户注册完表单时,需要数据提交给web服务器,就需要将action的值定义为服务器的url.

5.2 <form>的method属性

将表单数据提交给服务器的方式有2种,get 和post

1. get 方法它将数据作为URL的一部分进行发送，比较不安全

2. post方法,将数据隐藏发送.比较安全

5.3 常见的表单控件

5.3.1 input标签

<input>标签的常用属性

文本域与密码域

当<input>标签的type属性为text时，表示定义的是文本域，当<input>标签的type属性为password时，表示的是密码域。两者很相似，唯一不同是，用户在密码域中输入的字符不以原样显示，而是以“*”表示。

<form name="form1" method="post" action="">
<table>
<tr>
    <td>用户名：</td>
    <td><input type="text" name="username" /></td>
</tr>
<tr>
    <td>密  码：</td>
    <td><input type="password" name="pwd"/></td>
</tr> 
   </table> 
</form>

效果如图：

单选与多选按钮

在<input>标签中，当type属性设置为radio时，表示定义的是单选按钮;当type属性为checkbox时，表示定义为复选框。单选按钮本身只支持单项选择，即只能选取一个内容，而复选框恰恰相反，可以一次性选择一个或多个内容甚至全部。

<body>
<h3>
性别
</h3>
<input type="radio" checked="checked" name="radio" value="1" />男 
<input type="radio" checked="checked" name="reaio" value="0"/>女
<h3>爱好</h3>
<input type="checkbox" name="check" checked="checked" value="1" />打篮球  
<input type="checkbox" name="check"  value="2" />下棋  
<input type="checkbox" name="check" value="3" />玩游戏  
</body>

效果图：

文件选择框

在<input>标签中，当type属性设置为file时，表示定义的是文件选择框

需要上传文件到服务器,需要使用文件选项框会自动生成一个文本框，和一个浏览按钮。

<h3>请选择要上传的文件</h3>
<input type="file" name="upload" value="uploas"/>

效果图：

下拉列表

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

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

服务器如何获取该下拉列表数据:

需要给select中添加name属性.在每个option中添加value属性.即可

<h3>下拉列表</h3>
<select name="select"  size="1">
   <option value="PHP">PHP</option>
   <option value="java">java</option>
   <option value=".net">.net</option>
</select>

效果图：

文本输入域

如果希望用户输入多行文本信息,就需要使用文本域.

<textarea>如：个人信息描述

<textarea> 的属性

name 该文本域的名称.

rows 指定文本域大小,指定行数.

Cols 指定文本域大小,指定列数.

提交数据需要给指定文本域的name属性

name=文本信息.

<h3>文本域</h3>
<textarea name="textarea" cols="40" rows="10">
textarea文本域初始内容
</textarea>

效果图：

按钮

按钮通常用于提交表单,也可以清除表单.可以使用三种形式创建按钮

使用<input>元素,type属性值设置为submit reset

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

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

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

按钮的属性:

name 设置按钮的名称

value 按钮上显示的文本

size 按钮的宽度,像素为单位.

使用图像作为按钮:

可以使用图像作为按钮,例如

<inputtype=”image” src=”submit.jpg”>

<h3>三种按钮</h3>
<input type="submit" name="sub" value="这是一个提交按钮"/>
<input type="reset" name="sub" value="这是一个重置按钮"/>
<input type="button" name="sub" value="这是一个普通按钮"/>

隐藏字段hidden

有时候需要页面传递信息不希望用户看到,可以使用隐藏字段,在页面上不显示，但在提交的时候随其他内容一起提交。

代码

<form>
   用户名:
   <input type="text" />
   <br />
   密码:
   <input type="password" />
   <br/>
   性别:
   男
   <input name="gender" type="radio"/>
   女
   <input name="gender" type="radio"/>
   <br/>
   爱好:
   吃饭
   <input type="checkbox"/>
   睡觉
   <input type="checkbox"/>
   看电影
   <input type="checkbox"/>
   <br>
   城市:
   <select >
      <option>请选择</option>
      <option>广州</option>
      <option>北京</option>
      <option>成都</option>
   </select>
   <br/>
   上传文件:
   <input type="file">
   </input>
   <br/>
   自我介绍:
   <textarea rows="10" cols="20"></textarea>
   <br />
   <input type="submit"/>
   <input type="reset" />
   <br/>
   <input type="image" src="submit.gif"/>
</form>

效果图：

6.HTML超链接

6.1 链接标签

<a></a>

6.2 基本连接

通过标签<a>和<a/>和在<a>和<a/>中的文本组成连接内容,用户在浏览器中可以点击.

超链接格式：<a href=" http://www.itheima.com/"></a>

6.3 连接到其他文档

<a>标签的属性href

使用<a> 标签开始, 需要使用属性href

href 属性的值是连接目的页面的地址.

例如:

</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

效果:

点击百度一下就会跳转到百度页面

<a>标签的属性title

title 属性的值能够描述连接的目的页面。

<body>
<a href="http://www.baidu.com" title="使用百度搜索引擎">百度一下</a>
</body>

<a>标签的target属性:

该属性指定连接指定的页面应当以和汇总方式在哪一个窗口中打开,如果想要再新窗口中打开,需要经target属性的值设置为_blank

<a href="http://www.baidu.com" target="_blank" title="使用百度搜索引擎">百度一下</a>

target="_self"默认。在相同的框架中打开被链接文档。

<a href="http://www.baidu.com" target="_self" title="使用百度搜索引擎">百度一下</a>

6.4 连接到e-mail

邮件格式： <a href="mailto:email"></a>

使用<a>标签,使用href属性,但是href属性的值要以关键字mailto 开头.然后是右键地址.

<body>
<a href="mailto:zphu775652121@126.com"title="发送邮件">发送邮件zphu775652121@126.com </a>
</body>

6.5 <a>锚链接

锚链接：<aname=“标记名”></a>和<a href="#标记名"></a>

普通的连接,连接会从一个页面到达另外一个页面.如果页面很长,希望连接页面的特定部分.就可以使用锚链接.

例如:长页面底部的返回顶部连接

可以使用<a>标签创建目的锚.需要使用到name和id属性

<h1id="top">链接和导航</h1>
<h2><aid="one">第一部分</a></h2>
<h2><aid="two">第二部分</a></h2>
<h2><aid="three">第三部分</a></h2>
<p><ahref="#top">回顶部</a></p>

7.图像标签

使用<img> 标签将图像添加到网页中,该标签要使用src属性指定图片的来源,并且需要附带alt属性. alt属性是用于,当用户加载图片失败时显示的文字信息.

图像标签格式：<img src="" alt="“ title=“” width=“”/>