HTML 知识(二)：基础

最新推荐文章于 2022-07-27 18:33:48 发布

鹭岛猥琐男

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量207

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/zzw0221/article/details/90727753

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML5</title>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
</body>
</html>

效果：

2. HTML段落

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

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

3. HTML链接

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

语法：

<a href="url">链接文本</a>

"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

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

效果：

target属性：target="_blank" 在新窗口打开链接。

4. HTML图像

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

<img src="images/pig.jpg"/>

5. HTML属性

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

适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

示例代码：

<img id="img" src="images/pig.jpg"/>

6. HTML 头部

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

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

6.1 <title> 元素:

定义了浏览器工具栏的标题；
当网页添加到收藏夹时，显示在收藏夹中的标题；
显示在搜索引擎结果页面的标题；

6.2 <base> 元素：

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接；

6.3 <link> 元素：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

6.4 <style>元素

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

6.5 <meta> 元素：

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

7. HTML列表

HTML 支持有序、无序和定义列表。

7.1 无序列表

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

效果：

7.2 有序列表

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

效果：

7.3 自定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

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

效果：

8. HTML区块

8.1 <div>元素

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

8.2 <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。

9. 表单和输入

9.1 表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单本身并不可见。

表单使用表单标签 <form> 来设置:

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

9.2 表单-输入元素

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

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

结果：

鹭岛猥琐男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 知识(二)：基础

1. HTML标题HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的第一个HTML5</title>&lt...
复制链接

扫一扫

专栏目录