Wed前端入门——HTML、CSS

时间：2024-10-20 18:16:55

Wed前端入门——HTML、CSS

一般的页面有HTML、CSS以及JavaScript组成

  • HTML定义了页面的结构和内容，包括文本、图像、链接等等
  • CSS用于定义页面的布局和样式
  • JS用于添加交互性和动态功能作用

一、HTML

基本格式：

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<!-- 文档语言为English -->
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML属性</title>
</head>
<body>
    
</body>
</html>

HTML（超文本标记语言）是一种标准标记语言，用于创建和设计网页。它通过使用各种标签（称为“元素”）来定义网页的结构和内容。以下是一些关于HTML的基本要点：

1. 结构

HTML文档通常包括以下几个部分：

  • 文档类型声明：指明文档的版本（如<!DOCTYPE html>）。
  • HTML元素：整个文档被包裹在<html>标签内。
  • 头部（Head）：包含文档的元数据，如标题、样式和脚本，位于<head>标签内。
  • 主体（Body）：包含网页的实际内容，位于<body>标签内。

2. 标签

HTML使用成对的标签来标识内容。例如：

  • <h1>到<h6>：用于标题。
  • <p>：用于段落。
  • <a>：用于链接。
  • <img>：用于插入图像。

3. 属性

标签可以有属性，以提供额外的信息。例如：

<a href="https://www.example.com">访问示例网站</a>

在这里，href是一个属性，定义了链接的目标。

4. 嵌套

HTML元素可以嵌套在其他元素内，从而形成复杂的网页结构。例如：

<div>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个段落。</p>
</div>

5. 语义化

现代HTML强调语义化，使用特定的元素来更准确地描述内容的含义，例如：

  • <header>：用于页面头部。
  • <footer>：用于页面底部。
  • <article>：用于独立的内容块。

6. 可访问性

良好的HTML结构有助于提高网页的可访问性，使得屏幕阅读器等辅助技术能够更好地理解网页内容。

HTML的表单和表格：

表单：

一个典型的 HTML 表单通常包含以下几个主要部分：

  1. <form> 标签：

    • 定义表单的开始和结束。
    • 包含属性，如 action（提交数据的目标 URL）和 method（数据提交的方式，通常是 GET 或 POST）。
    <form action="/submit" method="POST">
    <!-- 表单控件 -->
</form>

    action 属性为空，意味着表单会提交到当前页面。

  2. 表单控件：

    • 输入框 (<input>)：用于接收用户输入。可以有不同的类型，如文本框、密码框、复选框等。
    • 文本区域 (<textarea>)：用于输入多行文本。
    • 选择框 (<select>)：下拉列表，用户可以选择一个或多个选项。
    • 按钮 (<button> 或 <input type="submit">)：用于提交表单。
    • 单选(<radio>)或多选(<checkbox>)：用于单选和多选。
    <input type="text" name="username" placeholder="用户名"><br>
<input type="password" name="password" placeholder="密码"><br>
学历<select name = "degree">
    <option value="">--------请选择--------</option>
    <option value="1">大专</option>
    <option value="2">本科</option>
    <option value="3">硕士</option>
    <option value="4">博士</option>
	</select><br>
性别：<label><input type="radio" name = "gender" value = "1">男</label>
     <label><input type="radio" name = "gender" value = "2">女</label><br><br>
爱好：<label><input type="checkbox" name = "hobby" value = "java">java</label>
     <label><input type="checkbox" name = "hobby" value = "game">game</label>
     <label><input type="checkbox" name = "hobby" value = "sing">sing</label><br><br>
图像：<input type="file" name = "image"><br><br>
生日：<input type="date" name = "birthday"><br><br>
时间：<input type="time" name = "time"><br><br>
日期时间：<input type="datetime-local" name = "datetime"><br><br>
邮箱：<input type="email" name = "email"><br><br>
年龄：<input type="number" name = "age"><br><br>
描述：<textarea name="description" cols = "30" rows = "10"></textarea><br><br>
隐藏：<input type="hidden" name = "id" value = "1"> <br>
	<input type="submit" value="提交">

在这里插入图片描述

  1. 标签 (<label>)：

    • 为表单控件提供描述，提升可用性和可访问性。
    <label for="username">用户名:</label> 		//for后面是绑定元素的id
<input type="text" id="username" name="username">
// 也可以直接包裹
<label>用户名：<input type="text" name="username" placeholder="用户名"></label>

此时点击label元素可直接跳转到所绑定的组件中

表单的基本示例
<form action="/submit" method="POST">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    
    <input type="submit" value="登录">
</form>
表单的功能
  • 数据验证：HTML5 提供了一些内置的验证功能，例如 required 属性，可以确保用户填写必填项。
  • 用户体验：使用多个控件和输入类型，可以改善用户输入的体验，例如使用日期选择器。
  • 提交方式：GET 方法将表单数据附加到 URL，适合于非敏感数据；POST 方法将数据发送到服务器，适合于敏感信息。

表格：

