前端初步--html

前言

提示：记录自己学习前端的一些历程，为便于显示,一些标签前留有空格，实际操作需删去空格。
开发工具：sublime

---

一、前端是什么？

前端是将效果图生成网页，利用html+css+js等技术，主要有PC端和移动端两种。

二、认识网页

1.网页是由文字、图片、输入框、视频、音频、超链接等组成

2.浏览器：实现上网的客户端

推荐浏览器：IE 火狐 谷歌 猎豹 Safari Opera

3.常用快捷键

ctrl+C/V/X/A/S/Z 复制/粘贴/剪切/全选/保存/撤销一步
windows+D/E/R 返回桌面/我的电脑/打开运行
alt+tab 切换文档
ctrl+tab软件文档间的切换
F2重命名
F5刷新页面

三、认识html

1.结构标准

提示：html与htm是一样的；后缀名不能决定文件格式，只能决定打开文件的方式

2.标签分类

单标签

（1）注释标签ctrl+/

（2）换行标签 < br />

（3）水平线标签 < hr />

双标签

（1）段落标签 < p>文本内容< /p>
特点上下自动生成空白行，< br>换行不生成空白行

（2）标题标签< h1>文本内容< /h1>
可从h1到h6取值，h1只能有一次

（3）文本标签 < font>文本内容< /font>
可以是字体颜色、大小等

总体代码：
< !DOCTYPE html>
< html>
< head>
< title>< /title>
< /head>
< body>
< !-- 你好明天 -->
< !–换行标签 -->
从来没有人 < br />能够给他指引
< !-- 水平线标签 -->
< hr>
< !-- 段落标签 -->
< p>我对着夜幕思念 模糊的脸,< /p>
< !-- 标题标签 -->
< h1>虚幻到无法相见，在梦里相见< /h1>
< h2>虚幻到无法相见，在梦里相见< /h2>
< h3>虚幻到无法相见，在梦里相见</ h3>
< h4>虚幻到无法相见，在梦里相见< / h4>
< !-- 文本标签 -->
< font size=“8” color=“blue”>第一个节拍起 每个音符都响在心里< /font>
< /body>
< /html>

浏览器显示：

文本格式化标签

文本加粗标签< strong>< /strong> < b>< /b>
文本倾斜标签< em>< /em> < i>< /i>
删除线标签 < del>< /del> < s>< /s>
下划线标签< ins>< /ins> < u>< /u>
注意工作中常使用都是每类别中的第一组

总体代码：
< !DOCTYPE html>
< html>
< head>
< title>< /title>
< /head>
< body>
< !-- 文本加粗标签 -->
< strong>豆浆< /strong> < b>豆浆< /b>
< !-- 文本倾斜标签 -->
< em>油条< /em> < i>油条< /i>
< !-- 删除线标签 -->
< del>炸鸡< /del> < s>炸鸡< /s>
< !-- 下划线标签 -->
< ins>奶茶< /ins> < u>奶茶< /u>
< /body>
< /html>

浏览器显示：

图片标签

< img src=""/>
src图片来源
alt替换文本
title提示文本
注意图片要与html脚本显示需注意相对路径

浏览器显示：

3.sublime操作

通过文件选项卡中的打开文件夹新建文件，便于寻找
通过文件选项卡中的查看–布局，对当前视图进行重组
html:xt+tab 得到html结构代码
tab 补全标签代码（有一些特殊的无法通过此途径补全）
ctrl+shift+D 快速复制一行
ctrl+shift+K 快速删除一行
ctrl+鼠标左键单击 集体输入
ctrl+W 关闭当前页面
ctrl+H 查找替换
ctrl+F 查找
ctrl+L 快速选中一行
ctrl+shift+（向上或向下箭头) 光标定位行，快速整体移动
ctrl+shift+D快速复制（将光标定位至要复制文字后面）