HTML与CSS

目录

1、HTML简介

2、CSS简介

2.1选择器

2.1.1标签选择器

2.1.2类选择器

2.1.3层级选择器(后代选择器)

2.1.4id选择器

2.1.5组选择器

2.1.6伪类选择器

2.2样式属性

2.2.1布局常用样式属性

2.2.2文本常用样式属性

1、HTML简介

超文本标记语言HTML是一种标记语言，用于描述网页的结构和内容。通过使用各种标签和元素，我们可以定义标题、段落、图像、链接和表格等网页元素。HTML的语法简单直观，容易上手。

标题标签：

<html>：定义 HTML 文档的根元素，包括 <head> 和 <body>。

<head>：定义文档头部，包含元数据和其他文档级设置，如标题、样式表和脚本等。

<body>：定义文档的主体部分，包含文档的内容。

<h1> - <h6>：定义标题，从大到小分别为一级标题到六级标题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>  <h1>欢迎来到我的网页</h1>  <p>这是一段介绍文本。</p>  
</body>  
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>  <h1>一级标题</h1>  <p>这是第一个一级标题下的段落。</p>  <h2>二级标题</h2>  <p>这是第一个二级标题下的段落。</p>  <h3>三级标题</h3>  <p>这是第一个三级标题下的段落。</p>  <h4>四级标题</h4>  <p>这是第一个四级标题下的段落。</p>  <h5>五级标题</h5>  <p>这是第一个五级标题下的段落。</p>  <h6>六级标题</h6>  <p>这是第一个六级标题下的段落。</p>  
</body>  
</html>

<p>：定义段落。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>  <p>这是一个段落。</p>  <p>这是另一个段落。</p>  
</body>  
</html>

<a>：定义超链接，可以跳转到其他页面或锚点位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>  <h1>我的第一个超链接</h1>  <p>这是一个超链接到 <a href="https://www.example.com">example.com</a> 的段落。</p>  
</body>  
</html>

<img>：定义图像标签，用于在页面中显示图片。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head> 
<body>  <h1>我的第一个图像</h1>  <img src="image.jpg" alt="描述图像的文本">  
</body>  
</html>

<ul> 和 <ol>：定义无序列表和有序列表。

<li>：定义列表项，必须在 <ul> 或 <ol> 标签内使用。

<ul>  <li>苹果</li>  <li>香蕉</li>  <li>橙子</li>  
</ul>
<ol>  <li>第一项</li>  <li>第二项</li>  <li>第三项</li>  
</ol>

<div>：定义文档中的一个区域或块，常用于布局。

<span>：定义文档中的一个区域或行内元素，常用于样式设置。

HTML 中常用的高级标签：

<table>：定义表格标签，用于显示数据。

<tr>：定义表格行。

<th> 和 <td>：定义表头单元格和普通单元格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1"><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>25</td></tr>
</html>

<form>：定义表单标签，可以用于输入和提交数据。

<input>：定义表单中的输入控件，如文本框、单选框和复选框等。

<label>：定义表单控件的标签。

<button>：定义按钮。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br>
​<label for="email">邮箱：</label><input type="email" id="email" name="email"><br>
​<label for="message">留言：</label><br><textarea id="message" name="message" rows="4" cols="50"></textarea><br>
​<input type="submit" value="提交"></form>
</body>  
</html>

<select> 和 <option>：定义下拉列表框和选项。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="/submit"><label for="fruits">选择一种水果：</label><select id="fruits" name="fruits"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option></select><input type="submit" value="提交"></form>
</body>  
</html>

<textarea>：定义文本输入框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="/submit"><label for="message">留言：</label><br><textarea id="message" name="message" rows="4" cols="50"></textarea><br><input type="submit" value="提交"></form>
</body> 
</html>

<iframe>：定义内嵌框架，可以嵌入其他网页或内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><iframe src="https://www.example.com" width="500" height="300"></iframe>
</body>
</html>
</html>

标签属性说明：

id：定义元素的唯一标识符。

class：定义元素的类名，用于样式设置。

style：定义元素的样式，如颜色、字体等。

src：定义元素的资源路径，如图像、视频等。

href：定义链接的目标地址。

target：定义链接跳转的目标窗口，如 _blank 表示在新窗口打开链接。

