万哥的HTML5笔记

w3c万维联盟

.org代表开源

w3c包括：

结构化标准语言 HTML、XML

表现标准语言 CSS

行为标准 DOM、JavaScript

meta描述性标签

<meta charset="UTF-8">

<%--搜索引擎搜索content里的内容时可以搜到该页面--%>
<meta name="keywords" content="hello"> 
<%--搜索引擎搜索到该页面时显示的描述--%>
<meta name="description" content="hello">

&xx;特殊符号

&lt; <

&gt; >

&copy; 版权

绝对地址：从盘符开始的全路径地址

相对地址：相对该文件的地址

换行标签：<br/>隔开的两行属于同一段

水平线标签：<hr>

粗体<strong></strong>

斜体<em></em>

<img src="图片的相对地址" alt="没有图片时代替的文字" title="鼠标悬停会显示文字">

<a href="跳转的页面" target="_blank在新标签页打开| _self在当前标签页打开">  

  <img src="">  a标签可以插入img标签

</a>

锚链接：

1.需要一个标记<a name="top">顶部</a>

2.跳转到标记

<a href="#top"></a>  跳转到当前页面的top
<a href="1.html#top"></a> 跳转到1.html的top

QQ推广

块元素：无论内容多少，元素独占一行

行内元素：左右都是行内元素的可以凑成一行

有序

<ol>  

  <li></li>

   <li></li>

   <li></li>

  </ol>

无序

<ul>  

  <li></li> 

  <li></li> 

  <li></li>

</ul>

自定义

<dl>  

  <dt></dt> 

  <dd></dd> 

  <dd></dd> 

  <dd></dd> 

      

  <dt></dt>  

  <dd></dd> 

  <dd></dd> 

  <dd></dd>

</dl>



表格

<table>  

  <tr> 

    <td></td> 

    <td colspan="4"></td>  跨4列

  </tr>  

  <tr> 

    <td></td> 

    <td rowspan="2"></td>  跨2行

  </tr>  

</table>



视频标签 音频标签

<video src="" controls autoplay>  controls控制器 autoplay自动播放
<audio src="" controls autoplay>



<nav>1</nav>  
<header>2</header>  
<section>3</section>  
<footer>4</footer>



内联框架

<iframe src="" name="hello"></iframe>  把a标签的内容内嵌在本页面
<a src="" target="hello"></a>

表单

action表单提交的位置，可以是网站，也可以是请求处理的地址

method：

get:可在url看到提交信息 不安全 高校

post:较安全 传输大文件

抓Post：审查元素-Network-Headers-FormData

<input value="默认值" maxlength="最长字符" size="文本框长度">

单选框标签

注意：name一定要相同，否则无法实现单选功能

<input type="radio" value="boy" name="sex"/>男  
<input type="radio" value="girl" name="sex"/>女

下拉框

<p>  

  <select name="">  

  <option value=""></option>  

  <option value=""></option>  

  <option value=""></option>  

  </select>

</p>

文本域

<p>  

  <textarea name="" cols="长度" rows="宽度">默认值</textarea>  

</p>

文件域

<p>  

  <input type="file" name="files">  

</p>

数字框

any 长按加的快 填数字的话是固定加减

<input type="number" name="" max="100" min="0" step="any">

滑块

<input type="range" name="" min="" max="" step="">

搜索框

带x号的文本框

<input type="search" name="">

标签中的一些属性：

只读：readonly

禁用：disabled

隐藏 ：hidden

增强鼠标可用性

点击label标签，input标签会选中

<label for="mark"></label>  
<input type="text" id="mark">

提示信息：placeholder

不能为空：required

正则表达式：pattern