Tips
- HTML标签对大小写不敏感- 每个尖括号<>都被视为一个html元素- 没有内容的HTML内容被称为空元素。(空元素是在开始标签中关闭的，如br/)
- 严肃分为块级元素和内联元素 - 块级元素(div)：占掉页面中的整行长度 - 内联元素(span)：只占元素内容的长度- 注释：< !-- 被注释掉的内容 -->- 在html文档中用标签制定浏览器使用某编码进行展示网页(指定与 html 文件的编码对应的编码即可) - 在head之下写 (对应UTF-8 无 BOM)或者(对应文件编码为ansi)
- 在编写文件之前我们需要声明类型，即在最开头写上
<！Doctype html>
此处写标题
此处为主体
Knowledge
- 注释：图像的名称和尺寸是以属性的形式提供的。
- src为源属性，就添加图像而言，img之后还应加上src="……"，引号之内包括图像所在的文件地址以及属性(如jpg，gif之类的)，以及宽高所占像素，亦可用长度表示(宽在前)
- 属性src里面填写图片的路径即可。路径有两种填写方式：绝对路径&相对路径
- 绝对路径：服务器部署之时用到
- 相对路径：相对于我们当前html文件的位置来写路径即可。./表示当前目录，../表示上一级目录 - 图片地址不能直接复制粘贴属性里的玩意儿，得把反斜杠()改成正斜杠(/)- 换行：
- 空格： - 列表需要一种嵌套写法，这种嵌套是必须的 - 页面中某个列表我们可以通过
- 此处写列表中内容
这样的方式表现出来 - 若希望写无序列表只需要将ul改为ol
超链接
- eg:
私房库
- 属性href：填写需要链接到的网址建设初期可以使用#链接来表示空链接
- 属性title：title里面的内容会在鼠标悬停时显示
- 属性target:设置为 _blank 时即可在新窗口打开链接地址
指定图片某块区域加超链接
- 使用 map 标签可以给图片某块区域加超链接
-
- 为 map 标签首加上 id 属性用来为 map 标签定义一个唯一的名称
- 为了保证兼容性再加上 name 属性，属性值与 id 的值相同(有些浏览器认name,有些认id，都加上保证兼容)
- 为 map 标签所作用的图片加上 usemap 属性，属性值为 #id 名称
- 在 map 标签内嵌套 area 标签来实现给指定区域加链接
- shape属性：定义链接区域的形状，常用值rect,circle
- coords属性：确定区域的精确位置，填写坐标即可
- href属性：填写链接地址即可
- alt属性：给链接加一些说明信息
- 注：images/1.jpg 为图片保存的路径
- target="_blank"作用为新打开一个网页(不加此句则直接覆盖原网页)
- eg:
div标签
- 块级元素
- 可以把div标签视为一个可以存放标签的容器，常用标签几乎都可以嵌套在div标签里面
span标签
- 使用来组合内联元素，以便于通过css来美化他们
class属性
- class属性规定元素的类名(classname)- class属性大多数时候用于指向样式表中的类(class)。不过，也可以利用它通过JavaScript来改变带有指定class的HTML元素- 类名不能以数字开头- class属性不能在以下HTML元素中使用：base,head,html,meta,param,script,style,title - 提示：可以给HTL元素赋予多个class，
- eg:.这么做可以把若干个CSS类合并到一个HTML元素
Header 1
A paragraph.
Note that this is an important paragraph.
表格
- tr标签：定义html表格中的行，tr元素包含一个或多个th或td元素
- th标签：定义表格中的单元表格(表头)
- td标签：定义表格内的普通单元格 - 常用属性：
- border：规定表格边框的宽度(一般设置为0)
- cellpadding：单元格大小(一般设置为0)
- cellspacing：每个单元格之间的距离(一般设置为0)
- td之内还可以添加colspan(可横跨的行数)和rowsplan(可横跨的列数)进一步对表格进行设置
666 666 777 888 777 888
表单
- form定义供用户输入的html表单
- action:规定当提交表单时向何处发送表单数据
- name:给表单命名
- target_blank等其他值，这是最常用的，其他几乎不用
- method：提交方式，post或get值(默认用get)
- input标签定义表单的输入界面
- 通过type属性来展示不同的输入界面，通过value改变默认值
- 普通文本框：
- 密码框:
- 文件上传：
- 隐藏的input:(以后学)
- 普通按钮：
- 单选：
- 通过相同的name属性来实现单选
- 通过type属性来展示不同的输入界面，通过value改变默认值
性别：男女
- 复选框：
- 提交:
- 重置：
- 属性checked,可用值：checked:一般用于对选择输入界面(单选复选)实现默认选择
性别：男
系统默认勾选“男”这一选项
- 属性disabled,可用值：disabled(++框内灰++)：不可输入(几乎所有的输入界面都可以使用该属性)
eg:
姓名：
系统默认无法在“姓名”所对应的框中填写
- 属性name：给自己input输入界面取的名字(最好每一个Input都起名字，并与之相关)
- 属性readonly，可用值readonly(框内不灰)：输入界面为只读状态(与disabled作用相似)
- 属性size,值为数字：设置输入框长度
- 属性value：input最终提交到页面的数据，可以通过该属性设置默认值
textarea标签，定义多行输入框
- 双标签默认值直接写在标签之间
- 属性：cols，值为数字。rows，值为数字
- 亦可使用上述disabled,name,readonly属性
label标签，提升用户体验
- 标签的 for属性与相关 input 的 id 属性相同
eg:
性别：
select标签，配合option标签实现++下拉菜单++
- 可用属性：disabled,name,multiple
option标签
- 可用属性disabled,selected,value
optgroup标签
- 把相关选项组合到一起
- 属性label:给选项组命名
- 属性disabled:禁用该选项组
标签写法探讨
元素标记的省略(在html5里有的标记是可以省略不写的)
- 不允许写结束标签的元素：area,base,col,command,embed,hr,img,input,keygen,link,metaparan,source,track,wbr
- 这些标签都是单标签，只能以"br/"这样的方式关闭标签(当然，html5中亦可不关闭标签，最重要的是一致！！！！！)
- 可以省略结束标记的元素有：li,dt,dd,pmrtmoptgroup,option,colgroup,thead,tbody,tfoot,tr,td,th
- 可以省略全部标记的元素有：html,head,body,colgroup,tbody
具有 boolean 值得属性
eg:disabled,readonly,checked等
标签嵌套讨论
html规定的必须嵌套着写的标签
- eg:
- 页面头部是嵌套在head标签里的
- 主题内容是嵌套在body标签里的
- 表单的内容是嵌套在form标签里的
- dd,dt是嵌套在dl里的
- li是嵌套到ul里的……
- 块级元素可以嵌套内联元素，但是内联元素不能包含块元素
我是一个span元素
div元素
- 内联元素可以嵌套内联元素
- 块级元素与块级元素嵌套注意点：
- div块级元素是一个容器，几乎可以存放任何常用标签，包括自己
- 块级元素不能放在p标签里面
- li内可以包含div标签，反之，div亦可包含li
- li 和 div 地位平等
- li 标签连他的父级 ul 或者是 ol 都可以容纳
- 块级元素和内联元素是可以相互转化的
html其他标签
- 头部
- 及其之间的内容更叫做头部头元素，包含关于文档的概要信息，亦称作源信息(meta-information)
- 头元素内的元素在浏览器中不显示(除了标题)
- 在html中，仅有几个标签在html的头部是合法的。包含有：
,,, ,<style>,<script> <ul> <li>为html页面添加描述信息用于搜索引擎抓取。使用name属性，配合content属性实现</li> </ul> </li> </ul> </li> </ul> <pre><code><meta name="keywords" content="关键词(若有多个则用逗号分隔)" /> <meta name="description" content="页面描述" /> </code></pre> <ul> <li>引入css文件</li> <li>css的代码可以单独的写在一个文件里面然后通过 html标签来引入到页面里</li> </ul> <pre><code><link rel="stylesheet" href="文件位置" type="text/css" /> </code></pre> <ul> <li>为html文档加上使用的语言类型说明 <ul> <li>在很多国际化的网站中会使用到</li> </ul> </li> </ul> <pre><code><htl lang="zh-CN"> </html> </code></pre> <p>告诉浏览器等设备，语言使用以中文为显示和阅读基础(英文使用<html lang="en"></html>)</p> <ul> <li>用html标签来实现网页跳转</li> </ul> <pre><code><head> <meta charset="utf-8" /> <title>网页标题 - 高速浏览器不要加载页面的缓存(即不要获取网站的最新内容)
iframe标签，框架
- 创建包含另外一个 文档的内联框架(即行内框架)
-
- frameborder
- 值：1、0
- 作用：规定是否显示框架周围的边框
- name:给iframe名命名
- scrolling:
- 值:yes,no,auto(自动)
- 作用：规定是否在iframe中显示滚动条(侧边那个)