首页 > 其他分享 >HTML&CSS

HTML&CSS

时间:2024-08-06 19:25:10浏览次数:19  
标签:标签 HTML css s2 div 选择器 CSS 属性

一、Html、css、js

html:超文本标记语言——负责网页的结构
css:层叠样式表——页面显示的样式、排版
js:JavaScript——界面交互(动态交互、逻辑)

二、Html

div和span

1. div division:div里面所有的元素都在div区域里面,div里面可以嵌套别的标签
    div独占一行
2. span:功能类似于div但是不能独占一行

1. 块级元素block:单独成为一行。h、ul、ol、div
2. 行内元素inline:不能独占一行,可以和其他元素并排。img、a、span、input

u(underline):下划线
i(italic):斜体
b(bold):粗体

空间折叠以及特殊符号

空格折叠:普通空格在html中如果有多个连续出现会被当做一个空格,如果想要显示多个连续空格需要特殊符号 
&lt;       less than     <
&gt;      gteat than >
&copy;     ©
&lt;h1&gt;   在html页面输出:<h1>

table表格

th:table head
tr:table row
td:table data单元格

rowspan:合并行
colspan:合并列

form表单

css:cascading style sheet 层叠样式表
语法格式:

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    属性名3:属性值3;
}

三、CSS

css使用:

1.通过选择器选择上标签
2.在选择的标签上设置样式

选择器分类:

1.标签选择器:

p{
    ……
}


2.类选择器:

.className{
    ……
}


3.id选择器:

#id{
    ……
}

一些常见的样式:
color:red;    //文字颜色
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none;    //去掉下划线

css使用思想:

1. 不要试图用一个类名,把某个标签的所有样式写完。要让这个标签多携带几个类,共同造成这个标签的样式。
2. 每一个类要尽可能小,要能够做到让更多的标签使用。

css高级选择器:

s1 s2        后代选择器,选择自己所有的后代
s1,s2        并集选择器(选择器组)||
属性选择器
s1s2        交集选择器(既要满足s1也要满足s2)&&
s1>s2    直接儿子选择器,与后代选择器不同,只选择自己直属的后代
s1+s2    下一个兄弟选择器,选择自己后面紧挨着的第一个兄弟

盒模型

盒模型中主要的属性:width(宽长),height(高度),padding(内边距),border(边宽),margin(外边距)

BootStrap

Bootstrap 是一个流行的前端框架,用于构建响应式和移动优先的网站和Web应用程序。它由Twitter团队开发并开源,提供了一套预构建的CSS样式和JavaScript组件,帮助开发人员快速搭建现代化的用户界面。

BootStrap全局样式特点:
1.代码简洁
2.风格统一
3.美观易用

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

bootstrap-3.4.1-dist.zip
链接:https://pan.baidu.com/s/1uACSnHugvkXXdqFGXP8MOw?pwd=szph 
提取码:szph

标签:标签,HTML,css,s2,div,选择器,CSS,属性
From: https://blog.csdn.net/ckx0703/article/details/140963843

相关文章

  • HTML 标题
    您正确地概述了HTML中标题(Heading)、水平线(<hr/>)和注释(Comment)的使用方法和重要性。这些元素在网页设计中扮演着关键的角色,不仅影响页面的结构和可读性,还对搜索引擎优化(SEO)和用户体验有着重要影响。HTML标题HTML中的标题标签<h1>到<h6>定义了六种不同级别的标题。这些标题......
  • HTML5 WebSocket 详解及使用
    1.WebSocket是什么?WebSocket是HTML5提供的一种在单个TCP连接上进行全双工通讯的协议。(双向通信协议)2.WebSocket的作用?实现客户端与服务器之间的双向通信,允许服务端主动向客户端推送数据。在WebSocketAPI中,浏览器和服务器只需要完成一次握手,两者之间就直......
  • css 实现弹窗缩放出现,从小放大
    在CSS中,实现弹窗从小放大的动画效果,可以使用transform属性和transition属性或者@keyframes动画。以下是几种实现方式:使用transition当弹窗元素的类被添加或移除时,可以使用transition来实现平滑的缩放效果。.modal{opacity:0;transform:scale(0.5);/*初始缩放比例较......
  • HTML 属性
    HTML属性是HTML元素的一部分,它们为元素提供了额外的信息或设置。这些属性总是以名称/值对的形式出现,并且它们被放置在HTML元素的开始标签中。了解和使用这些属性对于创建丰富、交互式的网页至关重要。常见的HTML属性1.classclass属性用于为HTML元素指定一个或多个类......
  • CSS中span元素垂直居中【解决span元素内基线对齐问题】
    CSS中span元素垂直居中【解决span元素内基线对齐问题】在样式的书写中,我们常常使用以下方式实现垂直居中,若span元素内例外,解决办法看文章最后<divclass="parent"><spanclass="child">text</span></div>1.flex布局方式垂直居中.parent{display:flex;align-ite......
  • 一个基础的js,html示例程序
    需求背景:一个html,一个js脚本。要求html里面提供若干按钮。第1个按钮,点击之后,触发js里面的add函数,第2个按钮点击之后触发js里面的del函数。第3个按钮,点击之后,在按钮右侧,显示当前时间,每点击一次刷新下一次。还有,在每个函数调用里面,函数开通打印当前时间戳(精确到毫秒),函......
  • 爬虫:xpath高级使用,bs4使用,bs4-css选择器
    xpath高级使用fromlxmlimportetree#由于本次要格式化的内容是一个文件,所以用parse,如果是一个html格式的字符串就用HTMLhtml=etree.parse('02_xpath.html')#可以连接多个但是每两个之间要用一个管道符来连接#print(html.xpath('//ol/li[@data="one"]/text()|......
  • CSS书写模式 Writing Mode text-combine-upright
     writing-mode属性定义了文本在水平或垂直方向上如何排布。语法格式如下:writing-mode:horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lrhorizontal-tb:水平方向自上而下的书写方式。即left-right-top-bottomvertical-rl:垂直方向自右而左的书写方式。......
  • HTML 元素
    您已经对HTML元素的基本概念有了很好的理解。HTML文档是由一系列的HTML元素组成的,这些元素通过标签来定义,每个元素都有一个开始标签和一个结束标签(除了空元素外)。下面我将继续补充和强调一些关键点。HTML元素的基本结构HTML元素的基本结构由开始标签、元素内容和结束标签组成。......
  • 【软件测试入门】HTML5
    HTML概述HTML指的是超文本标记语言,它是用来描述网页的一种语言。HTML不是一种编程语言,而是一种标记语言。标记语言是一套标记标签。Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是由国际最著名的标准化组织。Web标准的构成(重点)主要包括......