第一周预习-HTML+CSS入门

最新推荐文章于 2024-08-13 20:57:25 发布

Oliveira726

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量634

点赞数 19

文章标签： html css 前端

本文链接：https://blog.csdn.net/2302_80287128/article/details/136889154

版权

一、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、盒模式

Oliveira726

关注

19
点赞
踩
27

收藏

觉得还不错? 一键收藏
3
评论
第一周预习-HTML+CSS入门

1、CSS（层叠样式表）是一种用于描述文档展示样式的语言，它与HTML结构相分离，可以为HTML文档添加样式和布局效果。通过使用CSS，可以控制网页的字体、颜色、边距、背景等各种样式，还可以定义元素的位置和大小等布局效果。2、CSS的基本语法由选择器和声明组成。选择器用于选择要应用样式的HTML元素，声明则用于设置要应用的样式属性和值。
复制链接

扫一扫