首页 > 代码库 > HTML 笔记

HTML 笔记

静态网页:是否与服务器有交互

Hyper Text Markup Language (超文本标记语言)

HTML5 -- 2014-10-28
W3C : 万维网联盟,成立于94年 http://www.w3.org/ http://www.chinaw3c.org/
包括:
结构化标准语言(XHTML , XML)
表现标准语言(CSS)
行为标准(DOM , ECMAScript)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //最主要设置编码
<meta name="keywords" content="java,北大青鸟" /> //设置关键字
<meta http-equiv="refresh" content="3; url=http://www.baidu.com"> //自动刷新,如设置3秒后自动跳转到百度页面

===>网页标题添加头像
<link rel="icon" href="http://www.mamicode.com/img/title_icon.gif" type="img/gif" />
<link rel="shortcut icon" href="http://www.mamicode.com/images/p1.ico" />

1. 制作ico文件,你可以先制作出gif、jpg、png的都可以,大小在16px*16px最佳
2. 在百度搜“在线jpg转ico”,会有这样的网站,你按照步骤操作,得到ico文件
3. 将ico文件放置在网站根目录下
4. 在你的<head>...</head>添加
<link rel="icon" href="http://www.mamicode.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.mamicode.com/favicon.ico" type="image/x-icon" />


标签 说明
  <h1>~<h6> 标题标签(head)
  <p> 段落标签(paragraph)
  <br/> 换行标签<break row>
  <hr/> 水平线标签(horizontal row)
  <em> 斜体标签
  <strong> 加粗标签
  <u> 下划线
  <s> 中划线(删除线)

文本格式化
  <b>粗体文本</b>
  <code>计算机代码</code>
  <em>强调文本</em>
  <i>斜体文本</i>
  <kbd>键盘输入</kbd>
  <pre>预格式化文本</pre>
  <small>更小的文本</small>
  <strong>重要的文本</strong>

  <abbr> (缩写)
  <address> (联系信息)
  <bdo> (文字方向)
  <blockquote> (从另一个源引用的部分)
  <cite> (工作的名称)
  <del> (删除的文本)
  <ins> (插入的文本)
  <sub> (下标文本)
  <sup> (上标文本)


