hello_xujj-CSDN博客

原创 html表单

HTML表单1、什么是表单？表单在网页中主要负责数据采集功能。2、表单的创建<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method=""> <input type="text" placeholder="请输

2021-09-20 12:12:14 115

样式表创建创建样式表的目的是为了修改标签的样式。css（cascading style sheets）层叠样式表，主要是为了修改网页信息的显示样式。css语法：选择器名称{ 属性1：属性值1；属性2：属性值2 .........}样式表的创建分为行内样式、内部样式和外部样式。1、行内样式行内样式表：在标签上添加style属性，只作用于当前标签，不常用，一般用在出错调试用。语法：<标签名称 style=“属性:属性值;”></标签名称>&

2021-09-20 12:08:25 1650

原创 html基本概况

HTML5的概念1、什么是HTML5？今天HTML5代表的已经不再是简单的HTML网页设计标准，而是围绕着HTML这个东西以及他周边的一系列网页相关技术的总称，这其中既包含了HTML+css的网页制作，也包含了JavaScript这门编程语言的相关开发，这就是HTML5。H5是HTML的第5个版本。H5是一门技术总称。2、H5能做什么？1.网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）2.小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）3.Hybrid

2021-09-20 12:03:15 170

原创 html标签

HTML标签1、常见的一些标签标签名意义<h1></h1>文字的标题<p></p>段落<b></b><strong></strong>加粗<i></i><em></em>倾斜<br />换行<div></div>盒子、容器<span></sp

2021-09-20 12:02:42 102

原创背景颜色基础知识

背景颜色基础知识background-color属性background-color属性表示背景颜色，背景颜色可以用十六进制、rgb()、rgba()表示法表示，padding区域也是有背景颜色的。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed

2021-06-25 17:25:36 741

原创 css圆角

圆角border-radius属性border-radius属性的值通常为px单位，表示圆角的半径。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

2021-05-25 18:59:05 4070

原创四个方向的边框

四个方向的边框四个方向的边框属性属性意义border-top上边框border-right右边框border-bottom下边框border-left左边框四个方向边框的三要素小属性四个方向边框也可以写成三要素小属性，以右边框为例示例如下：属性意义border-right-width右边框宽度border-right-style右边框线型border-right-color右边框颜色示例代码如下：&lt

2021-05-20 15:10:16 867

原创边框三要素

边框三要素border属性border属性需要三个要素：线宽度、线型、线颜色，示例如下：border: 1px solid red;示例代码分别表示线宽度为1px、线型为实线、线颜色为红色。线型线型值意义solid实线dashed虚线dotted点状线示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &

2021-05-18 15:14:41 1486

原创定位

定位相对定位相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位。left 向右移动；right向左移动；top 向下移动；bottom 向上移动，值可以为负数，即往规定方向相反移动。相对定位的性质相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响。示例代码如下：<!DOCTYPE html><html lang="en"><head> &lt

2021-05-14 15:27:27 115

原创清除浮动

清除浮动清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响.清除浮动方法1让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性。示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

2021-05-12 17:16:10 74

原创使用浮动实现网页布局

使用浮动实现网页布局注意事项1、垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！2、“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动。3、多用div标签。BFC规范和浏览器差异BFC规范BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC。如何创建BFC方法①：f

2021-05-10 16:35:20 1825

原创浮动

浮动浮动的概念浮动在文档布局中是一个非常重要的概念，它描述一个元素浮动至某一侧并停下的表现方式。CSS 允许浮动任何元素。浮动元素会脱离网页文档，与其他元素发生重叠，但不会与文字内容发生重叠。浮动的使用浮动的最本质功能是用来实现并排，示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten

2021-05-08 10:39:45 92

原创行内元素和块级元素

display属性display在英文中为展示的意思，在css中分为行内元素与块级元素。下表为各自的特点：display属性是否能并排显示是否能设置宽高当不设置width属性时举例块级元素否是width自动撑满div、section、header、 h系列、li、ul等行内元素是否width自动收缩a、span、em、b、u、i 等来一段示例代码：<!DOCTYPE html><html lang="en"><he

2021-05-06 15:32:18 347

原创盒模型

盒模型认识盒模型所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”。示例图如下：因此我们可以知道width、height不是盒子总宽高。盒子的总宽度 = width + 左右padding + 左右border盒子的总高度 = height + 上下padding + 上下borderwidth和height属性详解width属性width属性表示盒子内容的宽度，单位通常是px，移动端开发也会涉及百分数、rem等单位。当块级元素

2021-05-03 15:20:00 96

原创字体属性

字体属性详解font-family属性font-family属性用于设置字体，示例如下：font-family: "宋体";字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体。字体名称中有空格或者为中文，必须用引号包裹。示例如下：font-family: serif, "Times New Roman", "微软雅黑";中文字体也可以称呼它们的英语名字，示例如下：中文字体名等价的英语字体名font-family: “微软雅黑”font-fami

