摘要:定义表格中的表注内容脚注样式节标签描述属性定义文档的样式信息。原始值是由从对象下来的所有对象继承的。方法通常由在后台自动进行调用,而不是显式地处于代码中。
HTML常用标签
其实在w3school上都有详细的总结和描述,写在这里是为了理清自己的思路,整理比较常用的标签。
原地址:http://www.w3school.com.cn/ta...
基础标签//tag
标签 | 描述 |
---|---|
定义文档类型。 | |
定义 HTML 文档。 | |
定义文档的标题。 | |
定义文档的主体。 | |
to |
定义 HTML 标题,块级元素。 |
p | 定义段落,块级元素。 |
br | 定义简单的折行。 |
hr | 定义水平线。 |
定义注释。 |
标签 | 描述 |
---|---|
b | 文本加粗 |
strong | 语义化,文本加粗 |
i | 文本倾斜 |
em | 语义化,文本倾斜 |
s | 文本添加删除线(不赞成) |
del | 文本添加删除线 |
u | 文本添加下划线(不赞成) |
文本添加下划线 | |
center | 定义居中文本(不赞成) |
font | 定义文本的字体、颜色、尺寸(不建议) |
sup | 上标文本 |
sub | 下标文本 |
说明:标签后面带*,说明是单标签
标签 | 描述 | 属性 |
---|---|---|
form | 为用户输入创建HTML表单,用于向服务器传输数据,块级元素 | action/method |
input* | 文本输入框,行内块 | type(text/button/checkbox/password/radio/submit)/value |
textarea* | 多行文本输入框 | rows/cols |
button* | 按钮 | type="button"/value |
select | 下拉选择列表,内嵌option标签 | / |
option | select选择列表中的选项 | value |
optgroup | 选择列表中选项的组合,不能选中,内嵌option标签 | label="华北" |
label | 为input元素定义标记 | for(类似id) |
fieldset | 在form中,定义围绕表单中元素的边框,可分类打包 | / |
legend | 为fieldset元素定义标题 | / |
标签 | 描述 | 属性 |
---|---|---|
frameset | 框架集,内嵌frame | rows/cols |
frame | 框架 | src |
noframes | 在frameset中添加非frame标签,用于在浏览器不支持frame的时候显示文本,包括在body标签内部 | / |
iframe | 创建包含另外一个文档的内联框架(即行内框架 | src/scrolling/width/height |
标签 | 描述 | 属性 |
---|---|---|
img* | 图像,行内块 | src/alt(替代文本) |
canvas | 图形容器,必须用JS脚本来绘制图形 | width/height |
标签 | 描述 | 属性 |
---|---|---|
audio | 音频 | src/controls(显示控件) |
source* | 内嵌于 | src/type |
video | 视频 | src/controls(显示控件) |
标签 | 描述 | 属性 |
---|---|---|
a | 超链接,行元素 | href |
link* | 链接外部样式 | rel="stylesheet"/type="text/css"/href="main.css" |
nav | 导航链接,内嵌a标签 | / |
标签 | 描述 | 属性 |
---|---|---|
ul-li | 无序列表 | / |
ol-li | 有序列表 | / |
dl-dt-dd | 自定义列表 | / |
标签 | 描述 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
//给SEO搜索引擎看的 //给用户搜索看的简介 //网页重定向编程
body { background: #00FF00 url(bgimage.gif) no-repeat fixed top;//简写属性,可设置background-color,background-image,background-repeat,background-attachment,background-position背景属性 } body { background-image: url(bgimage.gif);//背景图像 background-attachment: fixed;//背景图像是否固定/随着页面其他部分滚动 background-repeat:no-repeat;//水平或垂直方向重复方式:repeat/repeat-x/repeat-y/no-repeat background-position:center;//背景图像起始位置,top left center bottom right中的两个组合,如果只规定一个,另一个默认为center background-size:80px 60px;//背景图像宽度和高度,不设置则默认为auto } body { background-color:yellow;//颜色名称 } h1 { background-color:#00ff00;//十六进制 } p { background-color:rgb(255,0,255);//rgb代码 } div { background-color:transparent;//默认值,透明 }边框属性 p { border:5px solid red;//简写属性,顺序:border-width border-style border-color } border-radius:25px;//四个角的形状,也可以设置某个角的形状,栗子:border-top-left-radius div { box-shadow: 10px 10px 5px #888888;//添加阴影 } //box-shadow: h-shadow v-shadow blur spread color inset; //水平阴影,垂直隐形,(模糊距离),(阴影尺寸),(阴影颜色),() border-top/right/bottom/left:;//可以设置多带带边框的属性 div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; //border-image-source/slice/width/outset/repeat }CSS字体属性 font: font-style font-weight font-size/line-height font-family;//文字大小和字体为必写项 font-weight:normal(400)|bold(700)|bolder|lighter|100-900CSS 外边距属性(Margin) margin: top right bottom left; margin: top left/right bottom; margin: top/bottom left/right;CSS 内边距属性(Padding) padding: top right bottom left; padding: top left/right bottom; padding: top/bottom left/right;transform div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }JS String 属性 legth var str = "123"; str.length;//3方法 substring() stringObject.substring(start,stop) //提取子字符串,从 start 处到 stop-1 处的所有字符 //如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数 //不接受负的参数 var str="How are you doing today?" str.substring(2,3);//"ow" slice() stringObject.slice(start,end) //从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符 //如果start/end是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。 var str="How are you doing today?" str.slice(-3,-1)//"ay" //(-1,-3)返回的时"" split() stringObject.split(separator,howmany) //返回一个字符串数组,从参数separator指定的地方分割 stringObject //如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本) 注释:String.split() 执行的操作与 Array.join 执行的操作是相反的 indexOf() stringObject.indexOf(searchvalue,fromindex) //检索指定的字符串值searchvalue在字符串中首次出现的位置,fromindex指的是开始检索的位置 //不存在的时候返回-1 lastindexOf() stringObject.lastIndexOf(searchvalue,fromindex) //返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。 charAt() stringObject.charAt(index) //返回指定位置的字符 contact() stringObject.concat(stringX,stringX,...,stringX) //连接两个或多个字符串 match() stringObject.match(searchvalue) stringObject.match(regexp) //在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. //与indexOf()不同,match返回的是匹配到的值,而indexOf返回的是位置 replace() stringObject.replace(regexp/substr,replacement) //在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串 //对大小写不敏感 search() stringObject.search(regexp) //返回stringObject 中第一个与 regexp 相匹配的子串的起始位置 //从字符串的开始进行检索 valueOf() stringObject.valueOf() //valueOf() 方法可返回 String 对象的原始值。 //原始值是由从 String 对象下来的所有对象继承的。 //valueOf() 方法通常由 JavaScript 在后台自动进行调用,而不是显式地处于代码中。 toString() stringObject.toString() //返回原始字符串值 今日头条面试题: var arry = str.split(".")-->var newArry = arry.reverse()-->newArry.join(".")Array (2019.1.7更) 创建数组的方法数组字面量法 var array = [1,2,3]; 构造函数法 var array = new Array(/n/1,2,3);属性 length array.length;方法 concat() arrayObject.concat(arrayX,arrayX,......,arrayX) //在arrayObject后面连接两个或多个数组,返回一个新数组 //不改变现有数组 join() arrayObject.join(separator) //以separator作为分隔符,把数组中的元素放入字符串 //与String对象的split()方法相反 pop() arrayObject.pop() //删除数组的最后一个元素,并返回该元素 shift() arrayObject.shift() //删除数组的第一个元素,并返回该元素 push() arrayObject.push(newelement1,newelement2,....,newelementX) //添加一个或更多元素到数组的末尾,并返回新的数组长度 unshift() arrayObject.unshift(newelement1,newelement2,....,newelementX) //添加一个或更多元素到数组的开头,并返回新的数组长度 reverse() arrayObject.reverse() //反转数组 //注意:改变的是原来的数组,不会创建新数组 slice() arrayObject.slice(start,end) //返回已有数组从start到end(不包括)的元素 //返回一个子数组,不改变原数组 splice() arrayObject.splice(index,howmany,item1,.....,itemX) //删除从index开始的howmany(可以为0)个元素,并从删除的位置开始添加新的元素到原数组 //返回数组,改变原数组 sort() arrayObject.sort(sortby) //对数组元素排序,在原数组上进行 //默认按照字母顺序进行排序 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下: - 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。 - 若 a 等于 b,则返回 0。 - 若 a 大于 b,则返回一个大于 0 的值。 function sortNum(a,b) { return a - b;//升序 //return b - a;//降序 } array.sort(sortNum);//数值字符串数组按照数值的大小对数字排序 toString() array.toString() //把数组转换为字符串,并返回该字符串
array.valueOf() //返回数组对象的原始值
注意:Array里面slice和splice的区别——slice返回子数组,且不会改变原数组;splice从某个位置删除数组内元素,并添加新元素,改变原数组。 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/100742.html 相关文章
发表评论0条评论xcold男|高级讲师TA的文章阅读更多
阅读需要支付1元查看
|