初识HTML
HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文字图片视频音频动画等
w3C标准
w3c 万维网联盟
结构化标准语言（HTML，XML）
表现标准语言（CSS）
行为标准（DOM，ECMAScript）
HTML基本结构
网页头部：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
主体部分：
<body>
我的第一个网页
</body>
单独呈现的标签（空元素），如
意为用/来关闭元素， 称为自闭合标签
网页基本信息
HTML的注释部分：IDE快捷键 ctrl+/
html，head，meta，title，body
<!--DOCTYPE 告诉浏览器我们要使用什么规范-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签，用来描述网站的一些信息-->
<!-- meta标签一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keyword" content="html">
<!-- 网页标题 -->
<title>我的第一个网页</title>
</head>
<!--body标签表示网页主体-->
<body>
hello,world
</body>
</html>
网页基本标签
标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
段落标签
快捷键：p+TAB
扫描二维码关注公众号，回复：
12491029 查看本文章
<!--段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，</p>
<p>真奇怪！</p>
换行标签
br+TAB
与段落标签效果相似，但是行距更紧凑
<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，一只没有尾巴，<br/>
真奇怪 <br/>
水平线标签
<!--水平线标签-->
<hr/>
字体样式标签
粗体 strong
斜体 em
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>i love u</strong>
斜体: <em>i love u</em>
注释和特殊符号
空格  ；
特殊符号： & 中间借助ide查看；and开头 分号结尾
<!--特殊符号-->
空 格
空 格
<br/>
>大于
<br>
<小于
<br>
©版权所有
图像标签
常见图像格式：jpg，png，gif，bmp
img标签：src alt 必填
<img src="" alt="">
<img src= "path" alt = "text" title = "text" width="x" height = "y"/>
src 图像地址
相对地址：src= “…/resources/image/1.jpg” 推荐使用
…/上一级目录
绝对地址：从盘符开始写的，一般不推荐使用
alt 图像的替代文字 图片不存在时，用来替代图片的文字
title 鼠标悬停提示文字
width 图像宽度
height 图像高度
链接标签
``<a href="path"target = “目标窗口位置”>链接文本或图像`
链接文本或图像可以嵌套image标签或者写文字
href为必填 表示要跳转到哪个界面
target 表示窗口在哪里打开
"_blank"新标签打开
"_self"在当前页面打开
超链接
页面间链接
从一个界面链接到另一个界面
锚链接
-
需要一个锚标记
此例写在body最上面
使用name属性 定义锚标记为top
<!--使用name作为锚标记 top--> <a name = "top">顶部</a> -
跳转到标记
使用href = #锚标记，实现跳转
回到顶部，页面内部跳转
<!--通过#号实现锚链接跳转--> <a href="#top">回到顶部</a>
也可以实现 跨页面跳转到标记
<a href="链接标签.html#down">跳转</a>
功能性链接
邮件链接 mailto：
<a href="mailto:[email protected]">点击联系我</a>
QQ推广
补充内容
块元素
无论内容多少，该元素独占一行
例如：
h1 -h6 ……
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
例如：