html基础内容

一、基本结构

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

空格： 

滚动标签

<marquee> 属性

direction：滚动方向 up down left right

behavior：滚动方式 scroll循环滚动默认 slide只滚动一次 alternate来回交替

scrollamount滚动速度1-3最好

scrolldelay滚动延迟设置滚动的时间间隔

loop：默认值是-1，滚动会不断的循环下去

width height:滚动范围

bgcolor ：滚动背景颜色

hspace/vspace空白空间

二、标签

<h1></h1> //h1~h6标题标签

br：表示新的一行，能够让其后的内容放到下一行的开头开始显示。//单选标签

举例：my name is xuxu<br>

i am 18 years old

hr：横线标签，就是输出一根横线，有几个常用属性，如下所示：

//noshade 是没有阴影的

<p>：表示段落标签，表示“一个段落”，此时文字前后自然会有一个空行。

属性：align 与<br>的区别是空行大

pre：预格式化标签，表示其中的内容”原样输出“，主要是其中的换行符，tab符以及空格能在网页上直观显示出该有的效果。

blockquote：引用标签，表示其中的内容是”引用别人的话“，通常在学术著作中比较常见。

div和sapn：这两个”没有什么含义“，就只是表示”这是一块内容“，供后续的css技术使用。这div是块标签而span是行内标签。

块标签和行内标签：1.块标签：一个标签写出后，不管其是否有内容（是否单标签），或内容多少，都会”独占一行“。比如：hr/p/h1/div 等。2.行内标签：一个标签跟另一个标签如果相继出现，则在页面会在一行出现。比如：b/strong/font 等。

块元素可以设置宽高，行内元素不可以设置宽高。！！！

文本标签：

主要用于修饰文字内容，以实现一定的文字外观效果，或表达一定的含义，或二者兼具。

文本标签主要包括：b,stong,em,font,i ,s,del,sub,sup等。

b：粗体

strong：加强，强调（也会表现为粗体）

em：强调（斜体）

font：可以设置文字大小，颜色和字体的文本标签。

该标签有几个属性。<font size="大小" color="颜色" face="字体">文本</font>

i：斜体

s：删除线

del：删除线

sub：下标

sup：上标

big：字体变大

small：字体变小

u：下划线

ins：下划线

html列表标签

列表标签是为了在网页中实现“列表效果”的版面布局效果

包括三种：

无序列表：ul>li

有序列表：ol>li

定义列表：dl>dt，dd

在无序列表中不能直接包含其他标签只能包含li li里面可以包含其他标签

无序列表用于列举不分顺序的多个项目类似于

* fjalsk;dgja

* fgjasdkgja;ls

* gjkadjg;sakdfj

<ul type="列表项目符号"> //type属性disc：小圆点，默认值 circle:小圆圈 square圆方块

<li>项目1</li> // li 也可以放置type属性

</ul>

ul>li*5 //有五个列表

有序列表

有序列表用于列举中需要区分顺序的多个项目。类似:

1.第一步：****

2.第二步：*****

语法：<ol type="序号类型" start="起始序号">

</ol>

type属性：1阿拉伯a小写字母A大写i小写罗马数字I大写罗马数字

start属性：表示上述编号是从个开始，不管序号类型是什么，都只要用一个阿拉伯数字来表示。

定义列表：

用于列举一种“名称-描述”形式的列表，非常类似“字典”或”词典“ 的表现形式。类似于：

中国

全称“中华人民共和国”，缩写“PRC”

语法：<dl>

</dl>

图片标签

alt 设定图片的替换文本，主要用于搜索引擎作为搜索图片的关键字

align 设定图片的对齐方式。border用于设定图片的边框线宽度！！！不能居中！！

html链接标签锚点链接和超链接

1.超链接

想要直接在新窗口中打开，在head设置base标签

</a>

属性：target： _self（默认在当前窗口中打开新页面）_blank（在新窗口中打开新页面）

