一.HTML
1.html主要是要记住标签,所有功能都是通过标签实现的
标签一般都是成对出现,例如<html>和</html>从标签开始,到/的标签结束
但是也有单独出现的,比如<br/> <hr/>这些标签在自己内部结束
2.基本标签
字体标签:<font></font> 属性有color:三种表示方式 1)直接英文单词 2)#加上16进制数 3)rgb(255,255,255) 三原色范围0-255
size:字体大小1-7,1最小 7最大
face:字体类型,跟机器那装的字体有关
标签页标签<title></title> 这个标签是写在<head></head>中的,表示标签页的名字
标题标签<h1></h1>...<h6></h6> 单行标题加粗,h1最大,h6最小,自动换行
列表标签 <dl> 分层列表
<dt></dt> 上层
<dd></dd> 下层
</dl>
<ol> 有序列表 属性有type,值:123 abc i ii(罗马数字)
<li></li>
</ol>
<ul>
<li></li> 无序列表 属性也是type,值:disc实心圆点 circle空心圆点 square是新方块
</ul>
图形标签<img src="图片路径">
超链接<a href="超链接地址" target="超链接打开的方式"></a> target的值有_self当前页面打开 _blank新标签页打开 _parent父标签页打开
3.表格标签<table></table>
表格标签里面主要要记住的属性是:border="数值" 默认为0,即不现实表格线,有值 的时候表示表格线的宽度
cellspacing="" 默认有数值,单元格之间存在空隙,一般情况下需要设置为0
cellpadding="" 单元格文本距离边框的距离 单位是像素
表头写在table的第一行用<caption></caption>包起来
!!!牢记处理表格时数清行和列 有几行就有几个<tr>
<tr> 表示一行
<th></th> 表示一个标题单元格(默认加粗居中) <th>和<td>是同级的
<td></td> 表示普通单元格
</tr>
<tr><th><td>的共同属性是 align 表示单元格内容显示方式 值:left居左 center居中 right居右
<th><td>特有属性 rowspan="数值" 跨行合并 即占"数值"行
colspan="数值" 跨列合并 即占"数值"列
4.表单标签<form></form>
表单的属性有action="服务器地址" method="get或者post" 一般的提交方式,默认是get(不安全,但是优点是直接明了)
表单必须用<form></form>包起来,否则提交会出现bug
表单的大部分功能由input完成
<input type="text"/> 普通文本输入框
<input type="password"/> 密码输入框
<input type="hidden" value="内容"/> 隐藏文本
<input type="radio"/>XXX 单选框
<input type="checkbox"/>xxx 多选框
单选框和多选框必须有name="值",同一次选择必须保证name值相同
设置默认选择项 checked="checked"
<selcet> name在select中写
<option></option> 下拉选择 value在option中写 selected="selected"默认选中
</select>
<textarea></textarea> 文本域 属性 rows cols 行和列
提交按钮
<input type="submit"/> 生成提交按钮 value的值可以设置按钮内容
<input type="image" src="图片路径"> 以图片作为提交按钮
重置按钮
<input type="reset"/> 生成重置按钮,value的值可以设置按钮内容
该按钮不是删除已输入的内容,而是让表单回到初始化状态
5.其他标签
<pre></pre>原样输出 其中有标签也会被识别
<p></p> 段落输出 前后都有换行
<s></s> 删除线
<b></b> 加粗,记big,或者变粗
记住<i></i>是斜体 剩下的<u></u>下划线
<div></div> 自动换行
<span><span> 写成一行
%nbsp; 空格,有多少个空格就用多少个
二.CSS
1.CSS是样式,一般与HTML结合使用,对HTML的样式进行绑定修改
2.CSS与HTML的结合方式:
style属性:在标签内使用style="CSS语句"
style标签:在<head>中写style标签,标签内属性 type="text/css"
style标签包起来的是CSS语句(含选择器)
link标签:标签内属性 rel="stylesheet" href="CSS文件路径" 开发中一般使用这种
style标签引用:标签内属性 type="text/css" 这种一般很少使用了
标签包裹 @import url(CSS文件路径)
3.CSS的选择器
基本选择器:
标签选择器:例如<div></div>等等
class选择器,在标签内添加class="xxx" xxx就是class名
在使用时通过 .xxx{CSS语句} 来实现对样式的改变
id选择器,在标签内添加id="xxx",使用方法与class相似,通过
#xxx {CSS语句}来实现 xxx建议唯一,保证CSS修改确定的对象
选择器的优先级:style属性>id>class>标签选择器
扩展选择器:
关联选择器:多级标签包裹的内容
<div><p></p></div>
<p></p>
要区分div里面的P标签包裹的内容就需要用到关联选择器 div p 中间空格隔开
组合选择器:
多个不同的标签包裹的内容需要修改为同样的样式(标签同级)
div,p,a {CSS语句}
伪元素选择器:
:link 初始状态
:hover 悬停状态
:active 点击状态
:visited 点击后状态
...
a:link {CSS语句}
三.今天的重点内容是:
1.表格:
rowspan和colspan分别对应跨行和跨列,其属性值是占用的行数或者列数
align是控制对其方式的属性
2.表单:
表单的提交服务器路径(action属性)
提交方式(method) 默认get 也可以post,get会在地址栏显示提交的内容,因此不安全
一般的功能都是<input/>标签实现,标签内的type="xxx"属性值不同对应的功能也不同
特殊的比如下拉选择<select></select> 设置默认选中用selected="selected"
单选和多选框默认选中要用到 checked="checked"
textarea是文本域,用来输入较多的文本,需要定义行数和列数
提交按钮的实现type="submit"或者type="image" src="图片路径"
3.注册案例:
见2.表单
4.CSS和HTML结合方式&优先级
一般使用link rel="stylesheet" href="css路径" HTML和CSS分离,便于维护
优先级style="CSS语句"最高
5.css选择器
标签 class id 使用方法相同,表现形式有点区别
标签是直接标签名
class是.xxx
id是#XXX 区分清楚即可
1.html主要是要记住标签,所有功能都是通过标签实现的
标签一般都是成对出现,例如<html>和</html>从标签开始,到/的标签结束
但是也有单独出现的,比如<br/> <hr/>这些标签在自己内部结束
2.基本标签
字体标签:<font></font> 属性有color:三种表示方式 1)直接英文单词 2)#加上16进制数 3)rgb(255,255,255) 三原色范围0-255
size:字体大小1-7,1最小 7最大
face:字体类型,跟机器那装的字体有关
标签页标签<title></title> 这个标签是写在<head></head>中的,表示标签页的名字
标题标签<h1></h1>...<h6></h6> 单行标题加粗,h1最大,h6最小,自动换行
列表标签 <dl> 分层列表
<dt></dt> 上层
<dd></dd> 下层
</dl>
<ol> 有序列表 属性有type,值:123 abc i ii(罗马数字)
<li></li>
</ol>
<ul>
<li></li> 无序列表 属性也是type,值:disc实心圆点 circle空心圆点 square是新方块
</ul>
图形标签<img src="图片路径">
超链接<a href="超链接地址" target="超链接打开的方式"></a> target的值有_self当前页面打开 _blank新标签页打开 _parent父标签页打开
3.表格标签<table></table>
表格标签里面主要要记住的属性是:border="数值" 默认为0,即不现实表格线,有值 的时候表示表格线的宽度
cellspacing="" 默认有数值,单元格之间存在空隙,一般情况下需要设置为0
cellpadding="" 单元格文本距离边框的距离 单位是像素
表头写在table的第一行用<caption></caption>包起来
!!!牢记处理表格时数清行和列 有几行就有几个<tr>
<tr> 表示一行
<th></th> 表示一个标题单元格(默认加粗居中) <th>和<td>是同级的
<td></td> 表示普通单元格
</tr>
<tr><th><td>的共同属性是 align 表示单元格内容显示方式 值:left居左 center居中 right居右
<th><td>特有属性 rowspan="数值" 跨行合并 即占"数值"行
colspan="数值" 跨列合并 即占"数值"列
4.表单标签<form></form>
表单的属性有action="服务器地址" method="get或者post" 一般的提交方式,默认是get(不安全,但是优点是直接明了)
表单必须用<form></form>包起来,否则提交会出现bug
表单的大部分功能由input完成
<input type="text"/> 普通文本输入框
<input type="password"/> 密码输入框
<input type="hidden" value="内容"/> 隐藏文本
<input type="radio"/>XXX 单选框
<input type="checkbox"/>xxx 多选框
单选框和多选框必须有name="值",同一次选择必须保证name值相同
设置默认选择项 checked="checked"
<selcet> name在select中写
<option></option> 下拉选择 value在option中写 selected="selected"默认选中
</select>
<textarea></textarea> 文本域 属性 rows cols 行和列
提交按钮
<input type="submit"/> 生成提交按钮 value的值可以设置按钮内容
<input type="image" src="图片路径"> 以图片作为提交按钮
重置按钮
<input type="reset"/> 生成重置按钮,value的值可以设置按钮内容
该按钮不是删除已输入的内容,而是让表单回到初始化状态
5.其他标签
<pre></pre>原样输出 其中有标签也会被识别
<p></p> 段落输出 前后都有换行
<s></s> 删除线
<b></b> 加粗,记big,或者变粗
记住<i></i>是斜体 剩下的<u></u>下划线
<div></div> 自动换行
<span><span> 写成一行
%nbsp; 空格,有多少个空格就用多少个
二.CSS
1.CSS是样式,一般与HTML结合使用,对HTML的样式进行绑定修改
2.CSS与HTML的结合方式:
style属性:在标签内使用style="CSS语句"
style标签:在<head>中写style标签,标签内属性 type="text/css"
style标签包起来的是CSS语句(含选择器)
link标签:标签内属性 rel="stylesheet" href="CSS文件路径" 开发中一般使用这种
style标签引用:标签内属性 type="text/css" 这种一般很少使用了
标签包裹 @import url(CSS文件路径)
3.CSS的选择器
基本选择器:
标签选择器:例如<div></div>等等
class选择器,在标签内添加class="xxx" xxx就是class名
在使用时通过 .xxx{CSS语句} 来实现对样式的改变
id选择器,在标签内添加id="xxx",使用方法与class相似,通过
#xxx {CSS语句}来实现 xxx建议唯一,保证CSS修改确定的对象
选择器的优先级:style属性>id>class>标签选择器
扩展选择器:
关联选择器:多级标签包裹的内容
<div><p></p></div>
<p></p>
要区分div里面的P标签包裹的内容就需要用到关联选择器 div p 中间空格隔开
组合选择器:
多个不同的标签包裹的内容需要修改为同样的样式(标签同级)
div,p,a {CSS语句}
伪元素选择器:
:link 初始状态
:hover 悬停状态
:active 点击状态
:visited 点击后状态
...
a:link {CSS语句}
三.今天的重点内容是:
1.表格:
rowspan和colspan分别对应跨行和跨列,其属性值是占用的行数或者列数
align是控制对其方式的属性
2.表单:
表单的提交服务器路径(action属性)
提交方式(method) 默认get 也可以post,get会在地址栏显示提交的内容,因此不安全
一般的功能都是<input/>标签实现,标签内的type="xxx"属性值不同对应的功能也不同
特殊的比如下拉选择<select></select> 设置默认选中用selected="selected"
单选和多选框默认选中要用到 checked="checked"
textarea是文本域,用来输入较多的文本,需要定义行数和列数
提交按钮的实现type="submit"或者type="image" src="图片路径"
3.注册案例:
见2.表单
4.CSS和HTML结合方式&优先级
一般使用link rel="stylesheet" href="css路径" HTML和CSS分离,便于维护
优先级style="CSS语句"最高
5.css选择器
标签 class id 使用方法相同,表现形式有点区别
标签是直接标签名
class是.xxx
id是#XXX 区分清楚即可