HTML 超文本标记语言
- Hyper-Text Markup Language
后缀名.htm / .html
查找错误,开发者工具,找到Console 控制台可以看到报错只有js报错可以看到报错
<!--所有的代码都写在html标签下 它是最顶级标签-->
<!--标签基本上都有开始标签和结束标签,标签还可以有属性-->
<!--1.标签(tag/element- 承载内容-->
<!--2.层叠样式表(CSS) - 显示/渲染页面-->
<!--3.JavaScript - 交互式行为 -->
<!doctype html> <!--文档类型声明,说明页面使用的HTML5的规范-->
<html> <!--标签,用<>,这是一个开始标签-->
<head> <!--放一些和网页相关的元数据信息,但不会显示在浏览器的主窗口中-->
<meta charset="utf-8"> <!--源数据标签,标签的属性,如果一个标签中间没有内容,就不需要结束标签-->
<title>某某的个人空间</title> <!--网页的标题-->
<!--样式表-->
<style type="text/css">
h1 {
color: red;
font-size:3cm;
}
</style> <!--red 和 #ff0000效果是一样的,这是16进制的数等于255,0,0-->
</head>
<body> <!--body标签内的内容就是要显示在浏览器窗口中的信息-->
<h1 title="这是一个提示信息">hello, world</h1> <!--一级标题, 一共有六级标题,title 属性效果是,鼠标放在标题文字上时,浮出信息-->
<h2>你好,世界</h2> <!--二级标题-->
<button onclick="foo()">OK</button> <!--按钮标签-->
<script>
function foo() {
window.alert('大家好');
}
</script> <!--js需要在这里写-->
</body>
</html>
<!--代码都写在标签了里面,而浏览器就是这个语言的执行环境
它执行HTML书写的代码将结果渲染到浏览器窗口中-->
- WWW
- World Wide Web - 万维网
- 规范标准
- W3C -
- 学习HTML5去runoob,或W3school
列表小技巧 在sublime中,装了emmet插件的情况下输ul>li*5 再按Tab键会自动生成5个列表
<!DOCTYPE html>
<!--
html/head/body
文本 - h1-h6/p/br/hr/sub/sup/strong/em/del/ins/q
列表 - ul/ol(li)/dl(dt/dd)
图像 - img/figure/figcaption
链接 - a(页面链接/锚链接/功能链接)
表格 - table/tr/td/th/thread/tbody/tfoot
表单 - form / input / select / textarea
音视频 - audio / video(source)
-->
<html lang="en">
<head>
<a id="top"></a> <!--设置锚点-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--音频-->
<audio controls autoplay loop>
<!--controls 播放控件, autoplay 自动播放 ,loop循环播放-->
<source src="./resources/bgmusic.mp3" type="audio/mp3" >
</audio>
<!--视频-->
<video controls>
<source src="./resources/movie.mp4" type="video/mp4">
</video>
<h1>Hello, world!</h1>
<hr> <!--水平标尺,一个水平的分割线-->
<ins>床前</ins>明月光<sup>1</sup><br>
疑是地上霜<sub>2</sub><br>
<p>举头望明月<del>明月</del></p>
<p>低头思故乡<strong></strong><em>故乡</em></strong></p>
<q>其实地上本没有路,走的人多了也便成了路</q>
<h3>某某的个人爱好</h3>
<ul>
<li>吃</li>
<li>喝</li>
<li>嫖</li>
<li>赌</li>
<li>抽</li>
</ul><!--无序列表-->
<ol>
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
</ol><!--有序列表-->
<dl>
<dt>阅读</dt>
<dd>每天晚上阅读</dd>
<dd>阅读科幻小说</dd>
<dt>
<figure>
<img src="./images/卡卡西.ico" alt="卡卡西" width="30"> <!--在这种情况下最好选用相对路径,有图片显示图片,没图片显示替换文字, 可以指定宽高,但一般不建议用这种方法,让美工切好图片,不然浪费流量-->
<figcaption>这是一个什么图</figcaption>
</figure>
</dt><!--放图片-->
<dd>每天晚上阅读</dd>
<dd>阅读科幻小说</dd>
</dl><!-- 定义列表-->
<!--列表-->
<table>
<!--列表行-->
<tr>
<!--列表列-->
<td>
</td>
</tr>
</table>
<table border="1">
<caption>学生成绩表</caption><!--标题,自动居中-->
<thead>
<tr>
<th>姓名</th>
<th>Python</th><!--th表示表头里的列-->
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"></td> <!--跨行,合并单元格-->
<td>王大锤</td>
<td>90</td>
</tr>
<tr>
<td>小明</td>
<td>60</td>
</tr>
<tr>
<td colspan="2">无</td> <!--跨列-->
</tr>
<tr>
<td></td>
<td>小强</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="right">平均分</td> <!--虽然可以直接用属性来对齐,但都应该由样式表来做-->
<td></td>
</tr>
</tfoot>
</table>
<!--表单-->
<form action="" method="post" enctype="multipart/form-data">
<!--action 给url,对应某个服务器的某个功能 method="post" 如果要上传文件必须写post ,enctype="multipart/form-data"这个表示编程语言,上传文件时也需要写-->
<fieldset>
<legend>必填信息</legend>
<p><input type="text" name="username" placeholder="请输入用户名" required></p>
<!--可输入的文本框, value表示默认值,placeholder表示占位信息, required表示必填-->
<p><input type="password" name="password" placeholder="请设置密码"></p>
<!--密码框-->
<!--单选框-->
<p>
<input type="radio" name="gender" checked>男
<input type="radio" name="gender" >女
</p>
<!--单选按钮 ,如果name相同,只能选择一个,如果name不同就都可以选,checked表默认选中-->
<!--复选框-->
<p>
<input type="checkbox" name="fav">阅读
<input type="checkbox" name="fav">健身
<input type="checkbox" name="fav">游戏
<input type="checkbox" name="fav">球
<!--可同时勾选多项-->
</p>
<!--日历框-->
<p>
<input type="date" name="birthday">生日
</p>
<!--输邮箱的框-->
<p>
<input type="email" name="email" placeholder="请输入您的邮箱">
</p>
</fieldset>
<!--下拉列表-->
<fieldset>
<legend>可选信息</legend>
<p>
<select name="prov">
<option value="北京">北京</option>
<option value="tj">天津</option>
<!--value中的值是传给服务器的,可以不和后面的值一样-->
<option value="成都" selected>成都</option>
</select>
</p>
<!--文本区-->
<p>
<textarea rows="5" cols="30" name="intro"></textarea>
</p>
<!--文件选择器-->
<p>
<input type="file" name="file">
</p>
</fieldset>
<p>
<input type="submit" value="立即注册">
<!--提交-->
<input type="reset" value="重新填写">
<!--重置-->
</p>
</form>
<!--前三个是页面链接-->
<a href="http://www.baidu.com">百度一下</a><!--超链接标签,在当前窗口打开-->
<a href="http://www.baidu.com" target="_blank">百度两下</a><!--在新窗口打开-->
<a href="index.html">我的首页</a><!--打开自己网站-->
<a href="#top">回顶部</a> <!--回到锚点位置, 锚链接-->
<!--功能链接,链接到qq,或发邮件-->
<a href="mailto:qustwxz@163.com">联系站长</a><!--不好用是因为没有邮件客户端-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=
{{544619417}}&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3153717369:52 " alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>
<!--<br>折行标签, <p>内容</p>段落标签,<ins>加下滑线<sup>上标<sub>下标<del>删除线<strong>加粗<em>斜体 <q>引用-->
table技巧 table>tr*5>td*2>{项目$}可生成5行2列的表格
常用图片格式选择
- svg矢量图 无损
- gif 动图
- png 少色彩
- jpg 多色彩的图