HTML总结笔记!!!

1、初识HTML

HTML （Hyper Text Markup Language 超文本标记语言）

W3C （World Wide Web Consortium 万维网联盟）

W3C 标准

1. 结构化标准语言（HTML、XML）
2. 表现标准语言（CSS）
3. 行为标准语言（DOM、ECMAScript）

、等成对出现的标签，为闭合标签，分别叫开放标签和闭合标签

单独出现的标签，如

---

,为自闭和标签

---

2、网页基本信息

标签用来网页搜索关键字、描述等
html中的注解

---

3、网页基本标签

• 标题标签
  ...
• 段落标签

• 换行标签

• 水平线标签

  ---

• 简单字体样式标签 粗体： 斜体：
• 注解
• 特殊符号 空格：  版权符号：© 大于号：> 小于号：<

---

4、图片标签

img标签

• src ：图片地址 （必填），由相对地址（推荐使用）、绝对地址、资源地址，…/ 表示上一级目录，例如：…/resources/image/1.jpg
• alt：图片名字（必填）
• 其他选填

---

5、超链接标签及应用

a标签 超链接

1. 页面间链接：从一个页面链接到另一个页面

   • href：表示要跳转到那个页面（必填）
   • target：表示窗口在哪里打开，self在本页面打开、blank在新页面打开
   • a标签中可以嵌套其他标签，比如嵌套img标签表示点击图像链接

2. 锚链接

   • 需要一个锚标记：

     <a name="top">顶部a>
     

   • 跳转到标记：用#

     <a href="#top">回到顶部a>
     

   • 从另一个页面跳转到这个页面的顶部

     <a href="one.html#top">跳转a>
     

   • 应用可以在博客中设置目录，点击目录就可以到该目录

3. 功能性链接

   • 邮箱链接：mailto

     <a href="mailto:[email protected]">点击邮箱联系a>
     

   • QQ推广：

     <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1397925548&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1397925548:51" alt="点击这里给我发消息" title="点击这里给我发消息"/>a>
     

---

6、行内元素和块元素

• 块元素
  • 无论内容多少，该元素独占一行
  • （p、h1-h6…）
• 行内元素
  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • （a、strong、em …）

---

7、列表标签

1. 有序列表：

   应用范围：试卷，答卷

2. 无序列表：

   应用范围：导航，侧边栏…

3. 自定义列表：dl : 标签 、dt：列表名称、dd：列表内容

   <dl>
   	<dt>学科dt>
   	<dd>Javadd>
   	<dd>Linuxdd>
   	<dd>Cdd>
   dl>
   

---

8、表格标签

表格

• 行 rows 跨行rowspan=""

• 列 cols 跨列colspan=""

  
  <table border="1px">
      <tr>
          <td colspan="3">1td>
      tr>
      <tr>
          <td rowspan="2">1td>
          <td>2td>
          <td>3td>
      tr>
      <tr>
          <td>2td>
          <td>3td>
      tr>
      <tr>
          <td rowspan="2">1td>
          <td>2td>
          <td>3td>
      tr>
      <tr>
          <td>2td>
          <td>3td>
      tr>
  table>
  

---

9、媒体元素

音频和视频

• src：资源路径

• controls：控制条，没有不会在页面中显示出来

• autoplay：自动播放

  <video src="../resources/video/名侦探柯南%20普通话%201045-超清720P.mkv" controls autoplay>video>
  
  <audio src="../resources/audio/新旭%20-%20夜、萤火虫和你.mp3" controls autoplay>audio>
  

---

10、页面结构分析

---

11、iframe内联框架

• src：地址

• w-h：宽度和高度

• 可以在一个网页里面嵌套多个网页

  内联框架里面直接进入百度
  <iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px">iframe>
  

  可以在内联框架中不写链接，而是通过另外一个超链接点击框架标识名进入到改框架，在改超链接的target属性中选择框架名
  <iframe src="" name="hello" frameborder="0" width="1000px" height="800px">iframe>
  <a href="https://www.baidu.com" target="hello">进入百度a>
  

