资讯详情

HTML5基础知识

  1. img标签的属性是什么??
  1. src图片地址
  2. Height 高度
  3. Width宽度
  4. Title鼠标悬挂文字

Alt文字代替图片

a标签的属性是什么??

1.href 链接地址 可以说地址也可以有自己的地址html页面

2.target 跳转 打开新窗口选项 self 默认 本页面跳转 blank 打开新窗户跳转

3.锚链接 跳到固定位置 a链接的一种href里面加# id 图片上 id属性 再加一个名字

块级元素的定义?块级元素有哪些?

无论内容是多少,元素都是独家的

  1. p标签
  2. h1-h6标签
  3. hr中划线

行级元素的定义?行级元素有哪些?

内容打开宽度,左右都是行内元素,可以放在一排

  1. a标签
  2. em倾斜标签
  3. label加粗标签
  4. Img图像标签

什么是单标签?

  1. hr中划线
  2. br换行标签
  3. img图像标签
  4. meta编码标签

双标签有哪些标签?

  1. a标签
  2. p标签
  3. label加粗标签
  4. h1-h6标签
  5. em倾斜标签
  6. html文本标签
  7. head标签
  8. title标题标签
  9. body标签

特殊符号

  1. &nbsp空格
  2. &gt大于号
  3. &lt小于号
  4. &quot双引号
  5. &copy版权符号
  1. Ctrl,alt的用途

  1. ctrl /注释
  2. ctrl A全选
  3. ctrl K对齐
  4. ctrl C复制
  5. ctrl Z剪切
  6. ctrl V粘贴
  7. ctrl B加粗
  8. alt /提示
  9. alt A微信截图

第二章

ul 声明列表无序列表

li列表项独占一行 块元素

Ol 有序列表 声明列表

li列表项独占一行 块元素

Dl 自定义列表

Dt 总项 dd 分项 列表项独占一行 块元素

Table 表格 border边框宽度 cellpadding 单元格与单元格之间的间距 cellspacing 单元格与单元格内容的间距

Tr 行 一个tr是一行 td、th

单元格 一个td th是单元格 colspan 合并行 往后合并 rowspan 合并列 往下

Video src视频路径 controls播放控件 autoplay 自动播放 loop 循环播放 width height

Source标签 放在Video 里面的标签 视频可以放多种格式 根据自己的支持,浏览器只播放一个

Audio 音频标签 src音频路径 controls播放控件 autoplay 自动播放 loop 循环播放

Iframe 内联框架 name 起名 src 引用地址

Width  height

<a href=“跳转地址1” target=“iframe里面的name值”>

<a href=“跳转地址2” target=“iframe里面的name值”>

<a href=“跳转地址3” target=“iframe里面的name值”>

<Iframe  name=”name” src=”引用地址” width=“1000px”>

                                           第三章

action提交地址  method 提交方式  get post

                  input表单标签  type表单类型  name 提交的属性名字 这两个属性必须的

                  value默认值

         type   

                  text 文本类型 

                  password 密码类型

                  url网址 自带网址验证 

                  submit 提交按钮

                  email 邮箱 自带邮箱验证

                  这四个都是文本框 可以输入 可以设置文本框的宽度用size属性 maxlength最大字符输入

                  submit 提交按钮 写的内容提交到你的action里面

form表单的按钮

submit 提交按钮 点击进行数据提交 value 按钮里面的文字

                  button 只是一个按钮 可以点击 但是没有效果

                  rest 重填按钮 把form表单上面输入的数据全部清除

                  image 图片提交 点击图片会把表单数据提交

                                   跟submit一样提交表单数据的

                          按钮不需要name属性 提交上面表单的数据

radio 单选按钮 只是在name属性值一样的里面选择一个

                  checkbox 复选按钮 可以多个选择 提交的时候一起提交 提交的是value的值

                  select 单独标签 没在input的type里面 下拉框选择 单选 每个option是一个下拉选项 里面填的内容

                                   提交的时候都是name值加上value值  checked默认选中  selected默认选择属性 加到option里面

type="hidden" 隐藏功能

                  在页面上不占地方 有name和value的话 会进行提交

                  readonly 只读属性 文本框不能修改的写入 提交的时候会提交 适用于文本框 给上value值

                  disabled 禁用属性 适用所有表单元素 不进行数据提交了 里面的name和value都不提交

required 必填属性 适用于文本框时必填的内容

                  适用于单选、多选时,必须选择一个 不填的话提交不了 会有提示让你填写此文段

                  placeholder=""提示属性 里面的文字后出现在文本框里面

                  不占字符位置 可以从头开始输入

                  提交的时候placeholder里面的文字不提交 只适用于文本框

                  pattern正则表达验证  \d只匹配数字  \w匹配数字跟英文

textarea单独的标签 可以输入多行文字  rows长度  cols宽度

                  input type="file" 是文件上传类型 要给form标签加上enctype="multipart/form-data"是对文件进行编码

第四章

行内样式 直接在标签里面写style

内部样式 是在head里面写style

外部样式 新建.css文件 然后再head里面应用 用link   标签 href里面填地址

优先级 行内>内部>外部

标签选择器 直接写标签的名后面跟大括号 多个的话用,隔开 p,h1{}

类选择器 在标签里面加class=“值” 在style用.加class的值

Id选择器  在标签里面加id=“值” 在style 用#加id的值

优先级 id选择器>类选择器>标签选择器

