html+css

来源：互联网发布：洛亚诺克噩梦知乎编辑：程序博客网时间：2024/06/15 05:15

src是img的地址 href是超链接要跳转的地址

1 .html和.htm 结尾的静态网页根标签<html></html>

字体标签:<font>写字</font>
属性: color 颜色(英文单词或使用16进制数:#FFFFFF,#FFF) size 大小 (1-7) face属性:字体

标题标签: h标签<h1>...<h6> 越小

都能够嵌套:

段落标签 :<p></p>

字体加粗: <b></b>

字体斜体: <i></i>

内容居中: <center></center>

下划线: u标签

HTML5:<!DOCTYPE html>

原生标签: <pre>

图片标签: <img>
属性: src:图片的上来源, width:图片的宽度, height:高度, alt: 图片找不到显示的内容

图片引入路径问题:
相对路径:直接写文件名或前面加./
如果放在上两级问题: 加../../
下一级目录: 加下一级文件夹名/文件名

有序列表
标签: <ol> <li>
属性type : 1 数字类型 a:英文字符 i:罗马字符

无序列表
<ul> <li>文字</li> <ul>
ul:属性type : disc 实心点, circle:空心圆 , square:方块
start: 从哪里开始的, 可以写100,就从100开始;

超链接标签: <a></a>
属性: href: 跳转的路径 ../案例1项目/demo1
target: 打开的方式 _self:在自身页面打开(默认) _blank:新打开一个窗口
_parent:在有框架情况能使用,

表格标签:
表格中 cellspacing表格行之间的间隔
<table>
<tr> 带表的行
<tb>列</tb>
</tr>
</table>

table: width 表格宽 Height: 高 Border:边框 Align:表格的水平位置: left right center

td属性: ...................... colspan=列,rowspan=行, 合并单元格

&nbsp空格 bgcolor="aliceblue"背景颜色

表单标签:
background背景图片

<form>
action属性:提交的路径,默认提交到当前页面
mothod属性:请求方式,get和post,默认get get限制大小和post没有限制

表单元素: <input type="">
type属性: text文本框常用属性: name:表单元素的名称后台接受用,value:文本框默认值 size文本框长度
maxlength:输入的最大长度 readonly:只读

password:密码属性和type一样的
radio:单选按钮 checkbox:复选框的默认值为checked button:普通按钮
image:图片按钮 submit: 提交按钮 reset:重置按钮 file : 文件上传 hidden: 隐藏字段

下拉列表 <select> <option>北京 option标签的selected默认
1.下拉列表内容全部显示出来:<select multiple="multiple" >;

文本域: <textarea> 属性 cols 行 rows列默认值在中间写值

注意:name是写在同一种特性当中, value 是自己单独特性;

html新特性: <input> 属性有 data color email

1.HTML的框架标签: <frameset> 和 body冲突;
属性: rows cols 可以设置每一块所占的比例,用,隔开,最后用*代表所有

必须加这个标签才会显示;
使用<frame>标签,代表切分的每个部分
属性 src引入其他页面

2.显示到指定块
在from 属性 name,然后在超链接标签中的属性target=name, name是你想要显示的地方

3.特殊符号: < < > >

4.表面上是一个页面,但是本质上是由多个页面组成;

<table>
<tr>
<td>
<from>
<table>

建立一个表格,首先用div把表格大小位置都固定好,而表格标签要做的只是撑起div,还有固定表单间距

css部分

水平居中 text-align: center 垂直居中vertical-align: Middle

HTML的块标签:
<div> :默认单独占一行
<span> :默认在同一行

css:就是层叠样式表,用来美化页面的;

语法: 选择器{属性1:属性值1;属性2:属性值2;..}

三种引入方式:
①行内引入, <h1 style="color:red;font-size:200px;">

②页面内样式: 在<head>标签中使用<style>标签设置css
<head>
<style>
h1{color:red;font-size:200px; }
</style>

③外部引入:单独定义一个.css文件,在HTML中引入该css文件.
<link href="../demo.css" rel="stylesheet" type="text/css" />
rel:告诉你就是个样式表

css 选择器: 优先级

3. 元素选择器:
标签名称{属性:属性值}

1. ID选择器:
需要在标签内写入id,然后在<style>中#id的名称{属性:属性值}

2.类选择器:
.需要在标签内写入class属性,然后在<style>中 .class属性的名称{属性:属性值}

css的浮动:
float属性属性值 left right

清除浮动:写一个<div class="clear">, .clear{clear:both} 清除两侧浮动;

css的其他选择器
属性选择器;
指定的input改变格式; input[type="text"]{}

后代选择器
#d1 div{} ,查找的是所有的div;

子元素选择器
#d1 > span{},查找div第一层级的span元素;,前提是span元素外面有包裹的其他元素;

css背景 background;

css的盒子模型上右下左是div里面的内容
padding内边距
margin外边距
border边框

css定位;
position属性设置定位;
绝对定位 absolute
相对定位 relative

使用另外两个属性: left,top

每一个标签中都有display属性: inline显示到一行;

css的伪类
id 标签:link 原始的
:visited 点了
:hover 鼠标放在上面
:active 鼠标松开

<div>
<div>

阅读全文

0 0