笔记1——HTML

• Html（HyperText Markup Language）是标记语言，标记语言是一套标记标签。Html使用标记标签来描述网页

• 链接标签：HTML 链接是通过标签 <a> 来定义的.
• 图像标签：HTML 图像是通过标签 <img> 来定义的.
• 文本修饰标签：

1. <b></b> 加粗
2. <I></I> 斜体
3. <u></u>下划线
4. <sup></sup> 上标
5. <sub></sub> 下标
6. <font ></font> 设置大小、颜色、字体。属性：size(大小)=“1～7”（1最大） color（颜色） face(字体)

• 排版标签

1. <p></p> 段落标签 属性：align 控制段落水平方向对齐 left 居左对齐 center居中对齐right居中对齐。
2. <h1></h1>~<h6></h6>标题标签（h1到h6 递减） 属性：align 控制段落水平方向对齐 left 居左对齐 center居中对齐right居中对齐。
3. <br /> 换行标签
4. <hr />水平线标签。属性：color 用于设置颜色。width设置宽度，取值为固定值和百分比。size 设置粗细。noshade 去除阴影 无取值。align控制水平线 水平方向对齐 left 居左对齐 center居中对齐right居中对齐。
5. <pre></pre>与格式化处理标签。

• div标签
  <div></div> 块级标签，独占一行，可以设置宽高。
• span标签
  <span></span>行内标签，可以和其他行内元素并列不可设置宽高。
• 实体符号

1. 空格：&nbsp
2. > :&gt
3. < :&lt
4. & :&amp
5. ¥ :&yen
6. 版权：&copy
7. 注册：&reg
8. ✖️：&times
9. ➗：&divide

• 图片标签

1. Jpg(jpeg)、png、gif、bmp等格式的图片可以用在Html网页中，psd、ai等格式的图片不能用在Html中。
2. 语法：<img src=“图片地址” /> 。
3. 属性： alt 图片地址不存在则显示alt中的文件信息。title 当鼠标移动到图片上时显示文字信息。width 设置文件宽度。heigt 设置图片高度。
4. 注意：尽量不要同时设置图片的高度和宽度，图片易变形。

• 超链接

1. <a href=“链接的目标地址”>内容</a>超级链接标签。
2. 属性：title 当鼠标移动到图片上时显示文字信息。target 链接目标文件的打开方式，_blank 新建窗口打开；
3. 空链接：href=“#”；href=“javascript:void(0)”;
4. 锚点：1、设置锚点<a name=“锚点名”></a>或者<a id=“锚点名”></a>。2、找到锚点<a href=“#锚点名”>内容</a>。

• 列表标签
  1.无序列表

  • 内容
  • 内容
  • ……

注意：li标签不能单独存在，必须放在ul标签内。li标签内可以写任何东西。
属性：type 表示列表前的符号类型。type的取值：disc 默认值实心圆点。circle 空心圆点。square 实心方块。
2.有序列表

<ol>
       <li>内容</li>
       <li>内容</li>
       ……
<ol>

属性：type 表示列表前的序号。type的取值：1默认值、a、A、i(小写罗马)、I（大写罗马）。start 表示序号起始值。
3.定义列表

<dl>
      <!——定义列表——>
      <dt></dt><!——定义标题——>
      <dd></dd><!——定义标题的描述——>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
</dl>

一个dt可以配多个dd。
4.表格标签

<table>
            <tr>
                   <th>内容</th>
                   <td>内容</td>
           </tr>
</table>

其中tr标签表示表格的行数，有多少行就出现多少对标签。td标签表示一行中有多少个单元格，单行中存在多少个单元格就有多少对td标签。th标签表示标题单元格，其中内容会加粗居中显示
只有td标签可以存放内容。

• 框架网页
  将一个网页窗口划分成若干个小窗口，每个小窗口可以存放一个独立的网页。
  框架网页是由框架集和框架页组成，框架页存放于框架集中。
  <frameset></frameset> 框架集
  <frame/> 框架页
  当我们实现框架结构是 frameset标签替代了body标签作用