title：设置鼠标悬停到超链接上的文字提示。

可以链接的：页面、图片、音乐不可以链接的：.doc/.rar/.zip 空链接#

js：<a href="javascript:void()"></a>

2.锚点链接

在当前页面跳转

link标签

将link标签放到head标签中 link标签中的属性rel="icon"href=图标路径一般将网页图标放到网站根目录下。

表格标签

Table>tr>td,th tr是行，td是列 th是单元格

<tr>

若干个列

</tr>

若干个行

</table>

table有多个常用属性 tr基本没有属性 td有多个常用属性

border 设置表格的边框宽度像素值（默认为0）

cellspacing 设置单元格与单元格边框之间的空白间距宽度像素值（默认为2）

cellpadding 设置单元格内容与边框线之间的空白间距宽度像素值（默认为1）

width 设置表格的宽度像素值

height 设置表格的高度像素值

align 设置表格在网页中的水平对齐方式 left center right

bgcolor 设置表格的整体背景颜色

background 设置表格的整体背景图

bordercolor 线颜色

tr里面可以有background height align valign(top middle bottom)文字靠上或靠下

合并单元格

左右合并 colspan="2"里面是合并数量跨列

上下合并 rowspan="2" 跨行

表单标签

用于在网页上展示或实现“数据输入”的功能标签。

单行文字框、多行文本框，密码框，单选项，多选项，下拉选项等

主要包括：form input select>option textarea button

form标签是“盒子标签”，需要用它将其他表单标签包含起来。

input标签虽然只是一个标签，但其有很多个形式（根据type属性的不同）

<form>

input标签

select和option标签

textarea标签

button标签

</form>

数据提交方式：get post

get ：可见

post：不可见

单行文本框

maxlength:设置当前控件最多能输入多少个字符

readonly：设置让当前控件为只读模式（不能输入）

disabled：设置当前控件不能输入

value：设置当前控件默认值

name：设置当前控件名称（类似于我们自己的名字）

id：设置当前控件唯一标识（类似于我们自己的身份证号）

disabled属性：不可用，该属性也是一个无值属性

readonly属性：也是一个无值属性，表示“只读”

size：可以看到几个字符

密码框

name type value属性

隐藏文本框

<input type"hidden" name"pswd" value"">在网页上不可见，但其中的数据可用！

单选项

单选控件：<input type"radio">注意：要让这个实现单选效果，我们要给控件设置相同的name值

<input> type="radio" name="a"> 男

<input> type="radio" name="a">女

属性：checked：设置默认选中项

例如：<input type="radio"name="gender"checked>女

多选项

checked:设置默认选中项

<input type="checkbox" checked>学习

文件域

<input type="file"> 不可以设置value

按钮

提交按钮：<input type="submit" value="提交">

图片按钮：<input type="image" src="按钮.jpg>//提交表单可以设置width

重置按钮：<input type="reset"> //不是清空表单，是恢复到刚开始的样子

普通按钮：<input type="button" name="" value="按钮" 不能实现提交，会和js配合

onclick="document.getElementById('d1').width='1000'"

表单框

<legend>人员注册信息</legend>

</fieldset>

把注册的表单给包起来

下拉列表

select option这两个标签是联合使用的，用于实现网页上的“列表选项”，通常就是下拉列表

</select>

size属性：表示该列表展现出的项数（行数），如果为1，就是下拉列表

selected属性：表示该 option选项默认被选中。只应该出现在一个option上

</optgroup>

</select>

在label里面进行选择

textarea标签

<textarea name="" clos="列数" rows="行数">通常留空</textarea>实现多行文本输入

button标签

按钮标签，其作用是在网页上展示一个按钮而已

一般不需要用这个标签，而是直接使用<input type="button">来实现更为常见，效果一样

语义化标签

div一个大块，大块里面再放div小块

划分三块：头，主体，页脚

<div id="head"></div> //可以这样来定义

结构化语义标签：

