HTML个人笔记

HTML的一些知识点

1.网页基本信息

• DOCTYPE 告诉浏览器使用的规范
• meta : 描述性标签: 一般描述网站的基本信息 name:“属性” context: “属性”

2. 页面基本标签

• 换行：<br>
• 水平线：<hr>
• 粗体:：<strong>
• 斜体：<em>
• 空格： 
• 版权：©

3.图像标签

• <img>
  
• 绝对路径：指文件在硬盘上真正存在的路径（例：D:\idea\workspace\HTML\resources\img\1.jpg）
• 相对路径：就是相对于自己的目标文件位置 (例：resources\img\1.jpg)
• "./"：表示当前文件所在目录
• "/"：代表根目录
• "../"：代表当前文件所在目录的上一级目录

4.超链接标签

• <a href = " 路径 " target = " 连接打开位置 " > 属性值 <a /
• target的可用的值
  • _blank(将链接的画面内容，新打开一个窗口显示)
  • _self(将链接的画面内容，显示在目前的视窗中)
  • _parent
  • _top
• 锚链接
  • <a name="top">顶部</a><br> <a href="#top">回到顶部</a><br>可以用来回到当前页的自定义位置
  • <a href="mailto:188704149@qq.com">联系我</a>可以向该邮箱发送信息
  • QQ推广(可以自动生成一个锚链接) 详情请点击

5. 列表标签

• 有序列表 <ol>

• 
  

• 无序列表 <ul>
  
  

• 自定义列表 <dl>
  
  

6.表格标签

• <table>
  • <tr>行标签
  • <td>列表签

7.媒体元素标签

• <audio>
• <video>
• 
• autoplay 自动播放
• controls 打开控制器

8.页面结构标签

9.内联框架标签

• <iframe>可以让一个页面内含多个页面
  
  

10.表单标签

<form action = "链接" method = "提交方式:get/post">
<input type = "表单元素类型" name = "name属性" class = "class属性" id = "id属性" />
<form/>

• 表单的应用

  • readonly 只读 ：可以让框内内容无法被编写
  • disabled 禁用 ：常用在复选框，单选框中，无法选择有disabled属性的选项
  • hidden 隐藏：隐藏文本框

• 表单初级验证

  • placeholder

   <p>名字:<input type="text" name="name" placeholder="请输入用户名" required/></p>
  

  

  • required 非空 提交表单时如果为空会有提示不能为空
    

  • pattern 正则表达式 通常用于表单中的邮箱匹配