Wed前端入门——HTML、CSS

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~255rgb(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是让计算机自己计算 */text-align: center;        /* 文本居中 */}</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/448818.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

大语言模型实战教程首发:基于深度学习的大规模自然语言处理模型LLM详解 -Shelly

大语言模型实战教程首发:基于深度学习的大规模自然语言处理模型LLM详解 -Shelly

我是Shelly&#xff0c;一个专注于输出AI工具和科技前沿内容的AI应用教练&#xff0c;体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具&#xff0c;拥抱AI时代的到来。 大模型的热度&#xff0c;实在是很高&#xff0c;诺奖也颁给了…
阅读更多...
读书笔记《有效需求分析》业务场景梳理

读书笔记《有效需求分析》业务场景梳理

1. 关键思考链 2. 执行流程 3. 执行细则 1&#xff09;最重要的是从业务流程到业务场景的梳理。 2&#xff09;主、变、支、管流程&#xff08;待解读&#xff09; 3&#xff09;排序业务场景&#xff08;待分析&#xff09; 4&#xff09;各分支判断是独立的且需要系统支持&a…
阅读更多...
Vite创建Vue3项目以及Vue3相关基础知识

Vite创建Vue3项目以及Vue3相关基础知识

1.创建Vue3项目 1.运行创建项目命令 # 使用 npm npm create vitelatest2、填写项目名称 3、选择前端框架 4、选择语法类型 5、按提示运行代码 不出意外的话&#xff0c;运行之后应该会出现 下边这个页面 6.延伸学习&#xff1a;对比webpack和vite&#xff08;这个是面试必考…
阅读更多...
JVM(HotSpot)：直接内存及其使用建议

JVM(HotSpot)：直接内存及其使用建议

文章目录 一、什么是直接内存&#xff1f;二、特点三、使用案例四、直接内存的管理 一、什么是直接内存&#xff1f; Direct Memory&#xff1a;系统内存 普通IO&#xff0c;运行原理图 磁盘到系统内存&#xff0c;系统内存到jvm内存。 NIO&#xff0c;运行原理图 划分了一块…
阅读更多...
Webpack 完整指南

Webpack 完整指南

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Webpack篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来webpack篇专栏内容:webpack介绍 目录 介绍 一、webpack 1.1、webpack是什么 1.2 webpack五个核心配置 1.…
阅读更多...
FreeRTOS——中断管理

FreeRTOS——中断管理

中断理论剖析 中断简介 中断是一种机制&#xff0c;用于处理高优先级的事件或故障。当一个中断事件发生时&#xff0c;单片机可以立即中断正在执行的程序&#xff0c;转而处理中断事件。这种机制可以提高系统的响应速度和实时性。 中断优先级分组设置 ARM Cortex-M使用了8位宽…
阅读更多...
它思科技CTO聂玮奇：消除“AI幻觉”，搭建高可靠对话云平台丨数据猿专访

它思科技CTO聂玮奇：消除“AI幻觉”，搭建高可靠对话云平台丨数据猿专访

大数据产业创新服务媒体 ——聚焦数据 改变商业 近年来&#xff0c;大模型技术在全球范围内引起了广泛关注和应用热潮。 提到人工智能&#xff0c;很多人会想到它强大的运算能力和广泛的应用场景。如今&#xff0c;语言模型的发展如火如荼&#xff0c;但其中的“幻觉”问题却带…
阅读更多...
川字结构布局/国字结构布局

川字结构布局/国字结构布局

1.串字结构布局 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style&g…
阅读更多...
S7-200 SMART 与 S7-1200 之间 TCP 通信— S7-200 SMART 作为服务器

S7-200 SMART 与 S7-1200 之间 TCP 通信— S7-200 SMART 作为服务器

TCP 协议通信 TCP 通信为面向连接的通信&#xff0c;需要双方都调用指令以建立连接及交换数据。S7-200 SMART 与 S7-1200 通过 TCP 通信&#xff0c;在 S7-1200 调用 T-block 指令 ( TCON, TDISCON, TSEND, TRCV ) &#xff0c;在 S7-200 SMART 调用 Open User Communication …
阅读更多...
网络爬虫-数美滑块验证码

网络爬虫-数美滑块验证码

仅供研究学习使用。 今天带来的是数美滑块验证码的逆向 目标站 --> 传送门 解决此类验证码 首先要解决滑动距离的判定 无论是使用selenium还是使用协议的方式来破解 都绕不开滑动距离的识别 滑动距离可以参考以前我博客上的方式&#xff0c;或者找一找开源的一些算法&am…
阅读更多...
Go基础知识：切片