• <frameset>标签属性：
• rows：将窗口划分为上下结构。
  rows=“180,” 将窗口分割为上下结构，上窗口占180个像素，其余都分配给下窗口。
  rows=“180,100，” 将窗口分割为上中下结构，上窗口占180个像素，中间窗口占100个像素其余都分配给下窗口。
  2.cols：将窗口分割为左右型。
  cols=“180,” 将窗口分割为左右结构，上窗口占180个像素，其余都分配给下窗口。
  cols=“180,100，” 将窗口分割为左中右结构，左窗口占180个像素，中间窗口占100个像素其余都分配给右窗口。
• 标签属性

src：小窗口中显示的网页地址。
name：给小窗口取名字。
noresize：规定无法调整窗口大小。没有值
frameborder：是否显示边框，取值 0、1.

• 浮动框架（内联框架）
  <iframe></iframe> 可用在body标签中。
  标签属性：
  src：放入页面的地址。
  width：浮动框架的宽度。
  height：高度。
  name：名字。
• 表单
  由form标签开始和结束。form标签和表单控制标签共同组成。
  表单属性：
  action：表单将收集的信息提交位置，不填写，则提交给当前页面。
  method：表单的提交方式，get（默认方式）会显示在地址栏中。post发送给表单处理程序进行处理，不显示在地址栏中。
  Required=“required” 不填写会有提示且不上传表单内容。
  placeholder =”内容“ 提示信息
  autofocus=”autofocus“ 自动获取焦点。（自动光标定位）
• 表单控制标签属性：
  1、单行文本<input type=“text” name=“名称” value=“值” />
  2、单行密码框<input type=“password” name=“名称” value=“值” />
  3、单选按钮<input type=“radio” name=“名称” value=“值” checked=“checked" />
  单选按钮互相排斥，当name值一样时候，为一组互相排斥的单选按钮。
  属性：checked 默认选项，
  4、多选按钮<input type=“checkbox” name=“名称” value=“值” checked=“checked"/>
  一组多选按钮的name值要一致。
  5、提交按钮<input type=“submit” name=“名称” value=“值” checked=“checked"/>
  6、重置按钮<input type=“reset” name=“名称” value=“值” checked=“checked"/>
  7、图片按钮 <input type=“image” src=“图片地址” />
  图片按钮具有提交作用，同事也会将鼠标点击的坐标值同时提交。
  8、文件上传 <input type=“file” name=“名称” />
  普通按钮：无特殊功能，一般配合js使用。 <input type=“button” name=“名称” value=“值” />
  9、隐藏域<input type=“hidden” name=“名称” value=“值” />
  在浏览器中不显示，但一样会发送给处理程序。
  10、使用<button></button>标签实现按钮
  提交按钮 <button type= “submit” >内容</button>
  重置按钮<button type= “reset” >内容</button>
  普通按钮<button type= “button” >内容</button>
  11、下拉列表 <select name=“名称”><option value=“值”>内容</option> <option value=“值”>内容</option> <option value=“值”>内容</option></select>，其中值为0为默认选项。
  12、文本域<textarea cols=“列数” rows=“行数” name=“名称”></textarea>
• 通用属性
  每一个标签都有的属性
  title：标题，当鼠标在上面显示文字的属性。
  class：类名，拥有相同类名的标签，统称为一类标签，常用在css中。
  Id：唯一性，多用于js中。
  style：主要用于设置css样式。
• input标签中新增 type属性值
  email：限定用户输入的内容必须是email类型。
  url：限定用户输入内容必须是网站。
  date：限定用户输入内容必须是日期类型。
  week：限定用户输入内容必须是周类型。
  time：限定用户输入内容必须是时间类型。
  month：限定用户输入内容必须是月类型。
  number：限定用户输入内容必须是数值类型。
  color：颜色拾色器。
  range：范围。
• 视频标签 <video></video>
  当前video元素支持三种视频格式：Ogg、MPEG4、WebM。
• 音频标签<audio></audio>
  src：url地址；//视频的url地址。
  autoplay：autoplay；//如果出现该属性，视频自动播放。
  controls：controls；//如果出现该属性，则向用户显示播放控件。
  width：像素；//设置视频播放器的宽度。
  height：像素；//设置视频播放器的高度。
  loop：loop；//如果出现该属性，视频则重复播放。