html（一）基础知识-CSDN博客

本文链接：https://blog.csdn.net/conganguo/article/details/42245735

第一节第二节

略

第三节基础1

1 一定要有能力手写html代码。

2 不同浏览器对相同html代码的表现不一样。

3 ietester 工具可以测试不同版本ie.

4 ie和firefox和opera和chrome是同一级别的浏览器，国内其他的浏览器是基于ie内核的。

5 trident引擎是ie的webbrowser控件。其他的浏览器引擎还有webkit（chrome、safari）。

6 动态页面：用高级语言动态更新html页面内容。

静态页面：用html.css.javascript生成的页面，和高级语言是无关的。

7 dreamweaver、expression web（frontpage）等工具是给美工用的，开发人员用VS

第四节基础2

1 bgcolor颜色可以用vs的内置工具“选取颜色”。上面的“识色器”按钮，可以识别屏幕某点的颜色。

2 <br/>是回车；</p>是分段；分段之间是有空白行的，把一段内容放在一个<p></p>中，但是回车一个</br>即可表示。

3 url超链接用<ahref="http:....">新浪网</a>表示.

<a>中还可以嵌套图片，点击图片即可超链接：<a href="http..."><imgsrc="....gif"/></a>

4 文件路径的书写方式："/"表示网站根目录（可见于解决方案下）；"../"表示父目录；"../../"表示父目录的父目录；"./"或者"无斜杠"表示相对于当前路径的目录；

注意，以上都是相对htm文件所在位置来做比较的。

5 将<a>的target属性设定为"_blank"就可以在新窗口中大开超链接，这样就会弹出新窗口。

6 跳转，类似于go to 语句的功能：定义一个标签<aname="Last"/>，这样通过<a href="#Last">可以跳转到标签Last.可以做“评论-回到正文”的效果。

7 <img src=”a.jpg”/> 注意图片是链接的，不是插入的；alt属性为图片无法显示时的显示文本； border属性指定边框，border=0不显示边框；width和height属性指定图片的显示大小，如果不指定则是图片的原始大小，在网站加载图片的时候会出现图片丛一个小店突然放大的效果，所以很不好，一定要指定高度和宽度。

8 如果只想在客户端显示缩略图，不要仅仅把大图的with和height缩小，网站仍然会下载大图。

9 <ol></ol>表示有顺序的列表（orderedlist）;<ul></ul>表示无顺序的列表（unordered list）;

使用方法：<ul><li>灌水区</li><li>原创贴图</li></ul>

10 表格：

<table border=”1”> //设置成有边框

<tr><td>姓名</td><td>姓名</td><td>姓名</td></tr>//行是tr,格子是td,td中可以设置颜色等

…..若干行

</table>//注意td是格子，里面可以放各种控件，如<td><label/> </td>

以上便可以建立一个表格了。

11 <tr>align=”right”> </tr>设置行中的文字有对齐。

父标签的属性会传递给子标签，如果子标签也有此属性则覆盖父标签，即属性会向下传递。

第五节表单

1 什么叫表单，比如注册网站的时候填写的表单；只要涉及到用户输入的都是表单。

2 表单的一级标签是<form></form>

3 <form action=”xxx.aspx”/> action属性表示要把此表单提交给谁。

4 <input type=””/>

type=”text”表示文本框；type=”checkbox”表示多选择框；type=”button”表示一个按钮；type=”submit”表示提交按钮，一点这个按钮，当前表单就会提交给服务器；type=”file”表示文件选择框；hidden隐藏字段；image图片按钮，scr指定图片路径；password表示一个密码框；radio单选按钮；reset表示重置按钮，点击一下表单所有内容清空。

第六节缩略图

1 把原图缩小后存为另一个文件，缩略超链接直接连接到缩小后的文件上去即可。

第七节表单二

input详解

1 text：size 可以控制控件宽长；value为值;maxlength表示输入最大长度；readonly表示只读，可以只写一个readonly，也可以写readonly=”readonly”；

2 checkbox ：checked表示是否被选中，可以写成checked=”checked”或只写checked;

3 radio: <input type=”radio”/>男通过此方式可以为它赋显示值；

<input type=”radio” name=””/> 用name属性给radio分组，同一组的才能够互斥；

4 file：若使用file,则form的enctype必须设置为multipart/from-data、method 属性为post(*)

5 image图片按钮：使用src属性指定图片的地址。

其他控件详解select标签

6<select>

</select>

6 如果size属性大于1，就是listbox,否则就是combobox，size控制同时显示多少个值；

7 <select multiple=”multiple”>表示可以多选；不赋值则表示单选；

8 可以给每个option一个值，即<optionvalue=”1”>北京</option>

9 将option设置为选中状态，<optionselected=”selected”>北京</option>

10 <select>

<optgroup label=”xxx”> //是为option分组的，这个知识个显示，不能选择。