article(文章）aside（侧边）header（头部）footer（尾部）nav（导航）section（小节）

视频标签

多媒体标签：

audio:音频标签

autoplay：无值属性，表示自动播放

controls：无值属性，表示显示控制面板

loop：无值属性，表示循环播放

video：视频标签

source标签和视频音频和用

embed：嵌入第三方插件，通常用的最多的就是flash动画

其它标签：dialog,progress,mark,time,address等等

dialog：对话框标签，内容表现为”浮起来的对话框“[chrome和safari6支持，要open属性]

progress：进度条标签表现为一个进度条的样子

mark：标记标签，文本有”突出显示“效果（通常是显示为黄色背景）

time：时间标签，表示其内容是一个时间

address：地址标签，表示其内容是一个地址

canvas：画布标签，可以在其上面作画（需要js）

details/summary：两者配合使用，实现文本的”详情/概述的折叠效果“，形式为：

<summary>概述性内容</summary>

详情内容

</details>

新增type值

email：输入邮箱格式

tel：输入手机号码格式

url：输入url格式

number：输入数字格式 step=5以5为单位增长

search：搜索框（体现语义化）和datalist一起用显示热门

range：自由拖动滑块

time：时间

date：日期

datetime：时间日期

month：年/月

week：年/周

color:

新增的属性：

required：必填项

placeholder：设定input文本框的默认提示性文本

autofocus：设定网页一打开的时候自动获得焦点的表单元素

multiple：设定一个文件域可以一次选择多个文件（原来只能选择一个文件）

contenteditable：设定一个元素内部的文本内容是”可编辑的“

其它标签

meta标签用于定义有关网页（文档的相关信息）（不作为网页的内容表现信息）

meta标签常用的网页（文档）的相关如下

设定针对搜索引擎的关键词：

设定对页面的描述

设定网页的作者或制作组

设定网页每隔多少秒数自动刷新一次

设定网页在一定时间后自动跳转到另一个页面

网页的字符编码问题

字符编码是指对于一个具体的”文字“（字符），其内部设定的编号是多少（是一个数字）。

一是指某个网页文件在编辑的时候，所写（敲）出来的字符所使用的字符编码。

二是指当前浏览器收到html文档内容后，使用哪种字符编码来识别识别这些内容。

ASCII编码：共256个

GB2312：6000多个一级汉字字符和相关符号

GBK：GB2312编码的加强版，共存储了2w多个汉字字符和相关符号。

Unicode：其本上是全世界所有字符编码的集合，被称为”万国码“，其中收录了几乎所有国家

UTF-8：以unicode编码的一种改进版，更节省存储空间，有利于网络传输

以后统一使用UTF-8字符集，这样就避免出现字符集不统一而引起乱码的情况了

乱码的成因及应对：

成因：文件俺在时用的编码，跟网页<meta charset="xx">声明的编码不一致

应用：保持一致就好了

特殊字符-字符实体

我们有时候会在网页中需要写小于号<或者在属性里需用到引号"

所有我们此时只能用”特殊写法“来表示其中的特殊字符，这就是所谓的字符实体

空格：  <:< >:&gt &:& "" ':'

©：©

文档类型：基本就是指html的标准规范

html文档的第一行代码（由<!doctype开关），就是用来指定声明当前网页代码所使用的文档类型

1.html5型

<!doctype html>

2.html4宽松型

<!doctype HTML PUBLIC"-//W3C//DTD HTML 4.01Transitional//EN""Http://www.w3.org/TR/html4/loose.dtd">

3.html4严格型

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 //EN""http://www.w3.org/TR/html4/strict.dtd">

iframe：内嵌框架标签iframe(了解）

用于在一个网页中（的某个区域），”嵌入“另一个网页

iframe：是双标签，但标签中通常不放任何内容

frameborder：用于设定框架窗口是否显示”边框线“1表示显示，0表示不显示。

scrolling：用于设定框架窗口是否显示滚动条（类似浏览器的滚动条）。auto：自动