前端笔记1

Html基础信息整理

一.     Html基础框架

1. !doctype html 申明类型 html(html5)语言

2. <html></html> 根标签

3. <head></head> 头标签 用于存放不可显示标签

4. html lang=”en” 其中lang=”en” 可以省略

5. <meta> 单标签

charest = “UTF-8″  UTF-8字符集类型 含国际通用语言字符

name=”Keywords” content=”朱雀,潭州,前端,标签讲解” 关键词 用于SEO搜索引擎抓取

name=”Description” content=”描述内容” 网页内容描述 SEO

6. < title> 网页标题

7. <body></body> 身体 可视化标签

二.  常用标签

1. h1~h6 标题标签1到6权重逐渐降低 字体也变小

h1标签 主标题权重最大,一个页面只能出现一次;超过一个seo搜索引擎算法会认为是作弊导致网站降级 不能收录.

2. P 段落标签

3. span 文字标签

4. br 换行标签(单标签) [不常用]

5. b 加粗标签 [不常用]

6. strong 加粗并强调 加权重 [慎用]

7. i 斜体标签 (现在一般用于图标制作)

8. em 斜体并强调 加权重 [慎用]

9. del 删除线标签

10. sup 上标标签

11. sub 下标标签

12. a 超链接标签

href 指向超链接文件的页面地址

target 中_blank 在新页面中打开

_self 在当前页面打开

<base target= “_blank” > 全局设置新页面打开

有跳转 下载 锚点功能

1)跳转

href = ’02-img标签.html’

2) 下载

<a href=”url” download=”名称”>

url 文件路径 download 默认保存文件的名称

邮件

<a href=”mailto = XXX@qq.com”>

3)锚点

<a href=”#name1”>

给要跳转的位置 设置id=”name1”

给要跳转的位置加<a href=”” name=”name1”>

13. 图片标签

<img src=”” width=’’ height=’’alt=’’>

图片四要素 必填

src 图片路径(相对路径 绝对路径 网路路径)

width 图片宽度属性 100px

height 图片高度属性 100px

(如不写宽高,浏览器会自动计算图片属性宽高,影响速度;

如只写宽高中的一个,如图片原属性200*300width=100px height不写 ,

则height会自动等比缩放为height= 150px;会造成图片失真).

alt 图片描述 SEO搜索机制 如“汽车”

title 标题属性 鼠标移动到图片会显示