HTML结构与基础

71 阅读2分钟

标签

单标签

  • 不带闭合标签的标签,比如<meta>标签,<hr>标签,<input>标签、<img>标签

双标签

  • 带闭合标签的标签,比如<p>标签、<div>标签

标签属性

  • <标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
  • 标签可以有多个属性,必须写在开始标签中,位于标签名后面
  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
  • 任何标签的属性都有默认值,省略该属性则取默认值
  • 属性采用键值对的书写方式 key="value"

网页结构

网页声明

  • <!DOCTYPE html>
  • html5标准网页声明,位于文档中的最前面的位置,处于所有标签之前

网页最外层标签

  • <html lang="en">
  • lang属性表示网页内容的语言类型,en:英语,zh-cn:中文,只跟浏览器的翻译有关

head标签

  • <head></head>,设置网页的基本标签,包含<meta>标签,<title></title>标签和<base>标签
  • <meta charset="UTF-8">,设置文档编码格式(文档编码格式应当和文件编码格式一致)
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">,http-equiv="X-UA-Compatible" 是一个文档兼容模式的定义,Edge模式告诉IE以最高级模式渲染文档
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">,用于指定用户是否可以缩放Web页面,并对相关的选项进行设定,initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异,通常情况下,设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面
  • <meta name="keywords" content="网页关键字">,网页关键字,用于SEO搜索引擎检索
  • <meta name="description" content="网站描述">,网站功能/内容的一个描述,通常用于推广,打广告等
  • <title></title>标签,网站的标题
  • <base>标签,为页面上的所有链接规定默认地址或默认目标,target属性值就是链接地址

body标签

  • 网页体,用于展示网页内容,与<head></head标签同级

网页三要素

  • <meta name="keywords" content="网页关键字">
  • <meta name="description" content="网站描述">
  • <title>网站标题</title>

编码规范

  • 英文符号输入
  • 引号要双边统一
  • 标签层级缩进一个Tab,IDEA默认为4个空格,可修改2个
  • 网页注释,不会在页面展示