当前位置： 首页 > news >正文

前端

news 2025/2/6 1:02:24

前端页面

Web页面

PC端程序页面

移动端APP页面

...

 HTML页面

HTML超文本标记页面

超文本：文本，声音，图片，视频，表格，链接

标记：由许多标签组成

HTML页面运行到浏览器上面

vscode便捷插件使用

vscode运行

自动刷新页面

<!DOCTYPE html>//指定当前html版本5
<html lang="en">//指定当前页面内容为英文<head><meta charset="UTF-8">//浏览器解码规则<meta http-equiv="X-UA-Compatible" content="IE=edge">//IE浏览器渲染效果按照IE浏览器最高版本展示<meta name="viewport" content="width=device-width, initial-scale=1.0">//移动端适配<title>hello</title>
</head><body>hello world
</body></html>

html：html文件根标签

head：编写页面相关的属性

title：页面标题

body：页面内容展示信息 

head和body是兄弟标签

head和title是父子标签

html

标签&标题&段落&换行&注释

注释

<!-- 这是注释 -->//ctrl+/

标题标签

<h1></h1>

<h2></h2>

...

<h6></h6>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6>
</body></html>

段落标签

<p></p>每行存在可察的间隙

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触Bonsai CSS的新手来说，建议按照官方文档中的指导逐步操作，确保所有依赖项都已正确安装，并验证工具链是否正常工作1。</p><p>使用CSS Hooks管理样式表,CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸（宽度/高度）及其定位方式（浮动、绝对定位等）。</p>
</body></html>

换行标签

<br>或者</br>实现段落换行，间隙小于段落间隙

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触Bonsai CSS的新手来说，建议按照官方文档中的指导逐步操作，确保所有依赖项都已正确安装，并验证工具链是否正常工作1。</p><p>使用CSS Hooks管理样式表,,<br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸（宽度/高度）及其定位方式（浮动、绝对定位等）。</p>
</body></html>

标签（加粗&倾斜&删除线&下划线）

加粗：strong ，b

倾斜：em ，i

删除线：del ，s

下划线：ins ，u

（前者起强调作用）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指导逐步操作</b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解CSS布局的核心在于<i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>

图像 （src&title&alt&height/weight&border）

img标签_src属性

<img src="./baidu.png">

img标签必须搭配src使用（指定图片路径）

绝对路径       

        图片路径

        网络上的图片资源

相对路径

        ./xxx.png（当前路径）

        ./img/xxx.png（某个文件夹下）

        ../xxx.png（上一层路径）

本地图片插入 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指<img src="./baidu.png"></b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解CSS布局的核心在于<i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>

 网络图片插入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指<img src="./baidu.png"></b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解<imgsrc="https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg"><i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>

 img标签_alt属性

<img src=" "  alt="图片加载失败..."   border="1px" width="100px" height="100px">

alt：替换文本，当文本不能正确显示时，会显示一个替换的文字

title：提示文本，鼠标放到图片上，就会有提示

width/height：控制宽度高度，高度和宽度一般该一个就行，另外一个会等比例缩放，否则图片会失衡

border：边框，参数是宽度的像素，但是一般使用css设定 

 

超链接标签

a_herf&a_target

<a href=" " target=" "></a>

href：必须具备，表示点击会跳转到哪个页面

target：打开方式，默认是_self. 如果是_blank 则用新的标签打开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/">跳转到百度</a><a href="20241225.html">跳转到html页面</a><a href="#">在当前页面</a><a href="https://www.baidu.com/"><img src="baidu.png" alt="" title="跳转到百度"></a>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指<img src="./baidu.png" title="这是一张百度图片"border="2px"></b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了<ahref="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=39042058_26_oem_dg&wd=%E7%99%BE%E5%BA%A6&oq=%25E6%25AD%25B9%25E6%25AF%2592&rsv_pq=c049e1db002d548f&rsv_t=d34dAccK%2BMxkf%2Bu6RAUck6LsIGwU3XAhvhXOF0K3mxNmrBu7Z6jtUQdO4SYLYJD%2BbePlATiDQ6EL&rqlang=cn&rsv_dl=tb&rsv_sug3=8&rsv_enter=1&rsv_sug1=6&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=1164&rsv_sug4=2928"target="https://www.baidu.com/">简化的方式去管理和增强</a><br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解<img src="https://www.keaitupian.cn/cjpic/fombd/2/253/1659552792/3869332496.jpg"alt="图片加载失败..."><i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>

