首页 > 代码库 > 前端HTML基础与css
前端HTML基础与css
一. HTML简介:(使用http协议)
1. 静态网页:
HTML制作完成,网页的内容如果没有人去重新更新或制作的话,内容是永远一成不变的。
2. 动态网页:
在不同的时间看到的网页内容是不同的,用户看到的网页的内容其实是服务器端的程序运行出来的结果。
如:论坛。以后重点,开发动态网页。语言:JSP(Java Server Page)
二. 文本标记
h1~h6: 标题
hr: 水平线
font: 设置字体
strong: 加粗
br: 换行
p: 分段
sup/sub: 上标/下标
pre: 原样输出
ol li: 有序列表(三种编号方式:数字,字母,罗马)
ul li: 无序列表
dl dt dd: 项目列表(dl 容器, dd 标题, dd 描述)
span: 行内标签,将部分文字在逻辑上分成不同部分
div: 块标签,一个块占用一行,换行的功能
三. 超链接标记
1. 作用: 点击网页上的文字,可以跳转到其它的网页上去。
2. 语法:
<a href=http://www.mamicode.com/”URL”>文字
常用的属性:
href: 要跳转的页面
target取值: 打开页面的方式(_self 在当前窗口打开, _blank 在新的窗口打开)
3. 锚标记: <a name="名字">
跳转到锚: <a href="http://www.mamicode.com/#名字">
四. img: 显示图片
1. 语法:
<img src="http://www.mamicode.com/指定图片的地址">
常用属性:
src: 地址
width: 宽度
height: 高
alt: 图片替代的文本
title: 鼠标移上去的时候显示的信息提示
五: 表格的结构:
1. 表格标签:
table 容器
tr 行
th 列标题
td 单元格
bgcolor 设置背景色
caption 表格的标题
2. 常用的表格属性:
width: 宽度 border : 边框宽度 align: 对齐 rowspan: 跨行 colspan: 跨列 cellspacing: 单元格之间的间距 cellspadding: 单元格边框与内容的间隔3. thead、tfoot和tbody元素
作用:在逻辑上将表格划分成几个不同的部分
thead:表格的头部
tbody: 表格的主体,无论有没有写这个标签,浏览器在解析表格的时候,都会自动加上tbody标签。
tfoot: 表格的脚部
六. 表单标签: <form>
<form> 作用: 提交数据给服务器
常用的属性: action 提交给服务器地址 method = get /post get: 提交的数据在地址栏上显示出现 post: 不显示type属性1. 文本框 <input type="text"/> 2. 密码框 <input type="password"/> 3. 单选框 <input type="radio" checked="checked"/> 4. 复选框 <input type="checkbox" checked="checked"/> 5. 下拉列表 <select> <option> 6. 隐藏表单域 <input type="hidden"/> 7. 文件域 <input type="file"/> 8. 多行文本域: <textarea></textarea> 9. 提交按钮 <input type="submit"/> 10. 重置按钮: <input type="reset"/> 11. 普通按钮: <input type="button"/> 12. 图片按钮: <input type="image" src=""/>
----------------------------------css----------------------------------
一. css的代码的位置
1. 行内样式:以标签的一个style属性的方式存在于HTML网页中,只对指定的标签起作用。
<h2 style="color: green">我是标题2</h2>
2. 内部样式:在网页中添加<style>标签,与HTML在同一个文件中。
1 <style type="text/css"> 2 h2 { 3 color: darkblue; 4 font-size: 20px; 5 } 6 </style>
3. 外部样式:
1). 引入方式一:
1 <link type="text/css" href="css/01.css" rel="stylesheet"/> 2 href: 要导入的CSS的文件名 3 type: 指定样式的类型,取值:text/css 4 rel: 样式与HTML文件之间的关系:stylesheet 样式表 5 CSS: Cascading Style Sheet 层叠样式表
2) . 引入方式二(了解,使用少): 存在一些浏览器兼容的问题,而且文件的数量有一定的限制。
1 @import url(‘css/01.css‘);
3) 样式起作用的原则:
就近的原则,哪个样式离它近,哪个就起作用。同名的样式会覆盖,不同的样式还是会起作用。
二. 选择器:
1. 选择器的作用:
对网页中的元素(标签)进行样式的设置之前,首先找到这些元素,选定对哪些元素进行样式的设置。2. 语法格式:
每一行一个样式的名和值选择器 {
样式名:样式值;
}
选择器的分类:
1. 基本选择器: 优先级(优先级: ID选择器 > 类选择器 > 标签选择器)
1) ID选择器 #id
2) 标签选择器 标签名
3) 类选择器 .类名
2. 复合选择器
由基本选择器组合而成
1) 层级选择器: 空格按层级的关系,选择父标签下所有的子孙标签
2) 并集选择器: ,选择器1+选择器2 两个选择器所有选中的元素,使用指定的样式。
3) 交集选择器(只能是ID或类): 标签#ID{}或 标签.类{}两个选择器共同的部分
4) 通用选择器: *对网页中所有的元素使用指定的样式,优先级最低。
5) 伪类选择器:一个网页的元素在不同操作状态下,呈现不同的样式。
● <a>链接</a>
a:link 没有访问的时候,正常的状态
a:active 正在点击的时候
a:hover 鼠标移动到上面的时候
a:visited 已经被点击过的链接
● <input>: 得到焦点:当一个元素得到了可以操作时状态,如:文本框有光标在闪
1 例:得到焦点,让文本框的背景色变成黄色 2 input:focus { 3 background-color: yellow; 4 }6) 属性选择器
a. 有某个属性
p[name]
b. 属性等于某个值
p[name="first"]
三. 样式:
1. 背景样式:background-color: 背景色 background-image: 图片 background-repeat: 平铺 1) x,y 2) x 3) y 4) no-repeat background-position:开始平铺的位置2. 文本样式:font-family:字体 font-size: 大小 font-style: 斜体 font-weight: 加粗
3. 文本样式:
line-height:行高 letter-spacing: 字符间隔 word-spacing: 单词间距 text-decoration: 下划线 text-indent: 缩进
4. 盒子模型:
盒子模型由哪些属性组成: 内容,边框,内间距,外间距,高,宽 border-style: 边框线型 border-color: 边框颜色 border-width: 边框宽度 margin: 外 padding: 内简写
演示:把线型,粗细,颜色声明在一个属性中
border: solid green 2px;四边 上下 左右 上 左右 下 上 右 下 左
前端HTML基础与css