昔洛 的个人博客

Bug不空,誓不成佛

目录
记录我的黑马前端学习经历----第一天
/        

记录我的黑马前端学习经历----第一天

前言

    我是一名即将大四毕业的学生,回顾大学几年的学习经历,发现自己的学习内容都是零零散散,面对毕业后的工作压力,自己也是万般纠结,自己也喜好计算机编程,所以打算还是继续选择这个行业走下去,不过首先要熟练一门技术以至于毕业后可以找到工作独自生活,大学的选择是传智播客,前届的学长学姐也有去黑马进行过培训,我自己也从传智的教材中深得不少体会,为了接受一个系统化的教学模式,我最终还是选择来到北京的传智播客进行前端的开发学习,这里的学习氛围和环境我感觉是很不错的,这里的老师,同学也都非常热情,容易交流,虽然班级有降级100人,但丝毫不会对个人的学习有任何影响,相反,学习氛围更是热烈,班级的座位也是根据报名的顺序进行排位,我还是比较幸运的,我本以为学习编程的小姐姐会很少,但是来了这里后学前端的女生也是不少的,而我也非常幸运的和漂亮小姐姐坐同桌23333,虽然我并不太会说话,,,,好了,离学业结束还有4个多月,每天的学习我都会进行总结记录,以便于以后能再回顾我学习it的经历。

7月22日 学习的知识点

  • 常见浏览器内核
  • Web 标准
  • sublime 几个常用的快捷键
  • 标签分类
  • SEO 简介
  • 一些常用的文本格式标签
  • 图片标签
  • 超链接标签
  • 其他

1、常见浏览器内核

    当今互联网的浏览器非常多,主流知名的浏览器内核有:blink(谷歌浏览器内核)WebKit(Safari浏览器内核)Trident(IE浏览器内核)gecko(火狐浏览器内核)

2、Web 标准

    Web 标准主要是为了服从 w3c 和其他标准化组织制定的一系列标准的集合而言,其主要分为三个内容标准即:结构标准(structure)表现标准(Presentation)行为标准(Behavior)

3、sublime 几个常用的快捷键

    sublime 是现在主流的方便、快捷,轻量,高效的开发编辑器之一,熟练其中几个快捷键可以提高编写代码的效率

tab 补全代码
ctrl+shift+d 快速复制一行
ctrl+shift+k 快速删除一行
ctrl+shift+↑(↓) 快速上移(下移)一行
ctrl+k+b 隐藏(显示)侧边栏
ctrl+L 快速选中一行
ctrl+h 查找替换
ctrl+f 查找
ctrl+鼠标单击 集体编辑

sublime也提供嵌套标签的快速创建如表格,列表等
table>tr*3>td*3 按下tab可以快速创建三行三列的表格
ul>li*3 可以快速创建有三个选项的下拉菜单
其他的嵌套标签均可使用该方法
>表示嵌套关系;*表示数量.

4、标签分类

    对于 html 的标签来讲,主要分为两类,就是单标签与双标签。
单标签:如<br/>(换行)、<hr/>(一条线)
双标签:只成对出现的标签,如<html></html>、<head></head>、<p></p>等

5、SEO 简介

    SEO简单来书就是搜索引擎的优化,一般来说写网页只允许有一个<h1>标签,否则对网页的搜索来说并不是优化很好。

6、一些常用的文本格式标签

常用的文本格式标签有如下几个:
加粗:<b></b>,<strong></strong>,XHTML 推荐使用 strong 效果如下:粗体
斜体:<i></i>,<em></em>,文字以斜体方式显示(XHTML 推荐使用 em)效果如下:斜体
删除线:<s></s>,<del></del>,文字以加删除线方式显示(XHTML 推荐使用 del)效果如下:删除线
下划线:<u></u>和</ins></ins>,文字以加下划线方式显示(XHTML不赞成使用u)效果如下:下划线

注意:b i s u 只有使用没有强调的意思,strong em del ins 表示语义更强烈,其语义的应用可以用于只能语音的发音。

7、图片标签

图片标签用来在网页显示出一张图片,其标签名为<img/>
属性有如下:

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素(XHTML不支持%页面百分比) 设置图像的宽度
height 像素(XHTML不支持%页面百分比) 设置图像的高度
border 数字 设置图像边框的宽度

8、超链接标签

超链接标签可以说一个网站里是必有得,它具有跳转页面的功能其基本标签写法如下:
<a href="#"></a>,’#’表示空链接。
其属性有如下:

属性 描述
href 跳转的位置 链接地址
target 跳转方式 _self(当前页)_blank(新建页面)

超链接标签也可和图片标签内嵌进行图片超链接的跳转代码如下:

<a href="https://www.baidu.com" target="_blank">
	<img src="https://www.baidu.com/img/bd_logo1.png?where=super" width="100px" height="50px"/>
</a>

效果如下:


ps:在<head>标签里面可以添加<base target=“_blank” />设置默认连接跳转方式

锚点:利用 a 标签可以对网页的任意位置进行跳转定位,步骤有两步
1.设置锚点,需要设置的锚点标签需要设置 id 属性,例如设置 h1 标签为锚点
<h1 id="top"></h1>
2.设置跳转,建立a标签,代码如下
<a href="#top">跳转到本页面前言处</a>
效果如下:本篇文章第一行的大标题已经设置了锚点位置,可以进行跳转到前言位置。
点我跳转

9、其他

<!-- 声明浏览器采用的 html 版本 -->
<!DOCTYPE html>
<!-- 告诉搜索引擎的网页语言类型,en英文也支持中文,中文标准 zh-CN -->
<html lang="en">
<head>
	<!-- meta 元信息,元信息主要给搜索引擎和浏览器看。 -->
	<meta charset="UTF-8">
	<!--
		ascll
		ansi
		unicode 万国码
		gb2312	简体中文
		big5	繁体字
		GBK		所有中文字体
	-->
	<title>Document</title>
</head>
<body>
	<h1>我是一个大标题</h1>
</body>
</html>
(゚д゚)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃
评论
歌名 - 歌手
0:00