目录
HTML、CSS、JS的关系
HTML是构建网页结构的->毛坯房
CSS是用于美化网页、制作简单的小动画->装修房子
JavaScript用于表单验证、特效、小游戏、与后端数据交互 ->拉网线
HTML版本
主流版本是HTML5: 2014发布
主流浏览器及其内核
Firefox(火狐)—>Gecko
Chrome(谷歌) —>Webkit-—>Blink
IE(IE6,IE7,IE8,IE9,IE10,IE11)—>Trident
Opera(欧朋)—>Webkit
Safari—>Webkit
网页的基本结构
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="utf-8"/>
</head>
<body></body>
</html>
注意事项:
1.HTML不区分大小写
2.所有符号用英文输入法
标题标签
h1~h6
h1最大、h6最小
内容
效果:
1.加粗
2.大小变化
3.语义化含义、重点的意思
段落标签
如果有很多文字的情况下、用p标签进行分段
<p>
第一段文字.....
</p>
列表
无序列表
<ul>
<li>选项一</li>
<li>选项二</li>
</ul>
有序列表
<ol type="1/a/A/i/I">
<li>选项一</li>
<li>选项二</li>
</ol>
自定义列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题N</dt>
<dd>内容N</dd>
</dl>
网页小图标
<head>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
文字修饰标签
<span>部分文字的样式调整</span>
<b>加粗</b>
<i>倾斜</i>
<strong>加粗、并且具有语义化效果</strong>
<em>倾斜、并且具有语义化效果</em>
<del>文字中划线</del>
<address>地址标签,斜体,独占一行</address>
超链接
<h1>A:跳转到互联网上的某个页面</h1>
<a href="https://www.baidu.com/">百度</a>
<h1>A:跳转到自己到其他页面</h1>
<a href="04列表.html">跳转到列表页去</a>
<h1>A:拨打电话</h1>
<a href="tel:18729648017">打电话</a>
<h1>A:发信息</h1>
<a href="sms:18729648017">发短信</a>
<h1>A:死连接</h1>
<a href="javascript:;">死连接(点击之后不做任何行为)</a>
<h1>A:跳转到页面上的某个位置(锚链接)</h1>
<a href="08超链接.html#car">跳转到汽车频道</a>
如何用手机浏览自己的网页?
- 一定要用服务器形式启动网页
- 打开CMD->ipconfig查询自己的IP
- 用IP替换掉网页上:127.0.0.1
- 复制整个地址到:草料二维码生成二维码
- 手机扫一扫(和电脑保持同一个WIFI下)
换行标签
<br />
图片标签
<img src="图片路径" />
路径
相对路径:以.或…或文件夹、文件开头
绝对路径:以盘符、/ 开头
标签分类
- 块级元素:
特点:可以用CSS设置宽高、独占一行(自动换行)
比如:h1~h6、p、div - 内联元素(行内元素)
特点:不能设置宽高、宽高由内容大小来决定、在一行显示
比如:b,strong,i,em,a
HTML5去除了哪些旧标签?
<font>、<center>、<big>、<frame>、<s>等
HTML5新增了哪些标签?
<header>描述头部信息</header>
<footer>描述尾部信息</footer>
<aside>侧边栏</aside>
<nav>导航栏(菜单)</nav>
<main>主要内容</main>
<article>一段独立文章</article>
<section>内容的主题</section>
<hgroup>放一些标题(h1-h6)</hgroup>
<time>放时间内容</time>
<address>放地址信息</address>
<figure>
<figcaption>图片标题</figcaption>
<img />
</figure>等
HTML5新增标签在IE8中不兼容怎么办?
答:在head中引入html5shiv.js
音频标签
controls:控制条
autoplay:自动播放(不稳定)
muted:静音
loop:单曲循环
单一来源
<audio src="./videoAudio/hanmai.mp3" controls autoplay muted loop></audio>
多个来源
<audio controls>
<source src="./videoAudio/hanmai.mp3">
<source src="./videoAudio/biubiubiu.ogg">
<source src="./videoAudio/nada.wav">
</audio>
视频标签
<video src="./videoAudio/movie.mp4"></video>
<video controls>
<source src="./videoAudio/movie.mp4">
<source src="./videoAudio/PPAP.webm">
<source src="./videoAudio/PPAP.flv">
</video>