表格（table&tr&td&th&thead）（&align&border&cellpadding&cellspacing&width/height）

table：表示整个表格

tr：表示表格的一行

td：表示一个单元格

th：表示表头单元格，会居中加粗

thead：表格的头部区域（注意和th区分，范围是比th要大的）

                （thead里面的内容居中+加粗显示）

align：十单元格相对于周围元素的对齐方式. align="center"（不是内部元素的对齐方式）

border：表示边框，1表示有边框（数字越大，边框越粗），" "表示没边框

cellpadding：内容距离边框的距离，默认1像素

cellspacing：单元格之间的距离，默认是2像素

width/height：设置尺寸

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></table>
</body></html>

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></table>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></table>
</body></html>

格式书写

<thead></thead>

<tbody></tbody> 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></tbody></table>
</body></html>
合并单元格（水平/竖直）

rowspan=" "（竖直方向上）

colspan=" "（水平方向）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="center"><td>张三</td><td rowspan="2">男</td><td>3</td></tr><tr align="center"><td>李四</td><!-- <td>男</td> --><td>4</td></tr><tr align="center"><td colspan="2">王五/女</td><!-- <td>女</td> --><td>5</td></tr></tbody></table>
</body></html>

列表

无序列表（ul&li）
type属性

disc：实心圆（浏览器默认展示方式）

square：实心方块

circle：空心圆

快捷键

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul>
</body></html>

 

有序列表（ol&li）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><h1>这是一个有序列表</h1><ol><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol>
</body></html>

type&start属性

type=" "

start=" "

<h1>这是一个有序列表</h1><ol type="A" start="3"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol>

自定义列表（dl&dt&dd）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><h1>这是一个有序列表</h1><ol type="A" start="3"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol><h1>这是一个自定义列表</h1><dl><dt>自定义列表显示内容<dd>自定义列表内容1</dd><dd>自定义列表内容2</dd><dd>自定义列表内容3</dd></dt></dl>
</body></html>

表单（input&form&label&select）

表单标签完成服务器的一次交互

表单域：包含表单元素的区域，重点是form标签  <form action=""></form>

表单控件：输入框，提交按钮，重点是input标签（必须搭配表单域完成）

可以通过对type进行对应的取值，来控制input类型

 input

文本框<input type="text">    单行输入

密码框<input type="password">

单选框<input type="radio" name="sex" checked="checked">（name相同时只能点中一个）（checked="checked"标记性别默认为该值）

复选框<input type="checkbox">

普通按钮<input type="button" value="我是个按钮" οnclick="alert('hello')">（onclick表示点击出现什么反应）

提交按钮<input type="submit">

清空按钮<input type="reset">

提交文件<input type="file">

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="">姓名：<input type="text"><br>密码：<input type="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">女<br>爱好：<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏<br><input type="button" value="我是个按钮" onclick="alert('hello')"><input type="submit"><input type="reset"><input type="file"></form>
</body></html>

提交 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="https://www.baidu.com/">课程：<input type="text" name="course"><input type="submit"></form>
</body></html>

label

 <label for="male">男</label>
  <input type="radio" name="sex" id="male">

<body><input type="radio" name="sex">男<input type="radio" name="sex">女//点击按钮才能选中
</body>

<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female">//点击文字也可选中
</body>

select（默认展示第一个）

