`

HTML基础

阅读更多
HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言,而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词,比如 <html>
• HTML 标签通常是成对出现的,比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签,第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
单标签:<tag/>
双标签:<tag>              </tag>
HTML 文档(标签) = 网页(视图)
• HTML 文档描述网页
• HTML 文档包含 HTML 标签和纯文本
• HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
.htm 还是 .html 文件后缀?
当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 文件后缀。我们在实例中使用 .htm。这只是长久以来形成的习惯而已,因为过去的很多软件只允许三个字母的文件后缀。
不过对于新的软件,使用 .html 完全没有问题。
什么是 HTML 标签
• HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
• HTML 标签由开始标签和结束标签组成
• 开始标签是被括号包围的元素名
• 结束标签是被括号包围的斜杠和元素名
• 某些 HTML 元素没有结束标签,比如 <br />
注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。
HTML 元素
• HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
HTML 元素语法
• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容(empty content)
• 空元素在开始标签中进行关闭(以开始标签的结束而结束)
• 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
• 大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
• HTML 文档由嵌套的 HTML 元素构成。
空的 HTML 元素
• 没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
• <br /> 就是没有关闭标签的空元素(<br /> 标签定义换行)。
• 在 XHTML、XML 以及未来版本的 HTML 中,所有元素必须被关闭。
• 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
• 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
HTML 属性
• HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
• 属性总是以名称/值对的形式出现,比如:name="value"。
• 属性总是在 HTML 元素的开始标签中规定
HTML 提示:使用小写属性和标签
• 属性和属性值对大小写不敏感。
• 不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
• 而 XHTML 要求使用小写的属性/属性值。
• HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
• 万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
表格标签
<thead><tbody><tfoot>只被主流浏览器部分支持,不建议使用
<caption>我的标题</caption><!—定义表格的标题-->
<colgroup span="2" align="left"></colgroup><!—修改两列的样式属性-->
<colgroup align="right" style="color:#0000FF;"></colgroup><!--修改第三列的样式属性-->
<dl>
  <dt>咖啡</dt>
  <dd>黑色的热饮料</dd>
  <dt>Milk</dt>
  <dd>白色的冷饮料</dd>
</dl>
<img
src="../i/eg_planets.jpg" tppabs="http://www.w3school.com.cn/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14" target ="_blank" alt="Venus"
href ="l" tppabs="" />

<area shape="circle" coords="129,161,10"  target ="_blank" alt="Mercury"
href ="" tppabs=""/>

<area shape="rect" coords="0,0,110,260" target ="_blank" alt="Sun"
href ="" tppabs=""/>

</map>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


1. HTML文档规范:
① 后缀名:可以是‘htm’也可以是‘html’
② 一个html文档时由多个标签组成的,但是必须有一个根标签
<html></html>:根标签,当前html文档中的其他标签都位于这个标签的里面
③ 在标签<html></html>里面通常由两部分组成:<head></head>和<body></body>这两个标签是相互独立的
<head></head>:此标签中主要包含一些与页面属性相关的元信息,最常用的就是<title></title>标签
<title></title>:定义当前文档的标题,用于区分不同的页面
<body></body>:用于定义当前页面显示的所有内容,也就是说在body标签中写什么标签,在网页中就会消失什么视图
2. 常用的HTML标签(标签就是对应的视图表现)
标题标签:<h1></h1>
   <h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
水平线标签:<hr color="orange" width="100px"/>
注释:<!-- ……….-->
段落标签+换行标签:<p></p><br/>
段落间间隔比较大,换行间隔相对来说小
文本的格式化标签:加粗,斜体,上标,下标,删除线
文本字体标签:font
<font color="red" face="黑体" size="+10">
链接锚标签:<a href=”链接地址”  target=”blank”></a>
表格标签:
<html>
    <head>
<title>表格</title>
    </head>

    <body>

<table border="1" bordercolor="pink">
    <tr>
<td width="100px">1-1</td>
<td>1-2</td>
<td>1-3</td>
    </tr>
    <tr>
<td colspan="2">2-2</td>
<td>2-3</td>
    </tr>
</table>
<hr/>
<table border="1" bordercolor="blue">
    <col align="right"/>
    <colgroup span="2" style="color:pink" 
align="center"/>
    <caption>用户列表</caption>
    <tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
    </tr>
    <tr>
<td>1</td>
<td>小皮</td>
<td>男</td>
    </tr>
    <tr>
<td>2</td>
<td>小花</td>
<td>女</td>
    </tr>
</table>

</body>

列表标签:<ol></ol>有序列表 ----<ul></ul>无序列表  <li></li>列表
<dl></dl>  <dt></dt><dd></dd>
3.  元素:指的是当前标签,以及当前标签中属性和所包含的所有内容的整体
4. 属性:每一个标签都有默认的样式,我们可以通过在标签中添加不同的属性来修改当前标签外在表现【我们可以在双标签的‘前标签’或者单标签中添加一个键对值,来修改当前标签的外在显示或者标识当前标签,我们就把这些键值对称之为当前标签的属性】

5. 常用的表单输入标签:
form标签:主要用于提交页面用户输入的数据,当我们点击当前from中的submit按钮的时候,form就会将其中的所有的用户输入的数据,提交到url指定的地方---------
① Input标签:提供一个输入视图,可供用户输入数据
其中有一个属性type属性,此值有10种,每一种type都对应着一种不同的视图效果,提供的输入方式也不一样
②<input type="button" value="普通按钮"/>:本身不具备value属性改变按钮上的文字,可通过脚本语言赋予功能;
③<input type="checkbox" name="hobby" value="basketball"/><br/>
复选框:注意—如果多个选项属于同一题目,那么这多个选项的name属性值要保持一致,并且要给出对应的value属性值;
④<input type="file" name="myFile" id="myFile"/>:文件上传控件,提供一输入框和一个‘浏览’按钮,当用户需要上传文件的时候,点击按钮,选择相应的文件;
⑤<input type="image" src="image/loginan.gif"  />:图片按钮,将图片作为一个按钮,能实现一个按钮功能;
⑥<input type="text"  id="usename" /><br/>:文本输入框;
⑦<input type="password"  id="pass" />:密码输入框;
⑧ <input type="radio"  name="sex" value="aaa" />:单选框(同一个选项下name属性值要一致—同复选框一样);
⑨<textarea name="content" rows="10" cols="5"></textarea>:文本域—可以完成文本的多行输入—name属性用于向代码中传值,通过rows和cols来改变文本域的高度与宽度;
实例:
<form name="form1" action="http://www.baidu.com/">
    <input type="text" name="name1" id="name1" />
        <input type="password" name="pass1" id="pass1"  />
        <input type="reset"  value="取消" />//重置标签按钮
        <input type="submit"   value="登陆"/>//提交按钮
    </form>
    <form name="form2"  action="http://www.hao123.com/">
   <input type="text" name="name2" id="name2" />
        <input type="password" name="pass2" id="pass2"  />
        <input type="reset"  value="取消" />
        <input type="submit"  value="登陆" />
</form>
⑩Img标签:<img src="image/jingxuan096.jpg" id="myImg" usemap="#mymap" width="100%" alt="你点我"/>;
(11)Map标签:<map  name="mymap" id="mymap">
    <area shape="rect" coords="0,0,960,1080"  href="http://www.baidu.com"  target="_blank" alt="map"></map>;
(12)下拉菜单标签:<select  name="province">
            <option>--请选择--</option>
            <option value="hb">湖北</option>
                        <option value="hn">南北</option>
                        <option value="sh">上海</option>
            </select><hr />;
(13)文本域标签:<textarea name="content" rows="10" cols="50"></textarea><br />;
Frameset标签:<frameset rows="100,*" border="0">
    <frame   name="head" src="head.html" noresize="noresize" scrolling="no"/>
        <frameset cols="150,*" >
        <frame  name="left" src="menu.html"  noresize="noresize"/>
        <frame  name="right" src="other.html"/>
        </frameset>
    </frameset><noframes></noframes>
把一个页面分成几部分页面
Div标签:固定面板在div容器中;

分享到:
评论

相关推荐

    html基础学习资料

    这个"html基础学习资料"压缩包提供了对于初学者来说非常宝贵的资源,可以帮助他们快速掌握HTML的基本概念和语法。 首先,`html.chm` 文件可能是一个帮助文档,通常包含详细的信息和例子,指导用户学习HTML的各种...

    HTML基础知识点汇总

    HTML 基础知识点汇总 HTML(Hypertext Markup Language,超文本标记语言)是网页设计的基础语言,它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令(Tag),将网页文件组织起来,并由浏览器...

    html基础ppt

    html基础

    html基础教程学习

    html基础教程学习

    HTML基础.ppt

    HTML基础 教大家了解学习HTML的课件

    HTML基础.xmind

    HTML基础.xmind

    HTML 基础总结 (下).xmind

    HTML 基础知识的总结,适合初学者!

    HTML基础系统、详细整理.md

    详细地整理html基础知识,贯穿整个html知识,系统地整理,一目了然。

    学习html基础.zip

    学习html基础学习html基础学习html基础学习html基础学习html基础 学习html基础学习html基础学习html基础学习html基础学习html基础 学习html基础学习html基础学习html基础学习html基础学习html基础 学习html基础学习...

    HTML基础学习.zip

    HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML...

    html基础学习例子.part2

    《html网页设计参考手册》示例源代码 也是我的html基础家教课件的示例源代码 分2个压缩包 html基础学习例子.part1 html基础学习例子.part2

    HTML基础.docx

    HTML 基础知识点 HTML 基础知识的学习是网站制作的基础。从学习 HTML 到制作网站,需要哪些工具?浏览器和记事本程序(或类似的简易文本编辑器)便是我们所需的全部工具。 浏览器的选择 在学习 HTML 之前,我们...

    HTML基础学习示例代码.zip

    HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例...

    [HTML]html基础教程 [HTML]html基础教程

    这个压缩包中的"HTML基础教程"显然是为初学者设计的,旨在帮助他们掌握HTML的基本概念和语法,从而能够构建自己的网页。以下是对HTML基础知识的详细讲解: 一、HTML结构 HTML文档由一系列元素组成,每个元素都有...

    html基础ppt下载

    掌握HTML基础知识是创建静态网页的第一步,随着技能的提升,你还可以学习CSS(Cascading Style Sheets)来控制网页的样式,以及JavaScript和服务器端技术来实现更复杂的交互功能。通过不断实践和学习,你可以成为一...

    html基础html基础html基础html基础

    "html基础html基础html基础html基础html基础html基础html基础html基础"这个标题和描述多次重复了"html基础",强调了我们要探讨的核心内容——HTML的基本概念、结构以及常见元素。 在HTML中,我们通过使用各种标签来...

    网页制作HTML基础

    HTML基础 ,很好的学习HTML的资料

    HTML基础知识讲解!

    HTML 基础知识讲解 HTML 基础知识是网页开发的基础,了解 HTML 基础知识是学习网页开发的必备条件。本文将详细讲解 HTML 基础知识,包括 HTML 标题、HTML 段落、HTML 链接和 HTML 图像等。 HTML 标题 -------- ...

    HTML基础学习中.......zip

    HTML基础学习中......HTML基础学习中...... HTML基础学习中......HTML基础学习中...... HTML基础学习中......HTML基础学习中...... HTML基础学习中......HTML基础学习中...... HTML基础学习中......HTML基础学习中.....

Global site tag (gtag.js) - Google Analytics