![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
主要记录一些HTML的学习过程的笔记。如有欠缺之处,欢迎各位指正
小扬同学的笔记
这个作者很懒,什么都没留下…
展开
-
h5的div布局详解
在实际的网页开发中,网页的整体部分一般是由div标签来进行布局的。那么在使用div布局之前就要了解div的属性div是块级元素 块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div和div之间是上下排列的还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素 但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动如图所示,该页面的整体结构的搭建是使用div搭建的。主要有一个大的整体的..原创 2021-12-24 19:52:32 · 10282 阅读 · 0 评论 -
详解css3中display和visibility的区别
在css3中,display和visibility都具备对元素进行隐藏和显示的功能。display语法display:none | block/*none表示隐藏 block表示显示*/visibility语法visibility:hidden | visible/*hidden表示隐藏 visible表示显示*/其中要区分两者的区别很简单,尝试将两者直接翻译过来,display就是显示,而visibility就是可视性的意思再看看两者在实际的代码效果中的表现原图:原创 2021-12-15 17:18:27 · 1099 阅读 · 0 评论 -
CSS标准文档流
当一个HTML页面被浏览器打开时,浏览器会首先对页面进行解析,读取HTML页面中的所有内容,然后将内容显示在浏览器的页面上。在默认情况下,页面显示的内容会按照标准的排版模式来进行内容布局,我们将这种排版方式称为标准文档流。在标准文档流中,HTML的排列方式依据页面中的行内元素和块状元素的标准进行排序。行内元素的标准:行内元素按照从左往右的方式进行排序,多个行内元素可同时显示在同一行,直到占满这一行。块状元素的标准:块状元素按照从上往下的方式进行排序,每个块状元素占据一行。注意:块状元素中可以原创 2021-12-15 16:33:10 · 617 阅读 · 0 评论 -
CSS阴影属性-文字阴影 盒子阴影
文字阴影在css3中通过text-shadow属性实现对页面中的文字添加阴影效果语法格式text-shadow:水平距离 垂直距离 阴影的模糊半径 阴影的颜色其中水平距离和垂直距离为必填选项,通常使用像素值来设置,水平距离设置的值越大 阴影效果越靠右 垂直距离设置的值越大 阴影效果越靠下阴影的模糊半径和阴影的颜色为选填项 其中阴影的颜色默认选项为该文字的颜色即如果要设置阴影的文字的颜色为黑色,那么它的阴影颜色的默认值就是黑色如上所示,阴影的颜色值采取的默认值 所以最...原创 2021-12-13 23:18:08 · 1326 阅读 · 0 评论 -
css背景渐变属性之径向渐变
CSS实现径向渐变的效果,普通的径向渐变和重复的径向渐变原创 2021-12-12 10:50:35 · 7680 阅读 · 0 评论 -
CSS属性之线性渐变实现透明度渐变和重复渐变效果
线性渐变是css中常用的渐变效果,除了普通的线性渐变效果,还可以通过它实现透明渐变和重复渐变的效果1.透明渐变使用线性渐变实现透明渐变的效果需要使用到rgba方法来调整颜色值。语法格式:background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1),url(图片路径))如上所示,改代码表示的内容是实现线性的透明渐变效果,to right定义的是渐变方向 表示从左到右渐变,除了to right(向右渐原创 2021-12-11 23:18:14 · 7497 阅读 · 0 评论 -
CSS渐变属性——线性渐变
在实际开发中,一个好的视觉效果可以更好的达到修饰网页的效果。而渐变背景在web页面中则是必不可少的。css中的渐变类型定义了两种,线性渐变和径向渐变,本次简单的介绍线性渐变。语法格式:background:linear-gradient(渐变方向,渐变的颜色)使用线性渐变用到的是background的linear-gradient方法渐变方向的确定有关键字确定和角度确定。关键字的取值:to right(表示从左往右渐变)to left(表示从右往左渐变)to top(表示从原创 2021-12-10 20:52:13 · 3770 阅读 · 1 评论 -
css中background-position属性
background-position属性在css中用来设置背景图片的位置,它通过设置水平方向和垂直方向的取值来到达效果background-position的常见三种定义方式1.关键字取值 通过使用关键字来定义图片的位置。其中水平方向的关键字有left(左) center(中) right(右)垂直方向的关键字有top(上) center(中) bottom(下)使用方法,一般情况下先定义水平方向的关键字 然后定义垂直方向的关键字background-posi...原创 2021-12-09 23:21:31 · 13734 阅读 · 0 评论 -
CSS背景属性
css背景属性用来设置元素的背景元素。常用的背景元素有background-color(用于设置背景元素的颜色)background-image(用于插入背景图片)background-repeat(用于设置元素的背景图片的重复方式)background-size(用于设置元素的背景图片大小)background-color的使用<!DOCTYPE html><html> <head> <meta charset="utf-8"原创 2021-12-08 12:44:11 · 276 阅读 · 0 评论 -
CSS样式列表属性
列表属性主要用于列表项的样式,常用的列表属性有list-style-type 用于设置列表项的符号,取值None(无,使用此项可以取消掉列表中的默认列表项的符号) Disc(实心圆) Circle(实心圆) Square(实心方块)list-style-image 使用此属性方法可以设置列表的开始符号为自定义图片语法格式list-style-image:url(图片路径)<!DOCTYPE html><html> <head> <met原创 2021-12-06 23:14:53 · 1151 阅读 · 0 评论 -
CSS中的内边距和外边距样式
css中设置内边距使用padding定义 设置外边距使用margin设置内边距可以理解为在框中的内容与边框的距离 外边距可以理解为这个框和浏览器或者它的外边框的距离内边距和外边距有四个值 分别是left(左边) right(右边) top(顶部) bottom(底部) 可以通过分别设置这几个值的定义达到不同的效果语法.container{ padding-left:10px;/*设置左边的内边距为10px*/ padding-right:10px;/*设置右边的内边距为1.原创 2021-12-05 22:22:23 · 2607 阅读 · 0 评论 -
使用CSS中常用的样式属性制作简单的静态广告页面
如图就是最终的效果,在制作之前首先分析整体结构。先搭建好整体的结构体系,然后去添加样式。代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*设置整体样式 所有的字体类型为微软雅黑*/ .container{ font-fam...原创 2021-12-05 22:12:11 · 617 阅读 · 0 评论 -
CSS的特性
1.CSS继承性CSS继承性也称为样式的层叠性。简单地说,就是在定义CSS样式的时候,定义的某个标签的样式的时候,该标签下的子类元素会即使没设置样式属性,也会默认继承它的父类元素的样式。例如div标签下有p标签,但是设置样式的时候,只设置了div的样式,并没有设置p的样式,但p标签内的内容依然会继承div标签的样式属性,这个就称为CSS的继承性<style type="text/css"> div{ color:red; font原创 2021-12-03 21:25:44 · 106 阅读 · 0 评论 -
CSS拓展选择器 组合选择器 后代选择器 交集选择器 伪类选择器
1.组合选择器组合选择器又称为并集选择器。它可以将同样的样式规则应用于多个选择符。简单的说就是在多个不同的选择器中存在多个相同的样式,那么就可以将这些相同的样式提取出来放在一起,这种组成的选择器叫做组合选择器语法格式:标签名,标签名,标签名{ 属性:属性值; 属性:属性值; 属性:属性值;}p,.red,#news{ color:red; font-family:"宋体";}组合选择器中,可以将三种基础的选择器的标签放在一原创 2021-12-02 16:35:03 · 974 阅读 · 0 评论 -
CSS基础之标签选择器 类选择器 ID选择器
1.标签选择器语法格式:<style> 标签名{ 属性:属性值; 属性:属性值; }</style>标签选择器主要针对的是页面中某个标签中的样式设置,它的作用范围是这个页面内所有写在该标签内的内容,标签选择器可以定义多个标签的样式2.类选择器语法格式<style type="text/css">.类名{ 属性:属性值; 属性:属性值.原创 2021-12-01 14:04:26 · 15665 阅读 · 0 评论 -
CSS基础 外部样式表 内嵌样式表 行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表。利用css样式表定义页面样式,将会大大减少设计工作量。一些好的css样式表的建立,可以很好的美化页面 精确定制页面的布局css的语法解析<style type="text/css"> p{ font-family:"宋体"; color:red; font-size:30px; } hr{原创 2021-11-30 16:02:51 · 11326 阅读 · 0 评论 -
H5实现简单个人信息编辑页面的制作
如图所示,需要做到的要求有以下几点1.带 * 的为必填选项2.年龄选项框限制为number手机号码选项框限制为number生日选项框限制为date 个人主页选项框限制为url 电子邮件选项框限制为email<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> ...原创 2021-11-29 22:13:20 · 5608 阅读 · 0 评论 -
H5创建一个简单的qq注册页面
该图就是最终要完成的效果,简单分析一下改图的整体结构,以及需要用到的标签及属性。这里我是直接创建一个表单,然后在表单中创建一个十行一列的表格。以下为最终效果的代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/bg.jpg">...原创 2021-11-28 12:24:29 · 5078 阅读 · 0 评论 -
H5中单选框 复选框及下拉选框
在h5中单选框和复选框都是通过创建inlput表单设置其type属性来完成的,创建单选框的话type属性就为radio 创建复选框的话type属性就为checkbox。单选框和复选框都是单个标签以下为单选框的创建当然这样设置的单选框是没有默认选中的,如果向设置默认选中的单选框。可以定义checked如图所示,直接将checked写入要定义默认选中的选项中即可。以下为复选框的创建同理,复选框照样具备默认选中的属性,也是通过设置checked即可实现.和单选框radio的使用方法一样..原创 2021-11-27 21:53:25 · 11546 阅读 · 1 评论 -
使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签。<form></form>表示定义一个表单的开始和结束。在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址。method属性表示定义浏览器将表单中的数据提交给服务器端的方式,有get和post两种方式,默认是get。name属性用于设置表单的名称,一般如果存在多个表单的话为了避免混乱而进行设置的。在form标签中,常用的子标签就是<input > input具备对表单中的数据进行处理分析和存储等属性。它可原创 2021-11-26 16:44:43 · 4524 阅读 · 1 评论 -
H5的colspan跨列和rowspan跨行实现课表的制作
通过H5来实现课表需要借用到表格。H5中的表格由table标签tr标签及td标签组成。<table>...</table>标签表示着一个表格的开始与结束<tr>...</tr>标签表示着表格中一行的开始与结束<td>...</td>标签表示着一个单元格的开始与结束,也可以理解为一行中列的个数。td标签一般写于tr标签内简单的分析图片,然后创建表格,这里应该创建一个六行六列的表格<!Doctype HTM...原创 2021-11-25 00:09:03 · 1223 阅读 · 0 评论