后代选择器 body p{} 选择body之下的所有p标签

子选择器   body>p  选择body的下一级的子标签p

相邻兄弟选择器  H1+P{} 选择h1的同级的下一个 紧挨着的p标签

通用兄弟选择器 h1~p 选择的是h1的同级的所有p标签 可以不紧挨着h1标签

Body P:First-child 选择作为子标签的第一个p标签

Body 的第一个子标签要是p

P:last-child  选择作为子标签的最后一个p标签

P:nth-child(3){} 选择作为子标签的具体某一个p标签

这几个p标签要紧挨着

P:nth-of-type(3){} 选择p标签的具体某一个标签这几个p标签不必紧挨着

属性选择器

A[href] 选择a标签里面带href属性的a标签

A[href=”name”] 选择a标签里面href值等于name的a标签

A[href^=”w”] 选择a标签里面href值以w开头的a标签

A[href$=”html”] 选择a标签里面href值以html结尾的a标签

A[href*=”t”] 选择a标签里面href值 b包含t的a标签

                                        第五章

字体属性

Font-size 字体大小 正常字体大小16px

Font-family 字体样式 宋体 楷体

Font-weight 字体粗细 正常400  bold加粗700  lighter变细200

Font-style  oblique  italic 倾斜 none 正常

Font(style weight size family) 顺序

文本属性 

Color 字体颜色

Text-align 水平对齐方式 center right left

Line-height 行高 行间距 默认行高16px

Text-indent 首行缩进 1.3rem字符单位

Text-decoration 下划线 underline overline line-through none

Vertical-align 垂直对齐方式 top middle bottom

Text-shadow  文本阴影  颜色 -x轴平移位置 -y轴平移位置

a链接的属性

A:link 链接未点击时的样式设置

a: visited 链接点击之后的样式设置

A:hover 链接鼠标悬停的样式设置

A:active 链接按住不动的样式设置

设置顺序A:link>a: visited>A:hover>A:active

列表样式

List-style-type  disc实心圆 circle 空心圆 square 实心方块

Decimal 数字 none没有

背景样式

Background-color 背景颜色

Background-image背景图片 url(图片路径) 默认全部重复

Background-repeat 默认全部重复 repeat-x x轴重复repeat-yy轴重复

No-repeat 不重复

Background-position 图片定位 10px 10px ,center center

Background:position repeat image color 没有顺序要求

Background-size  cover 全部填充 contain 按比例缩放当一个边满足就停止缩放

80% 50%

背景颜色渐变

 Background:linear-gradient(to left top,red,green,red)

To  方向 可以写一个方向 也可以写2 一个为水平方向一个为

垂直方向,颜色最少要2个颜色

           

                                    第六章

边框

边框颜色 boder-color

边框样式 border-style dotted原点虚线 solid 实线 double双实线

                          Dashed 边框虚线 none 没有

边框宽度 boder-weight blod 400 600

Border-left-style

Boder :宽度 样式 颜色

宽度 样式 颜色

内外边距

外边距 margin 元素与外边元素的间距

      Margin:10px 20px 30px 40px;

Margin-left:10px;

Padding:10px 20px 30px 40px;

Padding-left:10px;

边框圆角:

Boder-radius 边框每个角的曲度(半径)

   Div(width:100  height:100)Boder-radius:50px(50%);就成一个圆了

Boder-left-radius:20px;

盒子阴影:box-shadow  (颜色,x轴偏移,y轴偏移,模糊程度(越大越模糊) )

第七章

Display block把行内元素变为块元素 独占一行,设置宽高有用

Inline把块元素变为行内元素 不独占一行,设置宽高没用

Inline-block 行内的块元素 不独占一行,设置宽高有用

None 隐藏 不占位置

Float 浮动 只有2个方向left right 浮动完之后变为行内元素,原来的地方不占位置

多个元素一起浮动,按顺序排列

清除浮动 浮动之后,边框会塌陷,

Clear left right both

第一种方法

最后加一个空的div给这个div设置clear:both

第二种:给div设置一个宽高,不是很好用

第三种:给最外边的div设置overflow:hidden

第四种:div:after{

Content:“”;

Display:block;

Clear:both

}

第八章

元素定位

Position:相对定位

relative 相对于自己本身的位置进行偏移,原来的位置会被保留,占位置,

偏移之后不占位置

Absolute 绝对定位 相对于已经定位的祖先元素,进行偏移,如果祖先元素没有定位

        则相对于浏览器进行偏移,原来的位置不占地方,偏移之后也不占地方

Fixed   固定定位 相对于浏览器边框定位,不管祖先元素有没有定位,都是相对于浏                          览器,原来的位置不占地方,偏移之后也不占地方

Position:定位方式;

Left/ringht:20px;

Top/bottom:20px;

定位之后的层次;z-index 默认值为0,越大越往上,只针对于定位过的元素,没定位的设                                   置没效果

元素的透明度:opacity:0-1之间越大越清晰,越小越模糊,适用于所有的元素

                                        第九章

skew 倾斜函数,单位是deg,倾斜度数,x轴y轴倾斜角度

                                   skewx,skewy 单独方向的倾斜

 rotate 旋转函数,单位是deg,旋转度数,按x轴的旋转角度

 

标签: 朝辉低压高温传感器

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

 锐单商城 - 一站式电子元器件采购平台  

 深圳锐单电子有限公司