html&css学习总结

最新推荐文章于 2024-10-04 18:47:42 发布

m0_57093661

最新推荐文章于 2024-10-04 18:47:42 发布

阅读量153

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_57093661/article/details/125699432

版权

HTML是超文本标记语言（HyperText Markup Language）的缩写。是一种用于创建网页的标准标记语言。

这里我们使用的软件是VS Code,创建html文件进行编写。

简单结构模板

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

运行生成网页如下图所示

HTML标签

由尖括号和关键词构成，通常成对出现，例如<head>为开始标签，<head/>为结束标签，中间为内容。

HTML元素

跟标签相似，例如代码段中<p>这是一个段落。<p/>

标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。

<!DOCTYPE html>: 声明文档类型。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

在软件中使用Ctrl + /可快捷进行注释

HTML标题

HTML中提供了六级标题<h1>~<h6>，一级标题最大最醒目

文本格式

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

<p><del>This line of text is meant to be treated as deleted text.</del></p>

<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

<p><u>This line of text will render as underlined</u></p>

<p><small>This line of text is meant to be treated as fine print.</small></p>

<p><strong>This line rendered as bold text.</strong></p>

<p><em>This line rendered as italicized text.</em></p>

运行结果如下

HTML超链接

1、文本链接：

2、图像链接：

</a>

插入图片

在页面插入一张图片如下：

说明：

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径

相对路径查找

每次都是从".html"文件所在文件夹中开始查找

1)同级

图片与".html"文件在同一个文件夹中

格式：src="××.jpg/png/gif"

含义：在.html文件所在的文件夹中查找名称叫做××.jpg/png的图片

2)下级

下级就是"存储图片的文件夹"和".html文件"在同一个文件夹中

格式: src="文件夹1/××.jpg/png"

含义：在文件夹1中找到名为××.jpg/png的图片

3)上级

上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中

格式: src="../××.jpg/png"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹中找到名

称叫做××.jpg/png的图片

其中../代表找到当前文件夹的上一级文件夹

由于绝对路径可移植性差，尽量不使用

表格

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。其中<th>标签表示表头，<td>中定义了表格边框属性。

列表

有序列表

第一个列表项
第二个列表项
第三个列表项

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

<ol>
<li>Tomato</li>
<li>Milk</li>
</ol>

Tomato
Milk

无序列表

列表项
列表项
列表项

无序列表使用 <ul> 标签

<ul>
<li>Tomato</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Tomato
Milk

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

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

<dl>
<dt>Tomato</dt>
<dd>- tasty well</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Tomato

- tasty well

Milk

- white cold drink

表单

<form> 元素

所有 HTML 表单都以一个<form>元素开始：

</form>

这个元素正式定义了一个表单。就像<div>元素或<p>元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

action 属性定义了在提交表单时，应该把所收集的数据送给谁 (/哪个模块)(URL) 去处理。.
method 属性定义了发送数据的 HTTP 方法 (它可以是“get”或“post”).

<label>, <input> 和 <textarea> 元素

包含三个文本字段，每个字段都有一个标签。该名称的输入字段将是一个基本的单行文本字段，电子邮件的输入字段将是一个只接受电子邮件地址的单行文本字段，而消息的输入字段将是一个基本的多行文本字段。

定义默认值的方式。要定义<input>的默认值，你必须使用value 属性，如下所示：

<button> 元素

我们的表格已经快准备好了，我们只需要再添加一个按钮，让用户在填写完表单后发送他们的数据。这是通过使用 <button> 元素完成的。在 </form>这个结束标签上方添加以下内容：

<button type="submit">Send your message</button></div>

CSS

首先创建一个.css文件

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

h1 {color:blue;font-size:12px;}

h1为选择器名称，color和font-size为属性，冒号后是属性值。

有三种方式使用CSS样式：外部样式表、内部样式表、内联样式。

外部样式表

是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

内部样式表

将样式放在 HTML 文件中，这称为内部样式表。在<head>元素中引入了<style>标签，写入样式。

内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

css文本设置

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;

font-size 设置文字的大小，如：font-size:12px;

font-family 设置文字的字体，如：font-family:'微软雅黑';

font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜 normal（标准） italic（斜体字体样式） oblique（倾斜字体样式）

font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 normal（标准 400） bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';

line-height 设置文字的行高，如：line-height:24px;

text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 none（默认值）underline（文本下划线）overline（文本上划线）line-through（文本删除线）

text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 left（排列在左侧，默认值）right（排列在右边） center（排列在中间）justify（实现两端对齐文本效果）

颜色和尺寸

<h3 style="background-color:Tomato;">Tomato</h3>

<h3 style="background-color:Orange;">Orange</h3>

<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>

<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>

<h3 style="background-color:SlateBlue;">SlateBlue</h3>

<h3 style="background-color:Violet;">Violet</h3>

<h3 style="background-color:LightGray;">LightGray</h3>

<hr>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur,

尺寸的属性有height 和 width，其中常见的尺寸单位有：像数 px，百分比 %等。

对齐可以通过设置text-align属性为left, center, right即可

.example-1 {

width: 100%;

height: 200px;

background-color: powderblue;

text-align: center;

}

.example-2 {

height: 100px;

width: 500px;

background-color: rgb(73, 138, 60);

text-align: right;

}这一整段添加到mycss.css里面

mycss.css

<html>

<head>

</head>

<body>

这个元素高 200 pixels，占据全部宽度

</div>

这个元素宽200像素,高300像素

</div>

</body>

</html>

盒子模型

盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

3.2 设置边框

设置一边的边框，比如顶部边框，可以按如下设置：

border-top-color:red; /* 设置顶部边框颜色为红色 */

border-top-width:10px; /* 设置顶部边框粗细为10px */

border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线)

dashed(虚线) dotted(点线); */

border-top:10px solid red;

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px; /* 设置顶部内间距20px */

padding-left:30px; /* 设置左边内间距30px */

padding-right:40px; /* 设置右边内间距40px */

padding-bottom:50px; /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是上右下左

四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */

padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/

padding：20px; /* 设置四边内边距为20px */

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

盒子模型的尺寸

按照下面代码制作页面：

<!DOCTYPE html>

<head>

<title>盒子的真实尺寸</title>

.box01{width:50px;height:50px;background-color:gold;}

.box02{width:50px;height:50px;background-color:gold;border:50px

solid #000}

.box03{width:50px;height:50px;background-color:gold;border:50px

solid #000;padding: 50px;}

</style>

</head>

<body>

<br />

<br />

</body>

</html>

不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。

可运行下式代码测试

<style>

img {

width: 25%;

border-radius: 10px;

float: left;

margin: 10px;

}

.opacity-2 {

opacity: 0.2;

}

.opacity-5 {

opacity: 0.5;

}

.opacity-10 {

opacity: 1;

}

</style></head><body>

伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。一般a标签用的比较多。

.box1:hover{color:red}

.box2:before{content:'行首文字';}

.box3:after{content:'行尾文字';}

m0_57093661

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