一、HTML入门
1、HTML的结构
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
网页主题内容
</body>
</html>
-
<!DOCTYPE html>声明:定义文档类型,告诉浏览器使用HTML5来解析文档。
-
<html></html>标签:定义HTML文档的根元素,包含整个HTML文档的内容。
-
<head></head>标签:定义文档的头部,用于包含文档的元数据,如标题、样式表和脚本等。
-
<title></title>标签:定义文档的标题,在浏览器的标题栏或标签页上显示。
-
<body></body>标签:定义文档的主体部分,包含可见的内容,如文本、图片、链接等。
2、HTML常用标签
- <h1>~<h6>:定义标题的级别,从大到小。字体大小也随之减小。
-
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
<p>
:定义段落,用于分隔组织文本。<br />:
定义换行标签。<hr>:
定义水平线标签<textarea>:
定义文本域标签。-
<textarea cols="50" rows="10"> 在这里输入内容...... </textarea> <br /> <input type="submit" value="确定" /> <input type="reset" name="重置" />
<a href="相对路径"></a>
:定义超链接,可以用来跳转到其他文档或位置。若想跳转至空连接,则相对路径用#代替。<img src="图片相对路径" alt="替换文本">
:定义图像,用于在网页上显示图片。图片无法显示时用“替换文本”显示。<div>
:定义文档中的一个区块,可以用来组织和布局网页的内容。没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。<span>
:定义文档中的一个行内元素,用于为文本或内容的部分添加样式。<ul>
:定义无序列表,以项目符号的形式显示列表项。<ol>
:定义有序列表,以数字的形式显示列表项。<li>
:定义列表项,在<ul>
或<ol>
中使用。-
<ol> <li>咖啡</li> <li>茶 <ul> <li>龙井</li> <li>普洱</li> </ul> </li> <li>牛奶</li> </ol>
<table>
:定义表格,用于展示结构化的数据。<tr>
:定义表格中的行。<td>
:定义表格中的单元格。-
<table> <tr> <th>月份</th> <th>储蓄</th> </tr> <tr> <td>一月</td> <td>¥3400</td> </tr> </table>
<form>
:定义表单,用于向服务器提交数据。<input>
:定义表单中的输入字段,如文本框、复选框、单选框等。-
<form action="/action_page.php"> <label for="fname">名字:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="提交"> </form>
<button>
:定义按钮,用于触发某些操作或提交表单。<style>
:定义内部样式表,用于为HTML文档添加样式。
二、CSS入门
1、CSS简介
1、CSS(层叠样式表)是一种用于描述文档展示样式的语言,它与HTML结构相分离,可以为HTML文档添加样式和布局效果。通过使用CSS,可以控制网页的字体、颜色、边距、背景等各种样式,还可以定义元素的位置和大小等布局效果。
2、CSS的基本语法由选择器和声明组成。选择器用于选择要应用样式的HTML元素,声明则用于设置要应用的样式属性和值。
2、CSS引入方式
- 外部样式表:将CSS代码保存在一个独立的CSS文件中,并通过
<link>
标签将其链接到HTML文档中。这是最常见和推荐的方式,可以使得CSS与HTML分离,提高代码的可维护性和重用性。
-
<head> <link rel="stylesheet" href="styles.css"> </head>
- 内部样式表:将CSS代码直接插入到HTML文档的
<style>
标签中,放置在<head>
标签内或单独的<style>
标签中。这种方式适合于只在当前HTML文档中使用的样式。
-
<head> <style> h1 { color: blue; font-size: 24px; } </style> </head>
- 内联样式:将CSS代码直接插入到HTML元素的
style
属性中。这种方式适合于只对单个元素应用样式的情况。
-
<h1 style="color: blue; font-size: 24px;">Hello World</h1>
3、CSS选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类:
- 简单选择器(根据名称、id、类来选取元素)
- 组合选择器(根据它们之间的特定关系来选取元素)
- 伪类选择器(根据特定状态选取元素)
- 伪元素选择器(选取元素的一部分并设置其样式)
- 属性选择器(根据属性或属性值来选取元素)
4、CSS简单样式
1、字体样式
font-family: Arial, sans-serif; /* 设置字体 */
font-size: 16px; /* 设置字体大小 */
font-weight: bold; /* 设置字体粗细 */
font-style: italic; /* 设置字体样式为斜体 */
2、文本样式
color: #333; /* 设置文本颜色 */
text-align: center; /* 设置文本居中对齐 */
text-decoration: underline; /* 添加下划线 */
line-height: 1.5; /* 设置行高 */
3、背景样式
background-color: #f5f5f5; /* 设置背景颜色 */
background-image: url('background.jpg'); /* 设置背景图片 */
background-size: cover; /* 设置背景图片大小为覆盖整个元素 */
background-repeat: no-repeat; /* 禁止背景图片重复显示 */
4、盒模式