HTML基础知识笔记总结

HTML基础

基础认知

1. web标准的构成：主要包括结构、表现和行为三个方面。
   

   语法规范

   1. 标签的包含关系和并列关系

   基础知识(一)

   1. 标题标签<h1></h1>…，6级

   2. 段落标签<p></p>

   3. 换行标签<br />

   4. 加粗标签<strong></strong>

   5. 倾斜标签<em></em>

   6. 删除线标签<del></del>

   7. 下划线标签<ins></ins>

   8. 大盒子标签<div></div> 小盒子标签<span></span>

   9. 图像标签<img src="" />src为图像标签的必须属性，指向图片路径

   10. <img src="" alt="111" title="" width="500" height="500" border="10"/>alt属性：替换文本 图像显示不出来来的时候用文字替换；title属性：提示文本 鼠标放到图像上，提示文字；width： 给图像设定宽度；height：给图像设定高度；border：给图像设定边框；属性之间不分顺序，按空格分开；

   11. 相对路径：图片相对于HTML页面的位置；下一级路径：图像文件位于HTML文件下一级，如

       

   12. 绝对路径：电脑中的路径或网站路径
       
       注意：电脑绝对路径为“ \”

   13. 超链接标签<a href="" target="_blank"></a>，href为必须属性，指向路径；target：打开窗口的方式。
       

       注意：外部链接有http，内部链接为xxx.html
       
       空链接：# <a href="#"></a>

       下载链接：href里面地址是一个文件或压缩包 <a href="img.zip"></a>

       网页元素链接：

   14. 锚点链接：设置属性值为**#名字**的形式 <a href="#live"></a> <h1 id="live"></h1>

   15. 特殊字符：

       

       空格符：柚       子

       大于和小于：<p>

       基础知识（二）

       1. 表格标签 <table></table> ；行标签，嵌套在表格标签中<tr></tr>；单元格标签，嵌套在行标签中<td></td>；表头单元格标签：与单元格标签比文字会居中和加粗，<th></th>

       2. 表格属性：

          

          写在<table></table>标签里面

       3. 表格结构标签：<thead></thead>表格头部标签，里面一定有tr标签；<tbody></tbody>表格主体区域；以上都包含在<table></table>里面

       4. 合并单元格：跨行合并rowspan（最上侧单元格为目标单元格，写合并代码），跨列合并colspan（最左侧单元格为目标单元格，写合并代码），之后再删除多余单元格
          <td rowspan="2"></td>合并两行

       5. 无序列表<ul></ul>，只能放列表项标签<li></li>（可以放其它标签）;有序列表，<ol></ol>，<li></li>；自定义列表<dl></dl>，列表项标签

          ，子标签
          （一个dt，多个dd，同级关系）

       6. 表单标签：表单域，<form action="demo.java" method="post" name="name1"></form>把表单元素信息提交给服务器，action地址，method提交方式get/post，name名称

       7. 表单控件（表单元素）：

          

          redio：单选按钮，checkbox：复选按钮（打勾框），注意：name属性名要一样

          value：文本框中的文字

          checked：每次打开页面就已勾选，用在单选框和复选框，写在value后面

          maxlength：规定文本框中字符的最大长度，写在value后面

       8. <lable for="id名"></lable>标签：鼠标放在文本上就能选择按钮或文本框

          

       9. 下拉列表标签：<select></select>，子标签<option>xx</option>

          <option selected="selected">xx</option>：一打开页面就选中

       10. 文本域元素：用于输入内容过多，<textarea cols="50" rows="5"></textarea>
           rows：行；cols：字符

基础知识（三）

1. HTML新增的语义化标签：

   头部标签<header> </header>；
   导航标签<nav></nav>；
   内容标签<article></article>；
   定义文档某个区域<section></section>；
   侧边栏标签<aside></aside>；
   尾部标签<footer></footer>
   

   

2. 视频标签：<video></video>
   语法：有mp4、webm、ogg三种格式，最好都用mp4格式，下面那个是照顾浏览器兼容性的写法
   

   

   

3. 音频标签：<audio></audio>支持mp3、wav、ogg三种格式，最好用mp3格式
   语法：
   

   

   

4. input类型：
   

5. input属性：