黑马程序员html相关基础

来源：互联网发布：延时摄影编辑软件编辑：程序博客网时间：2024/05/15 05:08

<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------

HTML不是一种编程语言，而是一种描述性标记语言，用于描述超文本中内容的显示方式。

序：网站页面分为动态页面和静态页面。

静态页面是; 将一个html文件放在服务器上，当用户请求该页面时，将此文件发送给浏览器，浏览器将此html文件译成浏览器能识别的语言，展现给用户。动态页面是服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发送给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编程。

HTML和XML的区别

1、HTML中有一些标签，是可以不关闭的，例如<br>，而XML中是必须关闭的必须写为<br/>，img 标签也是如此。但是为了遵循XHTML规范，推荐像XML一样严格关闭。

2、属性值：HTML中的属性值既可以用单引号括起来，也可以用双引号括起来，甚至可以不用引号都可以，单双要配对，但是在XML中，必须用双引号。

3、注释 HTML和XML中一样都使用来做注释。

4、特殊字符：HTML中和XML是一样的。<、 >是有特殊含义的、空格是不会被显示的，因为排版经常会有缩进，如果把缩进的空格在浏览器中以空格形式展现的话，排版会很麻烦。所以需要使用特殊符号，相当于C#中的'\n'转义符。<（小于号 less than），（空格）.

因为，标签的开始结束是<>，所以用<和>

Html,最好可以达到要求，用记事本也可以熟练应用

1.标准格式

<html>

<head>

</head>

<body>

</body>

</html>

快捷键 ctrl+j 自动提示

2.常用标签

<a href="www.baidu.com">百度</a> 超链接标签 <a / >标签里的 target =_blank 时候，在新窗口打开超链接

href 是Hypertext Reference 的缩写，意思为超文本引用

<img src="1.jpg" /> 图片链接标签 alt属性设置后，可以在图片显示不出来时候，显示文字

src是 source的缩写，意思是源文件

<img src="/1.jpg" /> 图片链接标签注意这3个区别

<img src="../1.jpg" /> 图片链接标签一般推荐用这个

<font color="red">aaaa</font> 设置文本的颜色。。。

空格

< 小于号

> 大于号

<br /> 回车

<center></center> 居中显示

<p></p> 段落

<area></area> 一个区域

<h1></h1> 六种大小的标题字号

<table></table> 制表

<tr></tr> 表内的行 table row

<td></td> 表内的数据单元格（列） table datacell

<thead></thead> 表头可以把某一列放在表头标签里当表头

//无序列表 ul 是 unordered list

<ul>

</ul>

//有序列表 ol 是 ordered list

<ol>

</ol>

<form>表单标签里的 action属性可以设置要将表单提交到哪里

<input> 标签里的 type属性设置将要显示什么

<input type="text" /> 文本框有size（长度） readonly（只读） maxlength属性（可填写的最大长度） value（默认的文字）

<input type="textarea" /> 多行文本框，可以设置行列 cols（列） rows（行）

<input type="password" /> 密码文本框

<input type="button" /> 普通按钮

<input type="button" value = "注册"/> 按钮的 value属性可以设置按钮上显示的文字

<input type="file" /> 文件选择框使用它，则 form里的enctype属性必须设置为：multipart/form-data,, method属性设置为POST

<input type="image" src="1.jpg" /> 图片按钮

<input type ="submit" /> 将表单数据提交到服务器按钮，默认显示的文字是“提交查询”

<input type ="submit" value="我要提交到服务器了" /> 也可以通过value属性更改显示的文字

<input type="checked" /> 复选框 checked属性表示是否选中

<input type= "radio" /> 单选框 checked属性表示是否选中设置name属性可以让相同name属性的单选按钮为一组，不同name属性的组不影响。。

<input type="reset" /> 重置按钮

<input type ="hidden" /> 隐藏字段

<select> 下拉列表标签，将 size属性设置为大于1，就是 ListBox, 否则就是 ComboBox 或者设置 mulitiple属性，那么就是ListBox 可以多选。。 size设置的是显示几项

<optgroup label="城市"> //可以分组 option group label设置显示的值

<option >北京</option> //下拉列表里的每一项将 option里的 selected属性设置，那么就选中此项

</optgroup>

</select>