<select name="" id="">
    <option value="" selected="selected"></option>
  </select>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female"><select name="" id=""><option value="">---请选择年份---</option><option value="">---1991---</option><option value="">---1992---</option><option value="">---1993---</option><option value="">---1994---</option></select>
</body></html>

<select name="" id=""><option value="">---请选择年份---</option><option value="" selected="selected">---1991---</option>//展示该选项<option value="">---1992---</option><option value="">---1993---</option><option value="">---1994---</option></select>

textarea（内容框）

<textarea name="" id="" cols="30" rows="10"></textarea>

无语义标签（div&span）

没有固定的用途

div 是独占一行的，是一个大盒子

span 不占一行，是一个小盒子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><div><span>吃饭</span><span>睡觉</span><span>玩游戏</span></div><div><div>吃饭</div><div>睡觉</div><div>玩游戏</div></div></div>
</body></html>

特殊字符

有些特殊的字符在html文件不能直接表示

空格：&nbsp

小于号：&lt

大于号：&gt

按位与：&amp

实践项目---简历书写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>某某某</h1><div><h2>基本信息</h2><img src="yy.jpg" alt="" width="200" height="200"><span><p>求职意向:Java开发</p></span><span><p>联系电话:xxx-xxx-xxx</p></span><span><p>个人邮箱:xxx-xxx@163.com</p></span><span><p><a href="https://gitee.com/">我的Gitee</a></p></span><span><p><a href="https://csdnnews.blog.csdn.net/article/details/130333678?spm=1000.2115.3001.5927">我的博客</a></p></span></div><div><h2>教育背景</h2><ol><li>小学</li><li>初中</li><li>高中</li><li>大学</li></ol></div><div><h2>专业技能</h2><ul><li>掌握Java编程</li><li>掌握数据结构</li><li>掌握前端相关技能,html,css,JavaScript</li></ul></div><div><h2>个人项目</h2><ol><h3><li>留言墙</li></h3><p>开发时间:2023年4月1日~2023年4月28日</p><p>功能介绍</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></ol><ol><h3><li>学习小助手</li></h3><p>开发时间:2023年5月1日~2023年5月28日</p><p>功能介绍</p><ul><li>错词检测</li><li>支持同学探讨</li></ul></ol></div><div><h2>个人评价</h2><p>热爱生活,热爱编程</p></div>
</body></html>

个人简历页面填写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table><thead><h2>请填写简历信息</h2></thead><tbody><tr><td>姓名</td><td><input type="text"></td></tr><tr><td>性别</td><td><input type="radio" id="male" name="sex"><label for="male">男</label><input type="radio" id="female" name="sex"><label for="female">女</label></td></tr><tr><td>出生日期</td><td><select name="" id=""><option value="" selected="selected">---请选择年份---</option><option value="">---2004---</option><option value="">---2005---</option><option value="">---2006---</option><option value="">---2007---</option></select><select name="" id=""><option value="">---请选择月份---</option><option value="">---1月---</option><option value="">---2月---</option><option value="">---3月---</option><option value="">---4月---</option><option value="">---5月---</option><option value="">---7月---</option><option value="">---8月---</option><option value="">---9月---</option><option value="">---10月---</option><option value="">---11月---</option><option value="">---12月---</option></select><select name="" id=""><option value="">---请选择日期---</option><option value="">---1号---</option><option value="">---2号---</option><option value="">---3号---</option><option value="">---4号---</option><option value="">---5号---</option><option value="">---6号---</option></select></td></tr><tr><td>就读学校</td><td><input type="text"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox">前端开发<input type="checkbox">后端开发<input type="checkbox">测试开发<input type="checkbox">运维开发</td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox">我已仔细阅读过公司的招牌要求</td></tr><tr><td></td><td><a href="https://www.baidu.com/">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认：</h3></td></tr><tr><td></td><td><ul><li>以上信息真实有效</li><li>能够尽早去公司实习</li><li>能接受公司的加班文化</li></ul></td></tr></tbody></table>
</body></html>

css

