HTML基础

5大浏览器：IE，谷歌，火狐，苹果，欧朋

Web标准：保证不同浏览器打开网页一样

语言：结构：页面元素和内容：HTML。表现：网页元素的外观和页面样式等（如：颜色,大小）：CSS.行为：网页模型的定义与页面交互：JavaScript

HTML:超文本标记语言

HTML骨架结构：

html标签：网页的整体。

head标签：网页的头部。

body标签：网页的身体。

title标签：网页的标题。

Alt+B:网页打开浏览器

Ctrl+/:注释

标签:

1.标签由<，>，/，英文单词和字母组成。其中被<>括起来的英文单词或字母被称为标签名。

2.常见标签由2部分组成，称为双标签。前部分叫开始标签，后部分叫结束标签，2部分之间包裹内容。

3.少数标签由一部分组成，称为单标签，自成一体，无法包裹内容

标签与标签之间的关系分为：父子关系（嵌套关系）；兄弟关系（并列关系）

（1）排版标签

一.标题标签

1.代码：h系列标签

<h1>  1级标题 </h1>.....<h6>6级标题</h6>

2.特点：文字都有加粗，h1~h6文字逐渐减小，独占一行

Alt+Shift+下：复制粘贴到下一行

Ctrl+d:选中一样的2个文字，每按一次叠加一个文字        

二.段落标签

1.代码：<p>内容</p>

2.特点：段落之间存在间隙；独占一行

三.换行标签

1.代码：<br>

2.特点：单标签；让文字强制换行

四.水平线标签

1.代码：<hr>

2.特点：单标签；在页面中显示一条水平线

（2）文本格式化标签

代码：1.<b> ，<strong>:加粗

            2.<u>,<ins>:下划线

            3. <i>,<em>:倾斜

            4.<s>,<del>:删除线

特点：双标签 

Alt+z：自动换行

（3）媒体标签

一.图片标签

代码：<img src=“ ” alt=“ ”>

特点：单标签

属性：

1.标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没用顺序中之分

属性名：src （图片路径）

属性名：alt（替换文本）

注：当图片加载失败时，才显示alt的文本

属性名：title（提示文本）

注：当鼠标悬停时，才显示的文本；title属性不仅仅可以用于图片标签，还可以用于其他标签

属性名：width和height（宽度和高度）

注：如果只设置其中一个，另一个会自动等比例缩放（此时图片不会变形）；如果同时设置2个，若设置不当此时图片可能会变形

二：音频标签（目前只支持3种格式：mp3，wav，ogg）

代码:<audio src=" " controls></audio>

常见属性：

