HTML入门（狂神学习笔记）

HTML

1.什么是HTML

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

2.W3C标准

• World Wide Web Consortium（万维网联盟）
• 成立于1994年，Web技术领域最权威和最有影响力的国际中立性技术标准机构
• W3C标准包括
  • 结构化标准语言（HTML，XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM，ECMAScript）

3.网页基本标签

1. 标题标签
   ？代表数字，从1到6
<h?>

2. 段落标签

   <p>

3. 换行标签

   <br/>

   注：换行标签很紧凑，段落标签有间隔

4. 水平线标签

   <hr/>

5. 粗体

   <strong>

6. 斜体

   <em>

7. 特殊符号

   • 空格： 

   • 大于号：>

   • 小于号：<

   • 版权符号：©

4.图像标签

<!-- alt 图像的地带文字；title 鼠标悬停提示文字 -->
<img src="path" alt="text" title="text" width="x" height="y"/>

5.链接标签

<!-- target 链接在哪个窗口打开，有_self，_blank -->
<!-- _self在本页面打开，_blank在新窗口打开 -->
<a href="path" target="目标窗口位置">链接文本或图像</a>

• 锚链接：需要一个标记，跳转到标记

• 使用name标记，然后通过#跳转

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

• 功能性链接：

  • 邮件链接：mailto

    <a href="mailto:525287084@qq.com">点击联系我</a>
    

  • QQ链接：百度QQ推广

6.行内元素与块元素

​ 块元素

• 无论内容多少，独占一行（p，h）

​ 行内元素

• 内容撑开宽度，不换行，可以排在一行（a，strong，em）

7.列表

​ 有序列表

• <ol>在外侧
• <li>在内测

​ 无序列表

• <ul>在外侧
• <li>在内测

自定义列表

• <dl>在外侧
• <dt>在内侧，列表名称
• <dd>在内测，列表选项

8.表格

<!--
   表格	table
   行	tr
   列	td
   border	边框
   colspan	跨列
   rowspan	跨行
-->
<table border="1px">
   <tr>
       <td colspan="3">1-1</td>
       <td>1-2</td>
       <td>1-3</td>
   </tr>
   <tr>
       <td>2-1</td>
       <td>2-2</td>
       <td>2-3</td>
   </tr>
</table>

9.媒体元素

​ 视频元素

<!--
	controls	添加视频的控制，快进之类的
	autoplay	自动播放
-->
<video src="../resources/video/哈哈.mp4" controls autoplay></video>

​ 音频数据

<!--
	controls	添加视频的控制，快进之类的
	autoplay	自动播放
-->
<audio src="../resources/video/哈哈.mp3" controls autoplay></audio>

10.页面结构分析

元素名	描述
header	标题头部区域的内容
footer	标记脚步区域的内容
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

11.iframe内联框架

<!--
	src		引用页面地址
	name	框架标识名	a标签的target可以指定为这个的name属性值
	w-h		宽度、高度
-->
<iframe src="path" name=mainFrame></iframe>

12.表单

<!--
	action: 表单提交的位置，可以是网址，也可以是请求
	method: 常用方式有get和post
		get方式提交：在url中可以看到提交的信息，不安全但是高效
		post方式提交：在url中看不到参数，比较安全，可以传输大文件
-->
<form method="方式" action="请求">
    <p>名字： <input type="text" name="username"></p>
    <p>密码： <input type="password" name="password"></p>
    <p>
       <input type="submit">
       <input type="reset">
    </p>  
</form>

属性	说明
type	指定元素类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button、默认为text
name	指定表单元素的名称。一般将单选框赋予相同的name属性成为一组
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text和password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength	type为text或password时，输入的最大字符数
checked	type为radio和checkbox时，指定按钮是否被选中

• 单选框（radio）

  <!-- disabled表示不能选 -->
  <p>性别：
      <input type="radio" value="boy" name="sex" checked/>男
      <input type="radio" value="girl" name="sex" disabled/>女
  </p>
  

• 多选框（checkbox）

  <p>爱好：
      <input type="checkbox" value="sleep" name="hobby"/>睡觉
      <input type="checkbox" value="game" name="hobby"/>玩游戏
      <input type="checkbox" value="code" name="hobby" checked/>敲代码
      <input type="checkbox" value="chat" name="hobby"/>聊天
  </p>
  

• 按钮

  <!--普通按钮、图片按钮、提交按钮、重置按钮-->
  <p>按钮：
      <input type="button" value="点击我" name="btn"/>
      <input type="image" src="../resources/image/cat.jap"/>
      <input type="submit"/>
      <input type="reset"/>
  </p>
  

• 下拉框

  <p>下拉框：
      <select name="Country">
          <option value="China" selected>中国</option>
          <option value="US">美国</option>
          <option value="Switzerland">瑞士</option>
          <option value="India">印度</option>
      </select>
  </p>
  

• 文本域

  <p>反馈：
      <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
  </p>
  

• 文件域

  <p>文件域：
      <input type="file" name="file"/>
  </p>
  

• 邮件验证

  <!-- 会检查格式 -->
  <p>
      <input type="email" name="email"/>
  </p>
  

• URL验证

  <!-- 会检查格式 -->
  <p>
      <input type="url" name="url"/>
  </p>
  

• 数字验证

  <p>商品数量：
      <input type="number" name="shop" max="100" min="0" step="1"/>
  </p>
  

• 滑块

  <p>音量：
      <input type="range" name="voice" min="0" max="100"/>
  </p>
  

• 搜索框

  <!-- readonly表示只读 -->
  <p>搜索：
      <input type="search" name="search" readonly/>
  </p>
  

表单的应用

• 隐藏域 hidden

• 点击文字也能选中

  • label标签的for属性 for指向id

表单初级验证

• placeholder 提示信息
• required 非空判断，必须填
• pattern 里面填正则表达式