Html部分

Html学习

## 个人学习整理,仅供参看

Html骨架

Html基本结构

DTD+html+head+body


<html>
    <head>
        网页的配置
    head>
    <body>
        网页的正式内容
    body>
html>

DTD

DTD:(Document Type Definition) 文档类型定义

HTML5 DTD

标明HTML文档遵循怎样的协议


head标签下常用的设置

meta部分
  • charset 字符集设置
    • UTF-8(通用字符集,一个汉字占3个字节)
    • GB2312(中文字符集,GBK,一个汉字占2个字节)
<meta charset="utf-8" />

SEO:(Search Engine Optimization, 搜索引擎优化)

  • 网页关键词和网页描述
<meta name="Keywords" content="页面的关键词1,页面的关键词2, 页面的关键词3" />
<meta name="Description" content="页面描述" />
title设置

设置网页标题

显示位置:浏览器标题栏

im a title

作用:搜索引擎收录网站时,显示的标题。可以吸引用户的点击量,合理的设置title是有必要的

body标签下常用内容

  • 标题标签(headline) h1,…,h6

标签类型:行级标签

<h1>
    h1标签
h1>
<h2>
    h2标签
h2>
<h3>
    h3标签
h3>

搜索引擎很看重

标签的内容,一般放置logo等重点内容

一般只能有一个,过多,所有的h1标签将都会被搜索引擎忽略

  • 段落标签(paragraph)

标签类型:行级标签

页面显示效果不换行

<p>
    段落标签
p>

不可嵌套 h系列标签和其他p标签

可以辅助换行

  • div标签(Division)(分割)

标签类型:块级标签

“DIV+CSS” 布局

常见的类名

区域 类名
页头 header
LOGO logo
导航栏 nav
横幅 banner
内容区域 content
页脚 footer

HTML5特性

  • 空白折叠现象
    • 文字与文字之间的多个空格、换行会被折叠成一个空格
    • 标签和文字之间的空格会被忽略
  • 转义字符
转义字符 意义
< 小于号
> 大于号
  空格(不会被折叠)
© 版权符号
<p>
    段落标签&tl;p>&tl;/p>是行级标签
p>
  • HMTL注释

给代码添加注释,方便日后阅读代码或他人阅读代码提供提示

附加总结(重点)

  • HTML是什么?
  • HTML骨架是什么?
  • DTD是什么?
  • 标签和段落标签、DIV标签要如何使用?
  • 网页字符集有什么区别?
  • SEO配置项,遵守规则?
  • HTTP(网页浏览工作流程)?如何被用户看见?

你可能感兴趣的:(前端,html)