Web前端-HTML基础知识概述

HTML基础知识概述

这篇文章主要介绍html的一些基础知识，话不多说，直接进入主题

前言 web标准以及相关机构

web标准

web标准：制作网页要遵循的规范
web标准规范的分类：结构标准表现标准行为标准
结构： html 表现： css 行为：javascript

相关机构

W3C制定的结构和表现的标准
W3C( World Wide Web Consortium )万维网联盟，用来制定web标准的机构（组织），创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。(制定了结构和表现的标准，非赢利性的。)
WHATWG
网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
ECMA制定的行为的标准
欧洲电脑场商联合会。

一、什么是HTML？

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

网页的基本构成

代码示例

<html>  
      <head>  
           <title>  
            页面标题，显示在浏览器窗口上  
           </title>  
      </head>  
      <body>
            <h1>标题</h1>
            <img src='http://image.baidu.com/5245212' />
      </body> 
</html> 

<!--    HTML注释符
    <html>…</html> 标识网页文件的开始与结束，所有的Html元素，都要放在这对标记中。
    <head>…</head> 标识网页文件的头部信息，如标题、搜索引擎关键字等
    <title>…</title> 标识网页文件的标题
    <body>…</body> 标识网页文件的主体部分
    <img> 图片
 -->

HTML标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>。
- 成对标签（双标签）
  - HTML 标签通常是成对出现的，比如<h1>和 </h1>。
  - 标签对中的第一个标签是开始标签，第二个标签是结束标签。
  - 开始和结束标签也被称为开放标签和闭合标签。
- 自闭合标签（单标签）
  - 单个出现，例如<img />
HTML的基本语法
- 双标签
  <标签属性=“属性值” 属性=“属性值”></标签>
- 单标签
  <标签属性=“属性值” 属性=“属性值” />
- 说明：
  - 标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
  - 一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

二、HTML的常用标签

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
……
<h6>六级标题</h6>

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

空格

&nbsp;（所占位置没有一个确定的值,这与当前字体字号还有浏览器都有关系。）

加粗

<b>加粗内容</b>
<strong>加粗内容</strong>

倾斜

<em>倾斜内容</em>
<i>倾斜内容</i>

强制换行
```
<br />  
```
水平线
```
<hr />
```

列表(ul,ol,dl)
HTML中有三种列表，分别是：无序列表，有序列表，自定义列表

无序列表组成：

    <ul>
        <li>第一行</li>
        <li>第二行</li>
        ．．．．．．
    </ul>

有序列表组成：

    <ol>
    <li>第一行</li>
        <li>第二行</li>
        ．．．．．．
    </ol>

自定义列表

    <dl>
        <dt>标题</dt>
        <dd>描述</dd> 
        ．．．．．．
    </dl>

图片标签

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />

超链接

<a href="目标文件路径及全称/连接地址">链接文本/图片</a>

数据表格的作用及组成
作用：显示数据

<table>
    <tr>    
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        .........
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第一列</td>
        .........
    </tr>
</table>
<!--
    <table></table> 表格标签
    <tr></tr> 每一行
    <td></td> 每一列
-->

表单及其控件

表单的作用：用来收集用户的信息的;

<form name="表单名称" method="post/get" action="">
    <!-- 文本框 -->
    <input type="text" value="默认值"/>
    <!-- 密码框 -->
    <input type="password" />
    <!-- 重置按钮 -->
    <input type="reset" value="按钮内容" />
     <!-- 提交按钮 -->
    <input type="submit" value="按钮内容" />
</form>

div和span
- div : 文档区域，用来把页面划为不同的区域
- span：文本节点，某一小段文本，或是某一个字
```
<div>
    <span>一句话</span>       
</div>
```

概述就这样吧，下次再带来详细的介绍！

posted on 2019-06-24 12:23 爱吃菜的帅多多阅读(94) 评论(0) 收藏举报

刷新页面返回顶部

Web前端-HTML基础知识概述

HTML基础知识概述

前言 web标准以及相关机构

一、什么是HTML？

二、HTML的常用标签

导航

公告