HTML 表格用于以行和列的形式组织和显示数据。表格在展示各种信息时非常有效，例如财务数据、时间表、统计数据等。

表格的基本结构

一个基本的 HTML 表格使用 <table> 标签，包含以下主要组件：

  1. <table>：定义表格的开始和结束。
  2. <tr>（表格行）：用于定义表格中的一行。
  3. <th>（表头单元格）：用于定义表格的表头，通常为粗体并居中。
  4. <td>（表格单元格）：用于定义表格中的普通单元格。

示例代码

以下是一个简单的表格示例：

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
            <th>科学</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>85</td>
            <td>90</td>
            <td>88</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>78</td>
            <td>82</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

组件解析
  • <table>：开始和结束表格的标签。
  • <caption>：可选的，为表格提供标题。
  • <thead>：定义表格的表头部分。
  • <tbody>：定义表格的主体部分，这里包含实际的数据行。
  • <tr>：定义表格的行。
  • <th>：定义表头单元格，通常用于列标题。
  • <td>：定义普通单元格，存放实际数据。
表格的属性
  • border：用于设置表格边框的宽度（如 border="1"）。
  • cellpadding：设置单元格内边距。
  • cellspacing：设置单元格之间的间距。
CSS 样式

可以使用 CSS 来美化表格，例如设置边框、颜色、字体等：

table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
}

th, td {
    border: 1px solid #ddd; /* 设置边框 */
    padding: 8px; /* 设置内边距 */
    text-align: left; /* 左对齐 */
}

th {
    background-color: #f2f2f2; /* 表头背景色 */
}
总结
  • HTML 表格通过 <table>、<tr>、<th> 和 <td> 标签组织和显示数据。
  • 表格在展示数据时非常有效，适用于许多场景。
  • 可以使用 CSS 来增强表格的外观和可读性。

二、CSS

1.CSS引入方式：

  • 行内样式：写在标签的style属性中（不推荐）
<h1 style = "color: red">
    中国新闻网
</h1>
  • 内嵌样式：写在style标签中（可以写在页面的任何位置，但通常约定写在head标签中）
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
  • 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

CSS文件：

h1 {
    color: red;
}

html文件：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <link rel = "stylesheet" href = "css/news.css">
</head>

2.颜色表示形式：

表示方式 表示含义 取值
关键字 预定义的颜色名 red、green、blue…
rgb表示法 红绿蓝三原色，每项取值范围：0~255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)…
十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、#cccccc，简写：#000、#ccc

3.使用CSS操作特定组件时：

  • 可以通过行内样式直接操作
  • 使用外联样式和内嵌样式

​ 通过三种选择器操作（元素选择器、类选择器和 ID 选择器）

<style>
        /* 元素选择器 */
        span {
            color: #968d92;
        }

        /* 类选择器 可以共用一个类 */
        .cla {
            color: #968d92;
        }

        /* id选择器 id是唯一的 不能共用 */
        #ii {
            color: #968d92;
            font-size: 20px;
        }

        /* 三种选择器的优先级：id选择器 > 类选择器 > 元素选择器 */

    </style>

4.盒子模型：

盒子模型的组成部分

每个元素的盒子模型由以下四个部分组成，从内到外依次为：

  1. 内容（Content）：

    • 这是元素的实际内容，如文本、图像等。
    • 内容的尺寸由 width 和 height 属性决定。

  2. 内边距（Padding）：

    • 内边距是元素内容与边框之间的空间，用于增加内容的可读性。
    • 内边距的大小可以通过 padding 属性设置。内边距可以为每个方向单独设置（上、右、下、左）或统一设置。
    padding: 10px; /* 所有方向统一设置为 10px */
padding: 5px 10px; /* 上下 5px，左右 10px */

  3. 边框（Border）：

    • 边框围绕着内边距和内容，定义了元素的边界。
    • 可以通过 border 属性设置边框的样式、宽度和颜色。
    border: 2px solid black; /* 2px 宽的黑色实线边框 */

  4. 外边距（Margin）：

    • 外边距是元素与其他元素之间的空间，用于控制元素之间的距离。
    • 外边距的大小可以通过 margin 属性设置。外边距也可以为每个方向单独设置或统一设置。
    margin: 20px; /* 所有方向统一设置为 20px */

在这里插入图片描述

在这里插入图片描述

示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            box-sizing: border-box; /*指定width height为盒子的高宽*/
            background-color: rgb(86, 201, 162);

            padding: 20px;  /* 内边距： 上 右 下 左 ，若一样的话则写一个即可*/
            border: 10px solid red; /* 边框： 宽度 线条类型 颜色 */
            margin: 30px;   /* 外边距： 上 右 下 左 ，若一样的话则写一个即可*/
        }
    </style>
</head>
<body>
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A
    </div>
</body>
</html>

在这里插入图片描述

若要将div中的内容居中则

<style>
        div {
            width: 65%; /* 宽度为主屏幕的65% */
            /* box-sizing: border-box; */
            margin: 0 auto; /* 两个值时会将这两个值依次对应 上 右 下 左 其中auto

相关文章