一、HTML简介
1、什么是HTML
Hyper Text Markup Language (超文本标记语言) 简写:HTML
1、HTML 是==用来描述网页的一种语言==
2、HTML 不是一种编程语言,而是一种标记语言 (markup language)
3、标记语言是一套标记标签 (markup tag)
4、HTML 使用标记标签来描述网页
5、超文本标记语言的结构包括"头"部分(Head)、和"主体"部分(Body),其中"头"部提供关于网页的信息,"主
体"部分提供网页的具体内容。
2、HTML版本
取自百度百科:
①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0:1995年11月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。
③HTML 3.2:1997年1月14日,W3C推荐标准。
④HTML 4.0:1997年12月18日,W3C推荐标准。
⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
⑥HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。
3、HTML特点
取自百度百科:
- 简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便
- 可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
- 平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
- 通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)
二、HTML基础
1、书写规范
代码示例:
<!DOCTYPE html> <!-- 约束,声明 -->
<!-- html标签,表示html的开始,lang=“en" 表示默认显示英文 lang="zh_CN" 表示默认显示英文-->
<html lang="zh_CN">
<!-- heml标签一般分为两部分,head body -->
<!--head 表示头部信息,一般包含三部分 ,title标签,css样式,js代码-->
<head>
<!--meta charset="UTF-8":表示当前页面使用utf-8 字符集 -->
<meta charset="UTF-8">
<!-- 表示页面标题 -->
<title>某宝</title>
</head>
<!-- body 标签:是 html界面显示的主题内容-->
<body>
hello html
</body>
</html>
html注释:
<!-- 这是一个注释-->
注:将注释插入 HTML 代码中,可以提高其可读性。浏览器会忽略注释,不会显示它们。
2、HTML 文档 = 网页
开始标签和结束标签中间的内容为为纯文本
HTML 文档包含 HTML 标签和纯文本。
HTML文件以.html或.htm结尾
HTML文档用来描述网页:
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
3、HTML元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
3.1、HTML 元素语法:
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
3.2、嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
<!--
下面HTML代码表示:
在<body>元素中嵌套了<div>元素
在<div>元素中又嵌套了<h2>、<p>元素
同时在<P>元素内又嵌套了<span>元素和<br>空元素
-->
<body>
<div>
这是一个div文本
<h2>这是一个标题</h2>
<p>
<span>这是一个span文本</span><br/>
这是一个段落
</p>
</div>
</body>
3.3、空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的
注:空元素=空标签
例:< br > 就是没有关闭标签的空元素(< br > 标签定义换行)
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 < br />,是关闭空元素的正确方法
注:虽然不加斜杠的空元素 < br >在所有浏览器中也是有效的,但强烈建议使用 < br />形式来操作。
目前在HTML中有以下这些空元素(空标签):
<br>、<hr>、<img>、<input>、<link>、<meta>、
<area>、<base>、<col>、<colgroup>、<command>、
<embed>、<keygen>、<param>、<source>、<track>、<wbr>
4、 HTML元素 VS HTML标签
1、HTML 标记标签通常被称为 HTML 标签 (HTML tag)
- HTML 标签是由==尖括号包围的关键词==,比如 < html>
- HTML 标签通常是成对出现的,比如 < div > 和 < /div>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 也有单独呈现的标签,如:< img src=“百度百科.jpg” />等。
- 一般成对出现的标签,其内容在两个标签中间。单独呈现的标签,则在标签属性中赋值。如< h1>标题< /h1>和 < input type=“text” value=“按钮” />。
- 网页的内容需在< html>标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在< head>标签中,而网页需展示的内容需嵌套在< body>标签中。某些时候不按标准书写代码虽然可以正常显示,但是作为职业素养,还是应该养成正规编写习惯。
2、HTML元素
HTML 元素指的是==从开始标签(start tag)到结束标签(end tag)的所有代码==。
3、举例:
<div>
这是一个div文本
<span>这是一个span文本</span><br/>
</div>
<!--
说明:
从<div>开始到</div>结束的所有内容(包括<div>、</div>)称为一个div元素
这个div元素中又包含 一段文本(这是一个div文本)、嵌套了一个span元素(<span>这是一个span文本</span>)和一个<br/>空元素 三部分。
其中的<div>、</div>(这一对)被称为div标签,<span>、</span>被称为span标签、<br/>被称为br标签
细分<div>:div开始标签,</div>:div结束标签
-->
5、HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息
属性总是以 名称=值 (类似于键值对)的形式出现,比如:name=“value”。
属性总是在 HTML 元素的开始标签中规定。
例:
<a href="http://www.baidu.com.cn">这是一个超链接</a>
<!--href:在此为a标签的一个属性,用来指示链接的目标-->
注意:
1、属性和属性值对大小写不敏感,但推荐使用小写的属性/属性值。
2、要始终为属性值加引号,属性值应该始终被包括在引号内,双引号最常用,不过使用单引号也
5.1、HTML 全局属性
全局属性可用于任何 HTML 元素
以下取自W3school:
属性 | 描述 |
---|---|
accesskey | 规定激活元素的快捷键。 |
class | 规定元素的一个或多个类名(引用样式表中的类)。 |
contenteditable | 规定元素内容是否可编辑。 |
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
data-* | 用于存储页面或应用程序的私有定制数据。 |
dir | 规定元素中内容的文本方向。 |
draggable | 规定元素是否可拖动。 |
dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
hidden | 规定元素仍未或不再相关。 |
id | 规定元素的唯一 id。 |
lang | 规定元素内容的语言。 |
spellcheck | 规定是否对元素进行拼写和语法检查。 |
style | 规定元素的行内 CSS 样式。 |
tabindex | 规定元素的 tab 键次序。 |
title | 规定有关元素的额外信息。 |
translate | 规定是否应该翻译元素内容。 |
三、HTML标签介绍
1、基础标签
1.1、<!DOCTYPE>声明
<!--下为HTML5的 DOCTYPE声明-->
<!DOCTYPE html>
作用:使浏览器获知文档类型(上述声明为HTML5文档)
注意:<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 < html > 标签之前
<!DOCTYP>声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.1.2、< html > 、< head >、< body>标签
作用:定义HTML文档
<html lang="en">
<head>
这里是文档的头部
</head>
<body>
这里是文档的主体
</body>
</html>
1.3、< title> 标签
作用:定义文档的标题
< title> 标签是 < head> 标签中唯一要求包含的东西
1.4、HTML 标题< h>
HTML 标题(Heading)是通过 < h1> - < h6> 等标签进行定义的。
< h1> 定义最大的标题。< h6> 定义最小的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
...
注意:请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题
因为搜索引擎会使用标题为网页的结构和内容编制索引,用户可以通过标题来快速浏览网页。
可添加的事件属性:
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup。
1.5、HTML 段落< p>
作用:定义段落
<p>这是一个段落</p>
注:p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
默认会在段落的上方和下方空出1行 (若有就不在空出)。
1.6、 < br>、< hr> 标签
< br>作用:插入一个换行符。使用时为< br />
< hr> 作用:在 HTML 页面中创建一条水平线。使用时为< hr />
2、表单标签
2.1、< form> 标签
作用:用于为用户输入创建 HTML 表单。
HTML 表单用于向服务器传输数据。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend和 label 元素。
2.11< form> 标签常用属性
属性 | 值 | 描述 |
---|---|---|
action | URL | 规定当提交表单时向何处发送表单数据。(设置提交的服务器地址) |
method | get、post | 规定用于发送 form-data 的 HTTP 方法。(设置提交方式) |
name | form_name | 规定表单的名称。 |
target | _blank、_self、_parent、_top、framename | 规定在何处打开 action URL。 |
2.12、method属性值描述:
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法:POST 方法和 GET 方法
POST 请求特点:
1.浏览器地址栏中只有action属性值(即服务器地址url)
2.相对于GET请求要安全
3.理论上没有数据长度的限制
GET请求的特点:
1.浏览器地址栏中的地址:action属性[+ ? + 请求参数]
请求参数的格式是 name=value 键值对 中间用 & 连接
2.不安全,信息泄露,如:密码框中的信息
3.有数据长度的限制
附:
1.POST方法请求过程:
首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
2.GET方法 请求过程
浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
2.13、target属性值描述
值 | 描述 |
---|---|
_blank | 在新窗口中打开。 |
_self | 默认。在相同的框架中打开。 |
_parent | 在父框架集中打开。 |
_top | 在整个窗口中打开。 |
framename | 在指定的框架中打开。 |
2.14、举例:
<form action="http://www.baidu.com" method="post">
<h1 align="center">用户注册</h1>
<!--
input标签:定义输入域
type:指示 input元素的类型
默认:text(单行文本框)
password:密码域
radio:单选按钮 name属性:可设置分组 checked="checked" :设置默认选中
checkbox:复选框
reset:重置按钮 value属性:可设置按钮上的内容
sumbit:提交按钮 value属性:可设置按钮上的内容
button:按钮 value属性:可设置按钮上的内容
file:文件上传域
hidden:隐藏域 当我们要发送某些信息,而这些信息不需要用户参与。就可以使用隐藏域,(提交时也会发送给服务器)
value:在文本域、密码域中 定义元素的默认值
select标签:创建下拉列表
option标签:是下拉列表中的选项 selected="selected" 设置默认选中
textarea标签:创建多行文本框
rows:设置可以显示几行的高度
cols:设置每行可以显示几个字符宽度
-->
<table align="center">
<tr>
<td>用户名称:</td>
<td><input type="text"name="userName" value="默认值"></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="verifyPassword"></td>
</tr>
<tr>
<td> 性别:</td>
<td><input type="radio" name="sex" checked="checked" value="boy">男
<input type="radio" name="sex" value="girl">女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox"name="hobby" value="js">javaScript
<input type="checkbox"name="hobby" value="cpp">C++
</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select name="Country">
<option value="none">--请选择国籍--</option>
<option selected="selected" value="CHN">--中国--</option>
<option value="USA">--美国--</option>
<option value="US">--英国--</option>
<option value="France">--法国--</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="30" name="desc">这里是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset"></td>
<td align="right"><input type="submit"></td>
</tr>
</table>
<!-- <input type="button" value="name">-->
<input type="hidden" name="action" value="login">
</form>
运行结果:
2.2、< input>标签
作用:< input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
注:< input>标签常用在< form>内,作为表单元素出现
input标签常用属性有 type、name、value
name属性:规定 input 元素的名称。用于对提交到服务器后的表单数据进行标识。
2.21、type属性 值描述:
值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。(隐藏域) |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。(密码框) |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。(文本框) |
2.22、value属性值描述
value属性:为 input 元素设定值
对于不同的输入类型,value 属性的用法也不同:
- type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
- type=“text”, “password”, “hidden” - 定义输入字段的初始值
- type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
注意:< input type=“checkbox”> 和 < input type=“radio”> 中必须设置 value 属性
2.3、< textarea>标签(文本域)
作用:定义多行的文本输入控件
在起始标签之间输入的文本为文本域的默认值
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性
2.31< textarea>常用属性
属性 | 值 | 描述 |
---|---|---|
cols | number | 规定文本区内的可见宽度。 |
form | form_id | 规定文本区域所属的一个或多个表单。 |
maxlength | number | 规定文本区域的最大字符数。 |
name | name_of_textarea | 规定文本区的名称。 |
placeholder | text | 规定描述文本区域预期值的简短提示。 |
readonly | readonly | 规定文本区为只读。 |
required | required | 规定文本区域是必填的。 |
rows | number | 规定文本区内的可见行数。 |
wrap | hardsoft | 规定当在表单中提交时,文本区域中的文本如何换行。。 |
<textarea rows="10" cols="30" name="desc">这里是默认值</textarea>
2.4、< select>标签(下拉列表)
作用:select 元素可创建单选或多选菜单。select 元素是一种表单控件,可用于在表单中接受用户输入
常用在表单元素中。
2.41 < select>标签常用属性
属性 | 值 | 描述 |
---|---|---|
disabled | disabled | 规定禁用该下拉列表。 |
form | form_id | 规定文本区域所属的一个或多个表单。 |
multiple | multiple | 规定可选择多个选项。 |
name | name | 规定下拉列表的名称。 |
required | required | 规定文本区域是必填的。 |
size | number | 规定下拉列表中可见选项的数目。 |
2.42、< option> 标签
作用:option 元素定义下拉列表中的一个选项(一个条目)
注意:浏览器将 < option> 标签中的内容作为 < select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部
常用属性:
属性 | 值 | 描述 |
---|---|---|
selected | selected | 规定选项(在首次显示在列表中时)表现为选中状态。 |
value | text | 定义送往服务器的选项值。 |
2.43、举例:
<select name="Country">
<option value="none">--请选择国籍--</option>
<option selected="selected" value="CHN">--中国--</option>
<option value="USA">--美国--</option>
<option value="US">--英国--</option>
<option value="France">--法国--</option>
</select>
2.5、< label> 标签
作用:为 input 元素定义标注(标记)。
注:label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
< label> 标签的 for 属性应当与相关元素的 id 属性相同
属性:
属性 | 值 | 描述 |
---|---|---|
for | id | 规定 label 绑定到哪个表单元素。 |
举例:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
3、列表标签
3.1、< ul> < ol>标签
ul标签定义无序列表 ol标签定义有序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
ul属性:
属性 | 值 | 描述 |
---|---|---|
compact | compact | 不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。 |
type | disc、square、circle | 不赞成使用。请使用样式取代它。规定列表的项目符号的类型。 |
ol属性:
属性 | 值 | 描述 |
---|---|---|
reversed | reversed | 规定列表顺序为降序(9,8,7…) (HTML5新加属性) |
start | number | 规定有序列表的起始值。 |
type | 1、A、a、I、i | 规定在列表中使用的标记类型。 |
3.2、< li>标签
作用:定义列表项目,可用在有序列表 (< ol>) 和无序列表 (< ul>) 中。
3.3、< dl>、< dt>、< dd>标签
< dl> 标签定义了定义列表(definition list)(自定义列表)
< dl> 标签用于结合 < dt>(定义列表中的项目)和 < dd>(描述列表中的项目)
举例:
<html>
<body>
<h2>一个定义列表:</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
运行结果:
4、表格标签
4.1、< table> 标签
作用:定义 HTML 表格
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
< table> 标签属性:
属性 | 值 | 描述 |
---|---|---|
align | left、center、right | 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式代替。规定表格的背景颜色。 |
border | pixels | 规定表格边框的宽度。 |
cellpadding | pixels、% | 规定单元边沿与其内容之间的空白。 |
cellspacing | pixels、% | 规定单元格之间的空白。 |
4.2、< tr>、< th> 、< td> 标签
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
理解:table元素中的tr元素的个数,表示表格的行数,tr元素中的td元素的个数,表示这一行分成几列。
注:th元素相当于一个特殊的tr元素。
4.3、 < caption> 标签
作用:caption 元素定义表格标题
注意:caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
4.4、举例
4.41、带标题的表格
<table border="1">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
4.42、带标签的表格
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
运行结果:
4.43、跨行、跨列、去空隙的表格
colspan属性设置跨行 rowspan属性设置跨列 cellspacing属性设置单元格之间的空白间隙
<table align="center" border="1" width="200" height="200" cellspacing="0">
<tr>
<th colspan="2">1.1</th>
<th>1.3</th>
</tr>
<tr>
<td align="center">2.1</td>
<td rowspan="2">2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.3</td>
</tr>
</table>
运行结果:
5、链接标签
5.1、< a> 标签
作用:定义超链接,用于从一张页面链接到另一张页面。
< a> 元素最重要的属性是 href 属性,它指示链接的目标
注:被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)
请使用 CSS 来设置链接的样式。
举例:1、链接到同一界面的不同位置
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
举例:2、在新的浏览器窗口打开链接
<a href="http://www.w3school.com.cn/" target="_blank">W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p>
5.2、< link> 标签
作用:定义文档与外部资源的关系,最常用于链接样式表。
link空元素定义在HTML文档的头部。
举例:链接CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS测试</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="Test1.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<div>div标签3</div>
<span>span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
</body>
</html>
Test1.css中的代码
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
6、样式、节标签
6.1、< span>、< div>标签 (节标签)
< span>作用:用来组合文档中的行内元素,以便通过样式来格式化它们。
如果不对 span 应用样式(CSS样式),那么 span 元素中的文本与其他文本不会任何视觉上的差异
(他的长度是封装的数据(文本信息…)的长度)
p.tip span {
font-weight:bold;
color:#ff9955;
}
<p class="tip"><span>提示:</span>... ... ...</p>
< div>作用:定义文档中的分区或节,它的内容自动地开始一个新行。
(数据默认独占一行)
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div>
6.2、 < style> 标签
作用:为 HTML 文档定义样式信息
< style> 标签中,type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"
注:style 元素位于 head 部分中,内容为CSS样式代码
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
7、其他标签
7.1、< img> 标签
作用:向网页中嵌入一幅图像。
注意:从技术上讲,< img> 标签并不会在网页中插入图像,而是从网页上链接图像。< img> 标签创建的是被引用图像的占位空间。
必须的属性:
属性 | 值 | 描述 |
---|---|---|
alt | text | 规定图像的替代文本。 |
src | URL | 规定显示图像的 URL。 |
可选的属性:
属性 | 值 | 描述 |
---|---|---|
height | pixels % | 定义图像的高度。 |
width | pixels % | 设置图像的宽度。 |
举例:
<img src="/x/xxx.jpg" alt="图片找不到" />
7.2、 < iframe> 标签
作用:创建包含另外一个文档的内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我是一个iframe<br/>
<!--
iframe标签:创建包含另外一个文档的内联框架
iframe标签与a标签的组合使用
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性中 设置为iframe中name的属性值
-->
<iframe src="hello.html" name="abc" width="800" height="600"></iframe>
<br/>
<ul>
<li><a href="FormView.html" target="abc">
FormView.html
</a></li>
</ul>
</body>
</html>
解释:上述代码表示 首先通过iframe标签创建了一个内联框架,宽800,高600,初始内容为hello.html页面,后又创建了超链接FormView.html 该链接会转到FormView.html页面。通过iframe中的name属性和a标签的targe属性相关联。点击该链接,内联框架的页面会跳转到FormView.html页面。
注:若需要更详细的学习该技术,推荐去w3school网进行进一步学习。
网址:https://www.w3school.com.cn/