HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

codeAB

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量968

点赞数

分类专栏： web前端文章标签： HTML

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、HTML 简介

    1、什么是HTML
        HTML是用来描述网页的一种语言。
        HTML指的是超文本标记语言(Hyper Text Markup Language)。
        HTML不是一种编程语言，而是一种标记语言(markup language)。
        标记语言是一套标记标签(markup tag)。
        HTML使用标记标签来描述网页。

    2、HTML标签
        HTML标记标签通常被称为HTML标签(HTML tag)。
        HTML标签是由尖括号包围的关键词，比如<html>。
        HTML标签通常是成对出现的，比如<b>和</b>。
        标签对中的第一个标签是开始标签，第二个标签是结束标签。
        开始和结束标签也被称为开放标签和闭合标签。

    3、HTML文档=网页
        HTML文档描述网页。
        HTML文档包含HTML标签和纯文本。
        HTML文档也被称为网页。

二、HTML基础
基本的HTML标签-四个实例

1、HTML标题
HTML标题（Heading）是通过<h1>-<h6>等标签进行定义的。

2、HTML段落
HTML段落是通过<p>标签进行定义的。

    3、HTML链接
        HTML链接是通过<a>标签进行定义的。
        <a href="url"></a>

    4、HTML图像
        HTML图像是通过<img>标签进行定义的。
        <img src="url" width="w" height="h"/>

三、HTML元素

1、HTML元素
HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

    2、HTML元素语法
        HTML元素以开始标签起始
        HTML元素以结束标签终止
        元素的内容是开始标签与结束标签之间的内容
        某些HTML元素具有空内容（empty content）
        空元素在开始标签中进行关闭（以开始标签的结束而结束）
        大多数HTML元素可拥有属性

    3、嵌套的HTML元素
        大多数HTML元素可以嵌套（可以包含其他HTML元素）。
        HTML文档由嵌套的HTML元素构成。

    4、不要忘记结束标签
        即使您忘记了使用结束标签，大多数浏览器也会正确地显示HTML。
        注释：未来的HTML版本不允许省略结束标签。

    5、空的HTML元素
        没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。
        <br>就是没有关闭标签的空元素（<br> 标签定义换行）。
        在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。
        在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。
        即使<br>在所有浏览器中都是有效的，但使用<br />其实是更长远的保障。

    6、HTML提示：使用小写标签
        HTML标签对大小写不敏感：<P> 等同于<p>。许多网站都使用大写的HTML标签。
        万维网联盟（W3C）在HTML 4 中推荐使用小写，而在未来(X)HTML版本中强制使用小写。

四、HTML属性
属性为HTML元素提供附加信息。

    1、HTML属性
        HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。
        属性总是以名称/值对的形式出现，比如：name="value"。
        属性总是在HTML元素的开始标签中规定。

    2、HTML提示：使用小写属性
        属性和属性值对大小写不敏感。
        不过，万维网联盟在其HTML4 推荐标准中推荐小写的属性/属性值。
        而新版本的(X)HTML要求使用小写属性。

五、HTML标题

    1、HTML标题
        标题（Heading）是通过<h1>-<h6>等标签进行定义的。
        <h1>定义最大的标题。<h6>定义最小的标题。

    2、HTML水平线
        <hr/>标签在HTML页面中创建水平线。
        hr元素可用于分隔内容。

3、HTML注释
        可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

六、HTML段落

1、HTML段落
段落是通过<p> 标签定义的。

2、HTML折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br/>标签。

七、HTML文本格式化

    1、文本格式化
        <b>bold</b>
        <strong>strong</strong>
        <big>big</big>
        <em>emphasized</em>
        <i>italic</i>
        <small>small</small>
        <sub>subscript</sub>
        <sup>superscript</sup>

2、预格式文本
<pre></pre>

    3、“计算机输出”标签
        <code>Computer code</code>
        <kbd>Keyboard input</kbd>
        <tt>Teletype text</tt>
        <samp>Sample text</samp>
        <var>Computer variable</var>

4、地址
<address></address>

    5、缩写和首字母缩写
        <abbr title="etcetera">etc.</abbr>
        <acronym title="World Wide Web">WWW</acronym>

6、文字方向
<bdo dir="rtl">Here is some Hebrew text</bdo>

    7、块引用
        <blockquote></blockquote>
        <q></q>

8、删除字效果和插入字效果
<p>一打有<del>二十</del><ins>十二</ins> 件。</p>

八、HTML CSS

    1、外部样式表
        样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
        <head>
            <link rel="stylesheet" type="text/css" href="mystyle.css">
        </head>

    2、内部样式表
        当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
        <head>
            <style type="text/css">
                body {background-color: red}
                p {margin-left: 20px}
            </style>
        </head>

    3、内联样式
        当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
        <p style="color: red; margin-left: 20px">
            This is a paragraph
        </p>

九、HTML链接

    1、HTML链接语法
        <a href="url">Link text</a>
        href 属性规定链接的目标。

    2、HTML链接-target属性
        使用Target属性，你可以定义被链接的文档在何处显示。
        <a href="url" target="_blank">Link text</a>

    3、HTML链接-name属性
        命名锚的语法：
        <a name="label">锚（显示在页面上的文本）</a>
        <a name="tips">基本的注意事项-有用的提示</a>
        <a href="#tips">有用的提示</a>
        <a href=“url#tips”>有用的提示</a>