</ optgroup >

<optgroup label=”yyy”> //是为option分组的，这个知识个显示，不能选择。

</ optgroup >

</select>

第八节 textarea

1 textarea多行文本框

2 两个属性：cols属性表示列数，rows属性表示行数。

3<textarea cols=”100” rows=”10”>在这里给它赋初值即可</textarea>

第九节label

1 用法<label for =“name”>赋值</label> for 后面写其它控件的名字

2 Label和指定的控件关联起来，点击label就相当于点击这个控件了。

第十节 fieldset

1 把一些控件包起来，相当于winform中的groupbox

3 用法

<legend>常用</legend> //设置标题

放置想要放的控件

</fieldset>

第十三节 css

1 css是负责给控件换皮肤的。

2 使用：<inputtype=”text” value=”123” style=”background-color:Red />注意这个style内容不是input的，而是css的。

3在<head/>中加入标签:

Input{background-color:Red;}

P{ background-color:Red;}

</style>

这样html中的所有input都变成这个样式了。所有的p都是这个风格。

4把一段文字变样式用div，如：

第十四节 CSS2

1如果每个文件都声明一次样式，很麻烦，可以把这些样式提取到一个文件中。

2 新建一个.css文件，然后把

Input{background-color:Red;}

P{ background-color:Red;}

拷贝进来，并命名（css1.css）

4 *在html文件中，<head/>标签中加入标签：

即可，此html便采用这个css1.css中的样式了。

5 把样式提取到css文件，可以做到美工和程序员工作分离。

第十五节divspan

1 什么叫div:把一堆内容包起来，做为一个整体来移动，整体的修改；类似于winform的panel
2 span也可以起到类似于panel的作用，那么span和div的区别：

<Span/>前后的内容，只要是在html中一行的，显示时也是和span是一行的。

<div/>前后的内容，在html中一行的，显示时不是和div一行，div自己占居一行。

如果把两者都变成红色，会发现div是一个大矩形块变成红色；儿span是所辖控件区域变为红色，不规则。

第十六节css3 常用样式

1 css计量单位:css中表示宽度、距离时有多种计量单位：px(像素)、30%百分比、em相对单位等。With:20px:Red；

2background-color:Red背景颜色；color:文本颜色

3 border-style:solid:边框风格，实线(默认没有)，还有dotted(点)等值；

Border-color；边框颜色；

Border-width:边框宽度（默认是0）。

例如：style=”border-corlor:Red;border-with:1px;border-style:dotted;”

4 display:元素是否显示，类似于visiable属性。可选值为 null看不到；block显示为块级元素，此元素前后有换行符；inline显示为内联元素，元素前后没有换行符；等等还有很多种。

6 cursor：鼠标在元素上时显示的光标图标，可选值：cursor(默认光标)、pointer超链接上的手形、text输入bean、wait忙沙漏、help帮助、help帮助等、

cursor自定义鼠标图案：style=”cursor:url(***.cur)” //.cur图片可以在c盘中找到

7 LI不显示圆点:<li:style=”list-style-type:none”>aaa</li>

默认li显示圆点。

第十七节css选择器——class选择器

1 在html的head里面定义几种样式，然后控件可以选择运用哪种样式。

2 例如；

<head>

.warning{background:Yellow;}

.highlight{font-size:xx-large:cursor:help;}

</style>

</head>

<body>

<divclass=”warning”>大家好</div>//只用warning一个样式

<div class=”warninghighlight”>好</div>//同时用两种样式

</body>

第十八节优先级

1 控件自己定义的style优先级是高于所在div的class.

第十九节 CSS选择器2——标签+class选择器

1 同样一个class选择器，可以分别针对不同的控件定义不同的标签，只不过和c#不同的是，“.”放在class前面：

<head>

input.warning{background:Yellow;}

label. warning{font-size:xx-large:cursor:help;}

</style>

</head>

<body>

<inputclass=”warning” type=”text” value=”111”/>

<labelclass=”warning”>22222</label>

</body>

2 id选择器

#idname

{

Font-size:xx-large;

}

声明和class选择器一样，放在head中，用法：

3 关联选择器

P strong{background-color:Yellow}//p是标签控件strong也是控件，但是是加粗的

声明方法也是在head中，用法（用的时候不用显式引用）：

<p><strong>asdasd</strong></p> //所声明的strong字体背景色是黄色。

4 组合选择器

H1,H2，input{ background-color:Yellow}

声明在head中，用时不用显式声明。

5 为标签的不同状态设定不同的样式：

A：visited{TEXT-DECORATION:none}//A为超链接标签//visited表示已访问过的超链接样式

A:active{TEXT- DECORATION :underline}//active表示鼠标放到超链接上的样式。

声明：在.css文件中

使用:在head中用link标签引用，如：<linktype=”text/css” rel=”stylesheet” href=”link.css”/>即可