HTML学习笔记

1-HTML初识

超文本标记语言，主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。

1.1-HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1.2-语法骨架

<html>      根标签
   <head>   头标签
      <title></title>   标题标签
   </head>
   <body>  主题标签
   </body>
</html>

html标签：作用：所有html中标签的一个根节点
head标签：作用：用于存放：title,metal,base,style,script,link 注意在head标签中必须设置title标签
title标签 ：作用：让页面拥有一个属于自己的标题
body标签：作用：页面的主体部分，用于存放所有的html标签：p,h,a,b,u,i,s,em,dei,ins,strong,img

<!DOCTYPE html> 声明为html文档
<html> 是html页面的根元素
<head> 包含了文档的元（meta）数据，如<meta  charset="utf-8"> 定义网页编码格式为utf-8
<title> 描述了文档的标题
<body> HTML 文档的主体（可见的页面内容）
<p> 定义一个大的段落
<br>换行
<a href="XXX">链接

1.3-HTML属性

class—为html元素定义一个或多个类名（类名从样式文件引入）

id—定义元素的唯一id

style—规定元素的行内样式

title—描述元素的额外信息（作为工具条使用）

HYML注释—

2-HTML 基本标签

<h1><h2>...<h6> 标题
<hr1>——水平线
<font>——字体<font size="2" color-"red" face="微软雅黑">
<b><i>——格式化标签 <b>粗体 <i>斜体
<ul><01>——列表标签 <li>——列表标签内的每一列
<ul><li></li></ul>——无序列表
<01><li></li><101>——有序列表
<a>——超链接标签 target——定义文档链接在何处显示
<a heaf="www.baidu.com" target="_blank" rel="XXX">XXX</a>

2.1-—图片标签

属性

src：图片的路径地址（必写属性）

width：宽度 height：高度

title：提示文本（鼠标悬停在图片上方会出现的提示信息）

alt：替换文本（图片加载失败时会出现的文字信息）

border：边框（只能定义边框的粗细）

2.2-
—表格标签

<table>父标签，相当于整个表格的容器

属性

border：边框的宽度

cellpadding：单元格边沿与其内容之间的空白

cellspaceling：单元格之间的空白

bgcolor：表格中的背景颜色

height：表格的高度

width：表格的宽度

<th>表格表头，单元格内容默认居中加粗

<tr>标签用于定义行

<td>标签用于定义表格的单元格（列）

<div>—块级元素，定义了文档的区域，用于组合其他html元素的容器

<span>—内联元素，用来组合文档中的行内元素

2.3-表单标签

把表单中的数据提交给远端的服务器

表单元素是允许用户在表单中输入内容： 如：文本域（texttarea） 下拉列表、单选框（radio-buttons）、复选框（checkboxes）。表格中使用的输入元素为 <input>

<form>表单标签在浏览器上没有任何显示，但所有需要提交到服务器的数据都需要存放在表单标签中

action属性：请求路径，确认表单提交到服务器的地址。

method 属性：请求方式 如：GET PODRT。

2.4-输入域标签

标签用于获得用户的输入信息，type属性值不同，输入类型不同。

  1. type属性

    —text：文本框，单行的输入字段，默认宽度为20个字符

    —password：密码框，密码字段

    —radio：单选框，表示只能选择一组互斥选项按钮的一个

    —submit：提交按钮，将表单数据发送到服务器

    —checkbox：复选框

    —file：文件上传组件

    —hidden：隐藏字段

    —reset：重置按钮

    —image：图形提交按钮

    —button：普通按钮，常用于与JavaScript结合使用

  2. name属性：如果需要将表单数据提交到服务器，必须提供name属性值。服务器通过name属性值获得提交的数据。

  3. value属性：设置input标签的默认值，注submit和reset为按钮显示

  4. size属性：input宽度大小

  5. checked属性：单选框或复选框被选中

  6. readonly：是否只读，数据不会被提交

  7. disabled：是否可用，数据不会被提交

  8. maxlength：允许输入的最大长度

  9. <select>x下拉列表—可用单选和多选，需要子标签<option>制定列表项
——name属性:发送服务器的名称
——multipe属性:不写默认单选，取值为“multiple”表示多选
——size属性：多选时，课件选项的数目
—<option>子标签：下拉列表中的一个选项
注：一般option要给value属性值，如果不给默认把option文本内容发送到服务器
selected：勾选当前列表项
value：发送到服务器的选项值


         

    ## 2.5<textared>文本域标签

    —cols属性：文本域的列数

    —rows属性：文本域的行数

    
<label>—定义input元素的标注
<nav>—定义导航链接

2.6常用事件属性

  1. 窗口事件

    onafterprint：在文档打印之后运行

    onbeforeprint:在文档打印之前运行

    onload：在文档加载时运行

    onresize：在调整窗口大小时运行

    onunload：当用户离开文档时运行

  2. 表单事件

    onbur：当元素失去焦点时运行

    onchange：当元素改变时运行

    onfocus：当元素获得焦点时运行

    onselect：当选取元素时运行

    onsubmit：当提交表单时运行

  3. 键盘事件

    onkeydown：当按下按键时运行

    onkeypress：当按下并松开按键时运行

    onkeyup：当松开案件时运行

  4. 鼠标事件

    onclick：当单击鼠标时运行

    ondbclick：当双击鼠标时运行

    onmousedown：当按下鼠标按钮时

    onmousemove：当鼠标指针移动时