特殊符号      字符实体
  空格      &nbsp;
  大于号(>)   &gt;
  小于号(<)   &lt;
  引号(")     &quot;
  版权符号?   &copy;

标签规范
  1,标签名应小写
  2,HTML标签应闭合
  3,标签应正确嵌套
  4,应添加文档类型声明<!DOCTYPE>

图像类型 优点 缺点
  *.jpg 体积小,较清晰,适合色彩丰富的图像 有损压缩
  *.gif 体积小,支持动画图片,较为常用的网页 支持有限的透明度,效果不如其他图片类型 PNG图片
  *.bmp 支持24位颜色深度,兼容性好 不支持压缩,容量大
  *.png 最新的图片格式,兼有GIF和JPG的优势 部分浏览器(IE.6)不支持透明

图像标签
  <img src="http://www.mamicode.com/path 图像路径" alt="text 图像替代文字" title="text 鼠标悬停提示文字" width="x 图像宽度" height="y 图像高度" />
  ==>图像宽度,高度 习惯写上,便于浏览器解析,预留位置
  ++ hspace="0" vspace="0" align="absmiddle

超链接标签
  <a href="http://www.mamicode.com/path" target="目标窗口位置" _self 或 _blank></a>

锚链接
  1,创建跳转标记
    <a name="marker">目标位置</a>
  2,创建跳转链接
    <a href="http://www.mamicode.com/#marker">起始位置</a>
    ===>跨页面跳转需加(路径)文件名

<a>标签的href属性(即超链接的URL)有3种可能值,
  绝对URL - 指向另一个站点(比如 href="http://www.example.com/index.htm"),
  相对 URL - 指向站点内的某个文件(href="http://www.mamicode.com/index.htm"),
  锚 URL - 指向页面中的锚(href="http://www.mamicode.com/#top")

无序列表
  <ul type="circle">
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
  </ul>
  //circle 小圆点 disc 小黑点 square 小方块
有序列表
  <ol type="1" start="7">
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
  </ol>
===>start="7" 代表从 7 开始,无论是 a, A, i, I 都只能用数字表示从第几位开始

定义列表
  <dl>
    <dt></dt>
    <dd></dd>
  </dl>

表格
  <table width="50%" border="1" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>

  cellspacing 单元格之间的距离
  cellpadding 单元格与内容之间的距离
  align 对齐方式
  rowspan 跨行
  colspan 跨列

  table tr:nth-child(odd){ background-color:lightgray;} //奇数行变色
  table tr:nth-child(even){ background-color:lightgray;} //偶数行变色
  其索引是奇数或偶数(该索引的第一个子节点是1)
  table tr:nth-child(1) ===>第一行
  table td:nth-child(1) ====>第一列
  也可以是公式

  表单:
  <form action="表单提交地址" method="提交方法">

  </form>
  ==>action:处理表单数据的目标地址,如不填,默认为当前页面
  method:提交方式,get 提交参数在地址栏可见; post 不可见
表单元素
<input name="元素名称" type="类型" value="http://www.mamicode.com/值" size="显示宽度" maxlength="字符长度" checked="是否选中" />
  type: text(默认) 文本框
  password 密码框
  radio 单选按钮 传递value值
  checkbox 复选框 传递value值
  submit 提交按钮
  reset 重置按钮
  button 普通按钮
  hidden 隐藏域
  image 图片类型提交按钮,带坐标位置
  file 文件选中框
  email 邮件
  Month <input type="month" id="myMonth" value="http://www.mamicode.com/2014-05">
  Number <input type="number" id="myNumber" value="http://www.mamicode.com/2">
  time <input type="time" id="myTime" value="http://www.mamicode.com/22:15:00">
  Week <input type="week" id="myWeek" value="http://www.mamicode.com/2014-W15">
  range 滑块控件 <input type="range" id="myRange">
  search 搜索框
  url <input type="url" id="myURL" value="http://www.w3cschool.cc">
  >>>>获取值: function myFunction() {
      var x = document.getElementById("myRange").value;
      document.getElementById("demo").innerHTML = x;
    }
  value: 初始值
  size: 指定输入的宽度
  maxlength: 指定可在text或password元素中输入的最大字符数
  checked: 指定表单元素在加载时是否选中
  name: 与服务器交互必须有name属性
  disabled: 是否可修改
  1,文本框 <input name="userName" type="text" value="http://www.mamicode.com/请输入用户名"/>
  2,密码框 <input name="passWord" type="password" maxlength="16"/>
  3,单选按钮 性别<input name="gender" type="radio" value="http://www.mamicode.com/男" checked="checked"/>男
         <input name="gender" type="radio" value="http://www.mamicode.com/女" />女
  4,复选框 爱好:<input name="hobbys" type="checkbox" value="http://www.mamicode.com/sports"/>运动
        <input name="hobbys" type="checkbox" value="http://www.mamicode.com/play"/>游戏
        <input name="hobbys" type="checkbox" value="http://www.mamicode.com/movie"/>电影
        <input name="hobbys" type="checkbox" value="http://www.mamicode.com/talk"/>聊天
        <input name="hobbys" type="checkbox" value="http://www.mamicode.com/read" checked="checked"/>阅读
  5,按钮 <input type="submit" value="http://www.mamicode.com/提交" name="submit" />
     <input type="reset" value="http://www.mamicode.com/重置" name="reset" />
       <input type="button" value="http://www.mamicode.com/普通" name="button" />
  -->推荐使用button : <button type="submit" name="option" value="http://www.mamicode.com/login">登录</button>
  6,文件选择框 <input type="file" name="myFile"/>
  7,下拉列表框
    <select name="站内跳转菜单" size="1">
      <option value="http://www.mamicode.com/free">免费邮箱</option>
      <option value="http://www.mamicode.com/vip">VIP邮箱</option>
      <option value="http://www.mamicode.com/163" selected="selected">163邮箱</option>
      <option value="http://www.mamicode.com/QQ">QQ邮箱</option>
    </select>
  -->size属性:确定列表中可同时看到的行数
  value:表单提交的是value值
  8,多行文本域 <textarea name="news" cols="40" rows="6">文本内容</textarea>
    --> cols:指定列数
      rows:指定行数
      不能使用value属性赋初始值
  9,表单结构
    <fieldset >
      用户:<input name="user" type="text" /><br />
      密码:<input name="password" type="password" />
    </fieldset>
  10,表单结构标题
    <legend align="center">用户信息</legend>
  11,关联表单元素
    <label for="name">用户:</label><input name="user" type="text" />


HTML框架
  1,内嵌框架
    iframe语法:
      <iframe src="http://www.mamicode.com/URL"></iframe>
      该URL指向不同的网页。
      例: <iframe src="http://www.mamicode.com/demo_iframe.htm" name="iframe_a" width="200" height="200"></iframe>
        <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
        -->frameborder="0" 移除边框
      src : 默认显示的网页
      href : 将显示的网页
      frameborder:
      scrolling : auto yes no
      noresize:
      width :
      height :
      --->另一种方法:<object width="600px" height="600px" data="http://www.mamicode.com/index.html"></object>
2,frameset
  <frameset cols="25%,*" border="2">
    <frame src="http://www.mamicode.com/left.html" name="left"/>
    <frame name="right"/>
  </frameset>
  =====>>>>> 注意,frameset不可放在 <body>标签内,直接放 <html> 标签内
  如:
  <html>
  <head>
    <meta charset="UTF-8">
  <title>首页</title>
  </head>
    <frameset rows="100,*" border="2">
      <frame src="http://www.mamicode.com/top.html" noresize name="top"/>
      <frameset cols="200,*">
        <frame src="http://www.mamicode.com/left.html" noresize name="left" />
        <frame src="http://www.mamicode.com/right.html" name="right" />
      </frameset>
    </frameset>
  </html>

颜色
HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)

17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。

HTML 笔记