欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

（web前端学习笔记）HTML基础

程序员文章站 2022-04-29 12:34:16
...

HTML基础

一、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特点

取自百度百科：

  1. 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便
  2. 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
  3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
  4. 通用性：另外，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>、<******>、<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>

运行结果：（web前端学习笔记）HTML基础

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>

运行结果：（web前端学习笔记）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>

运行结果：（web前端学习笔记）HTML基础

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>

运行结果：（web前端学习笔记）HTML基础

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/

相关标签： web前端笔记

上一篇： 标签列表选择view：ChooseFlowView

下一篇： HTML标签总结

推荐阅读