前端小记(一)
这篇博客是结合网易云课堂教程所写
一. Sublime出现的小问题和小应用
1.关于package control组件
在通过群里的安装包下载sublime以后,就按照指引去安装package control组件,但我这里的console仿佛抽了风,复制那个口令以后鼠标在应用里一直转圈圈,还显示未响应!这和指引上所说的左右摆动的小东西完全不一样啊!我一度怀疑自己的安装是否正确,就按照指引在sublime官网上又下载了一次。好家伙!也是未响应。有一天又尝试输入口令,然后把它忘记了,就去看HTML5教程去了,再打开sublime就有了指引上所说的package control。不过如果安装组件失败,怕是也可以按照如下方法安装吧。
其他方法:
打开sublime界面,按Ctrl+shift+P组合键,然后可调出以下界面:
搜索选择第二个选项install package control,然后直接点击。
安装好后就会有如下提示信息,点击确定即可。
最后看到以下组件显示就表示安装组件成功了。
(ps:这是从网上CV过来的)
2.关于查看已安装插件
哦对了,不知道大家有没有看自己安装的插件的习惯,这是查看sublime里边安装的插件的方法:
按ctrl+shift+p,输入package,选择list packages,就看到了。
或者直接查看Installed Packages目录。
3.编译前先Ctrl+S保存一下!!!
index:索引/主页 .html:保存为HTML5网页后缀
二. HTML5的基本格式
<!DOCTYPE html> 文档类型声明
(告诉浏览器所查看的文件类型)
<html lang="zh-cn"> 表示HTML文档开始(双标签,中文cn,英文en)
<head> 包含文档元数据开始
这可以修改页面的语言
`<hteml>`
(**元数据**(**Metadata**),又称**中介数据**、**中继数据**,为描述[数据](https://baike.baidu.com/item/数据/5947370)的数据(data about data),主要是描述数据[属性](https://baike.baidu.com/item/属性/1405051)(property)的[信息](https://baike.baidu.com/item/信息/111163),用来支持如指示存储位置、[历史](https://baike.baidu.com/item/历史/360)数据、[资源](https://baike.baidu.com/item/资源/9089683)查找、文件记录等功能。元数据算是一种[电子](https://baike.baidu.com/item/电子)式目录,为了达到编制目录的目的,必须在描述并收藏数据的内容或特色,进而达成协助数据检索的目的。)
元数据包括<link>、<meta>、<noscript>、<script>、<style>、<title>等。这些用来给浏览器提供信息,这些信息在页面不可见。
<meta charset=“utf-8”> 声明字符编码
这些是属性及属性值哦!
我觉着这里的字符编码要和网页的一致,就类似于咱们当时那个学生管理系统的文本文档的编码要与编译器相一致,否则就会出现乱码的问题。
<title>文档的标题</title> 设置文档标题
(浏览器左上角的标题)
</head> 包含文档元数据结束
<body> 表示HTML文档内容
(页面上所有可见区域都要在里边)
<a href=“http://baidu.com”>(头标签)百度</a(尾标签) 一个超链接元素
(a元素即一个超链接)
</body> 表示HTML文档内容结束
</html> 表示HTML文档结束
注意:每写完脑壳以后让编译器自己补齐尾巴吧
快速补齐脑壳和尾巴的方法就是写下标签再按下Tab键自动补齐
这是一位博主总结的sublime快捷键,前人总结了这么多,我们怎么好意思不看呢?
对了,还有Ctrl+?可以注释掉暂时不要的内容
三. 元素标签
元素分为单标签(空元素)和双标签
单标签一般用于声明或插入某个元素
双标签一般用于设置一段区域的内容,里边包含内容的标签
元素内部还可以设置属性和值,一个元素里面可以设置多个属性,当然也可以自定义属性。
找到一个挺全的参考手册
四. 文本(我只写了一些方便记忆的替换方法)
<br>=c中的\n
<wbr>=英语中写长单词,换行不美观,不换行写不下用的连字符(-)
<i>/<em>/<var>=英语中写特指名词书名地名人名等
<s>/<del>=Markdown语法中的删除线~~删除~~
<u>/<ins>=加下划线
得在 <code>表示计算机代码片段;
英文下<samp>表示程序或计算机的输出;
才可 <kdb>表示用户的输入;
众所周知,<rp><rt>是双生子
<mark>=大家都有的黄色记号笔
大家还是看上面大佬的参考手册吧,总结得炒鸡棒!!!
五. 超链接和路径
1.超链接:
没错,大佬总结又来了厉害
2.学生管理系统中造成文件打开失败的相对和绝对路径:
相对路径是相对于链接页面而言的另一个页面的路径,但其条件是必须文件都在一个磁盘或目录下。绝对路径是直接从file:///磁盘符开始的完整路径,应是一个一个的目录层次,找到相应的文件。
目录语法(不太懂)【你以为我在第五层,其实我在第三层?】
3.锚点设置:
链接内容
锚点(点链接直接跳转)一般用全局变量name或id
六. 分组元素
请看大佬总结
(分组元素主要用于对网页内容进行归纳)
七. 表格元素(都是双标签)
<td>是普通单元格 <th>是标题单元格
对<td>里添加colspan=“数字”可以横向合并单元格
对<th>里添加rowsoan=“数字”可以纵向合并单元格
设置列的方法:(群组)
1.`<colgroup style="颜色;" span="行"></colgroup>`
这个列的设置比较死板,设置几行就是左数几行都是那个颜色
2.<colgroup>
<col>(占位符)
<col style="颜色;">
</colgroup>
这个看起来更灵活更方便一些
(表格元素是对网页中查入的表格进行修改)
八. 文档元素(都是双标签)
<header> 网页的头部
<nav> 网页的导航部分
<h1> 大标题
<h6> 副标题
<h1><h6>可以一起放在<hgroup>里边
<section> 网页的主题部分
<article> 添加一个独立成篇的文档(类似body的作用,其中可以包含头体尾)
<aside> 侧栏导航(类似目录,其中也可放导航)
<footer> 网页尾部,可以放友情链接和版权声明等
(文档元素是对整个界面进行整理美化)
详情请点击:https://blog.csdn.net/xiaoxiaobukuang/article/details/78184471
九. 嵌入元素(可以做一些花里胡哨的东西)
主要是图片的嵌入,请看大佬总结
呃有尝试去看课程里的Dreamweaver,但是价格劝退…
十. 音频和视频
十一.表单元素(这个好好玩!)
主要写网页中的输入框啥的,建立输入端
<value>
是在输入框内默认有东西,默认提醒值
(表单元素用于用户输入框的美化,及进入界面前的信息验证,通过学习终于知道以前那些网页注册新用户的时候,设置密码时密码长度的更改和那些默认选择的来源)
默认选项的设置方法:
1.<option value="数字">苹果</option>
2.<option value="数字" label="香蕉">
3.<option value="菠萝">
十二.全局属性和其他
写在后面的话
HTML的标签、元素和属性啥的太多了,一时半会儿也是难以背会,但是背到头秃背到自闭也背不会。就像一位学长所说,难道你能背会字典上的所有字吗。妥妥的不能!所以啊,我们要在掌握一些日常所必须的字的情况下,能知道不认识的字是字典上的字并且懂得去查字典就好,在有不太懂得的时候查一查,看看大佬总结,就很完美。而且笔记是加入自己的理解,如果有什么不对的地方,欢迎大家告诉我,让我改掉这残缺的不完美。