css 禁止换行_HTML+CSS笔记

最新推荐文章于 2023-11-17 08:30:00 发布

weixin_39737111

最新推荐文章于 2023-11-17 08:30:00 发布

阅读量633

点赞数 1

一、认识HTML

<!DOCTYPE html>

<!DOCTYPE html> 文档声明，声明网页按照h5标准

<html lang="en"> 向浏览器声明该网页是英文网站，zh设置为中文网站

<head> </head> 定义文档的信息此标签定义内容不会向用户展示

<meta charset="UTF-8"> 声明为UTF-8字符编码

常见的<meta>标签用法：

页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字

<meta name="keywords" content="your tags" />

页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

<meta name="description" content="150 words" />

定义网页作者

<meta name="author" content="author name" />

搜索引擎索引方式

<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->

页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页

<meta http-equiv="refresh" content="0;url=" />

禁止从本地缓存中访问页面内容：访问者将无法脱机浏览

<meta http-equiv="Pragma" content="no-cache" />

<title>Title</title> 定义了文档的标题

<body> </body>定义向用户展示内容

二、常用单位

1.px

代表像素 1px代表一个像素

2.%

百分比是相对其父元素的百分比

3.em

相对于当前元素字体大小

三、常用标签

<h1> </h1>

一级标题，将文字以较大的形式输出（还有h2—h6标签，字体逐渐变小）

<p> </p>

表示一个段落，独占一行，会自动换行

<b> </b>

字体加粗

<em> </em>

斜体（强调语气）

<strong> </strong>

粗体（强调内容）

<small> </small>

small便签的内容会比他的父元素中的文字要小一些

q标签（表示一个短的引用即行内引用，q标签引用的内容，浏览器默认会加上引号）

列：<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

blockquote标签（表示一个长引用即块级引用）

sup标签（表示上标）

sub标签（表示下标）

del标签（定义文档中已被删除的文本。）

ins标签（带有已删除部分和新插入部分的文本）

一般del和ins配合使用

hr标签（自结束标签，生成一条水平线）

a标签

href属性加URL 表链接地址

target属性可选值为blank和self（blank以新的窗口打开，self默认本窗口打开，#为占位符）

mailto属性后面加邮箱地址，subject属性后可加默认编写的内容

	        <p>
		联系我们
		<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
		</p>

<a href="#" target="blank">我是一个超链接</a>

<abbr>标签

用于缩略词鼠标移入给出提示

例：

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<!-- 鼠标移入WHO给出World Health Organization显示 -->

img图像标签（自结束标签）

定义图像：<img src="url" />

替换文本属性（Alt）：<img src="boat.gif" alt="Big Boat">

设置图像背景：

调整图片大小：<img src="/i/eg_mouse.jpg" width="50px" height="50px">

table 元素（表格元素）

border设属性置边框

定义表格

<caption> 定义表格标题。

<th> 定义表格的表头。

<tr> 定义表格的行。

<td> 定义表格单元。

<thead> 定义表格的页眉。

<tbody> 定义表格的主体。

<tfoot> 定义表格的页脚。

<col> 定义用于表格列的属性。

                      <table border="1">
			<tr>
			<th>Heading</th>
			<th>Another Heading</th>
			</tr>
			<tr>
			<td>row 1, cell 1</td>
			<td>row 1, cell 2</td>
			</tr>
			<tr>
			<td>row 2, cell 1</td>
			<td>row 2, cell 2</td>
			</tr>
			</table>

无序列表<ul> </ul>

是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

注：列表均可通过CSS list-style:none 清楚格式

HTML布局

header 定义文档或节的页眉

nav 定义导航链接的容器

section 定义文档中的节

article 定义独立的自包含文章

aside 定义内容之外的内容（比如侧栏）

footer 定义文档或节的页脚

details 定义额外的细节

summary 定义 details 元素的标题

二、CSS

居中

<h1 align="center">This is a heading</h1> 拥有关于对齐方式的附加信息

text-align 属性规定了元素中文本的水平对齐方式(使用较多)

<h1 style="text-align:center">This is a heading</h1>

背景颜色

background-color 属性为元素定义了背景颜色

<p style="background-color:green">This is a paragraph.</p>

字体、颜色和尺寸

font-family（可写多个值）、color、font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

选择器

id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值{}

类选择器

作用：根据元素的class属性值选中一组元素

语法：.class属性值

通配选择器

作用：选中页面中的所有元素

语法: *

交集选择器

作用：选中同时复合多个条件的元素

语法：选择器1选择器2选择器3选择器n{}