name：定义表单控件的名称。

value：定义表单控件的值。

type：定义表单控件的类型，如文本框、单选框和复选框等。

rows 和 cols：定义文本输入框的行数和列数。

2、CSS简介

层叠样式表CSS是一种样式表语言，用于在网页上为HTML元素应用样式和布局。通过使用CSS规则集和选择器，我们可以设置字体、颜色、边框、背景和布局等。CSS的目标是将样式与内容分离，以提高可维护性和重用性。

2.1选择器

2.1.1标签选择器

CSS标签选择器是指根据HTML标签来选择元素并进行样式设置。使用标签选择器时，只需要在CSS规则中指定标签名即可。

例如，下面的CSS规则将为所有的<p>标签（段落）设置字体颜色为红色：

p {  color: red;  
}

2.1.2类选择器

CSS类选择器是一种基于类属性的选择器，它允许您选择具有指定类属性的HTML元素并对其应用样式。

类选择器的语法是在类名前加上一个点（.），后面紧跟一个空格，然后是选择器名称。例如，下面的CSS规则将为所有具有类名“myClass”的元素设置字体颜色为红色：

.myClass {  color: red;  
}

2.1.3层级选择器(后代选择器)

CSS层级选择器（后代选择器）是指选择特定元素的后代元素。后代选择器可以通过空格分隔两个元素名来定义。

例如，下面的CSS规则将选择所有<div>元素内部的<p>元素，并将它们的字体颜色设置为红色：

div p {  color: red;  
}

2.1.4id选择器

CSS id选择器是一种特殊的选择器，它基于HTML元素的id属性来选择元素。id选择器具有最高的优先级，可以覆盖其他选择器的样式。

id选择器的语法是在id名称前加上井号（#），后面紧跟一个空格，然后是选择器名称。例如，下面的CSS规则将为id为“myId”的元素设置字体颜色为红色：

#myId {  color: red;  
}

2.1.5组选择器

CSS组选择器是一种将多个选择器组合在一起的选择器。使用逗号分隔多个选择器，可以将相同的样式应用于多个元素。

例如，下面的CSS规则将同时选择<p>和<h1>元素，并将它们的字体颜色设置为红色：

p, h1 {  color: red;  
}

2.1.6伪类选择器

CSS伪类选择器是一种特殊的选择器，它用于选择元素的特定状态或关系。伪类选择器以冒号（:）开头，后面紧跟一个标识符。

以下是一些常见的CSS伪类选择器：

:hover：选择鼠标悬停在上面的元素。

:active：选择被激活的元素（例如，被点击的按钮）。

:focus：选择获得焦点的元素（例如，输入框）。

:visited：选择用户已访问的链接。

:first-child：选择每个父元素的第一个子元素。

:last-child：选择每个父元素的最后一个子元素。

:nth-child(n)：选择每个父元素的第n个子元素。

:nth-last-child(n)：选择每个父元素的倒数第n个子元素。

:only-child：选择其父元素仅有的子元素。

:empty：选择没有子元素的元素。

:checked：选择被选中的复选框或单选按钮。

:disabled：选择禁用的元素。

:enabled：选择启用的元素。

:target：选择当前活动的锚点元素。

2.2样式属性

2.2.1布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;
  • height 设置元素(标签)的高度，如：height:200px;
  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
  • 以上也可以拆分成四个边的写法，分别设置四个边的：
  • border-top 设置顶边边框，如：border-top:10px solid red;
  • border-left 设置左边边框，如：border-left:10px solid blue;
  • border-right 设置右边边框，如：border-right:10px solid green;
  • border-bottom 设置底边边框，如：border-bottom:10px solid pink;
  • padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
  • margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
  • float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

2.2.2文本常用样式属性

  • color 设置文字的颜色，如：color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

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

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

相关文章

帆软报表如何灵活控制水印的显示

帆软报表如何灵活控制水印的显示

在帆软报表中如果要显示水印，如果要全部都要显示，只需要到决策系统--安装设置中打开水印开关。如果想要某个报表显示水印，可以在设计器的水印设置中为该报表设置水印。 但是如果碰到这种需求，比如某些人或者某些角色需要显示水印，其他人不显示。或者是预览报表需要显示水印…
阅读更多...
[附代码]稳态视觉诱发电位SSVEP之预训练模型提高性能

