html基础温习

来源：互联网发布：mysql分页是什么编辑：程序博客网时间：2024/06/02 06:10

1.水平渐变的是实现：{background-image:liner-gradient(left,red 100px,yellow 200px);}

2.列表是：<ul>

<li></li>

<li></li>

</ul>

3.表格是：<table>

<tbody>当表讴歌的内容非常多时，有时加载一部分出现一部分，如果加上tbody则，表格全部加载出来才会完全显现。

<tr>表格的一行

<th></th> 表格头部的单元格，表格表头。

<th></th>

</tr>

<td></td>列

</table>

4.为表格添加边框：

<title>为表格添加边框</title>

<style type="text/css">

table tr td,th{border:1px solid #000;}

</style>

5.为表格添加标题：<table><caption></caption></table>

6.<a>链接需要在新的页面打开<a href="目标网址" target="_blank">click here!</a>

7.<a href="mailto:yy@qq.com" cc=hhhh@qq.com bcc=hhh@qq.com subject=鹤壁经贸大学 body=hgy >

邮箱地址（多个用分好隔开） 抄送地址 蜜饯抄送地址 标题 邮件地址

8.<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

9.<formmethod="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /></form>

10.<input type="text/password"name="名称"value="文本"/>

type="text"输入框为文本输入；当type="password" 输入为密码输入框

name为文本框命名，已被后台使用

value:为文本框设置默认值。一般起到提示作用。

提示内容为灰色，填写其他内容为黑色

（1）利用占位符<input type="email" id="email" placeholder="Enter email">

（2）<input type="text" style="color:gray" value="(测试)" onpropertychange（改变属性）="this.style.color='black'" oninput="this.style.color='black'">

11.文本域<textarea row="" coles="">

<input type="submit" value="确定" name="submit" />

<input type="reset" value="重置" name="reset" />

12单选框复选框

<input type="radio/checkbox" value="值" name="名称" checked="checked"（默认选中）/>

13下拉列表框

<body>

<form action="save.php" method="post" >

<label>爱好:</label>

<select>

<option value="看书">看书</option>

<option value="旅游">旅游</option>

<option value="运动" selected="selected" (默认选中为)>运动</option>

<option value="购物">购物</option>

</select>

</form>

14.下拉菜单进行多选<select mutiple="mutiple">

在页面选的时候按住ctrl再选

15. <input type="submit" value="提交" name="submitBtn" /> type=submit时，有提交属性

16.type="reset"重置

17.需要将一段话中某几个字统一为一个颜色可以用<span></span>上面用<style type="text/css">对span进行定义

18.单独将css写入一个文件<link href="style.css" rel="stylesheet" type="text/css" />

对于css有三种定义：内联，嵌入，外联

优先级 内联>嵌入>外联

嵌入大于外联前提是<link...>写在<style type="text/css">之前

19.类和ID选择器

相同：可用于任何

不同：(1) ID选择器在文档中只能使用使用一次

(2) 可以使用类选择器词列表方法为一个元素同时设置多个样式

.stress{    color:red;}.bigsize{    font-size:25px;}<p>到了<spanclass="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

而ID不可以使用

#stressid{    color:red;}#bigsizeid{    font-size:25px;}<p>到了<spanid="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

20.：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器：*{color：red;}

21.伪类选择符a:hover 例如：当鼠标滑过这几个字时会出现这几个字变红变化字号 a:hover{color:red;font-size:20px;}

分组选择符：h1,span{color:red;}

相当于h1{color:red;} span{color:red;}

22.p{color:red;}/*权值为1*/p span{color:green;}/*权值为1+1=2*/.warning{color:white;}/*权值为10*/p span.warning{color:purple;}/*权值为1+1+10=12*/#footer .note p{color:yellow;}/*权值为100+10+1=111*/

22层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

如下面代码:

p{color:red;}p{color:green;}<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

23有些特殊的情况需要为某些样式设置具有最高权值这时候我们可以使用!important来解决。

p{color:red!important;}p{color:green;}

最终显示红色

23文字排版：font-family:"Mirosoft" 字号 font-size 颜色color 设置粗体font-weight设置斜体：font-style:italic 下划线text-decration:underline;

淘宝中经常价格那有个删除线

.oldPrice{text-decoration:line-through;}

段落缩进p{text-indent:2em;}

行间距p{line-height:1.5em;}

中文间距letter-spacing:50px;

单词间距word-spacing:50px;

段落排版：对齐 text-aline:center

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

内联块状元素：dis-play:inline-block(元素特点和其他元素在一行上；元素的高度宽度行高以及底边距都可设置)
盒子模型：

Padding 内容与边框的间距

Margin  此div与外边内容的间距

Border  边框

总的高距离：内容+padding-top+padding-bottum+border

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

3.边框：1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

Margin可以分开写；如果上下一样左右一样可以magin :10px 20px;如果都一样可以margin:10px;

三种布局模型：流动模型（Flow）浮动模型（Float）层模型（layer）
流动模型

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

层模型

层模型有三种形式：

1、绝对定位(position: absolute)是相对于一个元素的绝对位置，如果没有则相对于浏览器

2、相对定位(position: relative)是相对一个元素上下左右距离

3、固定定位(position: fixed)

 绝对定位与相对定位一块用：父元素为相对；子元素为绝对

6.相对定位：

参照定位的元素必须加入position:relative;

#box1{ width:200px; height:200px;position:relative;}

定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{position:absolute; top:20px; left:30px; }

7.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

<style>.container{text-align:center;}/*margin:0;padding:0（消除文本与div边框之间的间隙）*/.container ul{ list-style:none; margin:0; padding:0; display:inline;}/*margin-right:8px（设置li文本之间的间隔）*/.container li{ margin-right:8px; display:inline;}</style>

 8.当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

0 0