属性名：src(音频的路径）

              controls（显示播放的控件）

              autoplay（自动播放）

              loop（循环播放）

三.视频标签（目前支持3种格式：mp4，webm，ogg）

代码：<video src=" " controls></video>

常见属性：

属性名：src（视频的路径）

              controls（显示播放的控件）

              autoplay（自动播放）（谷歌需要再加muted会静音播放）

              loop（循环播放）

（4）链接标签

代码：<a href="./目标网页.html" target="-blank">提示内容</a>

特点：内部可以包裹内容，如果需要a标签点击之后去指定页面，需要设置a标签的href属性

#（空链接）

属性名：target（目标网页的打开形式）

取值：1.-self：默认值，在当前窗口中跳转（覆盖网页）

           2.-blank：在新窗口中跳转（保留原网页）

（5）列表标签（去掉显示前的标识：list-style：none）

一.无序列表

标签名：ul（表示无序列表的整体，用于包裹li标签）

              li（表示无序列表的每一项，用于包含每一行的内容）

特点：列表的每一项前默认显示圆点标识

注：ul标签中只允许包含li标签，li标签可以包含任意内容

二.有序列表

标签名：ol（表示有序列表的整体，用于包裹li标签）

              li（表示无序列表的每一项，用于包含每一行的内容）

特点：列表的每一项前默认显示序号标识

注：ul标签中只允许包含li标签，li标签可以包含任意内容

三.自定义列表

标签名：dl（表示自定义列表的整体，用于包裹dt/dd标签）

              dt（表示自定义列表的主题）

              dd（表示自定义列表的针对主题的每一项内容）

特点：dd前会默认显示缩进效果

注：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容

（6）表格标签

标签名：table（表格整体，可用于包裹多个tr）

              tr（表格每行，可用于包裹td）

              td（表格单元格，可用于包裹内容）

注：标签的嵌套关系：table>tr>td

表格相关属性：border（边框宽度）

                         width（表格宽度）

                        height（表格长度）

注：表格相关属性加在table里

一.表格标题和表头单元格标签

标签名：caption（表示表格整体大标题，默认在表格整体顶部居中位置提示） 

              th（表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示）

注：caption标签书写在table标签内部；th标签书写在tr标签内部（用于替换td标签）

二.表格的结构标签（让浏览器和别人知道你的结构）（了解就行）

标签名：thead（表格头部）

              tbody（表格主体）

              tfoot（表格底部）

注：表格结构标签内部用于包裹tr标签；表格的结构标签可以省略

三.合并单元格

上下合并——只保留最上的，删除其他代码

左右合并——只保留最左的，删除其他代码

属性名：rowspan（合并单元格的个数）（跨行合并）

              colspan（合并单元格的个数）（跨列合并）

注：只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead，tbody，tfoot）；写在标签里

（6）表单标签（用在登录，注册，搜索时）表单标签: <form>

一.input系列标签

标签名：input（通过type属性值的不同，展示不同效果）

type属性值：    text（文本框，用于输入单行文本）

  相关属性：1.placeholder（占位符。提示用户输入的文本）

                  password（密码框，用于输入密码）

  相关属性：1.placeholder（占位符。提示用户输入的文本）

                  radio（单选框，用于多选一）

 相关属性：1.name（分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选择）

                                2. checked（默认选中）

                 checkbox（多选框，用于多选多）

 相关属性：1.name（分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选择）

                                2. checked（默认选中）

                file（文件选择，用于之后上传文件）

相关属性：1.multiple（可多文件选择）

                submit（提交按钮，点击之后提交数据给后端服务器）

                reset（重置按钮，点击之后恢复表单默认值）

                button（普通按钮，默认无功能，之后配合js添加功能）

注：实现按钮功能需要配合form标签使用，用form标签把表单标签一起包裹起来即可

                form（框起需要点提交和重置按钮的内容）

二.button按钮标签

标签名：button（通过type属性值的不同，展示不同效果）

type属性值（同input的按钮系列）

                submit（提交按钮，点击之后提交数据给后端服务器）

               reset（重置按钮，点击之后恢复表单默认值）

               button（普通按钮，默认无功能，之后配合js添加功能）

注：谷歌浏览器中button默认是提交按钮；button是双标签，更便于包裹其他内容，文字，图片等

Ctrl+Enter：将光标直接到下一行

三.select下拉菜单标签

标签：select（下拉菜单的整体）

          option（下拉菜单的每一项）

属性：selected（下拉菜单的默认选中）

四.textarea文本域标签

标签：textarea

特点：双标签

属性：cols（规定了文本域内可见宽度）

          rows（规定了文本域内可见行数）

注：右下角可以拖拽改变大小；实际开发时针对样式效果推荐用css设置

五.label标签(绑定内容与表单标签的关系）

使用方法：直接使用albel标签把内容（如：文本）和表单标签一起包裹起来；需要把label标签的for属性删除即可

（7）语义化标签

一.没有语义的布局标签

标签名：div（一行只显示一个，独占一行）

                span（一行可以显示多个）

二.有语义的布局标签（了解就行）

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

注：手机端做网页时用上

（8）字符实体：网页中展示特殊符号效果时，使用字符实体替代

描述：空格

实体名称：&nbsp;

表单标签

• 表单标签: <form>

• 表单属性:

  • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。

  • method: 规定用于发送表单数据的方式，常见为： GET、POST。

    • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。

    • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。

• 表单项标签: 不同类型的input元素、下拉列表、文本域等。

  • input: 定义表单项，通过type属性控制输入形式

  • select: 定义下拉列表

  • textarea: 定义文本域

表单项

input>: 表单项 , 通过type属性控制输入形式。

• type取值	描述
  text	默认值，定义单行的输入字段
  password	定义密码字段
  radio	定义单选按钮，<label>点击所有地方都能聚焦到按钮上
  checkbox	定义复选框
  file	定义文件上传按钮
  date/time/datetime-local	定义日期/时间/日期时间
  number	定义数字输入框
  email	定义邮件输入框
  hidden	定义隐藏域
  submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

• <select>: 定义下拉列表, <option> 定义列表项

• <textarea>: 文本域