HTML5基础

最新推荐文章于 2024-07-25 18:08:50 发布

人如梦0

最新推荐文章于 2024-07-25 18:08:50 发布

阅读量459

点赞数 1

本文链接：https://blog.csdn.net/kuangzhujun/article/details/102241381

版权

本文是HTML5的基础教程，涵盖了W3C标准的重要性、HTML5文件的基本结构、网页基本信息（DOCTYPE、title、meta标签）、常见标签（标题、段落、图像、超链接）、列表、表格、媒体元素以及HTML5的结构元素和表单使用。通过学习，读者可以掌握构建网页的基本技能。

摘要由CSDN通过智能技术生成

HTML5基础

单词

head 	头
title	标题
meta	元素可提供相关页面的元素信息
body	正文
W3C		万维网联盟
strong	强状的
target	目标
href	超文本引用

超文本标记语言

W3C标准

1.使用W3C标准的原因

由于流览器之间互不兼容，导致HTML编码规则，违背了HTNL是发明的初哀，因此出现了一个组织

（”万维网联盟“）来制定和维护统一的国际化Web开发标准，确保了浏览器都兼容，万维网联盟由（

World Wide Web Consortium W3C)组成。他是Wed技术领域最权威和具有影响力的国际

中立性技术标准结构。

2.W3C标准的介绍

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，

结构表现行为分别对应三种非常常用的技术 HTML CSS JavaScript。

接下来我们就现进入第一步骤——网页的“结构” 搭建

HTML5文件的基本结构

HTML是一个超文本标记语言，网页有一个标题，一个段落，一张图片等，一个一个的HTML标记完成的。

最开始的语法是<标记>类容<标记>。

标签都是成双成对的出现，以<>开始</>结束，要求成对的出现，标签之间有缩进，体现层次感，方便

阅读和修改。

<html>

<head>

<title>我的第一个网页<title>

<body>

我的第一个网页

<body>

</html>

网页的基本信息

1.DOCTYPE声明

可以约束HTML文档结构，检查是否符合相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档代码

DOCTYPE声明必须位于HTML文档第一行。

2.<title>标签

类似一篇文章的主体，一般为简洁的主题，使读者有兴趣读下去

例如，搜狐网站的主页，如下标题

<title>搜狐—中国最大的门户网站<title>

3.<meta>标签

描述网页的摘要信息，包括文档内容，字符编码信息，搜索关键字，提供的功能和服务的详细描述等。

其目的方便浏览器解析或利于搜索引擎搜索，采用“名称/值” 对的方式描述摘要信息。

有：

<meta charset =“UTF-8” />

国际性通用的字符编码，同样适和于中文和英文。国际通用性好。等…

搜索关键字和内容描述信息如下：

<meta name =“keywords” content ="搜索的字"

网站的内容的具体描述

<meta name =“description” content ="显示内容文字"

<head>标签有个属性lang="en"表示本页面是英文的。

网页的基本标签

有标题标签，段落标签，换行标签，水平线标签等。可使用一个网页结构常用的基本标签

1.标题标签

标题标签标示一段文字的标题或主题，并且支持多层次的类内容结构。HTML提供了六级标题<h1>~<h6>

并赋予了标题一定的外观，所有字体加粗。

例如：

<h1>一级标题<h1>

<h2>二级标题<h2>

<h3>三级标题&ltt;h3>

<h4>四级标题<h4>

<h5>五级标题<h5>

<h6>六级标题<h6>

代码有：

<! DOCTYPE html>
<html>
    <heta lang = "en">
    <meta charset ="UTF-8">
        <title>不同等级标签对比</title>
    </heta>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6
            >
    </body>
</html>

段落标签和换行标签

<p>段落标签<p>表示一段文字等内容 <br/>标签表示强制换行显示

<br/>标签表示标签的开始和结束的标签叫****单标签

<html></html>这样的有开始标签和结束标签叫双标签

代码：

<!DOCTYPE html>
<html>
    <head lang ="en">
        <meta charset ="UTF-8">
        <title>段落标签和换行标签的应用</title>
    </head>
    <body>
        <h1>北京欢迎你</h1>
        <p>北京欢迎你，有梦想谁都了不起！</p> <!--（注释）一段文字结束了-->
        <p>有勇气就会有奇迹。
            北京欢迎你，为你开天辟地	<!--两句链接一起没有结束、没换行-->
            流动中的魅力充满潮气。<br/><!--开始换行-->
            北京欢迎你，在大阳下分享呼吸