本章目标
参考:
菜鸟教程: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>