前言
随着互联网技术的不断更新发展,互联网相关人才也需求不断增加,在众多工作中关于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 的属性还有很多,及时补充完善.
4853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
