HTML结构笔记

1.HTML

1.1图片问题

<img src="../../12.jpg" title="狗王子" alt="123"/>

title 放在图片是显示的文字
alt 图片不显示时显示的文字
vertical-align: middle;
背景
background: url(img/11.jpg) no-repeat center;
图片居中
Background-image：url（路径）
/默认的是平铺图 repeat/
/background-repeat: repeat;/
/背景图片不平铺/
/background-repeat: no-repeat;/
/横向平铺 repeat-x/
/background-repeat: repeat-x;/
/纵向平铺/
背景图片定位：
/background-position: x坐标 y坐标;/
背景图片固定：
默认是虽内容滚动的 scroll
background-attachment: fixed;
背景简写：
/background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;/
background: #ccc url(images/sms.jpg) no-repeat fixed center top;

1.2meta 标签：

<meta name="description" content="前端与移动开发">
<meta name="keywords" content="java开发">

Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
Keywords：关键词，可以用来提高页。面的关健词的比重（前升排名的一种方式。）

1.3表格

cellspacing 规定单元格之间的空白
cellpadding 规定单元边沿与其内容之间的空白

<caption></caption> 给表格设置标题

radio: 单选框 checkbox:多选框
select 下拉框 option 下拉框的内容
textarea 文本域 text 文本框
表格合并：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”

1.4特殊字符

1.5 css定位问题

CSS 定位 (Positioning) 属性允许你对元素进行定位。
Relative 相对定位 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
line-height
属性设置行间的距离（行高）。

1.6 from表单属性

required 使用方法：
placeholder=“验证码” 提供一种提示（hint），描述输入域所期待的值。
required=“required” 设置填写域不能为空
Text输入框 placeholder 提醒输入，不占东西 value 直接在输入框显示

1.7块状元素与行内元素

行内元素特点：1.高宽设置是无效的；2.行内元素只能容纳文本或其他行内元素。

块状元素特点：1.独占一行；2.高宽、内外边距都可以设置；3.宽度默认为容器的100%；4.里面可以放块状元素和行内元素；

块状装换为行内：display: inline
行内装换为块状：display: block
装换为行内块：display：inline-blcok

1.8 input

button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

input{
outline: none;
}
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

消除input 文本框点击时的蓝色边框

下拉框：select -> option

1.9光标

cursor 属性规定要显示的光标的类型（形状）。
值 描述
url 需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

1.10 vertical-align 置元素的垂直对齐方式。

vertical-align
只能对行内块和行内元素使用，对块级元素无效
不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用 来控制图片和表单等。但是需要父盒子需要有行高