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(数据提交的方式,通常是 GETPOST)。
    <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)

    • 这是元素的实际内容,如文本、图像等。
    • 内容的尺寸由 widthheight 属性决定。
  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

我是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相关基础知识

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

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

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

Webpack 完整指南

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

FreeRTOS——中断管理

中断理论剖析 中断简介 中断是一种机制&#xff0c;用于处理高优先级的事件或故障。当一个中断事件发生时&#xff0c;单片机可以立即中断正在执行的程序&#xff0c;转而处理中断事件。这种机制可以提高系统的响应速度和实时性。 中断优先级分组设置 ARM Cortex-M使用了8位宽…

它思科技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 作为服务器

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 数组的大小是固定的&#xff0c;其长度是其类型的一部分&#xff08;[4]int并且[5]int是不同的、不兼容的类型&#xff09; var a [10]intb : [2]string{"Penn", "Teller"} b : [...]string{"Penn", "Teller"}package maini…

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重试策略的深入探讨结合Redis锁与Backoff策略的高级应用具体实现结论 在构建分布式系统时&#xff0c;确保数据的一致性和操作的原子性是至关重要的。Redis锁作为一种高效且广泛使用的分布式锁机制&#xff0c;能够帮助我们在多进程或分…

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

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

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安装数据库以及数据库的基本操作

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

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个不能错过的神级插件推荐: 第1个:3DMAX造山地形插件Mountain是一款专为3dMax设计的插件,旨在帮助用户轻松快速地创建逼真的山脉地形。以下是对该插件的详细介绍: 一、插件概述 Mou…

手写模拟Spring的基本功能

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