[附代码]稳态视觉诱发电位SSVEP之预训练模型提高性能

SSVEP 之深度学习 深度学习已经被广泛运用在脑电信号分析来提高脑机接口的性能，这是一个end-to-end的方法，简单来说，只要搭建好深度学习网络，做好特征工程，然后分类即可，对于一个刚刚接触脑机接口领域深度学习的学习者来说，可以先忽略中间的数学相关的东西，先建一个网…
阅读更多...
软件测试/测试开发丨Linux 数据处理三剑客学习笔记

软件测试/测试开发丨Linux 数据处理三剑客学习笔记

一、Linux 三剑客之 grep 1、 内容检索 获取行&#xff08;单行&#xff09; grep pattern file获取内容 grep -o pattern file获取上下文 grep -A -B -C pattern file 2、 文件检索 递归搜索 grep pattern -r dir/展示匹配文件名 grep -H 111 /tmp/1只展示匹配文件名 grep …
阅读更多...
HTML进阶

HTML进阶

列表、表格、表单 文章目录 列表、表格、表单01-列表无序列表有序列表定义列表 02-表格表格结构标签-了解合并单元格 03-表单input 标签input 标签占位文本单选框上传文件多选框下拉菜单文本域label 标签按钮 04-语义化无语义的布局标签有语义的布局标签 05-字符实体 01-列表 …
阅读更多...
影视后期：Pr 调色处理之风格调色

影视后期：Pr 调色处理之风格调色

写在前面 整理一些影视后期相关学习笔记博文为 Pr 调色处理中风格调色&#xff0c;涉及下面几个Demo 好莱坞电影电影感调色复古港风调色赛博朋克风格调色日系小清晰调色 理解不足小伙伴帮忙指正 简单地说就是害怕向前迈进或者是不想真正地努力。不愿意为了改变自我而牺牲目前所…
阅读更多...
软考网络工程师教程第五版(2018最新版)

软考网络工程师教程第五版(2018最新版)

软考网络工程师教程第五版(2018最新版) 内容简介 本书是全国计算机技术与软件专业技术资格（水平）考试指定用书。作者在前4版的基础上，根据网络工程师新版大纲的要求，针对考试的重点内容做了较大篇幅的修订，书中主要内容包括数据通信、广域通信网、局域网、城域网、因特网…
阅读更多...
Python 创建第一个项目

Python 创建第一个项目

打开pycharm编辑器 点击New Project创建一个新项目。 主要修改项目名和项目路径&#xff0c;其它保持默认&#xff0c;点击Create。 当编辑器创建好项目后&#xff0c;我们通过右键项目名&#xff0c;点击New&#xff0c;再点击Python File 创建一个Python文件。 写好文件名&a…
阅读更多...
Motionface VoiceFocus使用教程

Motionface VoiceFocus使用教程

Motionface VoiceFocus使用教程 1&#xff1a;系统要求 软件运行支持32位/64位window 10/11系统, 其他要求无。 2&#xff1a;下载安装 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;1234 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 下载VoiceFo…
阅读更多...
69.乐理基础-打拍子-大切分与变体

69.乐理基础-打拍子-大切分与变体

内容来源于&#xff1a;三分钟音乐社 前置内容&#xff1a;66.乐理基础-打拍子-小切分-CSDN博客 上一个内容&#xff1a;68.乐理基础-打拍子-大附点与变体-CSDN博客 大切分&#xff1a; 把每个小切分的每一个音符翻一倍就变成大切分了&#xff0c;小切分是两个十六分音符夹一…
阅读更多...
08 通信协议之UART

08 通信协议之UART

引言&#xff1a; 从本文开始&#xff0c; 本个专题之后的几篇文章都是讲解嵌入式开发中几种常见的通信协议的&#xff0c; 比如UART, I2C&#xff0c;SPI&#xff0c; CAN总线这些我就不讲了&#xff0c; 没用到过&#xff0c; 学是学不完的&#xff0c; 等用到的时候再去学习…
阅读更多...
什么情况下不应该使用 LockWindowUpdate ?

什么情况下不应该使用 LockWindowUpdate ?