十、HTML图像

    1、图像标签（<img>）和源属性（Src）
        定义图像的语法是：
        <img src="url"/>

    2、替换文本属性（Alt）
        alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
        <img src="boat.gif" alt="Big Boat">

十一、HTML表格

    1、表格
        表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
        <table>
              <tr>
                     <td></td>
              </tr>
        </table>

2、表格和边框属性
<table border="">

3、表格的表头
<th></th>

4、表格中的空单元格
<td> </td>

十二、HTML列表

    1、无序列表
        无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
        无序列表始于<ul>标签。每个列表项始于<li>。
        列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    2、有序列表
        同样，有序列表也是一列项目，列表项目使用数字进行标记。
        有序列表始于<ol>标签。每个列表项始于<li>标签。
        列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    3、定义列表
        自定义列表不仅仅是一列项目，而是项目及其注释的组合。
        自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
        定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

十三、HTML<div>和<span>

    1、HTML块元素
        大多数 HTML 元素被定义为块级元素或内联元素。
        “块级元素”译为block level element，“内联元素”译为inline element。
        块级元素在浏览器显示时，通常会以新行来开始（和结束）。

2、HTML内联元素
内联元素在显示时通常不会以新行开始。

    3、HTML<div>元素
        HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器。
        <div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
        如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
        <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

    4、HTML<span>元素
        HTML<span>元素是内联元素，可用作文本的容器。
        <span>元素也没有特定的含义。
        当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

十四、HTML布局

1、HTML布局-使用<div>元素
div元素是用于分组HTML元素的块级元素。

    2、HTML布局-使用表格
        使用HTML<table>标签是创建布局的一种简单的方式。
        可以使用<div>或者<table>元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

十五、HTML表单和输入

    1、表单
        表单表单是一个包含表单元素的区域。
        表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
        表单使用表单标签（<form>）定义。
        <form>
            ...
            input元素
            ...
        </form>

    2、输入
        多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。
        大多数经常被用到的输入类型如下：

    3、文本域（Text Fields）
        当用户要在表单中键入字母、数字等内容时，就会用到文本域。
        <form>
            <input type="text" name=""/>
        </form>

4、密码（password）
<input type="password" name="">

    5、单选按钮（Radio Buttons）
        当用户从若干给定的的选择中选取其一时，就会用到单选框。
        <form>
            <input type="radio" name="sex" value=""/>
            <br/>
            <input type="radio" name="sex" value=""/>
        </form>

    6、复选框（Checkboxes）
        当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
        <form>
            <input type="checkbox" name=""/>
            <br/>
            <input type="checkbox" name=""/>
        </form>

    7、表单的动作属性（Action）和确认按钮
        当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
        <form name="" action="" method="">
            <input type="submit" value=""/>
        </form>

十六、HTML框架

1、框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

    2、框架结构标签（<frameset>）
        框架结构标签（<frameset>）定义如何将窗口分割为框架
        每个frameset定义了一系列行或列
        rows/columns 的值规定了每行或每列占据屏幕的面积

    3、框架标签（Frame）
        Frame标签定义了放置在每个框架中的 HTML 文档。
        <frameset cols=",">
            <frame src="">
            <frame src="">
        </frameset>

    4、基本的注意事项-有用的提示
        假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize="noresize"。
        为不支持框架的浏览器添加<noframes>标签。
        重要提示：不能将<body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。
        <frameset cols=",">
            <frame src="">
            <frame src="">
        <noframes>
            <body>您的浏览器无法处理框架！</body>
        </noframes>
        </frameset>

十七、HTML Iframe

    1、添加iframe的语法
        <iframe src="URL"></iframe>
        URL 指向隔离页面的位置。

    2、Iframe-设置高度和宽度
        height和width属性用于规定iframe的高度和宽度。
        属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
        <iframe src="URL" width="" height=""></iframe>

    3、Iframe-删除边框
        frameborder属性规定是否显示iframe周围的边框。
        设置属性值为 "0" 就可以移除边框

    4、使用iframe作为链接的目标
        iframe可用作链接的目标（target）。
        链接的target属性必须引用iframe的name属性：
        <iframe src="URL" name="iframename"></iframe>
        <a href="URL" target="iframename"></a>

十八、HTML背景

1、背景（Backgrounds）
<body>拥有两个配置背景的标签。背景可以是颜色或者图像。

    2、背景颜色（Bgcolor）
        背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
        <body bgcolor="#000000">
        <body bgcolor="rgb(0,0,0)">
        <body bgcolor="black">

    3、背景（Background）
        背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
        <body background="clouds.gif">
        <body background=http://www.w3school.com.cn/clouds.gif>

    4、基本的注意事项 - 有用的提示：
        <body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的HTML标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
        应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

十九、HTML颜色

    1、颜色值
        颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
        每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

二十、HTML颜色名
提示：仅有16种颜色名被W3C的HTML 4.0标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

原作者博客：http://blog.csdn.net/GoslingBoy;

codeAB

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

一、HTML 简介 1、什么是HTML HTML是用来描述网页的一种语言。 HTML指的是超文本标记语言(Hyper Text Markup Language)。 HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。 H
复制链接

扫一扫