HTML5入门：掌握基础结构与标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61115125/article/details/127862947

第一章 HTML5基础

本章目标
什么是HTML XML
HTML5的优势
W3C标准
网页编辑工具
HTML基本结构
网页基本信息
网页的基本标签
图像标签
超链接标签
行内元素和块元素

本章目标

参考:
菜鸟教程:https://www.runoob.com/html/html-tutorial.html
w3school:https://www.w3school.com.cn/tags/tag_html.asp
本章目标
请添加图片描述

什么是HTML XML

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等

HTML5的优势

世界知名浏览器厂商对HTML5的支持：微软，Google，苹果Opera，Mozilla
跨平台

W3C标准

World Wide Web Consortium（万维网联盟）成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括
结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript ）

网页编辑工具

记事本,Dreamweaver,WebStorm,HBuilderX

HTML基本结构

<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    我的第一个网页
  </body>
</html>

HTML标签都以“< >”开始、“</ >”结束

网页中所有的内容都放在<body>和</body>之间

网页基本信息

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

DOCTYPE声明告诉浏览器使用什么规范
<meta>标签
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
gb2312包含全部中文字符
utf-8 则包含全世界所有国家需要用到的字符
页面编码应与页面文件保存时的编码一致
<title>标签
定义文档的标题。

网页的基本标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

通常用于标题或主题，体现标签语义化<h1>最大，<h6>最小
段落标签

<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>

换行标签

<h1>北京欢迎你</h1>
<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
</p>

水平线标签

<h1>北京欢迎你</h1>
<hr/>
<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
</p>

字体样式标签
加粗：<strong>…</strong>斜体：<em>…</em>

<strong>徐志摩人物简介</strong>
<p>
   <em>1910</em>年入杭州学堂<br/>
   <em>1918</em>年赴美国克拉大学学习银行学<br/>
</p>

注释和特殊符号
请添加图片描述

图像标签

在这里插入图片描述

<img src="path" alt="text" title="text"  width="x"  height="y" />

超链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>
1.页面间链接
target常用值：_self、_blank

<a href="https://www.baidu.com" target="_self">百度</a>|<a href="https://www.sina.com.cn/" target="_blank">新浪</a>

2.锚链接


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>锚链接</title>
</head>

<body>
<p><img src="image/logo.jpg" width="305" height="104" alt="logo" /> [<a href="#register">新用户注册帮助</a>] [<a href="#login">用户登录帮助</a>]</p>
<h1>新手指南 - 登陆或注册</h1>
<h2>购物流程</h2>
<img src="image/help_steps.jpg" width="752" height="67" />
<h2><a name="register">新用户注册</a></h2>
<h4>Step 1 点击页面右上方的“注册”按钮注册聚美优品账号。</h4>
<img src="image/login_step1.jpg" width="550" height="132" />
<h4>Step 2 注册前请仔细阅读《聚美优品用户协议》，如无异议请点击“同意以下协议并注册”。请根据相应提示在信息栏内填入您的注册信息。</h4>
<img src="image/signup_step2.jpg" width="716" height="588" />
<p>注册成功后系统将自动登录您的账号，并转至聚美优品首页。</p>
<h2><a name="login">登录</a></h2>
<h4>Step 1 如您已经拥有聚美账号，请点击页面右上方的“登录”按钮</h4>
<img src="image/login_step1.jpg" width="550" height="132" />
<h4>Step 2 在登录页面的信息栏内填入对应信息，点击“登录”按钮进行登录，或通过选择登录框下方的合作账号进行快速登录。登录成功后，系统将自动跳转至聚美优品首页。</h4>
<img src="image/login_step2.jpg" width="716" height="528" />
</body>

</html>

3.功能性链接

[<a href="mailto:36264128@qq.com">联系我们</a>]

行内元素和块元素

块元素:无论内容多少，该元素独占一行（p、h1-h6…）
行内元素:内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)

    <p>我是p元素</p>
    <h1>我是标题h1</h1>
    <a href="#">我是超链接a元素</a>
    <strong>我是strong元素</strong>