前端视频HTML基础总结：

工具 Chrome谷歌浏览器（市场份额决定） sublime webstorm Photoshop切图
五大浏览器：IE、火狐Firefox、谷歌Chrome 、Safari 、Opera
浏览器内核分为渲染引擎和js引擎。内核的不同对网页的语法的解释不同，所以展示效果不同。
常见的浏览器内核：Trident（国内、兼容模式、ie浏览器） Gecko（Firefox的内核） Blink（Chrome） Webkit（Safari）
字符集gb2312国标，即中文简体 gbk国标扩，即加了繁体以后统一使用utf-8，因包括了全世界所有字符
语义是否良好：当去掉css，网页结构依然组织有序，并且有很好的可读性。（即知道哪个是重点，结构是如何）
为什么要分单标签和双标签：因为双标签是用来包裹内容的，一般不用包裹内容的都是单标签。
加粗标签<b></b> <strong></strong>：b没有强调，只是加粗。strong有，更加语义化
斜体标签：i和em em有强调作用，更加语义化
s和del删除线，推荐del
u和ins下划线，推荐ins
<img>两个属性：arc为图片显示失败替代显示内容，title为悬停显示内容，总是混淆
图片的宽度和高度设置一个就可以自动缩放，不用两个都设置
图片也可以有边框，border：“10px”
锚点定位：<a href="#live">3.个人生活</a> <h3 id="live">个人生活</h3> 点击就可以定位到h3标签
<base/>标签：使用原因：如果一个页面中有很多标签，每个都设置target=“_blank”会很麻烦，所以在<head></head>中加入<base target="_blank"/>即可让页面中所有的a链接都在新窗口打开。
特殊字符：< < > > @ &copy；
相对路径：上一级路径../ 例如src="../wo.jpg"
绝对路径很少用，因为换个电脑就不行了。例如
列表分：有序、无序、自定义，在li标签包裹的可以放其它标签，在ul和li之间最好不要放其它标签。
自定义列表：主要是为了对术语或者名词进行解释和描述，没有任何项目符号，比如：
主要用在网页最下面
table标签就是一个四方块，里面只有行和单元格的概念，没有列的
使表格居中：align=“center”
默认是有值的，所以要手动设置为0，例如：
文本居中：所有的td里加align="center"但是麻烦，给表格加align，表格居中，给tr加align，一整行内容居中
设置跨行rowspan和跨列colspan时，要确定好是跨行还是跨列。
<input type="button">按钮</input>这样就是一个普通的按钮。
<input type="submit">提交</input>这是提交按钮
<button>提交</button>这是提交按钮，因为默认type为submit
<input type="image"/>是图像形式的提交按钮。是提交按钮哦。
想按钮漂亮，可以设置图片形式的按钮。整个是一个图片
上传文件：type="file"
label为input来服务的，增强用户体验
如果不包裹着也行：
技巧：
打开工具，打开要保存代码的文件夹，就可以和文件夹保持同步，直接保存就行，不用每新建另存为文件夹
sublime快捷输入：直接输入标签名p tab补全；生成多个标签：div*3 ul>li*5 ；父子级：div>p ul>li*5>a五个li下都有a；兄弟：div+p dl>dt+dd ；带有类名或者id名字：div.demo div#two；input:password; bgc; h300;然后按下tab键自动补全
自动生成骨架：输入 html:5 或者 ! 然后按下tab键
右键网上的图片，可以选择复制图片地址。方便使用
换成中文全角，空格就是一个中文字的空格就可以调整对齐。
此文章为课程总结，若有侵权，请联系。

前端视频HTML基础总结：

猜你喜欢