<label></label> 标签, 把文字和空间建立链接, 实现点文字空间获得焦点的效果需要先为标签设置属性id 然后再用例子：

<label for="name">姓名：</label> <input id="name" type="text"> 这样就能有点击文字获得文本焦点的效果

<fieldset> //把一对控件包起来，，legend标签设置标题，，，外面有线条！相当于winForm里的 groupBox 效果

<legend>常用</legend> 相当于标题图标符号

</fieldset>

<div></div> 把一些东西包成一块，整体处理四方形区域，即使空的后面的内容也不会紧跟着显示经常用，例如可以把一些东西当成一块，编程实现在网站上飘动!!

<span> </span> 也是定义一块，但是前后内容可以连载在块的后面，不影响布局,里面的内容有多大就是多大一块内容,形状不一定

3. 样式表 CSS 它是描述控件的皮肤的

A ）内联直接在控件的style属性里面定义

<input type="text" valu="333" style="background-color : Red; border-color:Green" /> 注意语法,冒号和分号的位置

B）页面嵌入在 <head>标签里 <style>标签下定义

input{background-color : red;} //这样所有的input标签就都是该样式：红色注意语法，，大括号

p{color : blue;} //这样设置所有的段落里的文本是蓝色的

</ style >

C）外部引用单独的在一个 css文件里写样式, 然后在 <head>里 <link>

CSS计量单位： px（像素） 30%百分比 em（相对单位）等

风格：

1.background-color:Red 背景颜色

2.boder-color:Red;boder-width:2（默认为0）;boder-style(默认没有边框):dotted

3.display 元素是否显示可选： none（不显示）， block（块，前后带换行符） inline（前后不带换行符）

4.cursor 元素可选（鼠标在控件上的时候显示的是什么）： cursor，， pointer（手），wait（沙漏） help（帮助） text（输入Bean） curcor：url（鼠标形状图片地址，需要加载鼠标资源 .ani或者.cur格式的图片）在body里设置可以让网站鼠标改变形状

5. li 不显示圆点： LIST_STYLE_TYPE:none，一般用在<li>或者<ui>上

HTML不是一种编程语言，而是一种描述性标记语言，用于描述超文本中内容的显示方式。

序：网站页面分为动态页面和静态页面。

HTML和XML的区别

2、属性值：HTML中的属性值既可以用单引号括起来，也可以用双引号括起来，甚至可以不用引号都可以，单双要配对，但是在XML中，必须用双引号。

3、注释 HTML和XML中一样都使用来做注释。

因为，标签的开始结束是<>，所以用<和>

样式选择器

1.标签选择器例如下面的是直接给 input 标签和 p标签定义了一个样式

input{background-color : red;} //这样所有的input标签就都是该样式：红色注意语法，，大括号

p{color : blue;} //这样设置所有的段落里的文本是蓝色的

</ style >

2. class选择器就是给一种样式取一个名字然后哪个标签要用到这个样式就调用

定义

：waring {background-color : red;} //设置一个名字叫 waring的样式，要用的时候调用

：hello {color : blue;} //这样设置一个名字叫hello的样式，要用的时候调用

</ style >

引用

<div class="hello waring">你好啊</div> 引用样式可以同时用几种样式中间用空格分开

3. 标签+class选择器

input.hello {background-color : red;} /设置input标签样式，样式名字叫 hello

label.hello {color : blue;} //设置 label标签样式，名字也叫 hello 针对不同标签，样式名字可以重复

</ style >

4.id样式选择器为指定id的空间选择样式

定义：

#username

{

font-size：xx-large；

}

调用：

5.关联选择器

p strong {background-color:Red} 表示P标签内的 strong标签内的样式

6.组合选择器

h1，h2，input{background-color:Red} 同时为多个标签设置一个样式上下2个的区别在于开始定义的时候一个有逗号一个没有

7.伪选择器

用于标签在不同的状态下不同的样式，一般用于在超链接点了和没有点的时候的样式，可以拷贝下面代码设置超链接的为选择器样式

A：visited{TEXT-DECORATION:none}

A：active{TEXT-DECORATION:none} //不显示超链接下的下划线最常用

A：link{TEXT-DECORATION:none}

A：hover{TEXT-DECORATION:underline} //鼠标放上来的时候有

---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------