HTML/CSS学习笔记
关注
分享
扫一扫
个人学习笔记
周白卿
生活不止眼前的代码，还有诗和以后的代码
展开
-
复合选择器
1.交集选择器（标签指定式选择器）作用：选中同时符合多个条件的一个元素语法：选择器1选择器2选择器3选择器ｎ｛｝例子：ｐ．ｂｏｘ．ｒｅｄ｛｝ ｐ＃ｂｏｘ｛｝特点：选择器之间不能有空格。如果选择器之间有元素选择器，必须使用元素选择器开头２．并集选择器（选择器分组）作用：同时选择多个选择器对应的多个元素语法：选择器1，选择器2，选择器3，选择器ｎ｛｝例子：ｐ，ｈ１，ｓｐａｎ｛｝ ＃ｂｏｘ，．ｐ１，ｓｐａｎ｛｝特点：任何形式的选择器都可以作为并集选择器的一部分，如果某些选择器定原创 2021-11-05 11:10:29 · 262 阅读 · 0 评论 -
常用选择器
要想将CSS样式用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。1.元素选择器作用：根据标签名来选中指定的一类元素语法：标签名｛｝例子：ｐ｛｝ ｈ1｛｝ ｄｉｖ｛｝特点：用元素选择器定义的样式对页面中该类型的所有标签都生效，能快速为页面中同类型的标签统一样式，但不能设计差异化样式2.id选择器作用：根据元素的id属性值选中一个元素语法：＃id属性值｛｝例子：＃ｂｏｘ｛｝ ＃ｒｅｄ｛｝特点：大多数HTML元素..原创 2021-11-05 10:36:30 · 698 阅读 · 0 评论 -
CSS简介
网页分成三个部分：结构（HTML）、表现（CSS）、行为（JavaScript）CSS的简单介绍CSS又叫层叠样式表，网页实际上是一个多层的立体结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层（例如一块多层蛋糕，从上往下看）。使用HTML标记属性对网页进行修饰的方式存在很大的局限和不足，而使用CSS可以使网页更加美观、大方，并且升级轻松维护方便，实现结构与表现的分离。CSS的样式规则使用CSS的具体格式如下：选择器{属性1：属性值；属...原创 2021-10-26 00:08:42 · 2771 阅读 · 0 评论 -
HTML5的页面元素及属性
页面交互元素1.details元素和summary元素details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details元素定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。其基本用法如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UT原创 2021-10-24 17:01:19 · 1382 阅读 · 0 评论 -
音视频播放
音频播放audio标签用来向页面中引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放。需要使用controls属性为音频文件提供控制。在HTML5中，audio标签用于定义播放音频文件的标准，它支持三种格式，分别为Ogg，MP3，wav。其基本格式如下：<audio src="音频文件路径" controls ></ audio>audio元素基本属性 属性 值 描述 src url 引入音频文件的路径.原创 2021-10-24 15:22:49 · 562 阅读 · 0 评论 -
内联框架
内联框架用于向当前页面中引入一个其他页面 内联框架里的网页不会被搜索引擎所检索，一般情况下很少使用内联框架。其基本语法为：<iframe src="页面url" frameborder="0"></iframe><iframe>标签的基本属性：src：指定要引入的网页的路径 width：设置引入网页的宽度 height：设置引入网页的高度 frameborder：frame表示内联框架，frameborder表示内联框架的边框，其属性值为0..原创 2021-10-21 23:51:20 · 673 阅读 · 0 评论 -
图片的格式
1.jpeg（jpg）格式支持的颜色比较丰富，可以用来保存超过256种颜色的图像。 不支持透明效果，不支持动图。 jpg是一种有损压缩的图像格式，每次修改图片都会造成一些图像数据的丢失。 一般用来显示照片，例如横幅广告，商品照片，较大的插图等。2.gif格式支持的颜色较少，只能处理256种颜色。 支持简单透明（全透明或全部透明），支持动图。 gif是一种无损的图像格式，每次修改图片后，图片质量几乎没什么损失。 一般用于Logo，小图标及其他色彩相对单一的图像。3.png格式png原创 2021-10-21 23:23:27 · 1682 阅读 · 0 评论 -
图片标签
图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签 img元素属于替换元素（基于块元素和行内元素之间，具有两种元素的特点）<img/>标签的基本语法格式为：<img src="图像url" />该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必备属性。<img />标记的属性 属性 属性值 描述 src URL 图像的路径 alt 文本...原创 2021-10-18 17:10:16 · 1461 阅读 · 0 评论 -
超链接的其他用法
1.返回顶部（空链接）可以直接将超链接的href属性设置为“#”，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置。在开发中如果没有确定具体的跳转地址时，可以将“#”作为超链接的路径的占位符使用。<a href="#">回到顶部</a>2.直达底部（锚点链接）id属性（唯一不重复）：每个标签都可以添加一个id属性 id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 id属性区分大小写，且一般为字母通过使用id属性跳转到目标位原创 2021-09-06 21:33:04 · 477 阅读 · 0 评论 -
相对路径
当我们需要跳转到一个服务器内部的网页是，一般我们都会使用相对路径。相对路径都会使用./或../开头 ./为默认值，可以写也可以不写，如果不写则默认为./（./表示当前文件所在的目录） ../表示当前文件所在目录的上一级目录（上上级目录可用../../表示）<a href="../shangji.html/xiaji.html">超链接</a>...原创 2021-09-06 21:05:41 · 66 阅读 · 0 评论 -
超链接简介
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置 使用a标签来定义超链接 超链接也是一个行内元素，在a标签中可以嵌套除它自身外任何的元素超链接的基本语法格式为：<a href="跳转目标" target="目标窗口的弹开方式">文本或图像</a>超链接的属性 ：href：指定跳转的目标路径值可以是一个外部网站的地址 也可以是一个内部网页的地址target：指定来链接页面的打开方式值可以为_self，表示在原窗口打开 值也可以..原创 2021-09-02 23:00:22 · 1342 阅读 · 0 评论 -
列表元素
HTML中一共有三种列表：无序列表 有序列表 定义列表1.无序列表使用ul标签来创建无序列表，使用li标签表示列表项<ul> <li>结构</li> <li>表现</li> <li>行为</li></ul>2.有序列表使用ol标签来创建无序列表，使用li标签表示列表项<ol> <li>结构</li&...原创 2021-09-01 21:32:15 · 419 阅读 · 0 评论 -
块元素和行内元素
块元素（block element）：在页面中独占一行的元素称为块元素，网页中一般通过块元素来对页面进行布局。例如：hn（标题标签）、p标签、hgroup标签（用于标题分组）、blockquote标签（表示长引用）、q标签（表示短引用）行内元素（inline element）：在页面中不会独占一行的元素称为行内元素，行内元素主要用来包裹文字。例如：em标签（表示语音语调的加重）、strong标签（表示强调，重要内容）一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素 块元素中基本上什么原创 2021-09-01 20:41:28 · 169 阅读 · 0 评论 -
语义化标签
在网页中HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的时标签的语义而不是它的样式。标题标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">> <title>Document</title></head><body> <h1>一级标题</h1>.原创 2021-09-01 19:54:22 · 801 阅读 · 0 评论 -
字符的实体
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格。在HTML中有些时候，我们不能直接书写一些特殊符号。比如，多个空格、字母两侧的大于号和小于号。如果我们需要在网页中书写这些特殊的符号，则需要使用HTML中的实体（转义字符）。原创 2021-07-14 14:10:47 · 911 阅读 · 0 评论 -
HTML5文档头部相关标记
1.设置页面标题标记<title><title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能包含一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。基本语法为：<title>网页标题名称</title>...原创 2021-07-14 13:51:49 · 3428 阅读 · 2 评论 -
HTML5文档基本格式
<!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body></html>1.<!doctype html><!doctype html>标记位于文档的最前面.原创 2021-05-21 12:34:29 · 2514 阅读 · 0 评论 -
HTML简介
HTML：HTML（Hypertext Markup Language）超文本标记语言。 它负责网页三要素之中的结构。 HTML使用标签的形式来标识网页中的不同组成部分。 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。PS： 文本是指用纯文本编译器所写的东西。例如：在notepad（记事本）里所写的内容就是 文本。文本只能是文字，数字，字母等字符串数据。图片，格式等都不是文本。例如：在word里写的内容不是文本，是副文本 。 标记是来标识网页中的.原创 2021-05-19 23:21:11 · 143 阅读 · 0 评论