首页 > 代码库 > html+css
html+css
html
HTML的代码都是由标签所组成的
基本格式：
<html>
<head>
存放在head里面的内容会先加载
存放属性的信息或者辅助性的信息
引入外部的文件（CSS JavaScript简称js）
</head>
<body>
存放就是真正显示给用户的信息
</body>
</html>
注意事项：1.缩进，增强代码的可读性
2.大多数的标签都是由开始和结束标签所组成。个别的标签只有单一的功能，或者没有要修饰的内容，可以在标签内结束。
3.标签上包含属性，通过改变属性的值，可以达到更好的显示的效果。
排版标签
HTML的注释 <!-- HTML的注释 -->
<p></p>（重点） 段落标签 特点：标签的开始和结尾位置产生一行空行。
属性：align -- 对齐方式
<br /> 换行标签
<hr /> 一条水平线
属性：color -- 颜色 值的写法：1）直接写英文单词 2）RGB三原色（red green blue） #aa34cc
width -- 宽度 值的写法：1）执行编写像素值 200px 2）编写百分比 30%
<div></div>（重点） ：在网页上声明一块区域。
<span></span>（重点）：在网页上声明一块区域。
区别：div是块级元素，屁股后面跟换行 span标签的行内元素，默认一行
div的作用：CSS+DIV进行页面的布局
span的作用：给用户做友好的提示
=======================
块元素与行内元素
行内元素又叫内联元素：内联元素只能容纳文本或者其他的内联元素，常见的内联元素<span><a>
块元素：一般都从新行开，可以容纳文本。其他内联元素和其他块元素，即使不能满一行，块元素也要占满一行。常见的块元素<div><p>
一些css属性对行内元素不生效，比如margin left right height width 建议尽量使用块元素定位。
块元素与行内元素的转换】我们希望一个元素按照块元素显示:display:block 希望一个元素按照行内元素显示：display:inline
HTML的列表标签（重点）
列表标签：把数据封装成列表 <dl> <dt>上层项目</dt> <dd>下层项目</dd> <dd>下层项目</dd> 自动对齐的，默认缩进的 </dl> 有序列表（重点）： <ol> ol的属性： type :标号的类型 start :从哪开始 <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> 无序列表（重点）： <ul> ul的属性：type：标号的类型 <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>HTML 图片标签（重点）
图片标签：有一个单独的图片，需要把图片和HTML的文件关联到一起。 <img /> 引入一种图片 src：要链接图片的地址 width ：图片的显示宽度 height ：图片的显示高度 alt ：图片的说明文字HTML超链接标签（重点）
超链接标签作用 <a>文本内容</a> 一：链接资源： 必须要出现：href 注意1：如果访问的网络的资源，需要编写协议 注意2：如果访问本地的资源，如果浏览器可以解析的内容，默认直接打开，如果浏览器不能解析，默认弹出下载窗口。 注意3：如果浏览器不能解析的协议，默认查找操作系统上的应用程序。默认打开应用程序。（扩展） 二：定位资源：返回顶部 如果定义资源的话，需要另外的一个属性 name="值" 专业锚点 假如说有一个网页非常长，那就可以使用name的属性在网页上定位一些锚点，通过操作返回到指定的锚点 找个位置定义锚点 属性：target 代表窗口打开的位置 值:_blank 弹出一个新的窗口HTML表格标签（重点）
<table> ：封装表格的范围 border：表格的格线 width:表格的宽度 height：代表的表格高度 cellpadding:文字距离表格线的长度 <tr> ：代表表格的行 align：单元格中文字的对齐方式 <td> ：代表单元格 <th> ：代表单元格 th和td的区别：th文本内容默认加粗和居中的。th表格的表头 td非常重要的属性：合并单元格。 行合并:rowspan=合并几个单元格值就是几 列合并：colspan=合并几个单元格值就是几 <caption>：表格标题HTML表单标签（重点）
表单标签：收集用户输入的数据。封装表单标签的范围 <form> form包含属性 action ：表单要提交的地址（后台去提交） method ：表单提交方式（面试题） 问题：常用的提交方式有哪些？ 答：提交方式有很多，常用有两种，get和post。表单默认的提交方式就是get。get和post的区别 * get方式进行提交时，参数列表就显示到地址栏上。 * post方式提交是，封装到请求体中。 * get方式提交时，对安全级别比较低 * post方式提交，安全级别比较高 * get方式提交时，对参数列表的数据大小有限制。 * post方式提交是，对大数据没有限制。 用户的输入项的内容：例如：普通的文本框 普通的密码 使用<input type="值的不同，显示不同的输入 text password" > ***** 注意：input标签上有两个属性 name（必须要指定） value （不一定要指定） name的名称 value的值 ***** 注意：name属性必须要指定的，value的属性不一定指定 type="text" 普通的文本框 type="password" 密码框 type="radio" 单选按钮 只能选择一个 添加一个属性：组的概念，指定相同的name属性 有默认值：checked="checked" type="checkbox" 多选按钮 组的概念：指定相同的name属性 有默认值：checked = "checked" type="file" 文件上传 name属性也是必须指定的 type="hidden" 隐藏组件 用户不需要看到的数据，就可以使用隐藏组件隐藏起来。 type="button" 按钮（和js语言和在一起使用） type="submit" 提交：表单收集用户的数据，点击就可以把表单提交到后台 ?sex=on 单选按钮的name的属性的值。 ?username=zhaosi&sex=on ?username=张三&password=123&sex=nan type="reset" 重置：恢复到最初的状态 选择下拉框 <select name="必须指定的，并且需要指定在select标签上"> <option value="http://www.mamicode.com/必须指定，指定在option标签上">北京</option>、 <option value="http://www.mamicode.com/必须指定，指定在option标签上">上海</option> </select> 默认值：selected="selected" 文本域：写入多行多列的内容 <textarea> 属性： rows 行 cols 列 </textarea> </form>HTML的其他标签
* 框架标签：对网页搭建一个框架 注意：框架标签不能使用在<body>标签的内部和下面
css
简介
CSS语言作用 ： 设置网页的显示效果（网页的样式）。 * 注意：可以避免HTML代码的重复性。
* 注意：CSS -- 专注网页样式的设置 和HTML -- 专注通过标签来封装数据 分工合作。耦合性降低了。
<font>数据</font> 编写CSS的代码，设置font标签的样式
CSS与HTML结合（重点）
CSS为什么要和HTML结合呢：HTML语言用来通过标签来封装数据的。CSS的代码作用在标签上。怎么结合呢?(4种方式) * 第一种：每一个HTML的标签，提供了一个属性style，给CSS代码来使用的。style="CSS的代码" 只能设置当前的标签。 * 如果让第二个div也有相同的样式？ 第二种：HTML的文件，提供一个<style>的标签。在标签的中间来编写CSS的代码。<style>标签需要放在<head>标签的中间 在<style>标签上提供一个属性 type="text/css"固定的 * 注意：优先级：优先级高显示样式 * 第三种：编写一个外部的CSS的文件，CSS文件里面编写CSS代码，只需要把CSS的文件引入到HTML的文件中。（美工常用的） * 引入该文件 使用的CSS代码里面命令 @import url("CSS文件的地址"); @import需要编写在<style>标签的中间 * 编写一个管理我所有的CSS文件的文件。引入总的CSS的文件就ok了。 * 第四种：引入外部的文件。HTML的文件提供了一个标签 <link> （经常经常使用） * rel="stylesheet" ：代表当前的文件和被引入的文件之间的关系 * type="text/css" ： * href="http://www.mamicode.com/CSS文件的地址" ：CSS文件的地址CSS的优先级（重点）和注意事项
* 优先级：决定样式。一般的情况下：从上到下，由外到内，优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。* 注意事项： * CSS代码的写法： 选择器名称{CSS的属性:属性值;属性:属性值;.... } * 属性与属性之间使用分号隔开 * 属性与属性值之间使用冒号 * 如果一个属性有多个值，值与值之间使用空格隔开。 div{xx:yy1 yy2}CSS的选择器（重点）
CSS的选择器的作用：告诉CSS的代码需要作用在哪个标签上。CSS的基本选择器： * 标签名选择器 div{CSS的代码} span{} table{} 具有相同的标签名的标签，都能有相同的样式 * 类选择器 HTML的标签提供了一个属性 -- class="hehe" 目的：想让div的类的名称是hehe的标签具有样式 写法： .hehe{CSS的代码} 只要是class的名称叫hehe的标签，都具有相同的样式 注意：让不同的标签具有相同的样式。 * id选择器 HTML的标签提供了一个属性 -- id="haha" 写法： #haha{CSS的代码} 注意：ID一般代表的是唯一值。并且ID的属性给JS语言来使用。需要自己去注意：如果给标签使用ID的属性，需要自己去给指定一个唯一值。
1.一个元素只能有一个id选择器，可以有多个类选择器。当一个元素被多个类选择器修饰时，他们用空格隔开。 * 优先级：决定样式。一般的情况下：从上到下，由外到内，优先级是从低到高的。哪个CSS的样式离HTML标签近的优先级越高。 * 优先级：特殊的情况下：标签名选择器 < 类选择器 < ID选择器 < style属性html+css