前端html5基础

HTML

HTML概述

1.HTML(HyperTEXT MarkUp Language)
"超文本标记语言",它是制作网页的标准语言 HTML不区分大小写
2.标签
由尖括号包围,比如 , 通常成对出现如<title> 不能交叉嵌套 并且要注意缩进 如:

                外层:父元素
              内层
 
              内层为同级
 

一个标签可以有多个属性,且与属性先后顺序无关

HTML文件结构

文件结构为:.htm .html 文件

                头部:浏览器,搜索引擎所需信息
       
   
 
               主体:网页中包含的具体内容
 

HTML5文件结构

           文档类型:符合HTML5标准
         lang属性:en英文zh中文
      
   :元数据 用于指定关于HTML文档的信息  chraset属性:字符集编码方式   浏览器:UTF-8 是国际编码
  

              主体:网页中包含的具体内容

字符集与编码

ASCII 数字,英文字母,符号进行了编码
GB2312 简体中文
Unicode 所有语言
UTF-8 所有语言,占用空间更小

乱码问题

  • 源文件保存时的编码方式
  • 源文件声明

不一致时就会出现乱码

HTML标签(1)

标题h1~h6

即分级标题,一个页面建议只有一个h1

一级标题 heading 1

一级标题 heading 2

一级标题 heading 3

一级标题 heading 4

一级标题 heading 5
一级标题 heading 6
这集里正文文字

段落p

段落内容

由于对html源文件会自动去掉空格空行,对于源代码连续多个空格空行只生成1个空格空行
空行解决方式

段内换行br


单独出现的标签,直接结束

这是段落。
换行,多个则为空行。

空格解决方式

空格字符  ;

 ;
特殊字符 全小写
使用该字符为增加空格的方法


 

连续三个空格 ; ; ;

更简单解决方式

预留格式pre

 

定义预格式化的文本,文本总的空格和换行符会被保留
pre标签很适合显示计算机代码


 
内容格式不会变,空格空行会保留
 

行内组合span


组合行内元素,以便通过CSS样式 来格式化 需要单独标记出来的信息所用

html部分

需要特殊标识出来的文字放在该标签内

在学到CSS利用代码对该标签进行设置如: