一个完整的网页,一般由三部分组成:
- HTML :网页的具体内容和结构
- CSS:网页的样式(美化网页最重要的部分)
- JavaScript : 网页的交互效果,比如对用户鼠标的点击相应
HTML学习网站:http://www.w3school.com.cn/h.asp
HTML常用标签:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签 分为六级-->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h5>我是h5</h5>
<h6>我是h6</h6>
<!--分割线-->
<hr>
<!--输入框 单标签-->
<input type="date" placeholder="请输入时间" value="默认值">
<!--段落标签-->
<p>我是段落</p>
<!--图片标签 单标签-->
<img src="http://....png" alt="这是图片不显示时候的默认文字">
<!--列表-->
<!--无序列表-->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
<!--有序列表-->
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ol>
<!--超链接标签 打开网页-->
<!--
_blank 新建标签跳转
_self 当前窗口跳转 (压栈的操作
_top 回到当前页面顶部
_parent 父标签父窗口
默认target 是self
-->
<a target="_top" href="#">我是超链接1 top</a>
<a target="_blank" href="//jd.com">我是超链接2 blank</a>
<a target="_parent" href="//jd.com">我是超链接3 parent</a>
<a target="_self" href="#">我是超链接4 self</a>
<hr>
<!--div标签 类似于iOS中的UIView 容器型-->
<div>
<span>
<p>
我是段落标签p
</p>
</span>
</div>
<hr>
<!--结构标签-->
<!--负责web上下文结构的定义-->
<article>
文章主题内容标签 (一篇博客、一篇论坛帖子、一段用户评论、插件)
</article>
<header>
标记文章头部区域内容
</header>
<footer>
标记文章脚部区域内容
</footer>
<section>
标记区域章节
</section>
<nav>
菜单导航 链接导航
</nav>
<hr>
<!--块级性标签-->
<!--完成web页面区域的划分,确保内容的有效分割-->
<aside>
注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
</aside>
<figure>
对多个元素组合并展示的元素,常与figcaption联合使用
</figure>
<code>
表示一段代码块
</code>
<dialog>
人与人之间的对话,包含dt和dd两个组合元素(dt表示说话者,dd表示说话的内容)
</dialog>
<!--行内语义性标签-->
<!--完成web页面具体内容的引用和描述,丰富展示内容-->
<meter>
特点范围的数值,比如工资、数量、百分比
</meter>
<time>
时间值
</time>
<progress>
进度条 可用max min step进行控制,完成对进度条的表示和监听
</progress>
<video>
视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
</video>
<audio>
音频元素,用于音频播放 支持缓冲预载和多种音频格式
</audio>
</body>
img标签:
- 图片标签只设置高度或者宽度,相当于另一个高度或者宽度设为auto,根据设置的值另一个自动变化缩放
- 如果设置比例,则会缩放浏览器窗口的时候自动缩放
标签类型:
HTML标签根据显示的类型,可以分为3大类:
块级标签 -
div、p 、h1 、h2 、ul 、li
1.独占一行的标签
2.能随时设置宽度和高度行内标签(内联标签)-
span、 a、 label
1.多个行内标签显示在同一行
2.宽度和高度无法修改,取决于实际显示的内容尺寸行内-块级标签(内联-块级标签) -
input、button
1.多个行内-块级标签可以显示在同一行
2.能随时修改标签的宽度和高度
修改CSS中的display属性值
// block: 块级标签 、
// inline:行内标签、
// inline-block:行内块级标签
// none: 隐藏标签
<style>
span {
background-color: yellow;
display: block;
}
</style>