前端基础笔记——HTML

前端学习笔记——HTML

  • HTML基础
    • 软件架构
    • 基本信息
      • 软件开发流程
      • 网页组成
      • HTML
      • 二进制扩展
      • 字符编码
    • 标签
      • 文档说明(doctype)
      • 设置网页字符集
      • 实体
      • meta标签
      • 语义标签
        • 布局标签(结构化语义标签)
      • 列表
      • 超链接
        • 相对路径
      • 图片标签
        • 图片格式
      • 内联框架
      • 音视频播放

HTML基础

软件架构

C/S架构,客户端/服务器,用户使用客户端,服务器负责处理软件的业务逻辑

  • 特点:
  • 1.软件使用前必须得安装
  • 2.软件更新,服务器和客户端得同时更新
  • 3.C/S架构的软件不能跨平台(windows/iOS/android/…)使用
  • 4.C/S架构的软件客户端和服务器通信采用的是自有协议,相对来说比较安全

B/S架构,浏览器/服务器,通过使用浏览器访问网页的形式来使用软件

  • 特点:
  • 1.软件不需要更新,直接使用
  • 2.软件更新,客户端不用更新
  • 3.软件可以跨平台,只要有浏览器
  • 4.客户端和服务器之间通信采用的是通用的HTTP协议

基本信息

软件开发流程

(以前的传统)网页设计师根据需求设计网页—>前端工程师将设计做成静态网页—>后台工程师将静态网页修改为动态网页

网页组成

网页组成:结构+表现+行为(W3C标准)
结构:HTML用于描述页面的结构
表现:CSS用于控制页面中元素的样式
行为:JavaScript用于响应用户的操作

HTML

HTML(Hypertext Markup Language)超文本标记语言

二进制扩展

8bit = 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb(特字节)
1024tb = 1pb

字符编码

编码和解码所采用的规则称为字符集(charset)
编码和解码采用不同的字符集就会出现乱码问题

  • 常见的字符集:
    ASCII
    ISO88591
    GB2312
    GBK
    UTF-8:开发时使用的字符集几乎都是UTF-8

标签

  • 成对出现标签:
  • 自结束标签:或者
  • 注释:
  • tilte标签的内容会作为搜索结果的超链接上的文字显示
//英文网页

//中文网页

文档说明(doctype)

文档说明来告诉浏览器当前网页的版本,在根标签html前写
html5的文档声明:

设置网页字符集

在head标签里书写,避免编码乱码问题:


meta标签用来设置页面的元数据

实体

在HTML中,不能直接使用特殊符号:比如多个连续空格等。
则只有使用HTML中的实体(转义字符)w3school实体

  • 实体语法:&实体的名字
  •   空格
  • > 大于号
  • < 小于号
  • © 版权符号

meta标签

meta主要用于设置网页的一些元数据,与数据不是给用户看

  • charset:指定网页的字符集
  • name 指定数据的名称
  • content 指定数据的内容
  • keywords 表示网站的关键字
  • description 用于指定网站的描述,网站的描述会显示在搜索引擎的搜索结果中


//页面重定向到另一个网站


语义标签

HTML专门负责网页结构,不管标签的语义,而不是它的样式

  • 标题标签:h1~h6 一共六级标题


    一般情况下,一个页面中只会有一个h1
    在页面中独占一行的元素称为块元素(block element)
  • 段落:

  • hgroup:标签用来标题分组,可以将一组相关的标题放入hgroup

第一个标题

第二个标题

  • em:用于表示语音语调的一个加重—>斜体
    在页面中,不会独占一行的元素称为行内元素(inline element)
  • strong:加粗效果,强调
  • blockquote:表示一个长引用,块元素,会独占一行
  • q:行内元素,表示一个短引用,不独占一行
  • br:换行元素

    (其他看详细手册)
  1. 块元素:在网页中一般通过块元素来对页面进行布局
  2. 行内元素:只用来包裹元素
  3. 一般情况是块元素中放行内元素,而不在行内元素中放块元素
  4. p元素中不能放任何的块元素
  5. 浏览器解析网页时,会自动对网页中不符合规范的内容进行修正

布局标签(结构化语义标签)

header 表示网页的头部
main 表示网页的主题部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主题相关的其他内容(侧标栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就表示一个区块,目前来说div是主要的布局元素
span 行内元素,没有语义,一般用于在网页中选中文字

列表

列表之间可以互相嵌套

  1. 无序列表:使用ul标签来创建无序列表
    使用li来表示列表项
  2. 有序列表:使用ol标签来创建有序列表
    使用li来表示列表项
  3. 定义列表:使用dl标签来创建一个定义列表
    使用dt来表示定义的内容
    使用dd来对内容进行解释说明

超链接

a标签来定义超链接,行内元素
在a标签中可以嵌套任何除它自身外的元素

  • 属性:href 指定跳转的目标路径
 
  • 属性:target:用来指定超链接打开的位置
    _self 默认值,在当前页面中打开超链接
    _blank 在一个新的页面中打开超链接
 
  • 属性:id:每一个标签都可以添加一个id属性,元素的唯一标识,同一个页面中不能出现重复的id属性
回到顶部
  • href设置属性设置为#,实现点击超链接以后,页面不跳转,而是转到当前页面顶部的位置:
回到顶部
  • 跳转到页面的指定位置,只需将href属性设置为 #目标元素的id属性
< a href="#bottom" >去底部
  • 使用 javascript:; 来作为href的属性,此hi点击这个超链接什么也不会发生
没啥用链接

相对路径

当需要跳转一个服务器内部的页面时,一般使用相对路径
相对路径都会使用...开头
./ 表示当前文件所在的目录
../表示当前文件所在目录的上一级目录

图片标签

img标签来引入外部图片,img是一个自结束标签
img这种元素属于替换元素,具有两种元素的特点

  • 属性:src 属性指定的是外部图片的类路径

  • 属性:alt 图片的描述,默认情况不会显示,有些浏览器无法加载时显示
    搜索引擎会根据alt中的内容来识别图片
xxx
  • 属性:width:图片的宽度,height:图片的高度,单位是像素:px
    宽度和高度中如果只改了一个值,则另一个会等比例缩放
    注:一般情况在pc端,不建议修改图片的大小,移动端,大图缩小
xxx

图片格式

  1. jpeg(jpg): 支持颜色比较丰富,不支持透明效果,不支持动图
    一般用来显示照片
  2. gif: 支持颜色少,支持简单透明,支持动图
  3. png: 支持颜色丰富,支持复杂透明,不支持动图
    为网页而生
  4. webp: 谷歌推出的专门来表示网页中的图片的一种格式
    它具备其他格式图片的所有优点,而且文件特别小
    缺点:兼容性低
  5. base64: 将图片使用base64进行编码,将图片转换为字符,通过字符的形式来引入图片,一般都是一些需要和网页一起加载的图片才会用base64

内联框架

iframe: 用于向当前页面中引入一个其他页面
src 指定引入的网页的路径
frameborder:内联框架边框,0表示无,1表示有