2020.5.25作为一只前端程序猿的第一天

一只前端程序猿的第一天

首先是一段超简单超有味道的代码：

有奥力给 有指 有奥力给 有指

html
超文本标签语言包含：文本、图片、链接、音频、视频

五大浏览器and内核
Trident（IE内核）、Gecko（火狐）、webkit（苹果Safari）、Chromium/Blink（谷歌）、Presto（Opera）

web标准好处
1.让web发展前景 美好 宽广广阔 2.内容能被更广泛的设备访问 3.更容易被搜索引擎搜索 4.降低流量费用 5.提高页面速度 6.利于网站维护

结构标准：对网页元素进行整理和分类 html
样式标准：网页元素的版本、颜色、大小等外观样式 css
行为标准：网页模型的定义及交互的编写 js

html标签：作用所有的html中标签的一个根节点
head标签：存放title、meta、base、style、scirpt、link，必须要设置title
title标签：让页面拥有一个属于自己的标题
body标签：页面的主体，用于存放所有的html标签，如p、h、a、u、i、s、em、del、ins、strong、img

单标签
<标签名 />
如
（强制换行）

---

（水平线）

html标签关系
嵌套
并列 body head

字符集
Utf-8 最常用的字符集编码方式，包含全世界所有国家都需要的字符 ，还有gbk和gb2312
Gbk 包含全部中文字符

标题标签 标题文本尽量少用h1，多用于logo
段落标签

文本内容

注释：分段用
水平线标签（单标签）

---

在网页中显示默认样式的水平线
换行标签（单标签）
网页中强制换行

div span标签
div span没有语义，是网页布局的两个盒子
用来分割、区分网页，很多个div组成一个网页
Span 跨度、跨距、范围，行业元素

这是头部

今日价格

文本格式化标签
;文字以 粗体 显示，html推荐使用strong
;文字以 斜体 显示，html推荐使用em
;文字以加删除线方式像显示，推荐使用del
;文字以加下划线方式显示，推荐使用ins

Image图像

scr属性用于指定图像文件的路径和文件名
标记属性
属性 属性值 描述
scr URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比） 设置图像的宽度
height 像素（XHTML不支持%页面百分比） 设置图像的高度
border 数字 设置图像边框的宽度

链接标签
anchor 在html中创建超链接
文本或图像
target：用于指定链接页面的打开方式，self/blank：self默认值；blank在新窗口中打开
如未确定链接目标时，通常将href属性值定义为"#"（即href="#"）表示暂时为一个空链接

锚点定位
通过创建锚点链接，用户能快速定位到目标内容
1、使用”a href=”#id名”链接文本/a”创建链接文本. a href=”#nb”
2、使用相应的id名标注跳转目标的位置 id = “nb”
例：文本文字

文本文字

base标签
base可以设置整体链接的打开状态，可以设置所有的都在新窗口打开，写标签中

特殊字符标签
空格符：&nbsp；
小于号：&lt；
大于号：&gt；
和号：&amp；

注释快捷键
Ctrl+？

路径（相对路径、绝对路径）
相对路径：1、图像文件和html文件位于同一文件夹
2、图像文件位于html文件的下一级文件夹
3、图像文件位于html文件的上一级文件夹，在文件名之前加“…/”，如果是上两级，则"…/…/"以此类推
绝对路径：“D：\web\img\logo.gif”或完整的网址，如“http://www.itcast.cn/images/logo.gif”