相信每个前端工程师初识前端之时,最先接触的都是html吧!
html的全称是hyperText markup language, 超文本标记语言,在网页中所有的文字,图片,架构等都是由html来编写的。
需要记住的是,html并不是一门传统意义上的计算机,他是通过无数个标签组合而成的。(<p></p>)
编写html需要相应的编辑器,笔者推荐Sublime(一直在用) 或者 VS Code(之后发现的编辑器,插件功能很强大)。
我们要在编辑器内创建一个文件来写代码
文件的后缀一般为html,我们可以在编辑器中直接创建html文件,也可以在文档内写好后通过改变后缀将其变为html文件(别的东西浏览器不识别哦)
通常的格式是
<html>//根标签
<head>//头部
<title></title>//标题·(可显示)
</head>
<body>//内容主体
</body>
</html>
如果你的浏览器不识别中文或者你想使用的其他语言(一般出现在版本较低的浏览器中),我们可以在head标签里加入<meta charset = “utf-8”>。
utf-8是unicode的升级版本,可以让浏览器识别各国语言(其他详情请谷哥度娘html编码集)。与此同时,你也可以在根标签<html>里面来加一条属性lang 来告诉搜索引擎爬虫我们网站使用什么语言写的,比如zh-cmn是中文 <html lang=” zh-cmn”>
既然介绍到这,那么我来说说html里的几个常用标签
1.div标签 <div></div>
最常用的标签之一,用法很多,(我)常用作把一零碎的标签整合为一个整体,是一种结构标签。
2.p标签 <p></p>
段落标签,会独占一行
3.span标签 <span></span>
用来盛放文字或者一些小物件。
4.img标签 <img src=" ">
在src的地方输入地址可引出图片
如: <img src="https://gw.alicdn.com/tps/TB1lGouNFXXXXX1XFXXXXXXXXXX-190-33.png" title="11">
5 a标签 <a href=" "></a>
用于引入地址或链接
6..标题标签 h1-h6
标题标签的作用是着重显示文字,一般用在标题上,它会将里面的文字加粗放大并且独占一行。(h1最大)
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
7.strong标签 <strong></strong>
将里面的文字加粗。
8.em标签 <em></em>
作用是将里面的文字变成斜体。
9. del标签 <del></del>
在里面的文字的中间画一条横线,表示删除,常用于各种促销活动或纠错。
10.address 标签 <address></address>
地址标签,它会将里面的内容变成斜体并且独占一行。
这里只介绍了一部分标签和内容,其余部分在之后的章节会再做总结。
最后,最为前端相关人士,我们有必要了解一些浏览器的基础相关信息
首先,我们必须知道的是,当今的主流浏览器有五种
ie Windows自带浏览器,当年敢于颠覆w3c的存在
chrome 谷歌浏览器,测试首选,前端必备
firefox 火狐浏览器 ,非常稳定不易崩溃
opera 这是欧洲的一个浏览器,特点是兼容性很强
safari 苹果公司旗下浏览器,在苹果系统下是很优秀的浏览器,已停止对windows系统的支持。
关于浏览器,它的组成是外壳加内核,而我对主流浏览器的定义就是拥有一个自主研发功能强劲内核的浏览器。
浏览器 内核
• ie trident
• chrome Blink/webkit
• firefox Gecko
• opera presto
• safari webkit
第一次正式发文,不足之处望见谅,日后会不断改进