2021-05-02 16:38:10 746

原创段落属性、继承性

段落属性、继承性段落和行相关属性text-indent属性text-indent属性定义首行文本内容之前的缩进量，示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont

2021-04-30 21:23:44 236 1

原创常用的文本样式属性

常用的文本样式属性color属性color 属性可设置文本内容的前景色。color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。英语单词表示法仅仅用于学习时临时设置一下颜色，实际开发时基本不用这样的形式，因为追求精确。示例如下：color: red;十六进制表示法十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示。示例如下：color: #ff3366;上面的ff就是十进制的255，每种颜色分量都是0~255的数

2021-04-29 17:24:40 598

原创伪元素与选择器权重

伪元素CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素，用双冒号表示。::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容。::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容。::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）。::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母。::firs

2021-04-28 20:25:32 349

原创 css3新增选择器

css3新增选择器元素关系选择器元素关系选择器一共有三种，分别是子选择器、相邻兄弟选择器和通用兄弟选择器。名称举例意义子选择器div>pdiv的子标签p相邻兄弟选择器img+p图片后面紧跟着的段落将被选中通用兄弟选择器p~spanp元素之后的所有同层级span元素子选择器当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。他跟后代选择器的区别是后代选择器不一定限制是子元素。示例代码如下：&

2021-04-27 20:09:23 216

原创标签选择器和id选择器

标签选择器和id选择器标签选择器标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅。看下面一段示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=

2021-04-26 15:33:47 4821

原创 css基础入门

CSS基础知识前端三层前端学习中重要的三个语言HTML、CSS、JavaScript，各自的功能如下表所示：语言功能结构层HTML搭建结构、放置部件、描述语义样式层CSS美化页面、实现布局行为层JavaScript实现交互效果、数据收发、表单验证等CSS3简介CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等。CSS使样式

2021-04-25 16:44:11 62

原创表格标签

表格标签表格是由一个个小格组成的，多个小格组成行，多行组成表格。<table>、<tr>和<td>标签table是表格的意思，tr是英文table row（表格行）的缩写，td是英文table data（表格数据）的缩写，每个td就是一个小格，示例代码如下：<body> <h2>认识表格</h2> <table border="1"> <tr> &l

2021-04-24 08:47:42 213

原创 HTML5中新增的一些表单控件

HTML5中新增的表单控件在HTML5，新增加了一些表单控件，这些表单控件提供了非常有用的一些功能。更丰富的input种类下表是新增加的type属性值和其所对应的控件：type属性值控件color颜色选择控件email电子邮件输入控件date、time日期、时间选择控件number数字输入控件file文件选择控件search搜索框range拖拽条url网址输入控件示例代码如下：<body> &l

2021-04-22 16:34:52 509

原创表单标签

表单标签表单是用来收集信息，比如注册、登录、发送评论反馈、购买商品等等。表单的创建所有HTML表单都以一个<form>元素开始，示例代码如下：<form action="" method="POST"></form>action属性表示表单要提交到的后台程序的网址，method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面），表单数据可以作为 URL 变量（method=“get”）或者 HTTP post （method=“post

2021-04-21 16:54:42 140

原创语义标签

语义标签<div>标签div是英语division“分割”的缩写，它可以实现文档区块分隔，<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS” 。<div></div>像是一个容器，什么都可以容纳。<div>标签的class属性<div&g

2021-04-20 16:43:52 487

原创多媒体标签

多媒体标签<img>标签<img>标签用于在网页中插入图片。看一段示例代码：<body> <h1>美丽风景图片</h1> <p> <img src="images/shanshui.jpg" alt="山水图像" width="50%"> </p> <p> <img src="images/riluo.jpg" alt="日落

2021-04-19 20:33:11 161

原创有序列表、无序列表、定义列表

有序列表、无序列表、定义列表三种列表标签和语义标签语义<u1></u1>无序列表<o1></o1>有序列表<d1></d1>定义列表无序列表无序列表顾名思义就是“没有可以顺序的”列表。它使用<u1></u1>标签，ul是英文unordered list（无序列表）的简写，而在<u1></u1>标签里面，每一个列表项都是<li>&

2021-04-18 10:36:28 15006

原创标签和段落标签

标签和段落标签什么是标签？HTML叫做“超文本标记语言”，超文本标记语言就是标签。标签的一些特点1、不同的标签都有不同的功能。2、标签通常成对出现。3、标签可以给文字设置不同的“语义”。4、也有标签不是成对出现，而是只有起始标签，这种标签叫做单标签。比如下面的meta标签<meta charset="UTF-8">标题标签h系列标签表示“标题”语义，h是headline的简写，也就是标题的意思。<h1> - <h6>标签定义标题。<h1>

2021-04-17 14:12:17 640

原创认识HTML5骨架

认识HTML5骨架<!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"> <ti

2021-04-16 10:32:00 159

xjj19999272的博客