控制页面的展示样式

 基本语法规范

选择器+{一条/N条声明}

选择器决定针对谁修改（找谁）

声明决定修改啥（干啥）

声明的属性是键值对，使用；区分键值对，使用：区分键值和值

引入方式

内部样式表

将css嵌套到html页面中（通过style标签嵌套）

优点：做到样式和页面分离

缺点：分离不够彻底，尤其是css内容多的时候

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;font-size: 30px;}</style>
</head><body><p>hello world</p>
</body></html>

行内样式表

 <p style=color:blue;font-size:40px;>hello</p>

 行内样式表优先级高于内部样式表

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;font-size: 30px;}</style>
</head><body><p>hello world</p><p style=color:blue;font-size:40px;>hello</p>
</body></html>

 

外部样式

1.创建一个css文件

2.使用link标签引入css

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo01.css">//rel="stylesheet"表示引入的是样式表//href="./demo01.css"表示样式表当前路径
</head><body><p>hello css</p>
</body></html>

 

选择器种类

1.基础选择器：单个选择器构成

标签选择器

类选择器

id选择器

通配符选择器

2.复合选择器：把多种基础选择器综合运用起来

后代选择器

子选择器

并集选择器

伪类选择器

标签选择器

//demo01.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo01.css">
</head><body><p>hello css</p><p>hello javascript</p><h2>hello</h2>
</body></html>
//demo01.cssp {color: red;font-size: 80px;
}

 类选择器

  <p class="eat">吃饭</p>

.eat {
  color: red;
}

//demo01.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo02.css">
</head><body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="game">玩游戏</p>
</body></html>
//demo02.css.eat {color: red;
}.sleep {color: blue;
}.game {color: brown;
}
样式叠加
//demo02.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo02.css">
</head><body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="play game">玩游戏</p>//样式叠加
</body></html>
//demo02.css.eat {color: red;
}.sleep {color: blue;
}.game {color: brown;
}.play {font-size: 30px;
}

id选择器

css中使用#开头表示id选择器

id选择器的值和html中某个元素的id值相同

html元素的id不必带#号

id是唯一的，不能被多个标签使用（是和类选择器最大的区别）

 


http://www.mrgr.cn/news/81783.html

相关文章：

  • solidity基础 -- 可视范围
  • macos的图标过大，这是因为有自己的设计规范
  • 帕金森患者：科学锻炼，提升生活质量
  • 安卓日常问题杂谈（一）
  • Vue2+OpenLayers实现常用的功能整合（持续更新ing）
  • 【 PID 算法 】PID 算法基础
  • Stable Diffusion绘画 | 电商设计海报
  • 【CSS in Depth 2 精译_096】16.4：CSS 中的三维变换 + 16.5：本章小结
  • 三层交换机配置
  • 003：如何理解 CNN 中的 RGB 图像和通道？
  • SpringBoot（Ⅱ）——@SpringBootApplication注解+自动装配原理+约定大于配置
  • win系统B站播放8k视频启用HEVC编码
  • 【蓝桥杯——物联网设计与开发】拓展模块5 - 光敏/热释电模块
  • Wend看源码-Java-集合学习(List)
  • unity学习1：第1个template的项目platformer 学习
  • 离散数学 群（半群，群，交换群,循环群，对称群，置换群,置换,交代群,轮换）详细,复习笔记
  • khadas edge2安装ubuntu22.04与ubuntu20.04 docker镜像
  • 各种网站（学习资源、常用工具及其他，持续更新中~）
  • 【高阶数据结构】红黑树封装map、set
  • 微服务——部署与运维
  • 1.微服务灰度发布落地实践(方案设计)
  • Fast adaptively balanced min-cut clustering
  • 指针详解之 难点、易错点一次性彻底击碎！
  • 【Java数据结构】LinkedList与链表
  • [OpenGL]使用 Compute Shader 实现矩阵点乘
  • 路由器刷机TP-Link tp-link-WDR5660 路由器升级宽带速度