|
1.HTML 概述：是超文本标记语言。也就是“比普通文本更加强大的全是由标签所组成的语言”。 语法： 1:html语言必须存放在html文档上(文件后缀名为html或htm) 2:html标签不区分大小写，但建议使用小写。 3:标签必须有开始，有结束。<html></html> <br/> 4:标签可以嵌套。 5:html中的所有效果必须由标签体现. 2.标签 概述：被<>包括起来的就是标签。 语法：<标签名 属性="值" 属性="值"> 标签体 </标签名> 3.常用标签： 1.文本标签： <h1> ~ <h6> <p> <br> <hr> <b> <i> <center> <font> 2.图片标签： 3.列表标签 3.1.无序列表 <ul> <li>独孤求败</li> <li>西门吹雪</li> <li>剑神无名</li> </ul> 3.2.有序列表 <ol> <li>独孤求败</li> <li>西门吹雪</li> <li>剑神无名</li> </ol> 4.链接标签 语法：内容 属性： href：链接地址. //假设没有地址，则可以写#. target: 打开方式。 _self：在当前页面打开。默认。 _blank：在新窗口打开。 5.块标签： <div>： 块级元素。独占一行。 <span>：行级元素。在行内，和别的元素挤在一样。 6.表格标签 标签： <table> ：表格 <tr> ：行 <td> ：单元格 <th> ：单元格(加粗并居中) 格式： <table> <tr> <td>单元格</td> </tr> </table> 注意： td有两个属性，可以实现合并单元格。 colspan：合并列 rowspan：合并行1.表单标签 1.1:作用 1.规定了用户可以操作的，用来给服务器传递数据的区域 2.其中可以包含input元素，比如文本字段、复选框、单选框、提交按钮等等。 3.表单和表单元素用于向服务器传输数据 1.2:格式 <form action="路径" method="post"> <input type="submit" value="提交"/> </form> 1.3:常用属性 action：规定当提交表单时向何处发送表单数据 method：规定用于发送表单数据的 HTTP 方法 分get和post ,默认是get enctype：规定在发送表单数据之前如何对其进行编码 1.4:注意事项 1.GET方式和POST方式的区别 GET:数据会显示到地址栏中.GET方式提交是有大小的限制.不同的浏览器支持的最大长度不一样 POST:数据不会显示到地址栏中.POST方式提交的是没有大小限制. 2.表单元素标签必须放在表单form中才有效 1.5:补充 1.5.1:表单元素标签必须放在表单form中才有效 1.5.2:所有的表单元素都有name属性,后台接收表单元素的值时,就是根据其name属性来接收的。 1.5.3:所有的表单元素都有value属性：提交到后台的值 1.5.4:单选按钮和复选按钮必须要有的属性：value属性； 1.5.5:单选和复选按钮默认被选中的属性：checked属性 2.表单项： 1.文本框: <input type="text" name="fname" value="asdf" size="20" /> 常用属性 name :表单元素的名称.必须有name属性，然后后台才可以接收数据. value :文本框的默认值.可以不写 size :文本框的长度.可以不写 maxlength:文本框输入的最大长度.可以不写 placeholder：文本框的提示信息，当文本框输入内容后自动消失 2.密码框: <input type="password" name="psd" value="123456"/>
常用属性
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :默认值.可以不写
size :长度.可以不写
maxlength:最大长度.可以不写
3.单选按钮: <input type="radio" name="sex" value="男" checked>男
常用属性
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :默认值
checked :单选按钮默认被选中.
注意事项
//如果想让一组单选按钮只能选中一个,则要求该组单选按钮必须拥有相同的name
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
4.复选框: <input type="checkbox" name="hobby" value="篮球" checked>篮球
常用属性
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :默认值
checked :复选框默认被选中
注意事项
如果想让多个复选框为一组,则要求该组单选按钮必须拥有相同的name
<input type="checkbox" name="hobby" value="篮球" checked>篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
5.隐藏域: <input type="hidden" name="capture" value="hidden"/>
6.文件上传: <input type="file" name="file" />
7.提交按钮: <input type="submit" value="提交表单"/>
8.普通按钮: <input type="button" name="button" value="我是普通按钮"/>
9.下拉列表select:
格式
<select name="from">
<option value="">---请选择---</option>
<option value="BEIJNG" >北京</option>
<option value="TIANJ" selected="selected">天津</option>
</select>
注意事项
1.<select>标签的name属性：规定下拉列表的名称，必须要有，与表单输入元素一样，后台接收值需要根据该属性来接收；
2.<option>标签的value属性：表单提交时向后台传入的值；
3.下拉列表默认被选中的属性：option标签的selected属性；
4.实际开发中,下拉列表的<option>都是从后台查询出来然后循环出来的
10.文本域textarea:
格式
<textarea name="province" rows="3" cols="20">
//内容。
</textarea>
注意事项
1.name属性必须要有,后台接收值根据该属性来接收；
2.开始标签和结束标签内的内容即为默认值3.CSS 概述： CSS是层叠样式表,是用来美化页面用的. 注意，以后，所有关于html中长相部分，统统使用css来描述. 引入： 3.1.行内样式： 直接在标签上，使用style属性，在style属性中书写样式 //<label style="size: 60px;">黑马程序员</label> 3.2.内部样式： 在页面内部的<head>标签中，书写<style>标签，在<style>标签中书写样式 3.3.外部样式： 在页面外部中创建css文件，然后通过<link>标签引入外部css文件 //<link href="css/a.css" rel="stylesheet" type="text/css"/> 3.4.注意事项: 三种方式的权重：外部=内部<行内，外部和内部之间，以先后顺序为准，后书写>前书写。 语法： 选择器{ 属性名1:属性值1; 属性名2:属性值2; ... } 4.CSS选择器(重要) 概述: 用来找html标签的. 分类： 基本选择器 4.1:元素(标签)选择器: 语法：标签名{} --> 以标签名作为依据 例如： //要求，所有的h1标签，背景颜色修改为绿色 h1{ background-color: green;} 4.2:ID选择器: 语法：#id属性值{} --> 以标签的ID属性为依据 例如： //要求，id属性为aaa的标签，背景颜色修改为红色 #aaa{ background-color: red; } 4.3:类选择器: 语法：.class属性值{} --> 以标签的class属性为依据 例如： //要求，所有class属性为aclass的标签，背景颜色修改为蓝色。 .aclass{ background-color: blue;} 注意： id选择器 > 类选择器 > 元素选择器 扩展选择器： 4.4:并列选择器: 语法：选择器1,选择器2{} --> 多个选择器同时使用， 例如： //要求，把id为aaa的标签，和class为aclass的标签，背景颜色都改为灰色 .aclass,#aaa{background-color: gray;} 4.5:后代选择器: 语法：选择器1 选择器2{} --> 选择器1下边的所有选择器2(选择器中间为“空格”) 例如： //要求：所有在div中的h2标签，背景颜色修改为红色 div h2{background-color: red;} 4.6:子元素选择器: 语法：选择器 > 选择器2 --> 选择器1下边的子辈选择器2（只要儿子不要孙子） 例如： //要求：所有在div中的子辈的h2标签，背景颜色修改为蓝色 div > h2 {background-color: blue;} 4.7:属性选择器: 语法：选择器1[属性名=属性值] --> 以标签的属性名和值为依据 例如： //要求：获取input标签，并且要求input标签必须有type属性，而且要求type属性的值必须为text：修改期背景颜色为红色 input[type='text']{background-color: red;} 5.CSS盒模型 内边距:padding 外边距:margin 注意：内外边距简写时，要遵从“上右下左”的顺序 边框:border 6.CSS浮动 6.1:释义 浮动指的是脱离当前文档流，可以理解为上升到另外一层 6.2:设置浮动:float left：向左浮动 right：向右浮动 6.3:清除浮动:clear 释义 清除浮动：指的是“前一个元素”浮动脱离文档流之后，当前元素不受上一个元素的影响 取值 left：清除左侧浮动，即前一个元素如果是左浮动，则不受影响 right：清除右侧浮动，即前一个元素如果是右浮动，则不受影响 both：清除左右两侧的浮动，不管前一个元素是左浮动还是右浮动，均不受影响
| 
收藏
淘帖
踩
