![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html 基础
文章平均质量分 54
@码上行动
前端基础以及常见API更新,敬请期待!!!
展开
-
a标签 锚点实现超链接
锚点demo什么是锚点:1、实现效果:2、代码展示:总结什么是锚点:就是当页面内元素过长时,能快速定位到指定元素位置需要目标元素的name或id属性和a标签的href相对应即可;注:href="#目标元素的name或id名"1、实现效果: 锚点这里是顶站的锚第1任第2任第3任第4任第5任第6任美国历任总统● 第1任(1789-1797)姓名:乔治·华盛顿George Washington生卒:1732-1799政党:联邦● 第2任(1797-1801)原创 2021-09-10 10:29:54 · 508 阅读 · 1 评论 -
H5新增表单元素和验证
文章目录一,智能表单的type二、属性三、标签四、属性选择器五、伪类选择器1、动态伪类2、UI元素状态伪类(主要针对form元素)3、CSS的结构伪类选择器4、:target 选择器可用于选取当前活动的目标元素。5、否定选择器(:not)6、:root 选择文档的根元素总结一,智能表单的type无兼容性:type="email" 邮箱type="url " 验证有没有网址格式type="range" 滑动条(min、max/step)type="number" 数字条(min、max/step原创 2021-06-09 09:51:22 · 286 阅读 · 2 评论 -
HTML5基础标签
文章目录HTML51)section2)article3)aside4)header5)footer6)nav7)figure8)embed9)mark10)音频和视频11)datalist选项列表(通过id与input连接)12)output14)hgroup总结HTML5 1. 内容类型:< !DOCTYPE html> 2. 指定字符集编码:< meta charset=”utf8”> 3. 不允许写结束标记的标签:br、col、embed、hr、img、inp原创 2021-06-09 09:50:57 · 222 阅读 · 1 评论 -
CSS文档统筹
1、CSS文档统筹1)整站里相同的CSS样式提取到一个样式表里,各个页面调用相同的样式文件即可。 2)网站较大的情况下一般会把网站的头部,尾部单独分离出来,包括样式文件。2、网页自身优化(如何让网站被搜索引擎搜索到)1)页面主题优化实事求是的写下自己网站的名字,网站的名字要合理,最好包含网站的主要内容。2)页面头部优化页面头部指的是代码中部分,具体一点就是中的“Description(描述)”和“Keywords(关键字)”两部分:1、“描述”部分应该用近乎描述的语言写下一段介绍你网原创 2021-06-09 09:50:35 · 66 阅读 · 0 评论 -
表格标签及属性高级
表格标签及属性高级1、单元格间距:(给table{ }加)border-spacing:5px;2、合并相邻单元格边框:(给table{ }加)border-collapse:separate/collapse;separate:默认边框分开 collapse:边框合并3、无内容时单元格的设置:(给table{ } 加)empty-cells:show/hide;show:显示 hide:隐藏4、单元格的宽高:(给table{ }加)table-layout:auto/fixed;原创 2021-06-08 16:03:51 · 126 阅读 · 0 评论 -
BFC概念和应用场景
BFC概念和应用场景BFC(Block formatting context),直译为”块级格式化上下文”。它是一个独立的渲染区域,具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。1、哪些元素会生成BFC?(只要元素满足下面任一条件即可触发 BFC ) 1. 根元素 html 2. float属性不为none 3. position为absolute或fixed 4. display为inline-bl原创 2021-06-08 16:02:43 · 205 阅读 · 0 评论 -
表单标签及属性高级
表单标签及属性高级1、表单的组成:表单域:< form name="" method="get/post" action="">< /form>表单控件:<input type="text/password/submit/reset/button" value="">2、表单字段集(可嵌套)<fieldset disabled="disabled"> </fieldset>disabled定义空间禁制可用;3、字段级标题<原创 2021-06-07 11:40:43 · 68 阅读 · 0 评论 -
锚点链接
锚点连接命名锚点的作用:在同一页面内的不同位置进行跳转。第一步:给元素定义命名锚记名 语法:<标记 id=”命名锚记名”> </标记> 代码示例: <h2 id="noe">>>>>> 1楼内容 <<<<<<</h2> <h2 id="two">>>>>> 2楼内容 <<<<<<</h2>原创 2021-05-25 14:27:18 · 350 阅读 · 0 评论 -
前端页面插入Flash动画
Flash动画语法1:<object width="value" height="value"> <param name="movie" value="flash路径及全称"/>//插入flash文件 <param name="wmode" value="transparent"/> //设置背景透明</object>语法2:<embed width="value" height="value" src="flash路径及全称原创 2021-05-19 11:01:32 · 839 阅读 · 0 评论 -
如何让子元素在父元素中水平垂直居中
元素在浏览器窗口水平垂直居中 父元素:position:relative //相对定位 子元素:position:absolute //绝对定位方法1:给子元素设置属性: left: 50%; top: 50%; margin-left: -50px;(margin回退为子元素自身宽度的一半) margin-top: -50px;(margin回退为子元素自身高度的一半)方法2:给子元素设置属性: left: 0; top:0; right: 0; bottom:0; ma原创 2021-05-19 11:00:01 · 237 阅读 · 0 评论 -
css定位方式总结
文章目录一、相对定位(position:relative)二、绝对定位(position:absolute)三、固定定位 (position:fixed)四、绝对和相对定位的区别拓展总结常见定位的几种方式:position:static/ absolute/relative/fixed定位元素可以触发5个属性(4方向1层级) :4个方向 left / right / top / bottom 1个层级关系 z-index(给定位元素提升层级关系,值越大层级就越高,可以设置负数、此属性仅仅原创 2021-05-13 09:43:00 · 545 阅读 · 0 评论 -
CSS未知宽高元素水平垂直居中
文章目录方法一:对图片不管用方法二:对图片管用总结方法一:对图片不管用父元素:display:table; text-align:center;//水平居中 子元素:display:table-cell; vertical-align:middle;//垂直居中方法二:对图片管用vertical-align垂直居中:top/middle/bottom; 1、只有行内元素设置时管用; 2、需要参照物,且参照物不要换行,紧跟在图片后同行显示;代码示例:<head原创 2021-05-13 09:42:20 · 312 阅读 · 0 评论 -
html元素(标签)类型
文章目录一、块元素(block element)二、行内元素(inline element)三、行内块元素(inlineblock)四、元素类型的转换总结一、块元素(block element)div p h1-h6 ul/ol/dl/dt/dd/li hr form特点: 1、可以设置宽高和盒模型的所有属性; 2、上下排版、独占一行; 3、可以嵌套内联元素和块元素,但是有个别元素特殊(p/h标签/dt)二、行内元素(inline element)又称内联元素span原创 2021-04-30 17:13:13 · 105 阅读 · 0 评论 -
css实现单行,多行文本溢出显示省略号
文章目录一、溢出属性(overflow)二、空余空间(white-space)三、省略号显示(text-overflow)三、单行文本溢出时显示省略号四、多行文本溢出时显示省略号总结一、溢出属性(overflow)overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;属性说明: visible: 默认值、内容不会被修剪、会呈现元素框之外; hidden: 内容超出部分被隐藏; scroll: 内容超出不超出都会显示滚动条,有原创 2021-04-30 17:12:48 · 283 阅读 · 0 评论 -
css背景(background)属性
文章目录一、背景颜色二、背景图片、1.背景图片平铺2.背景图片固定3.背景图片位置总结一、背景颜色代码如下:background-color:颜色值;或者直接background:颜色值;说明: 此处颜色值可以为red,green等特殊颜色, 也可以为#000000(黑色),#ffffff(白色)等进制颜色 或者rgba方式的颜色二、背景图片、background-image:url(背景图片的路径及全称);说明: 1 图片等于盒子的大小时:背景图片正好显示在盒子中;原创 2021-04-29 09:43:56 · 333 阅读 · 0 评论 -
css边框(border)属性
border属性代码如下:border:边框宽度 边框风格 边框颜色;如:border:5px solid #555;属性:(1)边框宽度:border-width:5px;(2)边框颜色:border-color:red;(3)边框样式:border-style:solid/dashed/dotted/double; 实线/ 虚线 /点线 /双线整体设置:1个值时:默认为四条边都设置 2个值时:1上下 2左右 3个值时:1上 2左右 3下 4个值时:上 右原创 2021-04-29 09:43:26 · 3020 阅读 · 1 评论 -
常用的图片格式
常用的图片格式.jpg:有损压缩格式,靠损失图片的质量来减少图片的体积,适用于颜色丰富的图像;.gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;.png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是ireworks的 源文件格式,适用于颜色数量较少的图像;.bmp位图:无压缩,显示图片效果好,但是文件大。不建议用.bmp图片.png图片:压缩,支持千万种颜色,支持背景透明。.jpg/.jpeg:压缩,支持千原创 2021-04-28 10:30:05 · 315 阅读 · 0 评论 -
html表单
table制作项目增补表代码如下:<body> <h3 align="center">项目增补表</h3> <table align="center" border="1" width="800" height="400" cellspacing="0"> <tr> <td align="center">工单号</td> <td width="60"></td&g原创 2021-04-28 10:29:15 · 140 阅读 · 0 评论 -
table制作项目增补表案例
table制作项目增补表代码如下:<body> <h3 align="center">项目增补表</h3> <table align="center" border="1" width="800" height="400" cellspacing="0"> <tr> <td align="center">工单号</td> <td width="60"></td&g原创 2021-04-26 18:58:45 · 200 阅读 · 0 评论 -
table制作课程表案例
table制作课程表代码如下:<body> <h3 align="center">课程表</h3> <table align="center" border="1" bordercolor="green" widt h="600" height="300"> <tr> <td align="center">项目</td> <td align="center" colspan=原创 2021-04-26 18:58:10 · 1178 阅读 · 0 评论 -
前端table表格的用法
文章目录一、无序列表(unordered list)二、有序列表(ordered list)三、自定义列表(definition list)总结一、无序列表(unordered list)代码如下:<ul type="circle/disc/square"> // 默认值circle <li>序列1</li> <li>序列2</li></ul>html效果: 实心圆列表1 实心圆列表2原创 2021-04-25 10:44:05 · 5993 阅读 · 0 评论 -
img标签插入图片的方法
img标签的使用方法代码如下:基本语法<img src="图片的路径" >(都是网页找图片的路径)(1)当网页和图片在同一个文件夹时(都没有被包)<img src="img.jpg">(2)当网页和图片所在的文件夹同级时(图片被包起来)<img src="images/img.jpg">(3)当网页和图片各自所在文件夹同级时(都被包起来)<img src="../img.jpg">文件寻找方法:打开文件夹(文件名/) 返回上一级原创 2021-04-23 15:03:56 · 7380 阅读 · 1 评论 -
a标签链接的使用
一、无序列表(unordered list)代码如下:链接线上网页百度一下<a href="http://www.baidu.com">百度一下</a>本地网页的跳转请点击跳转<a href="文件的路径">请点击跳转</a>空链接<a href="#">空链接</a>图片链接请点击图片跳转<ul type="circle/disc/square"> // 默认值circle <原创 2021-04-23 09:43:22 · 1199 阅读 · 0 评论 -
html列表
文章目录一、无序列表(unordered list)二、有序列表(ordered list)三、自定义列表(definition list)总结一、无序列表(unordered list)代码如下:<ul type="circle/disc/square"> // 默认值circle <li>序列1</li> <li>序列2</li></ul>html效果: 实心圆列表1 实心圆列表2原创 2021-04-21 15:52:43 · 71 阅读 · 0 评论