---

12、初识表单post和get提交

表单

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

• method：提交方式，post、get

  • get：我们可以在url中看到我们提交的信息，不安全，高效，但是不能传输大文件和对象
  • post：在url中不能看到提交的信息，比较安全，可以传输大文件

  <form action="one.html" method="post">
      <p> 用户名：<input type="text" name="username"> p>
      <p> 密码：<input type="password" name="password"> p>
      <p>
          <input type="submit" value="提交">
          <input type="reset" value="重置">
      p>
  form>
  

---

13、文本框和单选框

文本输入框：input type=“text”

• value 默认初始值
• maxlength 输入最大字符数
• size 文本框的长度
• name为提交时的键，提交的值为输入的值

单选框标签：input type=“radio”

• value 单选框的值（提交时的键），提交的值为后面的”男“

• name 表示组，如果没有name属性那么和多选框checkbox一样都可以选择，加了name为一组之后，一组中只能选择一个单选按钮

• 在单选框中value为单选框的值（提交时的键），在其他类型中value为默认初始值，在单选框中name为组，在其他类型中name为提交时的元素名称

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

---

14、按钮和多选框

多选框：input type=“checkbox”

• value 多选框的值（提交时的键），提交的值为后面的”睡觉“

• name 多选框的组，可以选择多个值，在提交时会提交成一个名字为name的数组

• 多选框的value和name属性和单选框一样，和其他类型略微不同

  <p>
      爱好：
      <input type="checkbox" value="sleep" name="hobby">睡觉
      <input type="checkbox" value="eat" name="hobby">吃
      <input type="checkbox" value="play" name="hobby">玩
  p>
  

按钮：input type=“button/image/submit/reset”

• button 普通按钮，可以用JavaScript来进行各种花里胡哨的操作
• image 图片按钮，点击图片提交表单
• submit 提交按钮
• reset 重置按钮
• value属性值是按钮的默认名称

---

15、下拉框和文本域

下拉框select

• name 提交时的键

• value 提交的值，option标签中的值为显示在浏览器中的值

• selected为默认选中

  <p>
      <select name="国家">
          <option value="china">中国option>
          <option value="us" selected>美国option>
          <option value="yindu">印度option>
      select>
  p>
  

文本域textarea

• name 提交时的键，提交的值为textarea标签中输入的值

• cols 列宽

• rows 行宽

  <p>
      反馈：<textarea name="textarea" cols="30" rows="10">请输入textarea>
  p>
  

文件域：input type=“file” name=“files”

• name 提交文件的键，提交的文件为值

• 可以用JavaScript来进行上传操作，不然只能和表单一起提交

  <p>
      <input type="file" name="files">
      <input type="button" value="上传" name="upload">
  p>
  

---

16、简单验证input

• 邮箱验证 email

  <input type="email" name="email"/>
  

• URL地址验证 url

  <input type="url" name="url"/>
  

• 数字验证 number

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

• 滑块验证 range

  <input type="range" name="range" max="100" min="0" step="2"/>
  

• 搜索框验证 search

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

• input标签中name为提交的键，提交的值为输入的值

---

17、表单的简单应用

• 隐藏域 hidden

• 只读 readonly

• 禁用 disabled

• 增强鼠标可用性：label标签，点击名称把焦点转移指定id的输入框

  <p>
      <label for="click">点击label>
      <input type="text" id="click" name="click">
  p>
  

---

18、初级表单验证

• placeholder 提示信息

  <p> 用户名：<input type="text" name="username" placeholder="张三"> p>
  

• required 非空判断

  <p> 密码：<input type="password" name="password" required> p>
  

• pattern 正则表达式，正则表达式不需要特别记忆，有时太长的表达式直接上网搜索即可

  <p> 邮箱：<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> p>
  

---

19、HTML总结思维导图

个人总结，如有冒犯，请联系me。