1.HTML基础
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
1.超文本标记语言(Hyper Text Markup Language,简称HTML)是一种用于创建网页的标准标记语言,
运行在浏览器上,由浏览器解析。后缀名可以为.html或htm.(由于有的系统如DOS windows 3.1以及3.2只支持三个字符长的后缀名,现在大部分系统都支持长的后缀名了)
2.对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
3.用<!—注释—>注释
4.标签不区分大小写,建议使用小写。
5.请始终将正斜杠添加到子文件夹。假如这样书写链接:href="//www.w3cschool.cn/html",就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="//www.w3cschool.cn/html/"。
6.a 标签download可以实现点击下载的下载
7.<audio>: HTML5 提供的用来播放音频文件的。(<video> 是用来播放视频的)
8.使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。
雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式 使用雅虎播放器是免费的。如需使用它,您需要把这段 JavaScript 插入网页底部: 雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的HTML页面制作成 专业的播放列表: <a href="horse.mp3">Play Sound</a> <script src="http://mediaplayer.yahoo.com/latest"></script>
9.<base> 在<head>中间<title> 后,定义了页面上所有链接的默认url
打不开的链接就用这个链接。
10.<datalist> 标签需要与 <input> 标签配合使用,用来表示可选的列表。
<form action="/statics/demosource/demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9(更早IE版本),Safari不支持 datalist 标签。</p>
11.<embed>:<embed> 标签用来定义在页面中嵌入的内容,比如插件。(和<object>可以实现同样的效果)
12.<fieldset>:对表单中的相关元素进行分组:
<form> <fieldset> <legend>个人信息1:</legend> 姓名: <input type="text"><br> 邮箱: <input type="text"><br> 生日: <input type="text"> </fieldset> <fieldset> <legend>个人信息2:</legend> 姓名: <input type="text"><br> 邮箱: <input type="text"><br> 生日: <input type="text"> </fieldset> </form>
13..disabled(New):除了 Internet Explorer 和 Safari,其他主流浏览器都支持 disabled 属性。禁用某些表单
14<label>定义了 <input> 元素的标签,一般为输入标题
<form action="/statics/demosource/demo-form.php"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="提交"> </form>
15.<optgroup> 标签用于对 <select> 元素所提供的选项进行分组。
<select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
16.<output> 标签显示计算或用户操作的结果,该标签是 HTML5 中的新标签。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
17. autocomplete 规定是否启用表单的自动完成功能。autocomplete="on" autocomplete="off" 自动完成允许浏览器预测对字段的输入。
填写并提交表单,然后重载页面,再次填写表格,autocomplete 点击就可以加载上次填过的内容。
18.novalidate 如果使用该属性,则提交表单时不验证。
<form action="demo_form.html" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
19.<h1> 标题标签 (h1到h6,超过6无效果)
20.<iframe> 标签规定一个内联框架,通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe> <p>一些旧的浏览器不支持 iframe。</p> <p>如果浏览器不支持 iframes 则不会显示。</p>
1)Iframe - 设置高度与宽度:width和height
2)Iframe - 移除边框:frameborder="0"
3)使用iframe来显示目录链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性,如下实例:
<iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p> <p><b>注意:</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。</p>
21 autofocus(New):属性规定当页面加载时 <input> 元素应该自动获得焦点
22.checked: checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
23.form(New): form 属性规定 <input> 元素所属的一个或多个表单
24.formaction(New): 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
25.formenctype(New):属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")
26.formmethod(New): 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
27.formnovalidate(New) :formnovalidate 属性覆盖 <form> 元素的 novalidate 属性
带有两个提交按钮的表单(一个进行验证,另一个不进行验证):
<form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="提交"><br> <input type="submit" formnovalidate="formnovalidate" value="不验证提交"> </form>
28.multiple(New):属性规定允许用户输入到 <input> 元素的多个值
<!--可接受多个值的文件上传字段--> <form action="demo-form.php"> 选择图片: <input type="file" name="img" multiple> <input type="submit"> </form>
29placeholder(New):placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
30.readonly:readonly 属性规定输入字段是只读的
31.required(New): 属性规定必需在提交表单之前填写输入字段
32.setpstep(New) 属性规定 <input> 元素的合法数字间隔:
33.<meat> 描述HTML 的描述,关键词,作者,字符集等的标签