CSS和HTML基操
2024-03-22 10:03:06
第一次接触html的时候，那时我还是大二，当时老师给了我们一份笔记就是些经常用的html标签和css的样式，html是我第一个学会的一种计算机语言，也是html和css让我看到五彩缤纷的编程世界，如今工作也有些年头了，还是不时会翻出之前的笔记来找找标签（平时主要是写java），笔记现在也完善了不少（我需要用到的基本都能找到）
HTML基操
标签的类型：1.有开始标签和结束标签。 需要把网页的内容封装到标签中2.开始标签与结束标签都是在一个标签体内的。
===========================================================
注释：<!--注释的内容-->================================================================
<h1></h1>to<h6></h6> 标题标签
<b></b> 定义粗体文本
<i></i> 定义斜体文本
<em></em> 定义强调文本，实际效果与斜体文本差不多
<strong></strong>定义粗体文本，与<b>的作用基本相同
<small></small> 定义小号文本
<bdo></bdo> 定义文本显示方向，内有dir属性，只能取值ltr或rtl
<p></p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub></sub> 下标标签
<sup></sup> 上标标签,例如2的10次方10就放在标签中
<pre></pre> 原样标签（原样标签会保留空格和换行符）
<span></span> 行内标签
<div></div> div标签的内容会独立占一行
<center>这个文本居中对齐。</center>---------------------------------------------------------------------
<table>表格标签表格使用到的标签:<table border="1" cellspacing="0"></table> 表格 //cellspacing是单元格之间的间隔<tr></tr> 行<td></td> 单元格<th></th> 表头(放在tr中的) 默认的是<td>居中加粗<caption></caption> 表格的标题<thead></thead> 表头 一个表格中可以没有存在thead<tbody></tbody> 表体 一个表格至少要存在一个tbody，也可以存在多个<tfoot></tfoot> 表尾 一个表格可以不存在tfoot以前的浏览器一但遇到了一个<table>的开始标签，就必须要等到遇到table标签的结束
标签的时候，才会在网页中显示一个表格的内容。但是一个浏览器只要遇到一个完整的
tbody标签，那么就可以显示当前页面的信息。表格常用的属性:border="1px" 设置表格的边框bordercolor="red" 设置表格边框的颜色width="100px" 设置表格的宽度height="50px" 设置表格的高度align="center" 设置对齐方式（center是居中right是右对齐left是左对齐）colspan="2" 设置单元格占据指定的列数rowspan="2" 设置单元格占据指定的行数cellspacing="0" 单元格之间的间隔为零border-collapse:collapse; 将单元格边框组合为单一边框 css样式
---------------------------------------------------------------------<ol type="li前的符号的类型" start="20"><li></li>
</ol> 有序的列表标签，start表示列表从20开始type可填1,a,A,i,I,默认是1开始<ul type="li前的符号的类型"><li></li>
</ul> 无序的列表标签,type可填disc默认的实心圆，circle空心圆,square实心方块<dl><dt></dt><dd></dd>
</dl> 项目列表标签---------------------------------------------------------------------常用字符实体标签(其余的查w3school表):空格 小于号 <大于号 >人名币 ¥版权 ©商标 ®引号 "单引号 '
---------------------------------------------------------------------媒体标签:<embed src="file:\\\音乐的路径" hidden="true为隐藏音乐插件，false是显示音乐插件"></embed> 插入一个音乐或者视频的标签<marquee direction="设置活动字幕的滚动方向" scrollamount="飘动的速度" onmouseout="this.start()" onmouseover="this.stop()">飘动的字</marquee> 飘动标签(onMouseOut="this.start()" onMouseOver="this.stop()"当挪开时继续飘动，当鼠标放上去时停止飘动)<video src="file:\\\视频的路径"></video> 添加视频标签<img src="图片的路径"> 图片标签：img标签常用的属性：width=设置图片宽度height=设置图片高度alt=如果图片资源无法找到，那么就显示对应的文字对图片进行说明。align="absmiddle" 使图片的中间和后面的文字中间对齐title="获得焦点显示内容"
-------------------------------------------------------------协议：file协议：file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。格式：file：\\\f：\美女\1.jpghttp协议：浏览器会马上启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件，那么浏览器就会去到对应的dns服务器去寻找该域名对应的主机名。格式：http：\\www.baidu.com邮件的协议：mailTo格式:mailTo:123456@qq.com迅雷的协议：thunder格式：thunder://abc/aa一个人的武林.avi---------------------------------------------------------------------超链接标签: <a href="http:\\www.baidu.com">百度</a> 超链接标签超链接标签常用的属性:href:用于指定连接的资源target:设置打开新资源的目标 _blank是在独立的窗口上打开新资源 _self是在当前窗口打开新资源a标签的原理：1.a标签href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件，那么浏览器就会去到对应的dns服务器去寻找该域名对应的主机名。2.如果a标签的href属性值没有以任何协议开头，那么浏览器就会启动file协议解释器去解释该资源路径。3.如果a标签的href属性值并不是以http开始，而且其他的一些协议，那么这时候浏览器就会去到我们本地的注册表中去查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。超链接标签的作用:1.可以用于链接资源。2.锚点定位(点击2可跳到1处）：1.首先编写一个锚点 锚点的格式: <a name="锚点的名字">数据</a>2.使用a标签的href属性连接到锚点处。 <a href="#锚点的名字">数据</a>---------------------------------------------------------------------框架标签:frameset: 一个frameset可以把一个页面切割成多分。只能按照行或者列切割。frame:不能切割的。frame是位于frameset中。iframe：内联框架 可在网页中用src连接另外一个网页或图片。注意：1.frameset标签不能用于body标签体内容中。2.若要在一个frame中点击链接显示在另外一个frame中，那么先将想要显示的frame先用name命名，再在点击的超链接中用targen="frame的名字"即可。 3. name: 一般和a标签联合使用，a标签的target值=name值，a标签的连接结果内容会显示在此frame中scrolling：滚动条，no：不显示滚动条，yes：显示滚动条，auto：自动显示滚动条noresize:不能改变大小--------------------------------------------------------------------------------
表单标签：表单标签的作用是用于提交数据给服务器的。表单的根标签是<form>标签form属性:<form action="http://www.baidu.com"></form>该属性是用于指定提交数据的地址注意：表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值。<form method="post"></form>指定表单的提交方式 get:默认使用的提交方式。提交的数据会显示在地址栏上。post:提交的数据不会显示在地址栏上，数据大小不受地址栏限制，用于提交敏感数据。<from onsubmit="return checkAll()"></from>表单提交触发事件表单提交的时候会触发onsubmit事件的，如果onsubmit事件的方法返回的是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。常用的属性（非form中属性）:<input type="text" placeholder="请输入用户名" maxlength="6" />是文本框<input type="password" />是密码框<input type="radio" />是单选框 jq中pror设置默认 两个单选框设置同一个name可分到同一个组<input type="checkbox" />复选框 同一组的复选框name的属性值要一致<input type="file" />文件框<textarea rows="10" cols="30" /></textarea>文本域<input type="button" /> 创建一个按钮<input type="submit" value="提交"/>提交按钮<input type="reset" value="重置" />重置按钮<input type="hidden" name="id" value="001" />隐藏域<input type="file" name="myFile" /> 附件 checked 可将此项设置为默认项value="xxx"设置值需要提交的都要设置值onclick="xxx"点击此按钮需要调用的js对象下拉框：来自的城市:<select><option value="">请选择</option><option value="北京">北京</option><option value="上海">上海</option><option selected value="广州">广州</option> //selected默认的选项<option value="深圳">深圳</option></select> CSS基操
html 在一个网页中负责的事情是一个页面的结构。
css（层叠样式表）在一个网页中主要负责了页面的数据样式。
=============================================================================
注释：/*css的注释内容*/==============================================================================
编写css代码的方法:第一种：在style标签中编写css代码。 只能用于本页面中，复用性不强。格式：<style type="text/css">编写css代码。</style>第二种：可以引用外部的css文件。 推荐使用。方式1：使用link标签。 推荐使用。格式：<link href="css文件的路径" rel="stylesheet" type="text/css">方式2：使用<style>引入格式：<style type="text/css">@import url("css的路径");</style>第三中：直接在html标签使用style属性编写。 只能用于本标签中，复用性差。例子：<a style="color:red;text-decoration :none" href="#">新闻标题</a>----------------------------------------------------------------------------
选择器：选择器的作用就是找到对应的数据进行样式化。一.标签选择器：就是找到所有指定的标签进行样式化。格式：标签名{样式1：样式2...}例子：div{color:red;font-size:20px;}二.类选择器:使用类选择器首先要给html标签指定对应的class属性值。格式:.class的属性值{样式1；样式2。。。}类选择器要注意的事项：1.html元素的class属性值一定不能以数字开头。2.类选择器的样式是要优先于标签选择器的样式。三.ID选择器:使用ID选择器首先要给html元素添加一个id的属性值。格式：#id属性值{样式1；样式2。。。。。}id选择器要注意的事项：1.ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。2.ID的属性值也是不能以数字开头的。3.ID的属性值在一个html页面中只能出现一次。四.交集选择器格式：选择器1 选择器2{样式1，样式2，。。。。}五.并集选择器：对指定的选择器进行统一的样式化。格式：选择器1，选择器2...{样式1;样式2....}六.通用选择器:格式：*{样式1;样式2...}七.伪类选择器:伪类选择器就是对元素处于某种状态下进行的样式。a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */注意：1.a:hover必须被置于a:link和a:visited之后，才是有效的。2.a:active 必须被置于 a:hover 之后，才是有效的。text-decoration:none;//a标签不要下划线text-decoration:underline;//a标签要下划线八.div起名字时可以取两个类名，css中两个类名都可以控制样式例如div的类名为class="myclass box"那么myclass和box都可以控制这个div的样式
--------------------------------------------------------------------
1.span中不会自动换行的bug如aaaaaaaaaaaa
css加上word-wrap:break-word; overflow:hidden;2.span既可以设置宽高又可以使他前后不换行的
css加上display:-moz-inline-box; /* css注释：for ff2 */ display:inline-block;*****************************************************样式表内的基本内容
1、文字效果
font: normal 26px/38px "微软雅黑"; // 文字样式：不加粗 字号26像素 行高38像素 微软雅黑字体
font-family: "宋体";
font-size: 12px;
color: #555;
text-align: center;(left/right) //文字居中,居左或居右
font-weight:bold;文字加粗font-weight:800;也是加粗
text-indent:10px;/*首行缩进*/ /* 行高与首行缩进可
line-height:10px;行高 调整盒子内文字的位置*/将行高和div高度一样即可上下居中
color:rgba(0,0,0,0.5); 文字颜色rgb#000黑色，0.5透明度50%；
text-decoration:line-through; 文字中加一横，划掉的效果
font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu2、背景
background-color: #4fa9c6; 背景颜色
background-image:url(图片的路径); 背景图片
background: #f1f7fd;
background:url("../images/adv1.jpg") center; 插入背景图片并居中
background-repeat:no-repeat; 背景不平铺，只显示一次，也可以把上面的center换成no-repeat实现一样的效果。repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。
background-position:370px 100px; 设置背景图片的位置，第一个参数是左上角的左边距第二个参数是左上角的上边距。
background-size:100% 100%; 设置背景图片的大小
background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top;插入两种背景图片一张默认左上，一张设置右上。
background-color:rgba(0,0,0,0.5);背景颜色rgb#000黑色，0.5透明度50%；3、宽度高度
width: 910px;
height: 414px;4、浮动方式：盒子的靠齐方式（css的定位）
float: left;
float:right;
clear:both; 清除左右浮动
position:absolute;/*绝对定位*/父级元素设置了相对定位子级元素设置了绝对定位，那么子级元素会以父级元素为参考。用了定位的元素会在没用定位元素的最上面显示
position:relative;/*相对定位*/
position:fixed;/*固定定位*/ (想对于浏览器，一般做广告框时使用)
（使用了定位后可以用top，right，bottom，left，调整上右下左的距离）
z-index:1; 层级，绝对定位默认层级是0，层级大的显示在上面5、边框：
border:2px solid red; 设置边框色
border-bottom: #c5c5c5 1px solid; //只显示底边框
border-bottom:1px dotted #eee; //显示虚线的下边框dashed是更粗长的虚线
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
border-radius:4px; 设置边框的圆角6、边距（外边距）
margin: 0px auto; 设置网页布局居中效果
margin-top: 3px;
margin-bottom: 3px;
margin-left: 20px;
margin: 3em; 设置外边距是3个字体的宽度
margin:1px 2px 3px 4px;设置上右下左的外边距7、填充距（内边距）
padding: 0px;8、列表位置及图片（ul无序列表）
list-style-type:lower-alpha;英文字母；
list-style-type:upper-roman；设置列表符号为希腊字母；
list-style-type:circle;设置列表符号为小圆圈
list-style-type:square;设置列表符号为小方块
list-style-type:none;设置列表符号为空list-style-position:inside; 列表符号位置为内部
list-style-position: outside; 列表符号位置为外部
list-style-image: url("../images/0206icon04.gif"); 设置列表图片
9、鼠标样式1、cursor:default;默认正常鼠标指针
2、cursor:text;文本选择效果
3、cursor:move;移动选择效果
4、cursor:pointer;手指形状 链接选择效果
5、cursor:url(url图片地址),default; 设置对象为图片,default是默认鼠标（一个箭头）,以防没有url地址时显示默认鼠标，不加显示不出来 w3c解释网址：http://www.w3school.com.cn/cssref/pr_class_cursor.asp10、隐藏和透明与加阴影
overflow:hidden;隐藏溢出,隐藏元素不占位
display:none;隐藏当前菜单
display:block;显现当前菜单,,定义为块元素
display:inline-block; 行内块级元素，定义后宽度会随着内部元素的增加而增加
filter:Alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;/*实现背景透明*/
box-shadow:0px 0px 10px #000; 给盒子加阴影，第一个是阴影在水平方向上的偏移量，第二个是阴影在垂直方向上的偏移量，第三个是阴影的半径，第四个是阴影的颜色。div 加滚动条的方法：
<div style="position:absolute; height:400px; overflow:auto"></div>
div 设置滚动条显示：overflow :yes
div 设置滚动条自适应显示：overflow :auto
div 设置上下滚动条显示：overflow-y :yes
div 设置上下滚动条自适应显示：overflow-y :auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relativeCSS和HTML基操相关推荐
- Spring Cloud Alibaba基础入门，一周学会基操！
Spring Cloud Alibaba基础入门,一周学会基操! 服务拆分: 1．不同微服务,不要重复开发相同业务 2．微服务数据独立,不要访问其它微服务的数据库 3．微服务可以将自己的业务暴露为接口 ...
- HTML既粗体又斜体,HTML粗体，斜体，预格式化等基操
粗体:和两种,在搜索引擎优化的时候,更容易帮助用户找到重点的内容.推荐strong. 斜体: 和都可以,对于浏览器来说可以重点识别. 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留 ...
- ThinkPHP6项目基操（15.实战部分 阿里云短信redis）
阿里云短信redis 一.安装阿里云短信SDK 二.封装到项目lib中 三.radis记录验证码 1. 安装redis服务 2. 可视化redis管理软件 3. PHP安装redis扩展 4. 配置缓 ...
- 面试基操：MQ怎么保障消息可靠性？
面试官:在MQ的整个消息生产消费过程中,如何保障消息100%被消费? 候选人:MQ有个ACK机制,确保消息100%被消费. 面试官:好吧,可以回去等通知了-- 这道面试题在考察MQ组件时算是老生常谈了 ...
- itextpdf添加表格元素_基操勿6第四期：PPT表格美化
大家好,这里是"基操勿6"的第四期内容,我是阿远. 原本按我的计划是要先把PPT里面一些大家可能不太清楚,但是却很好用的操作先给大家做一遍分享.希望大家用到的时候,可以在同事震惊的 ...
- ThinkPHP6项目基操目录
前言 ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的.ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色 ...
- Linux基操 笔记
Linux基操 常用命令 vim命令 进入目录 查看目录文件 查找文件 移动文件 复制文件 删除文件 解压文件到指定目录 压缩文件 linux安装jdk1.8 1.官网下载 2.root用户下 3.配 ...
- 2021-09-03 Elasticsearch基操
Elasticsearch 基操 一.Elasticsearch介绍 二.curl 基本操作 三.es 可视化工具 一.Elasticsearch介绍 二.curl 基本操作 参考:使用curl操作 ...
- 【数据结构】线性表之单向链表的八大基操
线性表可以采用顺序存储结构(依赖于数组)和链式存储结构(依赖于指针) 下面是单向链表有着八大基本操作(简称八大基操) SLinkNode.cpp: #include <stdlib.h> ...
最新文章
- Apache POI：解决数据库和Excel之间相互转换的烦恼~
- SQLSERVER查看sql语句的执行时间
- javascript object 转换int_关于javascript 中类型转换那些事你知道吗？
- python程序执行时间
- 2020 操作系统第四天复习（知识点总结）
- racle的STRUCT和VARRAY的读写方法
- 按指定格式拼接字符串
- LiveVideoStack线上分享第三季（四）：计算存储在视频转码中的应用
- laravel mysql 锁表_Laravel中MySQL的乐观锁与悲观锁
- java队列_java集合入门和深入学习（详解），看这篇就差不多了
- mybatis 依赖于jdbc_使用基础mybatis代替原始jdbc
- 数据结构之基于Java的二叉树实现
- spring纯注解+libreoffice
- java编程题50道
- CI框架 where 跟 OR 怎么连用
- html语言em,html中em单位 网页代码的问题：em是什么单位？
- Tensorflow Saver
- springMVC和mybatis的框架搭建
- 微软计算机键盘上Tab,电脑键盘上的tab键有什么功能
- axios 跨域通信