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 的描述,关键词,作者,字符集等的标签

 

posted @ 2018-06-19 17:34  Rooker  阅读(174)  评论(0编辑  收藏  举报