注意点：

交集选择器中如果有元素选择器，必须使用元素选择器开头

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1,选择器2,选择器3,选择器n{}

#b1,.p1,h1,span,div.red{}

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

后代元素选择器：

作用：选中指定元素内的指定后代元素

语法：祖先后代

属性选择器

选中具有title属性

p[title]{ }

为title属性值为hello的设置背景颜色

p[title^="hello"]{ }

已hello开头的属性

p[title^="hello"]{ }

已hello结尾的属性

p[title$="hello"]{ }

包含hello

p[title*="hello"]{ }

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式没有优先级

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先权

a元素的伪类

link 用来表示没访问过的链接（正常的链接）

 a:link{color: red; }

visited 用来表示访问过的链接

由于隐私的原因，所以visited这个伪类只能修改链接的颜色

 a:visited{
            color: orange; 
            /* font-size: 50px;   */
        }

hover 用来表示鼠标移入的状态

  a:hover{
             color: aqua;
             font-size: 50px;
         }

active 用来表示鼠标点击

  a:active{
             color: yellowgreen;
             
         }

边框（border)

三个样式：

边框的宽度 border-width

边框的颜色 border-color

边框的样式 border-style

【border-width】边框的宽度

border-width: 10px;

默认值，一般都是 3个像素

border-width可以用来指定四个方向的边框的宽度值的情况

四个值：上右下左

三个值：上左右下

两个值：上下左右

一个值：上下左右

除了border-width还有一组 border-xxx-width

xxx可以是 top right bottom left

用来单独指定某一个边的宽度

【border-color】 边框的颜色

border-color用来指定边框的颜色，同样可以分别指定四个边的边框

规则和border-width一样

【border-style】

border-style 指定边框的样式

solid 表示实线

dotted 点状虚线

dashed 虚线

double 双线

border-style的默认值是none 表示没有边框

内边距（padding）

- 内容区和边框之间的距离是内边距

- 一共有四个方向的内边距：

padding-top

padding-right

padding-bottom

padding-left

外边距（margin）

- 外边距不会影响盒子可见框的大小

- 但是外边距会影响盒子的位置

- 一共有四个方向的外边距：

margin-top

- 上外边距，设置一个正值，元素会向下移动

margin-right

- 默认情况下设置margin-right不会产生任何效果

margin-bottom

- 下外边距，设置一个正值，其下边的元素会向下移动

margin-left

- 左外边距，设置一个正值，元素会向右移动

- margin也可以设置负值，如果是负值则元素会向相反的方向移动

注：清除样式

*{
				margin: 0;
				padding: 0;
			}

overflow滚动条

默认值：visible

hidden：删除溢出修建

auto：根据需求增加滚动条

float浮动

使用 float 属性来设置于元素的浮动脱离文档流

可选值：

none 默认值，元素不浮动

left 元素向左浮动

right 元素向右浮动

解决高度塌陷

在选择器最后面添加一个空白的元素

转换为一个块元素

去除两侧浮动

选择器:after{
    content: " ";
displa:block;
clear:both;
}

定位（position）

相对定位：

当元素的position属性值设置为relative时则开启了元素的相对定位

相对定位的特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

2.相对定位是参照于元素在文档流中的位置进行定位的

3.相对定位会提升元素的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质块还是块，行内还是行内

- 偏移量（offset）

- 当元素开启了定位以后，可以通过偏移量来设置元素的位置

top

- 定位元素和定位位置上边的距离

bottom

- 定位元素和定位位置下边的距离

- 定位元素垂直方向的位置由top和bottom两个属性来控制

通常情况下我们只会使用其中一

- top值越大，定位元素越向下移动

- bottom值越大，定位元素越向上移动

left

- 定位元素和定位位置的左侧距离

right

- 定位元素和定位位置的右侧距离

- 定位元素水平方向的位置由left和right两个属性控制

通常情况下只会使用一个

- left越大元素越靠右

- right越大元素越靠左

绝对定位

- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位

- 绝对定位的特点：

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2.开启绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4.绝对定位会使元素提升一个层级

5.绝对定位元素是相对于其包含块进行定位的

包含块( containing block )

- 正常情况下：

包含块就是离当前元素最近的祖先块元素

<div><span><em>hello</em></span></div>

- 绝对定位的包含块:

包含块就是离它最近的开启了定位的祖先元素，

如果所有的祖先元素都没有开启定位则根元素就是它的包含块

表单元素 form元素（相当于用户填写账号密码）

文本域

<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>

密码域

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

复选框

<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>

单选框

<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>

下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>