html和css简记
超文本标记语言Html(hyper text markup language)
超文本：在文本内容的基础上，添加更加丰富的信息（图片、动画、声音等）
标记（标签）：<单词>，挨着左方括号（<）的是标记，标记通常有两种含义：
表型：每一个标签都有一定表现形式
表意：每一个标签有一定的意义。
语言：可以直接被浏览器解析，和程序语言不一样。
Html的标签分类
双标签：<标签 属性名=”属性值”>…内容…</标签>
属性是特征，以人为例 性别=”女” 体重=”45” 身高=”165”
标签有<div></div> <a></a> <html></html>
单标签：<标签 属性名=”属性值” 属性名=”属性值”/>
例如 <link/> <img/> <br/> <meta/>
html骨架
html文件的扩展名是XXX.html--------XXX.html
<html>含义：告诉浏览器，网页的代码用什么格式来解析。
<head>含义：告诉浏览器，网页的汉字用什么字符集，使用的字符集不正确，就会出现乱码；gb2312 简体中文----（汉字操作系统默认使用的） gbk国际码 utf-8多国语言
<title>含义：便于搜索引擎
<body>含义：网站的内容，99%的内容都放入body标签中，只有放入该标签，才能在窗口显示。
注意：tab键可以缩进。
Html的书写规范
Html不区分大小写，但w3c使用的是小写<body>，不推荐<BODY>
Html如果有标签嵌套，顺序嵌套，不能交叉
单标签一定要闭合(/)，如<br/>
属性：每一个标签有没有属性，有多少-------w3c已规定好
双标签 |
属性 |
案例 |
font |
文本颜色、大小、字体 |
<font color=”blue” size=”6” face=”楷体”>极客</font>学院 |
p |
设置一个段落 |
<p align=”left或center或right”>一段文字</p> |
h |
设置标题位置 |
<h1 align=”left或center或right”>标题1</h1> |
a |
设置超链接 |
<a href=”file:///c:/day1--php学院/案例/6html段落案例.html”>段落案例</a> |
属性值：双引号括起
标签 |
效果 |
||
b |
<b>加粗</b> |
||
strong |
<strong>加粗、加强语气、常用于标题的修饰</strong> |
||
i |
<i>倾斜</i> |
||
em |
<em>倾斜、加强语气</em>？？？ |
||
u |
<u>下划线</u> |
||
ins |
<ins>下划线，还强调插入的是文本，比如注册前必填的位置前有*号</ins> |
||
sup |
<sup></sup>上标 |
||
sub |
<sub></sub>下标 |
||
pre |
<pre>保留原有的空格和换行</pre> |
||
div |
块标签，使用最多标签之一，本身没有意义，独占一行，必须结合css用 |
||
span |
行内标签，使用最多标签之一，本身没有意义，必须结合css用 |
||
注意 |
<!——注释——> <!--标签不能交叉，要按顺序嵌套--> |
||
块标签 |
独占一行：h、div、 |
行内标签 |
em、span、i、u，通常是块标签包括行内标签 |
Html的文本标签（格式化标签）
1、<font>设置的内容</font>
color设置文本的颜色 例如<font color=”red”>黑马程序员</font>或color=”#ff0000”
size 设置文本的大小 例如<font size=”5”>黑马程序员</font> 是以号为单位
face 设置文本的字体 例如<font face=”隶书”>黑马程序员</font>
默认是charset=”UTF-8”，编码就是UTF-8。
案例：<font color=”blue”><em><strong><u>学程序来极客</u></strong></em></font>学院
需求：输入两端内容，第一段和第二段用div包裹，第一段文本大小为5号字且加蓝色居中标题1。
<h1 align=”center”><font color=”blue”>bleach</font></h1>
<div>
<p><font size=”5”>千本樱</font></p>
<p><font size=”5”>冰轮丸</font></p>
</div>
列表
定义：若干个相似的内容进行排列
无序列表：没有先后顺序 ul属性type:设置列表前面的符号样式，取值circle disc square
语法：<div>
<h1>火影</h1>
<ul type=”circle”> //circle空心圆，square方框，一般默认是disc，实心圆
<li>佐鼬</li>
<li>宁鸣</li>
<li>飞志</li>
</ul>
</div>
有序列表：相似内容排列
语法：<div>
<h2>黑篮</h1>
<ol> /
<li>赤黑</li>
<li>光影</li>
<li>赤灰</li>
</ol>
</div>
自定义列表：
语法：<div>
<dl>
<dt>自定义列表的标题</dt>
<dd>对标题进行描述</dd>
<dt>火影主要人物</dt>
<dd>鸣人 佐助 樱 宁次 鹿丸 我爱罗</dd> //同行显示
</dl>
</div>
特殊字符
空格符号。（代表一个字符，一个汉字两个字符）
©版权符号。（<font face=”Arial”>©</font>）
<等于左方括号”<”，>代表右方括号”>”。
¥代表人民币钱的符号。
======================
图片标签（单标签，行内标签）
图片的语法：<img 属性名=”属性值”/>
图片的属性
图片路径 src=”图片的地址”（图片要放到同一站点，同一文件夹下）
图片宽度 width=”值” 高度height=”值” 单位为像素px 例width=”300” height=”200”
图片边框 border=”数值”
图片的解释说明 alt=”对图片的面熟内容” 不会显示但这是对图片进行推广优化的唯一手段
图片和内容的左右距离/上下距离 hspace/vspace”数值” （了解，更多还是css实现）
注意：图片等比例缩放，只设置宽度或高度。
例：<img src=”images/tu6.jpg” width=”200” height=”160” border=”1” alt=”程序员搞笑图片”/>
表格
通常表格<table></table>包括行<tr></tr>，行包括单元格<td></td>
注意：内容一定要放入最底层的标签里。
表格的属性
1、表格边框 border=”0” //默认是0
2、表格只需要设置宽度 width=”数值”
3、水平对齐方式align=”center或left或right”
4、表格中内容和单元格之间的距离cellpadding=”数值” 默认数值是2像素
5、表格中单元格和单元格之间的距离cellspacing=”数值” 默认数值是2像素
例：两行五列，宽度1000像素，居中显示，边框默认值，在第一行的每一个单元格中放入图片，图片的宽度位190像素，高度为160像素，第二行放入内容。（爱奇艺/PHP初级教程/4表格属性）
6、表格的背景颜色bgcolor=”颜色值” 例bgcolor=”red”
7、表格的背景图片background=”图片的地址” （背景图片不能含有中文）
注意：背景图片的优先级高于背景颜色。
<tr>属性
表格设置了宽度，所以行不设置宽度，只设置高度，例 height=”300”
背景颜色，例 bgcolor=”blue”
背景图片，例 background=”images/33.jpg”
水平对齐方式，例 align=”left或center或right”
垂直对齐方式，例 valign=”top或middle或bottom” //顶部、居中、底层
例：<tr height=”60”bgcolor=”red”align=”center”valign=”bottom”> //行的高度是60像素，背景红色，内容水平居中，垂直局底
<td>单元格属性（每一行里被列隔开的格子数）
bgcolor背景颜色
background背景图片
width宽度，单位像素
height高度单位像素
align水平对齐方式，取值left、center、right
valign垂直对齐方式，取值top、middle、bottom
例：<td height=”35”>内容</td> //单元格高度35
表格的扩充（7表格的合并单元格）
l <td colspan=”3”>内容</td> //横向合并三个
l <td rowspan=”3”>内容</td> //纵向合并3个
（好像8链接属性绝对地址内容重复）
超链接
【本地链接】——在你的本机上测试
<a href=”???”>超链接</a>
<a href=”file:///c:/day1--php学院/案例/6html段落案例.html”>段落案例</a>
【相对链接】
在同一个站点下，在同一个文件夹
目标文件和当前文件在同一个目录，直接写文件名称
目标文件在当前文件的下一级目录，则 文件夹名/文件名
目标文件在当前文件的上几级目录，则 ../../文件名称
【特殊链接】
不用下载可以直接做链接的：.html .jpg .gif
必须要下载才可以做链接的：.zip .exe
【邮件链接】
<a href=”mailto:邮件的地址”>内容</a> //网页最底层那种[email protected]的
【空链接】
在当前页面做链接，点了还是当前页面 //比如百度右上方的首页
【JavaScript链接】
<a href=”javascript:window.close()”>关闭</a>
【name定义锚点的名称】
同一个页面的不同区域直接跳转
定义锚点 <a name=”自定义名称”></a> 在<a></a>中不加内容，给链接中的target用
跳转锚点 <a href=”#锚点名称>内容</a>
字符集
计算机只能处理二进制数据，为了让计算机能识别人类语言（0-9、a-z、A-Z、特殊符号），就需要对每一个字符进行“编码”——用不同的二进制表示每一个字符。
ASCII编码：用1个字节（8位二进制）来表示所有字符，共可以表示2^8=256个
ANSI编码：其他国家都对ASCII编码进行扩展，用于显示本国的语言。
在中文操作系统 gb2312
繁体操作系统 big5
用2个字节（16位二进制）来表示，共可以表示2^16=65536个字符。
GBK编码：对GB2312（收入了6763个汉字）进行扩充，收录了一些冷门字、罕见字、古汉语等大约2.1万个汉字。
Unicode编码：计划将世界上所有字体统一编码，用4个字节（32位二进制）来表示一个字符。缺点是编码表文件太大，不方便使用。用32位二进制表示一个字符，造成空间极大浪费。
UTF-8（多国语言编码）：不同的字符，它会选择合适编码来进行翻译。
meta标签
描述网页文档属性
http-equiv：模拟的是http文件头信息，当内容从服务器端发送客户端，告诉浏览器如何正确显示信息。
字符集
<meta http-equiv=”content-type”content=”text/html;charset=UFT-8”/>多国语言
<meta http-equiv=”content-type”content=”text/html;charset=gbk”/>国际码
name
======================
表单
例如注册网页，表单有各种各样的控件，输入框、复选框、按钮等。
表单有交互功能。
工作原理：
浏览有表单的页面，填写必要的信息，之后单击某个提交按钮
对表单中的数据进行验证，如果不符合制定的要求，提示验证没有通过，如果符合相应的要求，把数据提交到服务器端，数据放入数据库里面。
表单分为前台的制作页面，php对数据的处理，添加到数据中，删除数据，更改数据，查询数据等。
表单的结构
语法<form 属性=”属性值”>
控件
</form>
表单的属性
1、表单的识别名称
<form name=”Bill”></form>
<rorm name=”game”></form>
2、action=”XX.php”对数据进行处理
3、method=”get/post”把表单中的数据提交到服务器端的方法，传递数据的方法
get方法 默认的一种传递数据的方法，通过地址来传递表单中的数据，特点：
a. 不能传递敏感数据 密码
b. 不能传递大量的数据，每次只能传递1024字节
c. 不能上传附件
post方法（PHP使用） 不通过地址，而是直接把数据传给文件处理程序
a. 相对安全
b. 可以传递海量数据
c. 能上传附件
控件
n 单行文本框（单标签，行内标签）
语法：用户名：<input type=”text” name=”自命名” />
属性：name单行文本框的识别名称，把输入框中的数据，提交到文件的处理程序
自定义命名，规则（开头是字母或下划线，后面可以是字母、数字、下划线）name=”usename”
程序：size=”数值” 输入框宽度（可显示多少字符），字符为单位
maxlength=”数值” 最多允许输入的字符数，如果超出范围，输入不进去
value=”内容” 设置输入框的初始值，在输入框中默认的数据信息
例：用户名：<input type=”text”name=”username”size=”50”maxlength”8”value=”输入账号/用户名”/>
题：邮箱输入框，输入框的显示30个字符；手机号输入框，显示25个字符，最多允许输入20个字符。
<body>
<form action=”XX.php”>
用户名：<input type=”text” name=”username” size=”50” maxlength=”8”value=”请输入账号/用户名”/><br/>
手机号：<input type=”text” name=”telephone” size=”25” maxlength=”20” /><br />
邮箱账号：<input type=”text” name=”email” size=”30” /><br />
<input type=”submit” value=”提交” />
</form>
</body>
n 密码框
语法 <input type=”password” name=”自命名” />
密码框的属性
name=”自命名”
size=”数值” 可显示字符数量
maxlength=”数值” 最大可输入字符数量
value=”” 初始值
readonly=”readonly” 只读属性，只能选中，不能修改（了解）
disabled=”disabled” 不能选中，不能修改(以firefox浏览器为准)
n 单选按钮
语法 <input type=”radio” name=”自命名” value=”每项名” /> 每项名（给客户看）
属性
name 单选按钮组的识别名称（以组为单位，一样）
value 设置初始值，必须写，每一项的值
n 复选框（多选按钮）
语法 <input type=”checkbox” name=”自命名” value=”每项名”>每项名
属性
name=”自命名” 多选按钮组的识别名称
value=”每项名” 设置每项名
checked=”checked” 默认被选中
<input type=”checkbox” name=”hobby” value=”码程序” />码程序
<input type=”checkbox” name=”hobby” value=”唱歌” />唱歌
<input type=”checkbox” name=”hobby” value=”打游戏” />打游戏
<br />
n 多行文本框
语法 <textarea rows=”可显示行数” cols=”每行可显示字数” name=”自命名”>这里直接设置初始值</textarea> //textarea英文翻译是文本区
属性
name多行文本框的识别名称
value 不出现，在><中间输入
rows=”可显示行数”
cols=”每行显示多少字符数”
请留言<textarea rows=”10” cols=”80” name=”content”>请输入留言内容</textarea>
<br />
n 下拉列表
语法 <select>
<option>给用户可选择的内容</option>
<option>给用户可选择的内容</option>
......
<option>给用户可选择的内容</option>
</select>
属性：name下拉列表的名称 value每一项的初始值
城市：<select name=”city”>
<option>---请选择你所在的城市---</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
颜色：<select name=”color”>
<option>---请选择想要的颜色---</option>
<option value=”red”>红色</option> //写value=””时的默认为红色
<option value=”green”>绿色</option>
<option>蓝色</option>
</select>
<br />
n 隐藏域
隐藏起来，不是给客户看，是给程序用的
<input type=”hidden” name=”自命名”>
n 文件域
可以上传图片或压缩包或其他文件
语法 请上传文件<input type=”file” name=”自命名” /> //没有value
n 按钮
提交按钮<input type=”submit” value=”按钮上的文字” /> //提交
提交按钮还有一类：图片按钮<input type=”image” src=”图片的地址” />
重置按钮<input type=”reset” value=”按钮上的文本” /> //重新填写
普通按钮<input type=”button” value=”按钮上的文字” /> //本身没有功能，必须结合程序构成功能
<input type=”button” value=”投票” onclick=”javascript:window.alert(‘不能多次投票’)” /> //onclick设置只能点一次
Xhtml（可扩展的超文本标记语言）-------为了取代html（面向pc机）----随着发展，面对的是移动端设备
语法 Xhtml语法比html严格
Xhtml输入的标签和属性必须小写
Xhtml的单标签后必须加 /
Xhtml属性必须用双引号
Xhtml必须有dtd（document type definition）文档类型定义
dtd 文档类型定义，是一种验证机制，检验输入的Xhtml是否符合规范
dtd的分类
过渡型 xhtml1-transitional.dtd：允许使用表现的标签和属性
<b> <i> <font color=”red”> <table bordercolor=”red”>
严格型xhtml1-strict.dtd：不能用表现的标签和属性 //定这个就是给自己找麻烦
<b> <strong> <u> <table width=”300”>都不能用，必须用css样式
框架型 xhtml1-frameset.dtd（了解就好，因为兼容性太差已经淘汰）
=======
背景的属性：
Background-color 背景颜色 例如：background-color:#ff0000;background-color:red;
Background-image背景图片 例如：background-image:url(图片的路径)
CSS样式
css（cascading style sheet）层叠样式表
body a.box{}
css的目的：给html加各种各样的样式---html结构和css样式样式分离---便于维护更新
css语法
选择器{属性名:属性值;属性名:属性值; }
说明：a. 一个css样式包括选择器和格式声明语句（==属性名:属性值;）
b. 选择器就是选择给哪个html标签加样式
c. 格式声明语句包括属性名:属性值;
d. 格式声明语句要用{ }
e. 属性名，w3c已经定义好，可直接使用
f. 属性值不用双引号
g. 属性值的有单位通常是以像素px为单位，通常情况下必须带单位
如何在html结构中引入css样式
1. 行内样式表——临时做测试用
每一个标签都有style属性
格式 <标签 style=”属性名:属性值;”>要设置的内容</标签>
2. 内嵌样式表 只针对当前文档
格式 在head标签中输入
<style type=”text/css”>
选择器{属性名:属性值;}
</style>
3. 外部样式表 可以应用多个页面（文档），是常用的一种
格式 <link rel=”stylesheet”href=”外部样式表文件 xx.css” />
如何建立外部样式表文件：
a. 建立一个css页面，保存时扩展名为.css文件
b. 在不同的页面引入<link rel=”stylesheet”hrf=”外部css文件的地址”>
4. 导入样式表 做大型网站时时会用到，管理css样式
格式 @import url(另外一个css样式)
注意@import是css样式标签，所以必须放到css文件中，且在最上端
选择器的分类 选择器用来设置文本样式
基本选择器
【标签选择器】
选择给哪个标签加样式，会自动指向该标签。优点是不用引用，所有对应标签都加上该样式；缺点也是因为所有对应标签都会加上，不能针对个别。
标签选择器{属性:属性值;}
body{ } p{ } div{ } table{ } td{ } ul{ }
【类选择器】
给一类html标签加样式，想给谁用样式，就给谁加
类选择器名{属性:属性值;} //选择器名是自己定义，但要有含义
例如 .myclass{ } .page_header{ } .login-content-input{ }
引用 <标签 class=”选择器名”></标签> //注意：类选择器可引用多次
效果 |
实现 |
例 |
调行间距 |
选择器{line-height:数值px;} |
{line-height:14px;} //行间距为14像素 |
文本加粗 |
选择器{font-weight:bold;} |
{font-weight:bold;} |
首行缩进__个汉字 |
选择器{text-indent:数值em;} |
{text-indent:2em;} //首行缩进2个汉字 |
文本加下划线 |
选择器{text-decoration:underline;} |
.p_one,h3,ul{text-decoration:underline;} |
文本去掉下划线 |
选择器{text-decoration:none;} |
|
文本宽度 |
选择器{weight:数值px？} |
|
文本高度 |
选择器{height:数值px？} |
|
【id选择器】
注意：id只能引用一次，表示唯一，通常给JavaScript用，不是用来设置样式的，如果想设置样式，用类选择器。因为浏览器没有判断能力，调用多次id选择器也能显示，但实际上这是存在语法错误的。
id选择器名{属性:属性值;} //id用#表示，选择器名自定义，要见名知意
调用 <标签 id=”选择器名//注意：没有#”>内容</标签>
例如 #myid{ } #id1{ } #checkform1{ }
题：两个div，第一个div中标题3，下面是一个有序列表，标题3的颜色为蓝色，去掉加粗，有序列表文本为浅蓝色，大小为12像素，行间距为24像素，第二个div，，有一个标题3，下面有一个无序列表，不设置样式。
【通用选择器】
页面所有文本都会被设置，但不是所有浏览器都支持，IE6就不支持
*{属性:属性值;}
复合选择器
多元素选择器 多个标签共有的属性和属性值，放到一起
选择器，选择器，选择器，…，…{共有的属性:属性值;}
.p_one,.p_two{line-height:24px;}
后代元素选择器
选择器 选择器 选择器 … …{共有的属性:属性值;}
.p_one h1 ul{font-color:red;}
子元素选择器 给html标签的子标签加样式
选择器>选择器{属性:属性值;} //某个标签里面的第一层
ul>li{font-color:red;}
伪类------锚<a>（内容必须做好链接）
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动链接上
a:active 单击鼠标左键的那一时刻的样式
文本属性
font-size 文本的大小 例如font-size:12px;
font-weight 文本是否加粗 font-weight:bold///normal
font-style 文本是否倾斜 font-style:italic; //倾斜 font-style:normal; //正常
font-family 文本的字体 例如font-family:隶书； //默认是宋体
text-decoration 文本是否有线条 例如text-decoration:none;
underline下划线 overline上划线 line-through删除线？ none去掉所有线条
text-indent 文本首行缩进
color 文本颜色
letter-spacing 字母和字母之间的距离 例如letter-spacing:2px;
word-spacing 单词和单词之间的距离 例如word-spacing:2px;
text-align 文本的对齐方式 left center right 例如text-align:center;