Go基础知识：切片

数组 Go 数组的大小是固定的&#xff0c;其长度是其类型的一部分&#xff08;[4]int并且[5]int是不同的、不兼容的类型&#xff09; var a [10]intb : [2]string{"Penn", "Teller"} b : [...]string{"Penn", "Teller"}package maini…
阅读更多...
2.4 STM32启动过程

2.4 STM32启动过程

目录 一，启动Flow 1.1 初始化MSP 1.2 初始化PC 1.3 设置堆栈大小 1.4初始化中断向量表 1.5 调用初始化函数（可选） 1.6 调用__main 二，Reset_Handler函数 一，启动Flow 下面是stm32在内部FLASH启动的启动建议流程图，在stm32复位到执行我们程序的main函数的过程中，…
阅读更多...
深入理解Redis锁与Backoff重试机制在Go中的实现

深入理解Redis锁与Backoff重试机制在Go中的实现

文章目录 流程图Redis锁的深入实现Backoff重试策略的深入探讨结合Redis锁与Backoff策略的高级应用具体实现结论 在构建分布式系统时&#xff0c;确保数据的一致性和操作的原子性是至关重要的。Redis锁作为一种高效且广泛使用的分布式锁机制&#xff0c;能够帮助我们在多进程或分…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《计及多重不确定性和时间相关性的虚拟电厂参与碳-绿证协同交易优化调度》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《计及多重不确定性和时间相关性的虚拟电厂参与碳-绿证协同交易优化调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
Gin框架操作指南07：路由与中间件

Gin框架操作指南07：路由与中间件

官方文档地址&#xff08;中文&#xff09;&#xff1a;https://gin-gonic.com/zh-cn/docs/ 注&#xff1a;本教程采用工作区机制&#xff0c;所以一个项目下载了Gin框架&#xff0c;其余项目就无需重复下载&#xff0c;想了解的读者可阅读第一节&#xff1a;Gin操作指南&#…
阅读更多...
武汉正向科技|焦炉移动机车连锁控制系统的介绍

武汉正向科技|焦炉移动机车连锁控制系统的介绍

焦炉车辆连锁控制系统是采用格雷母线定位技术&#xff0c;无线数据传输技术以及计算机技术&#xff0c;实现推焦车、拦焦车、熄焦车、装煤车、导烟车的集中监控和系统管理&#xff0c;以及车间作业计划管理&#xff0c;作业实绩管理&#xff0c;作业联锁控制及安全控制等。 焦炉…
阅读更多...
超详细的finalshell安装数据库以及数据库的基本操作

超详细的finalshell安装数据库以及数据库的基本操作

一、下载 MySQL Enterprise Edition Downloads | Oraclehttps://www.oracle.com/mysql/technologies/mysql-enterprise-edition-downloads.html 这边有不同的版本&#xff0c;要看你的操作系统&#xff08;centos7 / centos8&#xff09;安装的是哪个版本 我把连接提取出来了&…
阅读更多...
JAVA中类和对象

JAVA中类和对象

一.类的创建&#xff1a; 比如我们创建狗类&#xff1a; public class Dog {public String name; //名字public int age; //年龄public double tall; //身高//狗的行为public void bark() {System.out.println("汪汪汪~~~");}public void wag() {System.out.printl…
阅读更多...
揭秘提升3DMAX效率的6款必备神级插件！

揭秘提升3DMAX效率的6款必备神级插件！

对于3DMax新手来说，掌握一些高效、实用的插件能够大大提升工作效率和创作质量。以下是6个不能错过的神级插件推荐： 第1个：3DMAX造山地形插件Mountain是一款专为3dMax设计的插件，旨在帮助用户轻松快速地创建逼真的山脉地形。以下是对该插件的详细介绍： 一、插件概述 Mou…
阅读更多...
手写模拟Spring的基本功能

手写模拟Spring的基本功能

文章目录 1. Spring的基本功能2. 容器启动 容器启动&#xff0c;即创建容器对象并赋予配置对象3. BeanDefinition扫描4. Bean的生命周期5. 单例Bean与多例Bean6. 依赖注入7. AOP8. Aware 回调9. 初始化10. BeanPostProcessor附录&#xff1a; 1. Spring的基本功能 2. 容器启动 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023