第一章 HTML5基础

本章目标

参考:
菜鸟教程: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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

‭JavaWeb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值