前言
随着互联网技术的不断更新发展,互联网相关人才也需求不断增加,在众多工作中关于web前端工程师是最快入门以及需求大的一门技术工作,本文主要介绍了关于web前端工程师需要掌握的相关基础知识.本文就介绍了前端工程师的基础知识掌握.
一、web前端工程师是什么?基础知识学习包括什么?
通俗来说,前端工程师就是面向用户端,客户端用户端看到的一切效果全部是由前端工程师来完成的;所学的基础知识必须包括html(网页结构层)和css(层叠样式表/装饰装修美化作用)以及后期的行为jvavscaript来完成.
二、基础知识
1.Html(结构框架)
<html>========超文本标记语言
<head>=====网页的徒步
<meta charset="utf-8">====字符编码格式
<title>网页的标题</title>=====网页的标题
</head>
<body>===================网页的主体
</body>
</html>
关于基础标签的用法
基础标签:
1:创建框架:shift+!或者 html5 进行页面补全
2:图片:./img 插入图片 采用src属性书写路径地址(相对与绝对地址)
3: 存储图片:ctrl+c ctrl+n ctrl+v ctrl+s 格式存储为png
4:字体{标题标签}:h1---h6 独占一行,自动加粗
5:段落标签:p 与h标签类似,独占一行,无需br
6:无序列表 ul li 有序列表 ol>li ( start 新增属性 1,a,A,I,i)
自定义列表 dl dt dd
type( disc实心黑圆点 none没有样式 circle空心圆 square 方块 )
取消标记点:list-style:none
7:盒子标签块级元素:div p h...(可设置宽高,纵向排列)
8:宽:width 高:height
min-width:最小宽度 min-height:最小高度
max-width:最大宽度 max-height:最大高度
9:名字:div里加class
10:颜色:background-color 背景色 color 字体颜色
11:居中:上下 margin 0 浏览器居中 auto
12:浮动:float (属性值:left左浮动 right 右浮动 none 不浮动 )
(清除浮动:clear :both left right)
13:调整字体大小:font-size :(1-7) 20px
font-weight:bold normal lighter 100-900 字体粗细
有颜色:color face/family 字体 align(left right top botton )
14:文字居中:text-align:center left right justify (多行文本两端对齐)
单行文本两端对齐:( 第一步:给一个固定宽度
1.利用display:flex,主轴子元素排列方式,采用 justify-content: space-between;
2.利用text-align-last: justify;采用最后一行两端对齐方式 )
15:调整字体颜色:color:red rgba(225,225,225,0.5)
16:字体垂直居中:line-height :50px 或者 vertical-align: middle;
默认基准线:baseline
17:垂直上升下降; marght-top( 盒子会出现高度塌陷:激活 BFC )
18: 行内标签/行内块:span 双标签 字体倾斜:i em italic
置换元素:input select img
19:字体垂直上升下降:padding-top
定位:position:relative相对定位 absloute 绝对定位 fixed 固定定位
position: sticky粘性定位 ; {上下:top 左右:left right 宽高:w h}调整
20:字与字之间半个字的距离:  字与字之间一个字的距离:&emsp ®
&trade < > © 版权 商务保护 大小写
21:风格·样式:style type
22:取消ul li标记点:list-style:none; 需要加*{marght:0;padding:0;}通配符
23:边框:border:1px solid color 实线:solid 虚线:dashed hr ( color width:50% size no shaade=no shaade)
设置0.5px的边框:
border: 1px solid gray ; transform: scale(0.5);
24:设置字体:font-family font face
25:字体加粗:font-weight {bold} {boider 600-900} normal正常
b strong (后者更具有语义化,强调作用)
26:字体倾斜:font-style:italic 字体倾斜 oblic 斜体
27:设置背景颜色:background-color 设置背景图片:background-img 调整背 景图片的位置:background- position:x y;背景复合属性:
background: url((路径) red no-repeat center center/200px 200px );
28:文字的修饰符:
text-decoration 删除线:line-througn 下划线:under-line 上划线:over-line
29:文本缩进:text-indent:2em;(首行缩进)
30:修改li标记:方块:square 空心圆:circle list-style:{在前面插入的标签} 实心 ⚪:disc;{这些事无序列表的属性} list-style-image:用图片作为标签 inset/out 位置
<!-- 设置有序列表的前缀:{type:a A i I} {颠倒:reversed} 倒转-->
伪类选择器 link激活 visvied 访问 hove:悬浮r active 点击后 : target目标
input type(text submit password button value tel search rang date datetime year month week )
31:引入外部css的样式表:{需要外部的引入}link rel=“stylesheet” href 或者 @improt ulr (地址) 但是后者加载速度慢,存在不足)
32:水平线:{可以设置颜色 color 可以设置粗细 size width } hr 如下
33:有序列表标签:ol li (type 1a、AI start 数字顺序 颠倒 resrved)
34:超链接标签: a href:需要跳转的路径 取消超链接的下划线:text-decoration
锚点作用 加特定id,通过跳转实现 页面跳转 通讯录 目录等 # 重点
35:换行:br 强制换行 或者转换为块元素
36:加粗:b 倾斜:i 强调:em 标注:strong 版权:©; 注册:® 小于: <:>
37: <input type="text"> 搜索框 submit button value password
38:背景图:background: url(插入图片路径) no-repeat; 色块透明度:
opacity:写需要的数值 0.1-0.9
背景色:background-color 设置背景图的重复:background-repeat:no-repeat 不平铺
设置背景图的位置:background-position :数值 这些属性都是可以合并在一起写
39:背景尺寸大小:background-size: 100%;
40:自定义列表:dl dt :{上图下文}插入图片 (问题) dd:里面写入文字(答案)
51: <!-- 表格: -->
<!--表格的标签及属性>
table:
Width、height 宽高(单位是像素或百分比)
align 对齐 { left right}
border 外边框 sloid dashade
bgcolor 背景色
cellspacing 单元格间距(单元格和单元格的距离)
cellpadding 单元格边距(表格边框与内容的距离)
tr属性{横列}:
Align 水平对齐
left/center/ right
valign 垂直对齐
Top(上)/middle(中)/bottom(下)
bgcolor 背景色
td{竖列}的基本属性
Width、height 宽高(单位是像素或%)
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并
rowspan 垂直合并
表单的标签:form (起到数据接受作用)
会自动生成tbody ,存在选择器问题 可用后代选择器空格
表单元素中输入的属性:常用属性有type(类型)、name(名称)、value(值)、checked(默认选中)
<input type="submit" name="a" value="点我干啥" checked> cehnecked 默认选择
表单的属性输入:
1:文本框格式: 姓名:<input type="text" placeholder="请输入您的姓名" 占位符
2:密码框格式:<p>密码:<input type="password" placeholder="请输入密码"></p>
3:单选框格式: {需要的问题在前面加}<input type="radio" name="a"{需要几个就写几个} {默认选项标签;checked}
4:复选框:<input type="checkbox" {跟单选框的格式一样,参考单选框}
5文件上传:<input type="file">
6:提交按钮:<input class="a" type="submit">{可以在style里调宽高等的格式}
7:重置按钮:<input type="reset">
8:图片域:<input type="image" src="./cn-cs6-ps-marquee-1440x600.jpg">{src里加入图片的路径}
9:下拉列表:<select name="" id=""> <option>北京</option>{双标签 select在上面 option被包着}
10:文本域标记及属性: <textarea name="" id="" cols="10" rows="5"></textarea>
11:电话号码: <input type="tel" pattern="[0-9]{11}">
12:网址:<input type="url"/> <input type="submit" value="提交">
13:邮箱;<input type="email"/> <input type="submit" value="提交">
14:数字的样子:<!-- step(步长)属性值倍数 max最大值 min最小值 -->
<input type="number" max='3' min='1'/>
<input type="submit" value="提交">
15:时间: <input type="date"/> <input type="submit" value="提交">
16:颜色: <input type="color">
17:提示文字之间的距离:.名字:{letter-spacing}
18:提示文字的颜色:.名字::-webkit-input-placeholder
更改鼠标的样式:cursor:需要的属性;
属性:需要帮助属性:{help}
正在繁忙属性:{wait}
精确选择:{cursor:crosshair;垂直调整{s-resize} 水平调整{w-resize}
斜线的调整:{se-resize} 反斜线{ne-resize}
移动光标样式:{move}
文本的选择光标:{text}
小手样式:{pointer}
52:字体加粗:font-weight:100 4000 700 -900是加粗 normal lighter bold bolder
53:调整字体:font-family
54:字体倾斜:font-style:italic; oblique 斜体
HTML5新增的属性:
1:表单 2:画布 3:影音 4:视频 5:本地存储
6:地理位置 7:媒体查询 8:css新特性 9:离线缓存 10:拖拽re-size
移除:1:纯表现元素,big font
2:对可用性产生负面影响的一些元素
1:section:这可以表达书本的一部分或一章,或者一章内的一节
2:header:页面主体的头部。并非head元素
3:footer:页面的底部{页脚},可以是一封邮件的签名所在
4:nav:到其他页面的链接集合
5:article:诸如blog,杂志,纲要等之中的一条独立记录aside main video audio
音频元素:
1:video元素:
1:自动播放:autoplay
2:音频路径:src
3:规定浏览器应该为音频提供播放控件:controls
4:循环播放:loop
5:可以直接设置宽·高
2:audio元素:
1:自动播放:autoplay
2:音频路径:src
3:规定浏览器应该为音频提供播放控件:controls
4:循环播放:loop
5:属性规定是否在页面加载后载入音频:preload="auto"
<video src=" " controls autoplay loop muted > muted 静音属性 </video>
一·移动端:
1.取消移动端的a标签再点击时候出现的背部阴影
-webkit-tap-highlight-color:transparent;.
2.禁用长按页面时的弹出弹框:
-webkit-touch-callout: none;
尾部:
以上就是今天要讲的内容,本文仅仅简单介绍了基础属性的使用, 关于html和css 的属性还有很多,及时补充完善.