在之前的文章中&#xff0c;我们将了解了 LockWindowUpdate 应该在什么场景下使用&#xff0c;也就是拖动的场景。 今天&#xff0c;我们来看看 LockWindowUpdate 被误用的一些场景。 人们看到 LockWindowUpdate 的“您锁定的窗口将无法重新绘制自身”行为&#xff0c;并将其…
阅读更多...
磁盘阵列(RAID)

磁盘阵列(RAID)

1.独立硬盘冗余阵列&#xff08;RAID, Redundant Array of Independent Disks&#xff09; 旧称廉价磁盘冗余阵列&#xff08;Redundant Array of Inexpensive Disks&#xff09;&#xff0c;简称磁盘阵列 用虚拟化存储技术把多个硬盘组合起来&#xff0c;成为一个或多个硬盘阵…
阅读更多...
Spark魔力：招聘网站数据深度分析系统

Spark魔力：招聘网站数据深度分析系统

Spark魔力&#xff1a;招聘网站数据深度分析系统 简介数据集技术栈功能特点创新点 简介 在本文中&#xff0c;我们将介绍一款基于Spark的招聘网站数据分析系统&#xff0c;该系统使用爬取的前程无忧招聘数据。通过结合Flask、Pandas、PySpark、以及MySQL等技术&#xff0c;实现…
阅读更多...
大数据机器学习GAN：生成对抗网络GAN全维度介绍与实战

大数据机器学习GAN：生成对抗网络GAN全维度介绍与实战

文章目录 大数据机器学习GAN&#xff1a;生成对抗网络GAN全维度介绍与实战一、引言1.1 生成对抗网络简介1.2 应用领域概览1.3 GAN的重要性 二、理论基础2.1 生成对抗网络的工作原理2.1.1 生成器生成过程 2.1.2 判别器判别过程 2.1.3 训练过程训练代码示例 2.1.4 平衡与收敛 2.2…
阅读更多...
回顾 2023，展望 2024

回顾 2023，展望 2024

by zhengkai.blog.csdn.net 项目与心得 今年最大的项目和心得&#xff0c;非GCP莫属&#xff0c;作为全球顶尖的云平台&#xff0c; GCP有他的优势&#xff0c;也有很多难用的地方。但是作为当时的一个strategic solution&#xff0c;我们的印度本地化项目必须使用GCP&#xf…
阅读更多...
uni-app js语法

uni-app js语法

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…
阅读更多...
Zookeeper实现分布式锁和注册中心

Zookeeper实现分布式锁和注册中心

目录 分布式锁 实现方式 分布式锁场景如何选择Redis和zookeeper 用InterProcessMutex实现分布式锁 zookeeper实现注册中心 分布式锁 实现方式 数据库唯一索引Redis的setnxZookeeper创建临时节点及监听机制Zookeeper创建临时有序节点 分布式锁场景如何选择Redis和zookeepe…
阅读更多...
App Inventor 2 接入短信服务，实现短信验证码功能

App Inventor 2 接入短信服务，实现短信验证码功能

发送短信验证码功能一般都是基于短信平台提供的sdk进行调用&#xff0c;这里是基于阿里云短信平台进行的开发&#xff0c;阿里云短信平台接入步骤请点此参考。 App Inventor 2拓展提供的函数如下&#xff1a; 主要提供2个函数&#xff0c;生成随机位数的数字随机码 和 发送短信…
阅读更多...
jsp介绍

jsp介绍

JSP 一种编写动态网页的语言&#xff0c;可以嵌入java代码和html代码&#xff0c;其底层本质上为servlet,html部分为输出流&#xff0c;编译为java文件 例如 源jsp文件 <% page contentType"text/html; charsetutf-8" language"java" pageEncoding&…
阅读更多...
【小白专用】winform启动界面+登录窗口 更新2024.1.1

【小白专用】winform启动界面+登录窗口 更新2024.1.1

需求场景&#xff1a;先展示启动界面&#xff0c;然后打开登录界面&#xff0c;如果登录成功就跳转到主界面 首先在程序的入口路径加载启动界面&#xff0c;使用ShowDialog显示界面&#xff0c; 然后在启动界面中添加定时器&#xff0c;来实现显示一段时间的效果&#xff0c;等…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023