- html结构
基本结构:
<html>
<head>
<title>一个标题</title>
</head>
<body>
</body>
</html>
1.<html>标签:是HTML文档的根标签,页面中的所有内容都必须包含在<html>与</html>之间。
2.<head>标签:一个网页文档从总体上可以分为头和主体两部分。<head>和</head>定义HTML文档的头部部分,它包含标题,文件MIME类型,样式表,脚本等。
3.<title>标签:用于设置HTML标题。当使用浏览器查看页面时,在浏览器的标题栏中将显示<title>标签中的内容。
4.<body>标签:<body>与</body>标签定义了文档的主体部分,用于设置页面实际需要呈现给用户的内容,如文字,图片,视频等。
- Html常用标签
常⽤文本标签:
<hn>...</hn>标题标签,其中n为1–6的值。
<i>...</i>斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题(引⽤用)
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线
常⻅见格式化标签如下:
<br/>换⾏行行
<p>...</p> 换段
<hr />⽔水平分割线
<ul>...</ul> ⽆无序列表
<ol>...</ol> 有序列表 其中type类型值:A a I i 1 start属性表示起始值
<li>...</li>列表项
<dl>...</dl>自定义列表
<dt>...</dt>自定义列表头
<dd>...</dd> 自定义列表内容
<div>...</div> 常⽤用于组合块级元素,以便便通过 CSS 来对这些元素进⾏行行格式化
<span>...</span> 常⽤用于包含的⽂文本,您可以使⽤用 CSS 对它定义样式,或者使⽤JavaScript 对它进行操作。
HTML图像标签:
在HTML网页中插入一张图片,使用img标签,他是一个单标签:
其中img标签中常用属性如下:
- src: 图⽚名及url地址
- alt: 图⽚加载失败时的提示信息
- title:文字提示属性
- width:图片宽度
- height:图片⾼高度
- border:边框线粗细
HTML超链接标签:
超级链接标签a:
格式:<a href="链接⽬标url地址">显示⽂字</a>
a标签的属性:
href: 必须,指的是链接跳转地址
target: 表示链接的打开⽅式:
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝(默认)
_top 顶级窗⼝
framename 窗⼝名
title:⽂字提示属性(详情)
锚点链接:
定义⼀个锚点:<a id="a1"></a> 以前使⽤的是 <a name="a1"></a>
使⽤锚点:<a href="#a1">跳到a1处</a>
HTML表单标签:
<form>...</form> 表单标签
form标签常⽤属性:
action属性:提交的⽬标地址(URL)
method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。 <input>
表单项标签input定义输⼊字段,⽤户可在其中输⼊数据。在 HTML 5 中,type 属性有很多新的值。具体在下⾯有详解:
<input type="text" name="username">
type属性:表示表单项的类型:
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
email ⽤于应该包含 e-mail 地址的输⼊域
url ⽤于应该包含 URL 地址的输⼊域
number ⽤于应该包含数值的输⼊域。
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
value 规定默认值
range ⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条
max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
value 规定默认值
⽇期选择器 Date pickers
date - 选取⽇、⽉、年
month - 选取⽉、年
week - 选取周和年
time - 选取时间(⼩时和分钟)
datetime - 选取时间、⽇、⽉、年(UTC 时间)
datetime-local - 选取时间、⽇、⽉、年(本地时间)
search ⽤于搜索域,⽐如站点搜索或 Google 搜索
color 颜⾊选择
name属性: 表单项名,⽤于存储内容值的
value属性: 输⼊的值(默认指定值)
placeholder: 预期值的简短的提示信息
size属性: 输⼊框的宽度值
maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
readonly属性: 对输⼊框只读属性
disabled属性: 禁⽤属性
checked属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)
src和alt是为图⽚按钮设置的
注意:
reset重置按钮是将表单数据恢复到第⼀次打开时的状态,并不是清空。
image图⽚按钮,默认具有提交表单功能。
<select>...</select>
创建下拉列表。
name属性:定义名称,⽤于存储下拉值的
size:定义菜单中可⻅项⽬的数⽬,html5不⽀持
disabled 当该属性为 true 时,会禁⽤该菜单。
multiple 多选
<option>... </option>下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
value属性:下拉项的值
selected属性:默认下拉指定项.
<textarea>...</textarea>
多⾏的⽂本输⼊区域,有以下常用指令
name :定义名称,⽤于存储⽂本区域中的值。
cols :规定⽂本区内可⻅的列数。
rows :规定⽂本区内可⻅的⾏数。
disabled: 是否禁⽤
readonly: 只读
默认值是在两个标签之间
<button>...</button>
标签定义按钮。
您可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
<fieldset>
fifieldset 元素可将表单内的相关元素分组。
disabled属性:定义 fieldset是否可⻅。
form属性: 定义该 fieldset 所属的⼀个或多个表单。
<legend></legend>标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。
<optgroup>
html5标签-- <optgroup>
标签定义选项组。此元素允许您组合选项。
全局属性:
accesskey属性规定激活元素的快捷键。accesskey="accesskey",
使用ALT+accesskey(shinft+alt+accesskey)来访问带有指定快捷键的元素。
2、id、class属性分别是为元素命名唯一id和类名。
3、tabindex属性
tabindex属性规定tab键控制次序(tab键用于导航时),当按tab键时,元素聚焦的次序。tabindex="number","number"代表聚焦的次序。
4、hidden属性
hidden属性规定元素为隐藏,表示该元素不相关,为布尔值。
5、contenteditable属性
contenteditable属性规定元素内容是否可编辑的,"true"表示可编辑,"false"表示不能编辑。
Css的引入方法:
一、行内样式
别名:行间样式、内联样式
写法:在网页元素上通过style=""属性
二、内部样式表
写法:在网页创建嵌入的样式表,写在里面
三、链入外部样式表
写法:网页引入外部样式表,外部创建一个css文件,在html中通过连接这个css文件,一般写在css前面
四、导入外部样式表
写法:通过@import 引入,不建议开发使用
Css选择器:
1.元素选择器
语法 : 标签名{}
作用 : 选中对应标签中的内容
2.类选择器(class选择器)
语法 : .class属性值{}
作用 : 选中对应class属性值的元素
注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
3.id选择器
语法 : #id属性值{}
作用 : 选中对应id属性值的元素
注意 : id的属性值只能给1个,可以重复利用,不能以数字开头
4.通配符选择器
语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
5.群组选择器
语法 : 选择器1,选择器2,选择器3...{}
作用 : 同时选中对应选择器的元素
6.属性选择器:
属性选择器一共有7种写法
- 某某[属性]
- 某某[属性=属性值]
- 某某[属性^=属性值]
- 某某[属性$=属性值]
- 某某[属性*=属性值]
- 某某[属性~=属性值]
- 某某[属性|=属性值]
伪类选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
关于:nth-child()的特殊值(括号内的内容可以填写以下几种)
n 第n个 n的范围0到正无穷(全选)
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
以child结尾的是在所有元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 选中第n个元素
以type结尾的是在相同元素中选择
CSS的四种定位方式:
1.静态定位:
设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位。静态定位的盒子处于网页的最底层,并且top、left、bottom、right属性都不起作用。
2.相对定位:
设置方式为position: relative;相对定位的盒子没有脱离标准流,在页面中占据位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后,相对定位的盒子是相对自己在标准流中的位置进行偏移,但是盒子在页面中占据的位置是不会改变的。
两个相对定位的盒子,默认的情况下第二个盒子层级比第一个盒子层级高,即第二个盒子可以覆盖第一个盒子,如果想让第一个盒子覆盖第二个盒子,可以通过设置z-index属性实现。
3.绝对定位:
设置方式为position: absolute;绝对定位的盒子脱离了标准流,在页面中不占位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后,绝对定位的盒子是相对设置了定位属性(静态定位不算)的最近的父级盒子的位置进行偏移,如果没有设置了定位的父级盒子,则是相对于body标签进行偏移。
绝对定位的盒子可以通过设置z-index属性改变层级。
4.固定定位:
设置方式为position: fixed;固定定位的盒子脱离了标准流,在页面中不占位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后,固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动,固定定位的盒子永远显示在浏览器窗口,不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。
固定定位的盒子可以通过设置z-index属性改变层级。
固定定位的盒子默认的宽高由其内容决定。
Css简单样式
字体属性:(font)
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位:PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体: (font-family)
背景属性: (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/
区块属性: (Block) /*这个属性第一次认识,要多多研究*/
字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进 {text-indent: 数值px;}
垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/
盒子属性: (Box)
width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左
边框属性: (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border:width style color; /*简写*/
列表属性: (List-style)
类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性: (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切)