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

最基础的HTML知识点

程序员文章站 2022-04-03 08:52:34
...

HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML文档的后缀名

.html
.htm

HTML 网页结构

最基础的HTML知识点
只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML 标签

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

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素: <p>这是一个段落。</p>

HTML 实例

<!DOCTYPE html> <html>

<head>

<meta charset="utf-8"> <!-- 大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。 -->

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>hello world1</h1>

</body>

</html>

实例解析

· <!DOCTYPE html> 声明为 HTML5 文档
· <html> 元素是 HTML 页面的根元素
· <head> 元素包含了文档的元（meta）数据
· <title> 元素描述了文档的标题
· <body> 元素包含了可见的页面内容
· <h1> 元素定义一个大标题

HTML 基础

HTML 元素

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的，并且字体大小依次递减，权重也依次递减。

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

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

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

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

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

<a href="http://www.baidu.com">这是一个百度链接</a>

HTML 图像是通过标签 最基础的HTML知识点 来定义的.

<img src="/images/logo.png" width="258" height="39" />

· HTML 元素可以设置属性
· 属性可以在元素中添加附加信息
· 属性一般描述于开始标签
· 属性总是以名称/值对的形式出现，比如：name=”value”。

HTML 属性

· HTML 元素可以设置属性
· 属性可以在元素中添加附加信息
· 属性一般描述于开始标签
· 属性总是以名称/值对的形式出现，比如：name=”value”。

最基础的HTML知识点

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

最基础的HTML知识点

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<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>
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2



HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

  • Coffee
  • Milk

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下：

  1. Coffee
  2. Milk

HTML 自定义列表

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

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee
- black hot drink
Milk
- white cold drink

HTML 表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
表单使用表单标签 <form> 来设置:

<form>
    .
    input 元素
    .
    </form>

输入元素

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

最基础的HTML知识点

文本域（Text Fields）

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

    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>

密码字段

密码字段通过标签<input type="password"> 来定义，注意:密码字段字符不会明文显示，而是以星号或圆点替代。:

    <form>
        Password: <input type="password" name="pwd">
    </form>

单选按钮（Radio Buttons）

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

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

复选框（Checkboxes）

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

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

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

<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

HTML 字符实体

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

最基础的HTML知识点

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，`
` 元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。
元素的作用是显示表格化的数据。 HTML `` 元素 HTML `` 元素是内联元素，可用作文本的容器 元素也没有特定的含义。 当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。 HTML 样式- CSS CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. CSS 可以通过以下方式添加到HTML中: · 内联样式- 在HTML元素中使用”style” 属性 · 内部样式表 -在HTML文档头部 `` 区域使用`
<body style="background-color:yellow;"> 
    <h2 style="background-color:red;">这是一个标题</h2> 
    <p style="background-color:green;">这是一个段落。</p> 
</body>

<h1 style="font-family:verdana;">一个标题</h1> 
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

内部样式表

<head>
    <style type="text/css">
        body {background-color:yellow;}
        p {color:blue;}
    </style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
相关标签： html 基础知识 编程初学者

上一篇： 数组的处理1

下一篇： Java简单创作一个虚拟收音机

推荐阅读