HTML

作者: 美兮_647e | 来源:发表于2020-10-21 11:45 被阅读0次

一、HTML-基础

1、标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的,h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推

<body>

            <h1>这是标题 1</h1>

            <h2>这是标题 2</h2>

            <h3>这是标题 3</h3>

            <h4>这是标题 4</h4>

            <h5>这是标题 5</h5>

            <h6>这是标题 6</h6>

</body>

2、段落

HTML段落是通过标签<p>来定义的

<body>

            <p>这是一个段落。</p>

            <p>这是一个段落。</p>

</body>

3、链接

HTML链接是通过标签<a>来定义的

<body>

            <a href="https://xxxxxxxxxx.com">这是一个链接使用了 href 属性</a>

</body>

4、图像

HTML 图像是通过标签 <img> 来定义的。

<body>

            <img src="/路径.png"  />

</body>

5、水平线

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

<body>

            <p>hr 标签定义水平线:</p>

            <hr />

            <p>这是段落。</p>

            <hr />

            <p>这是段落。</p>

            <hr />

            <p>这是段落。</p>

</body>

6、注释

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

<body>

      <!--这是一个注释,注释在浏览器中不会显示-->

            <p>这是一个段落</p>

</body>

7、折行

在不产生一个新段落的情况下换行(新行)

<body>

            <p>这个

                  <br>段落

                  <br>演示了分行的效果

            </p>

</body>

二、HTML-文本格式

<b> 粗体文本

<em>  着重文字

<i>  斜体字

<small>  小号字

<strong>  加重语气

<sub>  下标字

<sup>  上标字

<del>  删除字

<ins>  下划线

三、HTML-头部

1、<head>  定义了稳当的信息。

2、<title>  定义了标题。

3、<base>  描述基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。

4、<meta>  ①描述了一些基本元数据(元数据不会显示在页面上);②通常用于指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据。

5、<style>  定义了HTML文档的样式文件。

6、<script>  定义了客户端的脚本文件。

四、HTML-图像

1、图像标签和源属性(Src)

①在 HTML 中,图像由<img> 标签定义,<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签;

②要在页面上显示图像,需要使用源属性(src),src 指 "source",源属性的值是图像的 URL 地址;

③eg:<img src="url" alt="some_text">URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

2、Alt属性

alt属性用来为图像定义一串预备的可替换的文本(替换文本属性的值是用户定义)

eg: <img src="xxxxxx.gif" alt="Big Boat">

注:在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。

五、HTML-表格

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

eg:

<table border="1">

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

注:border=“1”边框。

六、列表

1、无序列表

此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

eg:

<ul>

      <li>111111</li>

      <li>222222</li>

</ul>

2、有序列表

列表项目使用数字进行标记,有序列表始于<ol>标签

eg:

<ol>

      <li>111111</li>

      <li>222222</li>

</ol>

3、自定义列表

列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以 <dd> 开始。

eg:

<dl>

        <dt>111111</dt>

                <dd>- 333333</dd>

        <dt>222222</dt>

                <dd>- 444444</dd>

</dl>

注:列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

七、HTML-元素

1、区块元素

大多数 HTML 元素被定义为块级元素或内联元素,块级元素在浏览器显示时,通常会以新行来开始(和结束)。

eg:<h1>, <p>, <ul>, <table>

2、内联元素

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

eg:<b>, <td>, <a>, <img>

3、<div>元素

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

4、<span>元素

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

八、HTML-表单

表单标签<form>  文本域<textarea>  单选框<radio-buttons>  复选框<checkboxes>

1、表单输入元素-文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

eg:

<form>

            name: <input type="text" name="firstname"> <br>

</form>

注:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

2、密码字段

密码字段通过标签<input type="password">来定义

eg:

<form>

          password:<input  type="password" name="pwd">

</form>

注:密码字段字符不会明文显示,而是以星号或圆点代替。

3、单选按钮

<input  type="radio">标签定义了表单单选框选项。

eg:

<form>

          <input  type="radio"  name="sex"  value="male">111111

</form>

4、复选框(Checkboxes)

<input  type="checkbox">  定义了复选框。用户需要从若干给定的选择中选取一个或若干选项。

<from>

            <input  type="checkbox"  name="vehicle"  value="bike">1111111

</from>

5、提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

eg:

<form name="input" action="html_form_action.php" method="get">

            Username: <input type="text" name="user">

                              <input type="submit" value="Submit">

</form>

九、HTML-框架

iframe属性-边框

frameborder 属性用于定义iframe表示是否显示边框,设置属性值为 "0" iframe无边框。

eg:

<body>

          <iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">

          </iframe>

</body>

相关文章

  • 基础编程语言学习线路图

    HTML HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTML段落HT...

  • HTML头部-10

    HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...

  • html 大纲

    html 通用 html 简介 html 常用标签 html 属性 html 表格 html 字体 html 表单...

  • web 前端学习线路图

    一、HTML 教程 HTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性 HTML标题HTM...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • HTML 基础

    HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 文本格式化标签 HTML ...

  • html常用的基本标签

    HTML基础包括web工作原理,HTML概述,HTML基本标签和HTML高级标签。 〈html〉...〈/html...

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML:基础(2)元素

    HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...

  • 2018-10-29 第二阶段 day1 htm

    1.html说明 说明html版本html5-- ...

网友评论

      本文标题:HTML

      本文链接:https://www.haomeiwen.com/subject/ojbsmktx.html