HTML笔记整理

1. 常见标签

作用	标签	其他
超链接	< a href="" target="_blank">< /a>	target表示目标，blank表示空白，表示在空白窗口打开新页面。_self当前页面打开
图片	< img src="">	src属性：路径；alt属性：图像的替代文字；title属性：鼠标划上去时的提醒；width：图像宽度；height：图像高度
无序列表	< ul>< li>< /li>< /ul>	无序列表有三种样式 - type设置，disc-实心圆， circle-空心圆，square - 方块。（应用范围：导航，侧边栏）
有序列表	< ol>< li>< /li>< /ol>	有序列表有三种样式，type的值，值为数字-数字，值为大小写字母-字母，值为i - 罗马字母
自定义列表	< dl>< dt>< /dt>< dd>< /dd>< dd>< /dd>< /dl>	dl:标签，dt:列表名称 ，dd:列表内容 （应用范围：公司网站底部）
表格	< table>< tr>< td>< /td>< /tr>< /table>	table:表格 ，th:表头， tr：一行，td：一列。col：代表一列。border表格边框属性，cellspacing单元格空隙，align对齐方式。
JavaScript	< script>< /script>	使HTML页面更具有动态性和交互性
定义资源引用	< link>	该标签定义文档域外部资源之间的关系，最常用于连接样式表
定义样式	< style>	用于为HTML文档定义样式信息
元数据	< meta>	该标签提供关于HTML文档的元数据，常用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据
换行	< br>
分割线	< hr>
注释	<!-- 注释-- >

• 表格：

  • colspan属性： 列单元格合并。跨列
  • rowspan属性：行单元格合并。跨行
  • colgroup标签：列分组标签

    <colgroup span="6" width="100px"> 列分组标签 将六列都设置为100px</colgroup>
    

• 视频和音频

  • 视频：video （autoplay属性：自动播放；controls属性：控制条）
  • 音频：audio

         <div>
            <!-- 视频资源 :只支持三种类型mp4，webm，ogg-->
            <video src="" controls></video>
            <!-- 音频资源 -->
            <audio src="" controls></audio>
        </div>
    

2. 表单相关内容

• HTML表单用于收集不同类型的用户输入。
  
• input输入框属性：
  
• input输入框HTML5新特性
  
• type属性值
  
• 下拉框、列表框
  
• 文本域
  
• 表单的验证及应用
  

3. HTML5新特性

• 网页布局

    <!-- HTML5新标签 网页布局 -->
    <header>  强调语义化  </header>
    <nav>导航</nav>
    <main>网页主体部分
        <section>
            <article>文章1</article>
            <article>文章2</article>
            <article>文章3</article>
        </section>
        <section>
            <article>文章1</article>
            <article>文章2</article>
            <article>文章3</article>
        </section>
        <section>
            <article>文章1</article>
            <article>文章2</article>
            <article>文章3</article>
        </section>
    </main> 
    <footer>页脚</footer>

标签	作用
header	定义文档或节的页面
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（侧边栏等）
footer	定义页脚
details	定义额外的细节

• HTML5新特性
  新的语义元素；
  新的表单控件；
  图像支持（借助< canvas>和< svg>）；
  多媒体支持（借助< video>和< audio>）；
  新API（如本地存储取代cookie）。

4. 注意

• HTML块级元素：无论内容多少，该元素独占一行，其会占据父元素的所有宽度，不能与其他的块级元素同处一行。（常见的有：div、p、标题、ul、table）
• HTML行内元素：内容撑开宽度，左右都是行内元素的可以排列在一行。（a、input、strong、img、em、span、b）
• 关于标签的嵌套
  1. 超链接不能嵌套超链接；
  2. p标签不能嵌套p标签；
  3. 标题标签h1-h6不能嵌套。
• 文件路径
  

5. 其他

• 内联框架- iframe
  用于在网页内显示网页，使用height和width设置高度和宽度。
  
• 字符实体：HTML中的预留字符必须被替换为字符实体。
  
• HTML响应式Web设计
  RWD指的是响应式Web设计，能够以可变尺寸传递网页，其对于平板和移动设备是必须的。
  使用Bootstrap，其是最流行的开发响应式web的html，css和js框架，它可以帮助开发在任何尺寸都外观出众的站点。