10.28-10.29总结（HTML结构&CSS）

来源：互联网发布：类似基督山伯爵知乎编辑：程序博客网时间：2024/05/29 12:27

一.html的结构

html>

<head>

</head>

<body>

内容

</body>

</html>

二.标签

1.标题（内容中的标题）

<h1>标题一</h1> 注：标题一只能用一次

2.段落

段落中可能会用到的标签

3.换行(单标签)

<br>

4.横线<单标签>

<hr>

加属性：

size：横线粗细，可直接设置数字

color：横线颜色

表达方式：a.red用英文单词

b.#ff0000用十六进制

c.rgb(255,0,0)

width:横线宽度，数字或者百分比

5.文本效果

<b> </b> 粗体文本

<em> </em> 着重文字

<i> </i> 斜体字

<small> </small> 小号字

<strong> </strong> 加重语气

<sub> </sub> 下标字

<sup> </snp> 上标字

<ins> </ins> 插入字

<del> </del> 删除字

6.空格效果

①<pre> </pre> 预格式化（可显示空格）

②  表示一个半角空格

③全角状态下的空格

7.超链接

<a href="../1.html"target="目标窗口">新页面<./a> （目标窗口：①_blank在新窗口打开②_parent在源窗口）

8.插入图片

<img src="路径"alt="描述" title="图片注释" width="宽" height="高"> （单标签）

9.列表

①无序列表

<ul type="circle"> type:"square方块/disc圆点/cicle空心圆"

<li>three<li>

</ul>

②有序列表

<ol type="1" start="起始数字"> type="a/A/1/I/i"

<li>three<li>

</ol>

③自定义列表

<dl>

</dl>

10.表格

①<table border="边界线cellspacing="单元格间距" cellpadding="填充">

<tr> 行

<td> </td> 单元格（标题单元格<th></th>）

</tr>

</table>

②<table>

<tr>

</tr>

<tr>

</tr>

③<table>

<tr>

</tr>

<tr>

</tr>

</table>

11.表单

单行文本框 <input typpe="text"/>

多行文本框<textarea></textarea>

密码框 <input type="password"/>

单选按钮<input type="radio" name=""> (name值相同表示单选)

复选框<input type="checkbox"/> (默认选中加checked)

下拉菜单

<option value="陕西"selected>陕西</option> （默认选中陕西）

</select>

下拉列表

<option value="陕西"selected>陕西</option> （默认选中陕西）

</select>

提交按钮<input type="submit"/>

重置按钮<input type="reset"/>

普通按钮<input type="button" value=""/>

按钮<button></button>

文件域<input type="file"/>

三．Css

1.样式定义

①类定义可多次使用以.开始后面用字母开头命名

调用：<any class="name"> </any>

②id定义用一次以及#开始 #name

调用：<any id="name"> </any>

③标签名定义 p{} （直接定义）

以上方法在head中定义或者外部css文件里定义

2.样式调用方式

A.页面内部调用

①行内 <any style="样式名：样式值;"></any>

②页面内 head中定义

<style>

.name{样式名：样式值;}

</style>

<any class="样式名"></any> （调用）

B.从外面调用

①链接式在head中链接

<linkrel="stylesheet" href="链接的外部css文件"/>

<anyclass="样式名"></any> （调用）

②导入式 <style>

@import url(two.css);

</style>

<any class="样式名"></any> （调用）

3.样式

①background-color:背景颜色

background:背景颜色/背景图像

background-image:背景图像

background:redurl(../img/img1.jpg) no-repeat right bottom;

background:背景色背景图像是否重复水平位置垂直位置；

是否重复：no-repeat不重复

repeat-x 水平重复

repeat-y 垂直重复

repeat 重复

水平位置：left左，center 中， right 右，精确像素

垂直位置：top 上，center 中， bottom 下，精确像素

background:red！important （手动优先）

②框

<divclass=”a”></div>

.a{width:800px; 宽

height:500px; 高

margin:0 auto; 居中

border:solid 1px red;边框线：实线 1像素颜色

③线型：solid实线 dashed 虚线 double 双线 dotted 点状线

④边距 margin

margin-left/margin-right/margin-top/margin-bottom

margin:a 四边边距都相同

margin:a b 上下为a，左右为b

margin:a b c 上为a左右为b 下为c

margin:a b c d 上a 右b 下c 左d

⑤填充 padding

padding-left/padding-right/padding-top/padding-bottom

padding:a 四边填充都相同

padding:a b 上下为a，左右为b

padding:a b c 上为a左右为b 下为c

padding:a b c d 上a 右b 下c 左d

⑥字体

font-size: 大小

font-family : 字体

font-weight:bold; 字体加粗

font-style:italic；字体倾斜 normal 正常

text-decoration:none/underline/overline 去下划线/加下划线/加上边线

⑦文本对齐方式

text-align:center; 居中对齐

text-align:left 左对齐

text-align:right 右对齐

text-align:justify 两端对齐

⑧超链接的4种状态（在head-style里定义）

a:link 超链接访问前状态

a:hover 鼠标悬停时的样式

a:active 鼠标点击时的样式

a:visited超链接访问后的样式

⑨浮动

float:left/righttop/bottom

⑩行间距： line-height:

首行缩进： text-indent:2em

阅读全文

0 0